sortToggleByTitle.js

/**
 * UI to sort rows of data by clicking on their parent title. 
 * titleDomObject should have children - one of which has the 'descending' or 'ascending' class.
 * @param  {jQuery Object} titleDomObject Contains one or more children with the 'descending' or 'ascending' class, and the text of the html to be sorted.
 * @param  {Function} sortCallback   Callback should re-render the contents of the titles based on the child that was clicked.
 */
function setupSortingHandlers(titleDomObject,sortCallback) {
    var sortAscending = true;

    titleElements = titleDomObject.children();

    titleElements.click(function() {
        if ($(this).hasClass('ascending') || $(this).hasClass('descending')) {              //If title element is currently used to sort...
            $(this).toggleClass('ascending descending');                                    //toggle its sort class from ascending to descending or vise versa.
        } else {
            $(this).addClass('ascending');                                                  //Otherwise set the clicked element to sort ascending...
            $(this).siblings().removeClass('ascending descending');                         //and remove sort classes from the other titles.
        }

        titleElements.each(function(){ updateSortArrow($(this)) });                         //Re-render all arrows. (every click changes state of arrows)
        
        sortAscending = $(this).hasClass('ascending');                                      //Sort and render jobs.
        sortCallBack($(this), sortAscending);                                               //Calls sort callback, indicating the title to sort by and the type of sort...
    });                                                                                     //true for ascending, false for descending.

}

/**
 * Depending on the class of domElement, adds appropriate arrow to any child "sort-arrow" element. 
 * @param  {DOM Object} domElement  Element with child.
 */
function updateSortArrow(domElement) {
    var arrowElement=domElement.find('.sort-arrow');                                        //Grab arrow sub-element.
    if (domElement.hasClass('ascending')) { arrowElement.html('▲'); }                 //Insert up arrow.
    else if (domElement.hasClass('descending')) { arrowElement.html('▼'); }           //Insert down arrow.
    else {  arrowElement.html('►'); }                                                 //Insert right arrow.
}