Give some visual indication on multi-level sort options

* A Userscript was incorrectly marking these for several years and missed a lot of them in the other views, so we'll mark the ones used for everyone depending on mode based on the current OUJS theme. * Skipping `author` since there's no actual th for that Applies a little to OpenUserJS#306, OpenUserJS#803, OpenUserJS#699, OpenUserJS#654, OpenUserJS#374 and a few others
Martii · May 27, 2016 · 2ed34c2 · 2ed34c2
1 parent 9ba5fbe
commit 2ed34c2
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 16 deletions.
diff --git a/libs/modelQuery.js b/libs/modelQuery.js
@@ -240,6 +240,7 @@ var applyModelListQueryFlaggedFilter = function (aModelListQuery, aOptions, aFla
 exports.applyModelListQueryFlaggedFilter = applyModelListQueryFlaggedFilter;
 
 var applyModelListQueryDefaults = function (aModelListQuery, aOptions, aReq, aDefaultOptions) {
+  var orders = null;
 
   // Search
   if (aReq.query.q) {
@@ -263,6 +264,49 @@ var applyModelListQueryDefaults = function (aModelListQuery, aOptions, aReq, aDe
     aModelListQuery.sort(aDefaultOptions.defaultSort);
   });
 
+  // View options to indicate what orderBy(s) are used for sorting
+  orders = aReq.query.orderBy || aDefaultOptions.defaultSort;
+  orders.split(' ').map(function (aEl) {
+    switch (aEl.match(/[+-]?(.*)$/)[1]) {
+      case 'name':
+        aOptions.orderedByName = true;
+        break;
+      case 'installs':
+        aOptions.orderedByInstalls = true;
+        break;
+      case 'rating':
+        aOptions.orderedByRating = true;
+        break;
+      case 'updated':
+        aOptions.orderedByUpdated = true;
+        break;
+      case 'role':
+        aOptions.orderedByRole = true;
+        break;
+      case 'removed':
+        aOptions.orderedByRemoved = true;
+        break;
+      case 'model':
+        aOptions.orderedByModel = true;
+        break;
+      case 'removerName':
+        aOptions.orderedByRemoverName = true;
+        break;
+      case 'topic':
+        aOptions.orderedByTopic = true;
+        break;
+      case 'comments':
+        aOptions.orderedByComments = true;
+        break;
+      case 'created':
+        aOptions.orderedByCreated = true;
+        break;
+      case 'size':
+        aOptions.orderedBySize = true;
+        // fallthrough
+    }
+  });
+
   // Pagination
   var pagination = getDefaultPagination(aReq);
   pagination.applyToQuery(aModelListQuery);

diff --git a/views/includes/discussionList.html b/views/includes/discussionList.html
@@ -2,14 +2,14 @@
   <table class="table table-hover table-condensed table-striped">
     <thead>
       <tr>
-        <th class="text-center"><a href="?orderBy=topic&orderDir={{orderDir.topic}}">Topic</a></th>
+        <th class="text-center{{#orderedByTopic}} active{{/orderedByTopic}}"><a href="?orderBy=topic&orderDir={{orderDir.topic}}">Topic</a></th>
         {{#multipleCategories}}
         <th class="text-center td-fit">Category</th>
         {{/multipleCategories}}
         <th class="text-center td-fit">Users</th>
-        <th class="text-center td-fit"><a href="?orderBy=comments&orderDir={{orderDir.comments}}">Replies</a></th>
-        <th class="text-center td-fit"><a href="?orderBy=created&orderDir={{orderDir.created}}">Created</a></th>
-        <th class="text-center td-fit"><a href="?orderBy=updated&orderDir={{orderDir.updated}}">Updated</a></th>
+        <th class="text-center td-fit{{#orderedByComments}} active{{/orderedByComments}}"><a href="?orderBy=comments&orderDir={{orderDir.comments}}">Replies</a></th>
+        <th class="text-center td-fit{{#orderedByCreated}} active{{/orderedByCreated}}"><a href="?orderBy=created&orderDir={{orderDir.created}}">Created</a></th>
+        <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}"><a href="?orderBy=updated&orderDir={{orderDir.updated}}">Updated</a></th>
       </tr>
     </thead>
     <tbody>

diff --git a/views/includes/groupList.html b/views/includes/groupList.html
@@ -1,9 +1,9 @@
 <table class="table table-hover table-condensed">
   <thead>
     <tr>
-      <th><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Name</a></th>
-      <th class="text-center"><a href="?orderBy=size&orderDir={{orderDir.size}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Size</a></th>
-      <th class="text-center"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Rating</a></th>
+      <th class="{{#orderedByName}}active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Name</a></th>
+      <th class="text-center{{#orderedBySize}} active{{/orderedBySize}}"><a href="?orderBy=size&orderDir={{orderDir.size}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Size</a></th>
+      <th class="text-center{{#orderedByRating}} active{{/orderedByRating}}"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Rating</a></th>
     </tr>
   </thead>
   <tbody>

diff --git a/views/includes/removedItemList.html b/views/includes/removedItemList.html
@@ -1,11 +1,11 @@
 <table class="table table-hover table-condensed">
   <thead>
     <tr>
-      <th class="text-center td-fit"><a href="?orderBy=model&orderDir={{orderDir.model}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Model</a></th>
+      <th class="text-center td-fit{{#orderedByModel}} active{{/orderedByModel}}"><a href="?orderBy=model&orderDir={{orderDir.model}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Model</a></th>
       <th>Item</th>
       <th>Reason</th>
-      <th class="text-center td-fit"><a href="?orderBy=removerName&orderDir={{orderDir.removerName}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Removed By</a></th>
-      <th class="text-center td-fit"><a href="?orderBy=removed&orderDir={{orderDir.removed}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Date</a></th>
+      <th class="text-center td-fit{{#orderedByRemoverName}} active{{/orderedByRemoverName}}"><a href="?orderBy=removerName&orderDir={{orderDir.removerName}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Removed By</a></th>
+      <th class="text-center td-fit{{#orderedByRemoved}} active{{/orderedByRemoved}}"><a href="?orderBy=removed&orderDir={{orderDir.removed}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Date</a></th>
     </tr>
   </thead>
   <tbody>

diff --git a/views/includes/scriptList.html b/views/includes/scriptList.html
@@ -1,10 +1,10 @@
 <table class="table table-hover">
   <thead>
     <tr>
-      <th class="text-center"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
-      {{^librariesOnly}}<th class="text-center td-fit"><a href="?orderBy=installs&orderDir={{orderDir.install}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Installs</a></th>{{/librariesOnly}}
-      <th class="text-center td-fit"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rating</a></th>
-      <th class="text-center td-fit"><a href="?orderBy=updated&orderDir={{orderDir.updated}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Last Updated</a></th>
+      <th class="text-center{{#orderedByName}} active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
+      {{^librariesOnly}}<th class="text-center td-fit{{#orderedByInstalls}} active{{/orderedByInstalls}}"><a href="?orderBy=installs&orderDir={{orderDir.install}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Installs</a></th>{{/librariesOnly}}
+      <th class="text-center td-fit{{#orderedByRating}} active{{/orderedByRating}}"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rating</a></th>
+      <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}"><a href="?orderBy=updated&orderDir={{orderDir.updated}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Last Updated</a></th>
       {{#hasFlagged}}
       <th>Flagged</th>
       {{/hasFlagged}}

diff --git a/views/includes/userList.html b/views/includes/userList.html
@@ -1,8 +1,8 @@
 <table class="table table-hover table-condensed">
   <thead>
     <tr>
-      <th><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
-      <th class="td-fit"><a href="?orderBy=role&orderDir={{orderDir.role}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rank</a></th>
+      <th class="{{#orderedByName}}active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
+      <th class="td-fit{{#orderedByRole}} active{{/orderedByRole}}"><a href="?orderBy=role&orderDir={{orderDir.role}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rank</a></th>
       {{#hasFlagged}}
       <th>Flagged</th>
       {{/hasFlagged}}