Tweaked the sort buttons to highlight the current applied sort criteria.

And for those of us finding themselves regularly using the web client, Alt-Left click now sets a tag filter directly to exclude state.
At-Libitum · Dec 22, 2013 · 9c3a152 · 9c3a152
1 parent e1be533
commit 9c3a152
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/book.php b/book.php
@@ -620,8 +620,8 @@ public static function getBooksByQuery($query, $n, $database = NULL, $numberPerP
                     $critArray [$i] = $query [$key];
                 } else {
                     $critArray [$i] = $query ["all"];
-            }
                 }
+            }
             $i++;
         }
         return self::getEntryArray (self::SQL_BOOKS_QUERY, $critArray, $n, $database, $numberPerPage);

diff --git a/styles/style-base.css b/styles/style-base.css
@@ -93,6 +93,10 @@ color: black;
 background-color: white;
 opacity: 0.5;
 }
+.sb.selected {
+    opacity:0.8;
+}
+
 
 .filter-include {
     border-left:thick solid blue;

diff --git a/templates/default/header.html b/templates/default/header.html
@@ -39,10 +39,10 @@ <h1>{{=it.title}}</h1>
                     <option value="asc">{{=it.c.i18n.sortorderAsc}}</option>
                     <option value="desc">{{=it.c.i18n.sortorderDesc}}</option>
                 </select-->
-                <button class="sb" id="sb1" value="st" type="submit" title="">{{=it.c.i18n.bookwordTitle}} <i id="isb1" class="icon-long-arrow-up "></i></button>
-                <button class="sb" id="sb2" value="sa" type="submit" title="">{{=it.c.i18n.authorsTitle}}  <i id="isb2" class="icon-long-arrow-down hidden"></i></button>
-                <button class="sb" id="sb3" value="ss" type="submit" title="">{{=it.c.i18n.seriesTitle}}   <i id="isb3" class="icon-long-arrow-down hidden"></i></button>
-                <button class="sb" id="sb4" value="sp" type="submit" title="">{{=it.c.i18n.pubdateTitle}}  <i id="isb4" class="icon-long-arrow-down hidden"></i></button>
+                <button class="sb selected" id="sb1" value="st" type="submit" title="">{{=it.c.i18n.bookwordTitle}} <i id="isb1" class="icon-long-arrow-up "></i></button>
+                <button class="sb " id="sb2" value="sa" type="submit" title="">{{=it.c.i18n.authorsTitle}}  <i id="isb2" class="icon-long-arrow-down hidden"></i></button>
+                <button class="sb " id="sb3" value="ss" type="submit" title="">{{=it.c.i18n.seriesTitle}}   <i id="isb3" class="icon-long-arrow-down hidden"></i></button>
+                <button class="sb " id="sb4" value="sp" type="submit" title="">{{=it.c.i18n.pubdateTitle}}  <i id="isb4" class="icon-long-arrow-down hidden"></i></button>
             </div>
         </div>
         <div id="filter">

diff --git a/util.js b/util.js
@@ -236,8 +236,14 @@ function handleFilterEvents () {
                 delete filterList [filter];
                 break;
             default :
-                $(this).attr("class", "filter-include");
-                filterList [filter] = true;
+                if (event.altKey) {
+                    $(this).attr("class", "filter-exclude");
+                    filterList [filter] = false;
+                }
+                else {
+                    $(this).attr("class", "filter-include");
+                    filterList [filter] = true;
+                }
                 break;
         }
         doFilter ();
@@ -396,13 +402,21 @@ function handleLinks () {
     });
     $("body").on ("click", "button.sb", function(event){
         var bid = event.target.id;
-        for (i=1;i<=4;i++)
-        {
-            if (!$("#isb"+i).hasClass("hidden"))
-            {
-                $("#isb"+i).addClass(" hidden");
+        // only change classes if the clicked is not the current selected
+        if ($("#i"+bid).hasClass("hidden"))
+        { // wait with showing arrow until the current visible one is hidden
+            for (i=1;i<=4;i++)
+            { // only do something with the current and clicked
+                if (("sb"+i != bid) && (!$("#isb"+i).hasClass("hidden")))
+                {
+                    // current
+                    $("#sb"+i).removeClass("selected"); // remove highlight
+                    $("#isb"+i).addClass(" hidden");  // hide arrow
+                    // clicked
+                    $("#i"+bid).removeClass("hidden"); // unhide arrow
+                    $("#"+bid).addClass("selected");  // add highlight
+                }
             }
-            $("#i"+bid).removeClass("hidden");
         }
         if ($("#i"+bid).hasClass("icon-long-arrow-up"))
         {   // arrow up: ascending - arrow down: descending
@@ -420,7 +434,7 @@ function handleLinks () {
             }
             // convert both strings to uppercase because sorting is case sensitive unlike in Calibre
             //TODO: Make it so it sorts accented characters with non-accented equivalents.
-            //TODO: Make it so it sorts numbers numerical instead of lettersical
+            //TODO: Make it so it sorts numbers numerical instead of alphabetical
             return $(a).find ("." + event.target.value ).text().toUpperCase() > $(b).find ("." + event.target.value ).text().toUpperCase() ? test : -test;
         });
     });