Add filter in the HTML catalog. need UI work. re #46

styles/style-default.css

@@ -55,6 +55,41 @@ a:hover { color:#000; text-decoration: none; }
   margin: 20px auto;
 }
 
+.filtered {
+display: none;
+}
+
+#filter {
+clear:both;
+}
+
+#filter ul {
+margin: 0;
+padding: 0;
+list-style-type: none;
+text-align: left;
+text-transform:none; 
+}
+
+#filter li {
+display: inline-block;
+padding: .2em 1em;
+margin: 2px;
+color: black;
+background-color: white;
+opacity: 0.5;
+}
+
+.filter-include { 
+    border-left:thick solid blue;
+    opacity: 1;
+}
+
+.filter-exclude { 
+    border-right:thick solid red;
+    opacity: 1;
+}
+
 
 img
 {
@@ -246,7 +281,6 @@ line-height: 100%;
 #tool
 {
 width:100%;
-height:32px;
 overflow: hidden;
 }
 
@@ -259,11 +293,6 @@ width: 100%;
 margin: 3px;
 }
 
-#tool div, #tool form
-{
-height: 32px;
-}
-
 .stop select
 {
 vertical-align: middle;

styles/style-eink.css

@@ -60,6 +60,43 @@ a:hover { color:#000; text-decoration: none; }
   margin: 20px auto;
 }
 
+.filtered {
+display: none;
+}
+
+#filter {
+clear:both;
+}
+
+#filter ul {
+margin: 0;
+padding: 0;
+list-style-type: none;
+text-align: left;
+text-transform:none; 
+font-variant: normal;
+}
+
+#filter li {
+display: inline-block;
+padding: .2em 1em;
+margin: 2px;
+color: black;
+background-color: #ddd;
+opacity: 0.5;
+}
+
+.filter-include { 
+    border-left:thick solid blue;
+    opacity: 1;
+}
+
+.filter-exclude { 
+    border-right:thick solid red;
+    opacity: 1;
+}
+
+
 img
 {
 margin:0;
@@ -256,7 +293,6 @@ line-height: 100%;
 #tool
 {
 width:100%;
-height:32px;
 overflow: hidden;
 }
 

templates/default/header.html

@@ -39,5 +39,9 @@
                 </select> 
             </div>
         </div>
+        <div id="filter">
+            <ul>
+            </ul>
+        </div>
     </div>
 </header>

templates/default/main.html

@@ -33,7 +33,7 @@
                 {{? entry.book.rating != ""}}<span class="sr">{{=entry.book.rating}}</span>{{?}}
                 </h2>
                 <h4>{{=it.const.i18n.authorsTitle}} : </h4><span class="sa">{{=htmlEscape (entry.book.authorsName)}}</span><br />
-                {{? entry.book.tagsName != ""}}<h4>{{=it.const.i18n.tagsTitle}} : </h4>{{=htmlEscape (entry.book.tagsName)}}<br />{{?}}
+                {{? entry.book.tagsName != ""}}<h4>{{=it.const.i18n.tagsTitle}} : </h4><span class="se">{{=htmlEscape (entry.book.tagsName)}}</span><br />{{?}}
                 {{? entry.book.seriesName != ""}}<h4>{{=it.const.i18n.seriesTitle}} : </h4><span class="ss">{{=htmlEscape (entry.book.seriesName)}}</span><br />{{?}}
             </div></a>
         </article>

util.js

@@ -1,4 +1,4 @@
-var templatePage, templateBookDetail, templateMain, currentData, before;
+var templatePage, templateBookDetail, templateMain, currentData, before, filterList;
 
 var cache = new LRUCache(30);
 
@@ -111,8 +111,34 @@ function navigateTo (url) {
     }
 }
 
+function doFilter () {
+    $(".books").removeClass("filtered");
+    if (jQuery.isEmptyObject(filterList)) return;
+    
+    $(".se").each (function(){
+        var taglist = ", " + $(this).text() + ", ";
+        var toBeFiltered = false;
+        for (var filter in filterList) {
+            var onlyThisTag = filterList [filter];
+            filter = ', ' + filter + ', ';
+            var myreg = new RegExp (filter);
+            if (myreg.test (taglist)) {
+                if (onlyThisTag === false) {
+                    toBeFiltered = true;
+                }
+            } else {
+                if (onlyThisTag === true) {
+                    toBeFiltered = true;
+                }
+            }
+        }
+        if (toBeFiltered) $(this).parents (".books").addClass ("filtered");
+    });
+}
+
 function updatePage (data) {
     var result;
+    filterList = {};
     data ["const"] = currentData ["const"];
     if (false && $("section").length && currentData.isPaginated == 0 &&  data.isPaginated == 0) {
         // Partial update (for now disabled)
@@ -133,6 +159,36 @@ function updatePage (data) {
     if ($.cookie('toolbar') == 1) $("#tool").show ();
     if (currentData.containsBook == 1) {
         $("#sortForm").show ();
+        $("#filter ul").empty ();
+        $(".se").each (function(){
+            var taglist = $(this).text();
+
+            var tagarray = taglist.split (",")
+            for (i in tagarray) {
+                var tag = tagarray [i].replace(/^\s+/g,'').replace(/\s+$/g,'');
+                if ( $('#filter ul li:contains("' + tag + '")').length == 0 ) {
+                    $("#filter ul").append ("<li>" + tag + "</li>");
+                }
+            }
+        });
+        $("li").click(function(){
+            var filter = $(this).text ();
+            switch ($(this).attr("class")) {
+                case "filter-include" :
+                    $(this).attr("class", "filter-exclude");
+                    filterList [filter] = false;
+                    break;
+                case "filter-exclude" :
+                    $(this).removeClass ("filter-exclude");;
+                    delete filterList [filter];;
+                    break;
+                default :
+                    $(this).attr("class", "filter-include");
+                    filterList [filter] = true;
+                    break;
+            }
+            doFilter ();
+        });
     } else {
         $("#sortForm").hide ();
     }