From: paul <paul@plutz.net>
Date: Mon, 29 Jun 2015 01:38:22 +0000 (+0000)
Subject: removed java script dependency from filter dialog
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=dcf73ef720f872f1d61834e9008641d3ec3d489a;p=serve0

removed java script dependency from filter dialog

svn path=/trunk/; revision=57
---

diff --git a/templates/common.css.sh b/templates/common.css.sh
index 0c3d51a..0ae44a7 100755
--- a/templates/common.css.sh
+++ b/templates/common.css.sh
@@ -28,6 +28,11 @@ body {
   background-color: #000;
   color: #DDD;
 }
+
+input.tabhandle { display: none; }
+.tabcontent { display: none; }
+input.tabhandle:checked ~ .tabcontent { display: inline-block; }
+
 a {
   color: #EEE;
 }
@@ -75,7 +80,7 @@ a.clearsearch, a.advanced, a.tagger, .pagination_nav {
   padding-top: .125em;
 }
 
-.panel .filter, .panel .quicklinks,
+.panel .quicklinks,
 .footer .newtag, .footer input[type=submit] {
   display: inline-block;
   vertical-align: top;
@@ -84,7 +89,6 @@ a.clearsearch, a.advanced, a.tagger, .pagination_nav {
 .panel .help {
   display: block;
 }
-.panel .filter select, .panel .filter .help,
 .footer .newtag select, .footer .newtag .label{
   display: block;
   width: 10em;
@@ -100,6 +104,49 @@ a.clearsearch, a.advanced, a.tagger, .pagination_nav {
   display: block
 }
 
+.panel .filter {
+  vertical-align: top;
+  border: solid 1px; border-radius: .25em;
+  padding: .25em .5em;
+  margin: 0 0 1em 0;
+}
+.panel > label.tabhandle {
+  display: inline-block;
+  text-align: right;
+  width: 4em;
+  margin-left: 4em;
+}
+.panel > .tabhandle + label { display: none; }
+.panel > .tabhandle + label + .tabcontent { display: none; }
+.panel > .tabhandle:checked + label.tabhandle + .tabcontent { display: inline-block; }
+.panel > .tabhandle:checked + label.tabhandle + .tabcontent + .tabhandle + label{ display: inline-block; }
+.panel > .tabhandle:checked + label.tabhandle + .tabcontent + .tabhandle:checked + label{ display: none; }
+
+.panel .filter .tabcontainer {
+  position: relative;
+  width: 16em;
+}
+.panel .filter .category.tabhandle {
+  display: block;
+}
+.panel .filter input:checked + .category.tabhandle {
+  background: #FFF;
+  color: #000;
+}
+.panel .filter .category.tabcontent {
+  position: absolute;
+  top: 0; right: 0;
+  width: 10em;
+  height: 100%;
+  min-height: 4em;
+}
+
+.panel .filter.final {
+  display: inline-block;
+  width: 16em;
+  margin-left: 1em;
+}
+
 #thumblist {
   width: 100%;
   padding: .5em 0 3em 0;
diff --git a/templates/filter.html.sh b/templates/filter.html.sh
index 4d1547d..0ba32bb 100755
--- a/templates/filter.html.sh
+++ b/templates/filter.html.sh
@@ -34,30 +34,30 @@ cat <<EOF
     <p class="help">Up to <strong>10</strong> filter boxes will appear as you start selecting tags. You can select <strong>multiple</strong> tags in each box by holding down the <strong>Ctrl</strong>-key. Click the "<strong>Filter!</strong>" button when you are ready.</p>
 
   $(for n in {0..9}; do
-    hideall="$(echo "$taglist" |sed -rn "s;^([^:]+):.*$;hide('${n}_\\1')\\;;p" |sort -u)hide('${n}_none');"
-    echo "
-    <p class="filter" id=\"filter$n\" $([ $n -gt 0 ] && echo 'style="display:none;"')>
-      <span class=\"help conjunction\">and</span>
-      <label class=\"conjunction\"><input type=\"radio\" name=\"type$n\" value=\"pos\" checked>Any</label>
-      <label class=\"conjunction\"><input type=\"radio\" name=\"type$n\" value=\"neg\">None</label>
-      <span class=\"help\">of the tags selected here:</span>
-      <label for=\"category$n\" class=\"category\">Category:</label>
-      <select class=\"input category\" name=\"category$n\" size=\"1\" id=\"category$n\"
-              onchange=\"${hideall}show_block('${n}_'+this.options[this.options.selectedIndex].value)\">
-        <option>none</option>
-        $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' |sort -u)
-      </select>
-      <select class=\"input tagfilter\" name=\"cfilter${n}_\" size=\"12\" multiple id=\"${n}_none\"
-              onchange=\"show_iblock('filter$((1+$n))')\">
-         $(echo "$taglist" |sed -rn 's;^([^:]+)$;<option>\1</option>;p')
-      </select>
-      $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;\1;p' |sort -u |while read cat; do echo "
-      <select class=\"input tagfilter\" name=\"cfilter${n}_\" size=\"12\" multiple id=\"${n}_$cat\" style=\"display:none;\"
-              onchange=\"show_iblock('filter$((1+$n))')\">
-         $(echo "$taglist" |sed -rn 's;^'"$cat"':(.*)$;<option>\1</option>;p')
-      </select>"
-      done)
-    </p>"
+    cat <<-EOF
+	<input class="tabhandle" type="checkbox" id="filter$n" $([ $n = 0 ] && echo checked) >
+	<label class="tabhandle filter" for="filter$n">+ and</label>
+	<div class="tabcontent filter">
+	  <input type="radio" name="type$n" value="pos" id="pos$n" checked><label for="pos$n" class="conjunction">Any</label>
+	  <input type="radio" name="type$n" value="neg" id="neg$n">        <label for="neg$n" class="conjunction">None</label>
+	  <span class="help">of the items selected here:</span>
+
+	  <label class="category">Category:</label>
+          <div class="category tabcontainer">
+	  $( {echo none; echo "$taglist" |sed -rn 's;^([^:]+):.*$;\1;p' |sort -u} \
+             |while read cat; do echo "
+	    <div class="tab">
+	    <input class="tabhandle" type="radio" name="category$n" id="cat${n}_$cat" value="$cat" $([ $cat = none ] && echo checked)>
+	    <label class=\"category tabhandle\" for="cat${n}_$cat">$cat</label>
+	    <select class=\"category tabcontent\" class=\"input tagfilter\" name="cfilter${n}_" size="12" multiple>
+	      $(echo "$taglist" |sed -r 's;^[^:]+$;none:&;' |sed -rn 's;^'"$cat"':(.*)$;<option>\1</option>;p')
+	    </select>
+	    </div>
+	  "
+          done)
+          </div>
+	</div>
+	EOF
   done)
 
     <p class="filter final">