Bug 1204238: Migrate tabular report sorting from YUI to jQuery

r=gerv

2 files changed, 27 insertions, 154 deletions

diff --git a/template/en/default/reports/report-table.html.tmpl b/template/en/default/reports/report-table.html.tmpl
index 57e998b1d..03f3147df 100644
--- a/template/en/default/reports/report-table.html.tmpl
+++ b/template/en/default/reports/report-table.html.tmpl
@@ -15,6 +15,7 @@
   # row_names: array. List of values for the field being plotted as rows.
   # data: <depends on format>. Data to plot. Only data.$tbl is accessed. 
   # tbl: Name of a hash in data which is the table to be plotted.
+  # table_id: the incremented number of the table being displayed.
   #%]
 
 [% col_field_disp = field_descs.$col_field || col_field %]
@@ -29,177 +30,44 @@
   [% urlbase = BLOCK %][% urlbase %]&amp;[% tbl_field FILTER uri %]=[% tbl FILTER uri %][% END %]
 [% END %]
 
-<script type="text/javascript">
-function bz_encode (str, decode) {
-  // First decode HTML entities, if requested.
-  if (decode)
-    str = str.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"')
-             .replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/\s+$/,"");
-
-  // encodeURIComponent() doesn't escape single quotes.
-  return encodeURIComponent(str).replace(/'/g, escape);
-};
-
-YAHOO.util.Event.addListener(window, "load", function() {
-  this.Linkify = function(elLiner, oRecord, oColumn, oData) {
-    if (oData == 0)
-      elLiner.innerHTML = ".";
-    else if (oRecord.getData("row_title") == "Total")
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% col_field FILTER uri FILTER js %]='
-                          + bz_encode(oColumn.field)
-                          + '[% "&amp;" _ row_vals IF row_vals %]">' + oData + '</a>';
-    else
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% row_field FILTER uri FILTER js %]='
-                          + bz_encode(oRecord.getData("row_title"), 1)
-                          + '&amp;[% col_field FILTER uri FILTER js %]='
-                          + bz_encode(oColumn.field) + '">' + oData + '</a>';
-  };
-
-  this.LinkifyTotal = function(elLiner, oRecord, oColumn, oData) {
-    if (oData == 0)
-      elLiner.innerHTML = ".";
-    else if (oRecord.getData("row_title") == "Total")
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %][% "&amp;" _ row_vals IF row_vals %]
-                          [%~ "&amp;" _ col_vals IF col_vals %]">'
-                          + oData + '</a>';
-    else
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% row_field FILTER uri FILTER js %]='
-                          + bz_encode(oRecord.getData("row_title"), 1)
-                          + '[% "&amp;" _ col_vals IF col_vals %]">' + oData + '</a>';
-
-    YAHOO.util.Dom.addClass(elLiner.parentNode, "ttotal");
-  };
-
-  var totalRowFormatter = function( elTr, oRecord ) {
-      if ( oRecord.getData('row_title') == "Total" ) {
-          YAHOO.util.Dom.addClass( elTr, 'ttotal' );
-      }
-      return true;
-  };
-
-  var totalNumberSorter = function( a, b, desc, field ){
-    var a_value = a.getData(field);
-    var b_value = b.getData(field);
-    var a_total_test = a.getData("row_title");
-    var b_total_test = b.getData("row_title");
-    var comp_result = YAHOO.util.Sort.compare(a_value, b_value, desc);
-    if( a_total_test == "Total" ){
-      comp_result = 1;
-    }else if( b_total_test == "Total" ){
-      comp_result = -1;
-    }
-    return comp_result;
-  };
-
-
-  var myColumnDefs = [
-        {key:"row_title", label:"", sortable:true, sortOptions: { sortFunction:totalNumberSorter }},
-        [% FOREACH col = col_names %]
-          {key:"[% col FILTER js %]", label:"[% display_value(col_field, col) FILTER html FILTER js %]", sortable:true,
-           formatter:this.Linkify, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC, sortFunction:totalNumberSorter }},
-        [% END %]
-        {key:"total", label:"Total", sortable:true, formatter:this.LinkifyTotal,
-         sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC, sortFunction:totalNumberSorter }}
-      ];
-  this.parseString = function(str) {
-    return YAHOO.lang.trim(str);
-  };
-
-  this.parseNumber = function(str) {
-    if (str.match(/^\s*\.\s*$/m))
-      return 0;
-
-    // Do not use <\/a>$. For some reason, IE6 doesn't understand it.
-    // We use [^\d]+$ instead.
-    var res = str.match(/>(\d+)[^\d]+$/m);
-    if (res && res[1])
-      return parseFloat(res[1]);
-  };
-
-  this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("tabular_report_[% tbl FILTER html FILTER js %]"));
-  this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
-  this.myDataSource.responseSchema = {
-    fields: [
-      {key:"row_title", parser:this.parseString},
-      [% FOREACH col = col_names %]
-        {key:"[% col FILTER js %]", parser:this.parseNumber},
-      [% END %]
-      {key:"total", parser:this.parseNumber}
-    ]
-  };
-  this.myDataTable = new YAHOO.widget.DataTable("tabular_report_container_
-                         [% tbl FILTER js %]", myColumnDefs, this.myDataSource, 
-                         {formatRow: totalRowFormatter});
-});
-</script>
-
 [% IF tbl_field %]
   <h2>[% tbl_disp FILTER email FILTER html %]</h2>
 [% END %]
 
