Author: scalialaw

Course Schedule Conversion for MODX

This tutorial walks through the steps to convert course schedule from Excel file into MODX.

  1. Open up the original Excel file (provided by Deborah), merge multiple faculty into one row, then delete all the empty rows.
  2. Open up the Course Schedule Sample Excel file
  3. Copy and paste each column such as Course Title, Credit, and Course Number into the sample Excel file. Do it for both Day and Evening courses.
  4. Once everything is in place, copy all (except for row 1) from the Excel file to an HTML editor:

    <div class="table-wrap">
    <table id="course-schedule" class="sortable" border="1" cellspacing="0">
    <tbody>
    <tr>
    <th>Sched.</th>
    <th>Course Name</th>
    <th>Num. (Sec.) CRN</th>
    <th>Instructor(s)</th>
    <th class="unsortable">Days, Time</th>
    <th>Final Exam</th>
    <th class="unsortable">Syllabus</th>
    </tr>
    <!--SCHEDULE STARTS HERE-->
    <!--Paste the table from Excel into here-->
    <!--SCHEDULE ENDS HERE-->
    </tbody>
    </table>
    </div><!--end table-wrap-->

  5. Save as an HTML file and view it in the browser. Clean up all the extra spaces using Search & Replace. For examples: ( 3 cr) to (3cr) and ( 001 ) to (001)
  6. Next, perform Search & Replace for notes items: //, (W), (E), +, and (N.1) to (N.9)


    <a href="[[~[[*id]]]]#permission" title="With witten permission of instructor only.">//</a>

    <a href="[[~[[*id]]]]#writing" title="This course has been designated as a writing course.">(W)</a>

    <a href="[[~[[*id]]]]#experimental" title="This course has been designated as an experiential course.">(E)</a>

    <a href="[[~[[*id]]]]#prerequisites" title="This course has prerequisites.">+</a>

    <a href="[[~[[*id]]]]#n1" title="See Note 1">(N.1)</a>

    Note that (N.1) to (N.9) are different for Day than Evening. For Evening change the anchor ID from #n1 to #n1-eve.

  7. Copy and paste notes from the original Excel file to the bottom of the HTML page. Reformat the notes to include all the anchor links.
  8. Once everything looks good, paste into MODX

    Change text case

    This step is not required, but here’s are tips for change the case of text in Excel.

Force Update of PDFs

When replacing an existing PDF, browsers don’t serve the latest version. They usually serve the cached version. To change that, we use Apache directives as below:

# Instruct browsers to always check for the latest version of your files using Apache directives
<IfModule mod_headers.c>
<FilesMatch "(?i)^.*\.(css|htm|html|gif|jpg|jpeg|js|png|pdf)$">
Header set Cache-Control "max-age=0,must-revalidate"
</FilesMatch>
</IfModule>

The instruction above includes more than just PDF.

Another solution is using ?ver=x.x in the URL. For example:

https://www.law.gmu.edu/assets/css/2015/style.css?ver=2.0

x.x could be any number.

Source: “How to force an update of cached files, images, favicon”

Remove Periods from Degrees

For example, replace J.D. or L.L.M to JD or LLM.

Here’s the JavaScript method:

<script>
function removePeriods() {
var str = document.getElementById("c_degrees").innerHTML;
var res = str.replace(/\./g, "");
document.getElementById("c_degrees").innerHTML = res;
}
window.onload = removePeriods;
</script>

To do it in MODX, create a chunk called FixDegrees:

A.B.:AB,A.M.:AM,B.A.:BA,B.B.A.:BBA,B.C.:BC,B.Com.:BCom,B.E.E.:BEE,B.I.E.:BIE,B.F.A.,BFA:B.L.:BL,B.M.:BM,B.M.E.:BME,B.S.:BS,B.S.E.:BSE,B.S.E.E.:BSEE,D.Jur.:DJur,D.O.:DO,J.D.:JD,J.S.D.:JSD,J.S.P.:JSP,Ed.D.:EdD,Ed.S.:EdS,LL.B.:LLB,LL.D.:LLD,LL.L.:LLL,LL.M.:LLM,M.A.:MA,M.A.S.:MAS,M.B.A.:MBA,M.Ed:MEd,M.Fc.:MFc,M.L.I.S.:MLIS,M.L.S.:MLS,M.D.:MD,M.Ed.:MEd,M.S.:MS,M.Sc.:MSc,M.S.E.E.:MSEE,M.S.L.S.:MSLS,M.T.:MT,P.G.C.E.:PGCE,Ph.D.:PhD,Cert. of Legal Educ.:Cert of Legal Educ,M.P.P.:MPP,S.J.D.:SLD

Than create a snippet called ReplaceDegrees:

<?php
$find = array();
$replace = array();

$line = $modx->getChunk('FixDegrees');
$pairs = array_map('trim', explode(',', $line));
foreach($pairs as $pair) {
if (strpos($pair, ':') === false) {
$pair = $pair . ':';
}
$couple = array_map('trim', explode(':', $pair));
$find[] = $couple[0];
$replace[] = $couple[1];
}
return str_replace($find, $replace , $input);

Call the snippet in the template:

[[*bio:ReplaceDegrees]]

Add Breaking News on The Mason Law’s Homepage

To post one announcement on the Mason Law homepage, use this example:

ANNOUNCEMENTS: <a href="">Information on Spring 2015 Laptop Exams</a>

To post multiple news, use this example:

<div class="announcements">Announcements:</div>

<ul>
<li><a href="[~15~]">Spring 2013 Class Schedule and Registration Information</a></li>
<li><a href="[~8476~]">Information on Fall 2012 Laptop Exam Software</a></li>
</ul>

Homepage Featured Events Display Using DOM

The featured events on the Mason Law homepage is pulled from the master calendar’s RSS. To get the dates and times separated from the titles, accessing the DOM is needed. The following codes, which requires jQuery, make the magic happened:

$('.rssItemLink').each(
function(){
$this = $(this);
$this.
html('<em>' +
$this.
html().
replace(/((\d{1,2}\/){2}\d{2,4}\s*[0-9]{1,2}:[0-9]{1,2}\s*[apAP][mM]\s*to\s*[0-9]{1,2}:[0-9]{1,2}\s*[apAP][mM])/,
'</em><b>$1</b>'
)
);
}
);

Sticky Nav on Scroll

Here’s a little JavaScript function to make your site’s header or navigation stick to the top of the window when users scroll the page:

HTML:

<div id="navigation">
  <!-- your navigation code -->
</div>

CSS:

#navigation{
  position:absolute;
  top:120px;
  left:0;
}
#navigation.fixed{
  position:fixed;
  top:16px;
}

JavaScript:

// Handles the page being scrolled by ensuring the navigation is always in view.
function handleScroll(){
  // check that this is a relatively modern browser
  if (window.XMLHttpRequest){
    // determine the distance scrolled down the page
    var offset = window.pageYOffset
               ? window.pageYOffset
               : document.documentElement.scrollTop;
    // set the appropriate class on the navigation
    document.getElementById('navigation').className =
        (offset > 104 ? 'fixed' : '');
  }
}
// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

Source: “Detachable navigation using JavaScript“