From: Paul Hänsch <paul@plutz.net>
Date: Mon, 16 Jul 2018 16:57:42 +0000 (+0200)
Subject: starting interface for advanced search
X-Git-Url: http://git.plutz.net/?p=serve0;a=commitdiff_plain;h=b22f5dedd33a3c4b3a42f06072923b0f75b6799f

starting interface for advanced search
---

diff --git a/list.sh b/list.sh
index 72b4fc3..5c6634d 100644
--- a/list.sh
+++ b/list.sh
@@ -147,6 +147,7 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
     [a #t_prefs href="#prefs" &#x2699;]
   ]
   $(w_prefs)
+  $(w_advsearch)
 
   [form method=POST action="?a=multitag"
     $(list_items \
diff --git a/style.css b/style.css
index d5007a0..05d278f 100644
--- a/style.css
+++ b/style.css
@@ -5,19 +5,36 @@
 button { padding: .125em .5em; }
 a { color: inherit; text-decoration: none;}
 
+input {
+  border: 1px solid;
+  padding: .25em .5em;
+  line-height: 1em;
+  vertical-align: bottom;
+}
+input[type=number] { padding-right: 0; }
+input[type=radio], input[type=checkbox] { vertical-align: baseline; }
+select {
+  border: 1px solid;
+  padding: .125em .5em;
+}
+
 body {
   color: white;
   background-color: black;
   min-height: 100%;
 }
 
-#prefs, #bookmarks, #multitag {
+#prefs, #bookmarks,
+#multitag, #advsearch {
   display: block;
+  position: relative;
   overflow: hidden;
   height: 0;
   text-align: left;
+  background-color: #333;
 }
 #prefs:target,
+#advsearch:target,
 #multitag:target,
 #bookmarks:target {
   height: auto;
@@ -53,41 +70,39 @@ a[href="#advsearch"]:before {
   margin: 0 .5em;
 }
 
-#prefs:target {
+#prefs {
   position: absolute;
   right: 0; width: 13em;
   margin-left: auto;
   margin-top: -1px;
-  background-color: #333;
   border: 1px solid;
   border-top: none;
   border-right: none;
-  padding: .5em 1em;
+  padding: 0 1em;
   z-index: 1;
-  overflow: visible;
 }
 
-#prefs:target a[href="#"] {
+#prefs a[href="#"] {
   display: block;
   position: relative;
-  top: -1.5em; right: -.5em;
-  margin-left: 4em;
+  top: -1.125em;
+  margin-right: -.5em;
+  margin-bottom: -1em;
   text-align: right;
   font-size: 1.5em;
-  padding: 0 .25em;
-  background-color: #333;
-  z-index: 1;
+  padding-right: .25em;
+  background-color: inherit;
 }
 
 #prefs label[for=prefs_ps] {
   font-weight: bold;
 }
 #prefs #prefs_ps {
-  max-width: 3em;
+  max-width: 4em;
   margin-bottom: 1em;
 }
 #prefs button {
-  margin-top: 1em;
+  margin: 1em 0;
 }
 #prefs input { vertical-align: top; }
 #prefs input[type=radio] + label,
@@ -97,6 +112,96 @@ a[href="#advsearch"]:before {
   max-width: 85%;
 }
 
