(bug 2001) Implement sortable tables. sorttable.js is loaded conditionally based...

diff --git a/RELEASE-NOTES b/RELEASE-NOTES
index 893baf2..eea8240 100644 (file)
--- a/RELEASE-NOTES
+++ b/RELEASE-NOTES
@@ -201,6 +201,8 @@ it from source control: http://www.mediawiki.org/wiki/Download_from_SVN
 * (bug 7688) When viewing diff, section anchors in autosummary jump to section
   on current page instead of loading the latest version.
 * (bug 7970) Use current connection explicitly on Database::getServerVersion
+* (bug 2001) Tables with class="sortable" can now be dynamically sorted via
+  JavaScript.
 
 
 == Languages updated ==

diff --git a/skins/common/sorttable.js b/skins/common/sorttable.js
new file mode 100644 (file)
index 0000000..1752f08
--- /dev/null
+++ b/skins/common/sorttable.js
@@ -0,0 +1,194 @@
+/*
+ * From: http://www.kryogenix.org/code/browser/sorttable/
+ * Licence: X11
+ */
+
+addEvent(window, "load", sortables_init);
+
+var SORT_COLUMN_INDEX;
+
+function sortables_init() {
+       var idnum = 0;
+    // Find all tables with class sortable and make them sortable
+    if (!document.getElementsByTagName) return;
+    tbls = document.getElementsByTagName("table");
+    for (ti=0;ti<tbls.length;ti++) {
+        thisTbl = tbls[ti];
+        if ((' '+thisTbl.className+' ').indexOf("sortable") != -1) {
+                       if (!thisTbl.id) {
+                               thisTbl.setAttribute('id','sortable_table_id_'+idnum);
+                               ++idnum;
+                       }
+            //initTable(thisTbl.id);
+            ts_makeSortable(thisTbl);
+        }
+    }
+}
+
+function ts_makeSortable(table) {
+    if (table.rows && table.rows.length > 0) {
+        var firstRow = table.rows[0];
+    }
+    if (!firstRow) return;
+    
+    // We have a first row: assume it's the header, and make its contents clickable links
+    for (var i=0;i<firstRow.cells.length;i++) {
+        var cell = firstRow.cells[i];
+        var txt = ts_getInnerText(cell);
+        cell.innerHTML = txt+'<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;"><span class="sortarrow">&#x2195;</span></a>';
+    }
+}
+
+function ts_getInnerText(el) {
+       if (typeof el == "string") return el;
+       if (typeof el == "undefined") { return el };
+       if (el.innerText) return el.innerText;  //Not needed but it is faster
+       var str = "";
+       
+       var cs = el.childNodes;
+       var l = cs.length;
+       for (var i = 0; i < l; i++) {
+               switch (cs[i].nodeType) {
+                       case 1: //ELEMENT_NODE
+                               str += ts_getInnerText(cs[i]);
+                               break;
+                       case 3: //TEXT_NODE
+                               str += cs[i].nodeValue;
+                               break;
+               }
+       }
+       return str;
+}
+
+function ts_resortTable(lnk) {
+    // get the span
+    var span;
+    for (var ci=0;ci<lnk.childNodes.length;ci++) {
+        if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
+    }
+    var spantext = ts_getInnerText(span);
+    var td = lnk.parentNode;
+    var column = td.cellIndex;
+    var table = getParent(td,'TABLE');
+    
+    // Work out a type for the column
+    if (table.rows.length <= 1) return;
+    var itm = ts_getInnerText(table.rows[1].cells[column]);
+    sortfn = ts_sort_caseinsensitive;
+    // Note: The trailing \n$ is needed because that's how MediaWiki spits out its table syntax.
+    if (itm.match(/^\s*\d{2}[\/-]\d{2}[\/-]\d{4}\s*$/)) sortfn = ts_sort_date;
+    if (itm.match(/^\s*\d{2}[\/-]\d{2}[\/-]\d{2}\s*$/)) sortfn = ts_sort_date;
+    if (itm.match(/^\s*[?$]/)) sortfn = ts_sort_currency;
+    if (itm.match(/^\s*[\d\.]+\s*$/)) sortfn = ts_sort_numeric;
+    SORT_COLUMN_INDEX = column;
+    var firstRow = new Array();
+    var newRows = new Array();
+    for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
+    for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
+
+    newRows.sort(sortfn);
+
+    if (span.getAttribute("sortdir") == 'down') {
+        ARROW = '&uarr;';
+        newRows.reverse();
+        span.setAttribute('sortdir','up');
+    } else {
+        ARROW = '&darr;';
+        span.setAttribute('sortdir','down');
+    }
+    
+    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
+    // don't do sortbottom rows
+    for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
+    // do sortbottom rows only
+    for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
+    
+    // Delete any other arrows there may be showing
+    var allspans = document.getElementsByTagName("span");
+    for (var ci=0;ci<allspans.length;ci++) {
+        if (allspans[ci].className == 'sortarrow') {
+            if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
+                allspans[ci].innerHTML = '&#x2195;';
+            }
+        }
+    }
+        
+    span.innerHTML = ARROW;
+}
+
+function getParent(el, pTagName) {
+       if (el == null) return null;
+       else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())        // Gecko bug, supposed to be uppercase
+               return el;
+       else
+               return getParent(el.parentNode, pTagName);
+}
+function ts_sort_date(a,b) {
+    // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
+    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
+    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
+    if (aa.length == 10) {
+        dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
+    } else {
+        yr = aa.substr(6,2);
+        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
+        dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
+    }
+    if (bb.length == 10) {
+        dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
+    } else {
+        yr = bb.substr(6,2);
+        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
+        dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
+    }
+    if (dt1==dt2) return 0;
+    if (dt1<dt2) return -1;
+    return 1;
+}
+
+function ts_sort_currency(a,b) { 
+    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
+    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
+    return parseFloat(aa) - parseFloat(bb);
+}
+
+function ts_sort_numeric(a,b) { 
+    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
+    if (isNaN(aa)) aa = 0;
+    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
+    if (isNaN(bb)) bb = 0;
+    return aa-bb;
+}
+
+function ts_sort_caseinsensitive(a,b) {
+    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
+    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
+    if (aa==bb) return 0;
+    if (aa<bb) return -1;
+    return 1;
+}
+
+function ts_sort_default(a,b) {
+    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
+    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
+    if (aa==bb) return 0;
+    if (aa<bb) return -1;
+    return 1;
+}
+
+
+function addEvent(elm, evType, fn, useCapture)
+// addEvent and removeEvent
+// cross-browser event handling for IE5+,  NS6 and Mozilla
+// By Scott Andrew
+{
+  if (elm.addEventListener){
+    elm.addEventListener(evType, fn, useCapture);
+    return true;
+  } else if (elm.attachEvent){
+    var r = elm.attachEvent("on"+evType, fn);
+    return r;
+  } else {
+    alert("Handler could not be removed");
+  }
+}

