Use jquery tablesorter to change the ordering of document search tables

- Legacy-Id: 10614

ietf/bower.json

@@ -10,6 +10,7 @@
     "html5shiv": "3.7.3",
     "jquery": "1.11.3",
     "jquery.cookie": "1.4.1",
+    "jquery.tablesorter": "2.25.0",
     "respond": "1.4.2",
     "select2": "3.5.4",
     "select2-bootstrap-css": "1.4.6",
@@ -23,6 +24,12 @@
         "./fonts/*"
       ]
     },
+    "tablesorter": {
+        "main": [
+            "dist/js/jquery.tablesorter.combined.js",
+            "dist/css/theme.bootstrap.min.css"
+        ]
+    },
     "respond": {
       "main": "dest/respond.min.js"
     },

ietf/externals/static/jquery.tablesorter/css/theme.bootstrap.min.css

@@ -0,0 +1 @@
+.tablesorter-bootstrap{width:100%}.tablesorter-bootstrap tfoot td,.tablesorter-bootstrap tfoot th,.tablesorter-bootstrap thead td,.tablesorter-bootstrap thead th{font:14px/20px Arial,Sans-serif;font-weight:700;padding:4px;margin:0 0 18px;background-color:#eee}.tablesorter-bootstrap .tablesorter-header{cursor:pointer}.tablesorter-bootstrap .tablesorter-header-inner{position:relative;padding:4px 18px 4px 4px}.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon{font-size:11px;position:absolute;right:2px;top:50%;margin-top:-7px;width:14px;height:14px;background-repeat:no-repeat;line-height:14px;display:inline-block}.tablesorter-bootstrap .bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAMAAADOvxanAAAAVFBMVEUAAABCQkJZWVkZGRnJyckgICAZGRkZGRn8/PweHh4dHR0aGhoaGhpUVFQbGxvQ0NDc3NxMTExSUlIbGxvr6+s4ODhKSkogICAtLS00NDQzMzMnJydSEPrQAAAAGHRSTlMA1ssZRLgdAQbDyisqsZo8QdXUq0r9xPepSRwiAAAAX0lEQVQI13XHSQKAIAwEwQAKxn13Ev7/T2Pu9qmarJKPXIicI4PH4hxaKNrhm2S8bJK5h4YzKHrzJNtK6yYT/TdXzpS5zuYg4MSQYF6i4IHExdw1UVRi05HPrrvT53a+qyMFC9t04gcAAAAASUVORK5CYII=)}.tablesorter-bootstrap .icon-white.bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOBAMAAAALT/umAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADXRSTlMA4EXKBtQqvR0+sxmalc142gAAAFdJREFUCNdjYGDoamAAAjZbMxCVfvd6AgMDd+3du9UMDKx3hWSvMjBwXZww8RYDGuC53NB8h4GB8a617UUGBs7Yu3cjGRhYVO9eVQFKOskKOQApFmUgBwBZ+xXRTttNdAAAAABJRU5ErkJggg==)}.tablesorter-bootstrap>tbody>tr.odd>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~tr.tablesorter-hasChildRow.odd~.tablesorter-childRow.odd>td{background-color:#f9f9f9}.tablesorter-bootstrap>tbody>tr.even:hover>td,.tablesorter-bootstrap>tbody>tr.hover>td,.tablesorter-bootstrap>tbody>tr.odd:hover>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~.tablesorter-childRow.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~.tablesorter-childRow.odd>td{background-color:#f5f5f5}.caption,.tablesorter-bootstrap>tbody>tr.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~tr.tablesorter-hasChildRow.even~.tablesorter-childRow.even>td{background-color:#fff}.tablesorter-bootstrap .tablesorter-processing{background-image:url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);background-position:center center!important;background-repeat:no-repeat!important}.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter{width:98%;margin:0;padding:4px 6px;color:#333;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:height .1s ease;-moz-transition:height .1s ease;-o-transition:height .1s ease;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled{background-color:#eee;color:#555;cursor:not-allowed;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;box-sizing:border-box;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row{background-color:#efefef}.tablesorter-bootstrap .tablesorter-filter-row td{background-color:#efefef;line-height:normal;text-align:center;padding:4px 6px;vertical-align:middle;-webkit-transition:line-height .1s ease;-moz-transition:line-height .1s ease;-o-transition:line-height .1s ease;transition:line-height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row.hideme td{padding:2px;margin:0;line-height:0}.tablesorter-bootstrap .tablesorter-filter-row.hideme *{height:1px;min-height:0;border:0;padding:0;margin:0;opacity:0;filter:alpha(opacity=0)}.tablesorter .filtered{display:none}.tablesorter-bootstrap .tablesorter-pager select{padding:4px 6px}.tablesorter-bootstrap .tablesorter-pager .pagedisplay{border:0}.tablesorter-bootstrap tfoot i{font-size:11px}.tablesorter .tablesorter-errorRow td{text-align:center;cursor:pointer;background-color:#e6bf99}

ietf/static/ietf/css/ietf.css

@@ -443,3 +443,19 @@ form.navbar-form input.form-control.input-sm { width: 141px; }
 #timeline .bar:nth-child(even) rect { fill: #54478e; }
 #timeline .bar:nth-child(even) rect:hover,
 #timeline .bar:nth-child(even) rect:focus { fill: #40366c; }
+
+/* revert some of the tablesorter theme back to bootstrap defaults */
+.tablesorter-bootstrap .bootstrap-icon-unsorted {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAMAAADOvxanAAAAVFBMVEUAAABCQkJZWVkZGRnJyckgICAZGRkZGRn8/PweHh4dHR0aGhoaGhpUVFQbGxvQ0NDc3NxMTExSUlIbGxvr6+s4ODhKSkogICAtLS00NDQzMzMnJydSEPrQAAAAGHRSTlMA1ssZRLgdAQbDyisqsZo8QdXUq0r9xPepSRwiAAAAX0lEQVQI13XHSQKAIAwEwQAKxn13Ev7/T2Pu9qmarJKPXIicI4PH4hxaKNrhm2S8bJK5h4YzKHrzJNtK6yYT/TdXzpS5zuYg4MSQYF6i4IHExdw1UVRi05HPrrvT53a+qyMFC9t04gcAAAAASUVORK5CYII=)
+}
+
+.tablesorter-bootstrap { width: inherit; }
+
+
+.tablesorter-bootstrap thead tr th {
+    background-color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    padding: inherit;
+    outline: inherit;
+}