+#advsearch:target {
+  display: block;
+  position: relative;
+  text-align: center;
+  border-bottom: 1px solid;
+}
+#advsearch a[href="#"] {
+  display: block;
+  line-height: 2em;
+  background-color: inherit;
+  border-bottom: 1px solid;
+  text-align: left;
+  padding-left: .5em;
+  position: relative;
+  top: -2em;
+}
+#advsearch .help {
+  display: block;
+  margin: -1em 1em 1em 1em;
+  padding: .5em 1em;
+  background-color: #444;
+  line-height: 1.5em;
+  text-align: left;
+}
+
+#advsearch input.and {display: none;}
+#advsearch input.and + label {display: none}
+#advsearch input.and + label + .select {display: none;}
+
+#advsearch input.and + label:nth-of-type(2),
+#advsearch input.and:checked + label + .select + input + label {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 .5% 1em .5%;
+  width: 4%;
+  padding: .5em 0;
+  text-align: center;
+  font-weight: bold;
+  border: 1px solid;
+}
+
+#advsearch input.and:checked + label + .select + input:checked + label,
+#advsearch input.and:checked + label:nth-of-type(2),
+#advsearch input.and:checked + label { display: none; }
+
+#advsearch input.and + label + .select:first-of-type,
+#advsearch input.and:checked + label + .select {
+  display: inline-block;
+  position: relative;
+  width: 19%;
+  margin: 0 .5% 1em .5%;
+  min-width: 200px;
+  min-height: 12em;
+  overflow: hidden;
+  text-align: left;
+}
+
+#advsearch .select input.pol {
+  margin: .5em .25em 0 .5em;
+}
+#advsearch .select input.pol + label {
+  font-weight: bold;
+}
+#advsearch .select label.head {
+  display: block;
+  font-weight: bold;
+  padding: .5em 0 0 .5em;
+  border-bottom: 1px solid;
+}
+
+#advsearch .select select {display: none;}
+#advsearch .select input.cat { display: none; }
+#advsearch .select input.cat + label {
+  display: block;
+  margin-right: 50%;
+  padding: .25em .5em;
+  font-size: 1.125em;
+  border-bottom: 1px solid;
+}
+#advsearch .select input.cat:checked + label {
+  background-color: #444;
+}
+#advsearch .select input.cat:checked + label + select {
+  display: block;
+  position: absolute;
+  top: 3.5em; bottom: 0;
+  right: 0; left: 50%;
+  width: 50%;
+}
+
 .list {
   position: relative;
   display: inline-block;
@@ -195,7 +300,7 @@ a[href="#advsearch"]:before {
   position: relative;
   top: -1em;
   padding-right: 10em;
-  background-color: #333;
+  background-color: inherit;
 }
 #multitag fieldset{
   display: inline-block;
diff --git a/widgets.sh b/widgets.sh
index 5cc4db9..81807c0 100644
--- a/widgets.sh
+++ b/widgets.sh
@@ -5,6 +5,7 @@ include_widgets="$0"
 
 . "$_EXEC/cgilite/storage.sh"
 
+w_refuri="$(HTML "$REQUEST_URI")"
 w_tags="$(find "$_DATA/" -path '*/.index/meta' -print0 \
         | xargs -r0 cut -f4 \
         | cut -d= -f2- |tr , '\n' | sort -u)"
@@ -41,7 +42,7 @@ w_prefs(){
     [submit "store" "store" Set Cookie]
   ]
   ' \
-  "$(HTML "$REQUEST_URI")" "$LISTSIZE" \
+  "$w_refuri" "$LISTSIZE" \
   "$([ "$mode" = index ] || printf checked)" \
   "$([ "$mode" = index ] && printf checked)" \
   "$([ "$fakemp4" = yes    ] && printf checked)"
@@ -55,17 +56,61 @@ w_index(){
     [checkbox "recursive" "yes" #spawn_recursive] [label for=spawn_recursive Include subdirectories]
     [submit "spawn" "spawn" Set up]
   ]
-  ' "$(HTML "$REQUEST_URI")"
+  ' "$w_refuri"
+}
+
+w_advsearch(){
+  printf '[form #advsearch action=?a=advsearch method=POST
+            [a href="#" Hide]
+            [p .help Select multiple tags from each category by holding down the [strong Ctrl] key on your keyboard.[br]
+            Refine the search further by setting additional search tags using the [strong "+and"] button.]
+            [hidden "ref" "%s"]
+         ' "$w_refuri"
+
+  for n in 1 2 3 4 5 6 7 8 9 10; do
+    lbid="$(HTML "cat_${n}_(none)")"
+    printf '[input .and type=checkbox name=and id="and_%i"][label for="and_%i" +and
+            ][fieldset .select
+            [input .pol type="radio" name=pol_%i id="pol_pos_%i"][label for=pol_pos_%i Any]
+            [input .pol type="radio" name=pol_%i id="pol_neg_%i"][label for=pol_neg_%i None]
+            [label .head Category:]
+            [input .cat type=radio name="cat_%i" id="%s" ][label for="%s" %s]
+            [select name=tag_%s size=10 multiple' \
+            $n $n $n $n $n $n $n $n \
+            $n "$lbid" "$lbid" "(none)" $n
+    printf %s "$w_tags" |grep -vF ":" \
+    | while read -r tag; do
+      [ ! "$tag" ] && continue
+      printf '[option value="%s" %s]' "$(HTML "$tag")" "$(HTML "$tag")"
+    done
+    printf ']'
+    printf %s "$w_tags" |cut -sd: -f1 |sort -u \
+    | while read -r category; do
+      lbid="$(HTML "cat_${n}_${category}")"
+      printf '[input .cat type=radio name="cat_%i" id="%s" [label for="%s" %s]]
+              [select name=tag_%s size=10 multiple' $n "$lbid" "$lbid" "$(HTML "$category")" $n
+      printf %s "$w_tags" |grep -wF "${category}" \
+      | while read -r tag; do
+        tag="$(HTML "$tag")"; tn="${tag#*&#58;}"
+        printf '[option value="%s" %s]' "$tag" "$tn"
+      done
+      printf ']'
+    done
+    printf ']'
+  done
+
+  printf ']'
 }
 
 w_tagging(){
   local tag category
-  printf '[div #multitag [input type="hidden" name="ref" value="%s"]' "$(HTML "$REQUEST_URI")"
+  printf '[div #multitag [input type="hidden" name="ref" value="%s"]' "$w_refuri"
   printf '[a href="#" Hide][br]'
 
   printf '[fieldset [legend %s:][select name=tag size=4 multiple' "Tags"
-  printf %s "$w_tags" |grep -vF ":" |grep -vxF '' \
+  printf %s "$w_tags" |grep -vF ":" \
   | while read -r tag; do
+    [ ! "$tag" ] && continue
     printf '[option value="%s" %s]' "$(HTML "$tag")" "$(HTML "$tag")"
   done
   printf ']]'
@@ -75,7 +120,8 @@ w_tagging(){
     printf '[fieldset [legend %s:][select name=tag size=4 multiple' "$(HTML "$category")"
     printf %s "$w_tags" |grep -wF "${category}" \
     | while read -r tag; do
-      printf '[option value="%s" %s]' "$(HTML "$tag")" "$(HTML "${tag#*:}")"
+      tag="$(HTML "$tag")"; tn="${tag#*&#58;}"
+      printf '[option value="%s" %s]' "$tag" "$tn"
     done
     printf ']]'
   done