diff --git a/skins/common/wikibits.js b/skins/common/wikibits.js
index d1c5282..d20ca1c 100644 (file)
--- a/skins/common/wikibits.js
+++ b/skins/common/wikibits.js
@@ -801,6 +801,49 @@ function allmessagesshow() {
        allmessages_modified = false;
 }
 
+/*
+       Written by Jonathan Snook, http://www.snook.ca/jonathan
+       Add-ons by Robert Nyman, http://www.robertnyman.com
+       Author says "The credit comment is all it takes, no license. Go crazy with it!:-)"
+       From http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/
+*/
+function getElementsByClassName(oElm, strTagName, oClassNames){
+       var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
+       var arrReturnElements = new Array();
+       var arrRegExpClassNames = new Array();
+       if(typeof oClassNames == "object"){
+               for(var i=0; i<oClassNames.length; i++){
+                       arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
+               }
+       }
+       else{
+               arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
+       }
+       var oElement;
+       var bMatchesAll;
+       for(var j=0; j<arrElements.length; j++){
+               oElement = arrElements[j];
+               bMatchesAll = true;
+               for(var k=0; k<arrRegExpClassNames.length; k++){
+                       if(!arrRegExpClassNames[k].test(oElement.className)){
+                               bMatchesAll = false;
+                               break;
+                       }
+               }
+               if(bMatchesAll){
+                       arrReturnElements.push(oElement);
+               }
+       }
+       return (arrReturnElements)
+}
+
+function sortableTables() {
+       if (getElementsByClassName(document, "table", "sortable").length != 0) {
+               document.write('<script type="text/javascript" src="'+stylepath+'/common/sorttable.js"></script>');
+       }
+}
+
+
 function runOnloadHook() {
        // don't run anything below this for non-dom browsers
        if (doneOnloadHook || !(document.getElementById && document.getElementsByTagName)) {
@@ -813,6 +856,7 @@ function runOnloadHook() {
        akeytt();
        scrollEditBox();
        setupCheckboxShiftClick();
+       sortableTables();
 
        // Run any added-on functions
        for (var i = 0; i < onloadFuncts.length; i++) {