ietf/static/ietf/js/ietf.js

@@ -242,3 +242,23 @@ $(document).ready(function () {
         }
     });
 });
+
+$(function() {
+    // customize the styling a bit; more is done in ietf.css
+    if ($(".tablesorter").length) {
+        $.tablesorter.themes.bootstrap = {
+            table: "",
+            iconSortNone: "bootstrap-icon-unsorted",
+            iconSortAsc: "glyphicon glyphicon-chevron-up",
+            iconSortDesc: "glyphicon glyphicon-chevron-down",
+            hover: "active"
+        };
+        $(".tablesorter").tablesorter({
+            emptyTo: "zero",
+            theme: "bootstrap",
+            table: "",
+            headerTemplate: "{content} {icon}",
+            widgets: ["uitheme", "sort2Hash"]
+        });
+    }
+});

ietf/templates/doc/drafts_for_ad.html

@@ -1,6 +1,10 @@
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
-{% load origin %}
+{% load origin staticfiles %}
+
+{% block pagehead %}
+<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
+{% endblock %}
 
 {% block title %}Documents for {{ ad_name }}{% endblock %}
 
@@ -9,3 +13,7 @@
   <h1>Documents for {{ ad_name }}</h1>
   {% include "doc/search/search_results.html" %}
 {% endblock %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}

ietf/templates/doc/drafts_in_iesg_process.html

@@ -2,12 +2,13 @@
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
 
-{% load ietf_filters %}
+{% load ietf_filters staticfiles %}
 
 {% block pagehead %}
   {% if last_call_only %}
     <link rel="alternate" type="application/atom+xml" href="/feed/last-call/">
   {% endif %}
+  <link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
 {% endblock %}
 
 {% block title %}{{ title }}{% endblock %}
@@ -16,18 +17,21 @@
   {% origin %}
   <h1>{{ title }}</h1>
 
-  <table class="table table-condensed table-striped">
+  <table class="table table-condensed table-striped tablesorter">
     <thead>
       <tr>
         <th class="text-nowrap">Area</th>
         <th class="text-nowrap">{% if state.slug == "lc" %}Expires at{% else %}Date{% endif %}</th>
         <th>Document</th>
+        <th>Intended level</th>
+        <th>AD</th>
       </tr>
     </thead>
-    <tbody>
       {% for state, docs in grouped_docs %}
-        <tr class="info"><th colspan="3">{{ state.name }}</th></tr>
-
+    <tbody>
+        <tr class="info"><th colspan="5">{{ state.name }}</th></tr>
+    </tbody>
+    <tbody>
         {% for doc in docs %}
           <tr>
             <td class="text-nowrap">{% if doc.area_acronym %}{{ doc.area_acronym }}{% endif %}</td>
