From b22f5dedd33a3c4b3a42f06072923b0f75b6799f Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Mon, 16 Jul 2018 18:57:42 +0200 Subject: [PATCH] starting interface for advanced search --- list.sh | 1 + style.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++------ widgets.sh | 56 ++++++++++++++++++++-- 3 files changed, 171 insertions(+), 19 deletions(-) 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" ⚙] ] $(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#*:}" + 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#*:}" + printf '[option value="%s" %s]' "$tag" "$tn" done printf ']]' done -- 2.39.2