Tweak #2: changed the sort dropdowns to toggle buttons for the indivi…

…dual sort criteria. Less clicks.
At-Libitum · Dec 18, 2013 · 3445924 · 3445924 · At-Libitum · Dec 19, 2013
1 parent 9bfc0f5
commit 3445924
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/styles/style-base.css b/styles/style-base.css
@@ -83,6 +83,16 @@ color: black;
 background-color: white;
 opacity: 0.5;
 }
+.sb{
+border:0;
+height:26px;
+padding:0px 0.5em 0px 0.5em;
+margin:0px 4px 2px 0px;
+cursor:pointer;
+color: black;
+background-color: white;
+opacity: 0.5;
+}
 
 .filter-include {
     border-left:thick solid blue;
@@ -333,6 +343,9 @@ line-height: 100%;
 /* =============================================================================
    Aside stuff goes here
    ========================================================================== */
+/* keeps inactive sort arrows hidden without changing the button size */
+.hidden{ visibility:hidden; }
+
 #tool
 {
 width:100%;

diff --git a/templates/default/header.html b/templates/default/header.html
@@ -24,12 +24,12 @@ <h1>{{=it.title}}</h1>
             </form>
         </div>
         {{? it.c.config.server_side_rendering == 0}}
-        <div id="sortForm" style="float: right; width: 45%; display: none">
-            <div style="float: right">
+        <div id="sortForm" style="float: right; width: auto; display: none">
+            <!--div style="float: right">
                 <div title="{{=it.c.i18n.sortAlt}}" id="sort" class="hicon hicon32"><i class="icon-sort icon-2x"></i></div>
-            </div>
+            </div-->
             <div class="stop">
-                <select id="sortchoice">
+                <!--select id="sortchoice">
                     <option value="st">{{=it.c.i18n.bookwordTitle}}</option>
                     <option value="sa">{{=it.c.i18n.authorsTitle}}</option>
                     <option value="ss">{{=it.c.i18n.seriesTitle}}</option>
@@ -38,7 +38,11 @@ <h1>{{=it.title}}</h1>
                 <select id="sortorder">
                     <option value="asc">{{=it.c.i18n.sortorderAsc}}</option>
                     <option value="desc">{{=it.c.i18n.sortorderDesc}}</option>
-                </select> 
+                </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>
             </div>
         </div>
         <div id="filter">

diff --git a/util.js b/util.js
@@ -394,7 +394,36 @@ function handleLinks () {
             return $(a).find ("." + $("#sortchoice").val()).text() > $(b).find ("." + $("#sortchoice").val()).text() ? test : -test;
         });
     });
-
+    $("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");
+            }
+            $("#i"+bid).removeClass("hidden");
+        }
+        if ($("#i"+bid).hasClass("icon-long-arrow-up"))
+        {   // arrow up: ascending - arrow down: descending
+            $("#i"+bid).removeClass("icon-long-arrow-up").addClass("icon-long-arrow-down");
+        }
+        else
+        {
+            $("#i"+bid).removeClass("icon-long-arrow-down").addClass("icon-long-arrow-up");
+        }
+        $('.books').sortElements(function(a, b){
+            var test = 1;
+            if ($("#i"+bid).hasClass("icon-long-arrow-down"))
+            {
+                test = -1;
+            }
+            // 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
+            return $(a).find ("." + event.target.value ).text().toUpperCase() > $(b).find ("." + event.target.value ).text().toUpperCase() ? test : -test;
+        });
+    });
     $("body").on ("click", ".headright", function(){
         if ($("#tool").is(":hidden")) {
             $("#tool").slideDown("slow");