-<table class="tabular_report_container">
-  <tr>
-    <td>
-    </td>
-    <td class="center">
-      <strong>[% col_field_disp FILTER html %]</strong>
-    </td>
-  </tr>
-
-  <tr>
-    <td class="middle">
-      <strong>[% row_field_disp FILTER html %]</strong>
-    </td>
-    <td>
-
-
-[% classes = [ [ "t1", "t2" ] , [ "t3", "t4" ] ] %]
-[% col_idx = 0 %]
-[% row_idx = 0 %]
 [% total_key = '-total-' %]
-<div id="tabular_report_container_[% tbl FILTER html %]">
-<table id="tabular_report_[% tbl FILTER html %]" class="tabular_report">
+[%# Most of these classes are defined in the DataTables plugin itself. %]
+<table id="tabular_report_[% table_id FILTER html %]" class="tabular_report display cell-border compact">
   [% IF col_field %]
     <thead>
     <tr>
-      <th class="[% classes.$row_idx.$col_idx %]">
-      </th>
+      <th>&darr;&nbsp;[% row_field_disp FILTER html %] \ [% col_field_disp FILTER html %]&nbsp;&rarr;</th>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-        
-        [% col_idx = 1 - col_idx %]
-        <th class="[% classes.$row_idx.$col_idx %]">
-          [% PROCESS value_display value = col field = col_field %]
-        </th>
+        <th>[% PROCESS value_display value = col field = col_field %]</th>
       [% END %]
-      <th class="ttotal">
-        Total
-      </th>
+      <th class="ttotal">Total</th>
     </tr>
     </thead>
   [% END %]
   <tbody>
   [% FOREACH row = row_names %]
-    [% row_idx = 1 - row_idx %]
     <tr>
-      <td class="[% classes.$row_idx.$col_idx %] right">
+      <td class="right">
         [% PROCESS value_display value = row field = row_field %]
       </td>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-        
-        [% col_idx = 1 - col_idx %]
-        <td class="[% classes.$row_idx.$col_idx %]">
+        <td>
           [% IF data.$tbl.$col.$row AND data.$tbl.$col.$row > 0 %]
             <a href="[% urlbase %]&amp;
               [% row_field FILTER uri %]=[% row FILTER uri %]&amp;
               [% col_field FILTER uri %]=[% col FILTER uri %]">
               [% data.$tbl.$col.$row %]</a>
           [% ELSE %]
-            .
+            <span class="bz_default_hidden">0</span>
           [% END %]
         </td>
-      [% END %] 
+      [% END %]
       <td class="ttotal right">
         <a href="[% urlbase %]&amp;
           [% row_field FILTER uri %]=[% row FILTER uri %]
@@ -208,14 +76,12 @@ YAHOO.util.Event.addListener(window, "load", function() {
       </td>
     </tr>
   [% END %]
+  </tbody>
+  <tfoot>
     <tr>
-      [% row_idx = 1 - row_idx %]
-      <td class="ttotal">
-        Total
-      </td>
+      <td class="ttotal">Total</td>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-
         <td class="ttotal">
           <a href="[% urlbase %]&amp;
             [% col_field FILTER uri %]=[% col FILTER uri %]
@@ -231,13 +97,19 @@ YAHOO.util.Event.addListener(window, "load", function() {
         </strong>
       </td>
     </tr>
-  </tbody>
+  </tfoot>
 </table>
-</div>
 
-    </td>
-  </tr>
-</table>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $("#tabular_report_[% table_id FILTER html %]").DataTable({
+      order: [],
+      paging: false,
+      scrollY: 600,
+      scrollCollapse: true
+    });
+  });
+</script>
 
 [% IF note_multi_select %]
   <p class="extra_info">
diff --git a/template/en/default/reports/report.html.tmpl b/template/en/default/reports/report.html.tmpl
index a9cd96551..9c13351e1 100644
--- a/template/en/default/reports/report.html.tmpl
+++ b/template/en/default/reports/report.html.tmpl
@@ -57,7 +57,8 @@
 [% PROCESS global/header.html.tmpl 
   header_addl_info = time
   style_urls = ['skins/standard/buglist.css']
-  yui = ['datatable']
+  jquery = ['datatables']
+  jquery_css = ['datatables']
 %]
 
 [% IF debug %]
@@ -75,7 +76,7 @@
     [% END %]
 
     [% IF format == "table" %]
-      [% PROCESS "reports/report-table.html.tmpl" %]
+      [% PROCESS "reports/report-table.html.tmpl" table_id = loop.count %]
     [% ELSE %]
       [% IF tbl %]
         <h2>[% tbl_disp FILTER email FILTER html %]</h2>