@@ -40,17 +44,22 @@
             </td>
 
             <td>
-	      <b>{{ doc.title }}</b> ({{ doc.intended_std_level.name }})
-	      <br><a href="{% url "doc_view" doc.name %}">{{ doc.name }}</a>
-	      <br>AD: <a href="mailto:{{ doc.ad.email_address|urlencode }}">{{ doc.ad.plain_name }}</a>
+	      <a href="{% url "doc_view" doc.name %}">{{ doc.name }}</a>
+          <br><b>{{ doc.title }}</b>
 	      {% if doc.note %}
 	        <br><i>Note: {{ doc.note|linebreaksbr|urlize }}</i>
 	      {% endif %}
             </td>
+          <td>{{ doc.intended_std_level.name }}</td>
+          <td><a href="mailto:{{ doc.ad.email_address|urlencode }}">{{ doc.ad.plain_name }}</a></td>
           </tr>
         {% endfor %}
-      {% endfor %}
     </tbody>
+      {% endfor %}
   </table>
 
 {% endblock %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}

ietf/templates/doc/drafts_in_last_call.html

@@ -1,6 +1,10 @@
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
-{% load origin %}
+{% load origin staticfiles %}
+
+{% block pagehead %}
+<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
+{% endblock %}
 
 {% block title %}Internet-Drafts in IETF last call{% endblock %}
 
@@ -11,3 +15,7 @@
   {% include "doc/search/search_results.html" %}
 
 {% endblock %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}

ietf/templates/doc/search/search.html

@@ -1,9 +1,13 @@
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
-{% load origin %}
+{% load origin staticfiles %}
 
 {% block title %}Document Search{% endblock %}
 
+{% block pagehead %}
+<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
+{% endblock %}
+
 {% block content %}
   {% origin %}
   <h1>Document Search</h1>
@@ -14,3 +18,7 @@
     {% include "doc/search/search_results.html" %}
   {% endif %}
 {% endblock content %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}

ietf/templates/doc/search/search_results.html

@@ -13,14 +13,14 @@
     </div>
   {% endif %}
 
-  <table class="table table-condensed table-striped">
+  <table class="table table-condensed table-striped tablesorter">
     <thead>
       <tr>
-        <th></th>
+        <th class="sorter-false"></th>
 
         {% for h in meta.headers %}
           {% if h.title != "Title" %}
-            <th class="{{ h.key }}">
+            <th data-header="{{ h.key }}">
 	      {% if "sort_url" in h %}
 	        <a href="{{ h.sort_url }}">{{ h.title }}
 	          {% if h.sorted %}<span class="fa fa-caret-down"></span>{% endif %}
@@ -36,15 +36,21 @@
 
     {% regroup docs by search_heading as grouped_docs %}
 
-    <tbody>
       {% for doc_group in grouped_docs %}
+    <tbody>
         <tr class="info">
           <th></th>
-          <th colspan="{{ meta.headers|length|add:"-1" }}">
+          {% if "ad" in meta.headers %}
+              <th colspan="{{ meta.headers|length|add:"-1" }}">
+          {% else %}
+              <th colspan="{{ meta.headers|length }}">
+          {% endif %}
 	    {{ doc_group.grouper|plural:doc_group.list }}
           </th>
         </tr>
+    </tbody>
 
+    <tbody>
         {% for doc in doc_group.list %}
           {% include "doc/search/search_result_row.html" %}
         {% endfor %}

ietf/templates/group/group_base.html

@@ -2,7 +2,11 @@
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
 
-{% load ietf_filters %}
+{% load ietf_filters staticfiles %}
+
+{% block pagehead %}
+<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
+{% endblock %}
 
 {% block title %}{{ group.name }} ({{ group.acronym }}) - {% block group_subtitle %}{% endblock %}{% endblock %}
 
@@ -38,3 +42,7 @@
   {% endblock group_content %}
 
 {% endblock content %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}

ietf/templates/group/stream_documents.html

@@ -2,7 +2,11 @@
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
 
-{% load ietf_filters %}
+{% load ietf_filters staticfiles %}
+
+{% block pagehead %}
+<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
+{% endblock %}
 
 {% block title %}{{ stream }} stream documents{% endblock %}
 
@@ -18,3 +22,7 @@
 
   {% include "doc/search/search_results.html" %}
 {% endblock %}
+
+{% block js %}
+<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
+{% endblock %}