717 lines
24 KiB
HTML
717 lines
24 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
{% import "cards.html" as cards %}
|
|
{% import "clipboard_tray.html" as clipboard_tray %}
|
|
<title>Search</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
<link rel="stylesheet" href="/static/css/etiquette.css">
|
|
<link rel="stylesheet" href="/static/css/cards.css">
|
|
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
|
|
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
|
<script src="/static/js/common.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/hotkeys.js"></script>
|
|
<script src="/static/js/photo_clipboard.js"></script>
|
|
<script src="/static/js/tag_autocomplete.js"></script>
|
|
|
|
<style>
|
|
#search_builder_form
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#error_message_area
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#happy_message_area
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.error_message
|
|
{
|
|
align-self: center;
|
|
|
|
padding: 2px;
|
|
|
|
background-color: #f00;
|
|
|
|
color: #fff;
|
|
}
|
|
#left
|
|
{
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
word-wrap: break-word;
|
|
}
|
|
#tags_on_this_page_holder
|
|
{
|
|
/*
|
|
This allows the search results to dominate the height of the page, and
|
|
left will simply match that height then scroll the rest of
|
|
tags_on_this_page.
|
|
*/
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
#tags_on_this_page_list
|
|
{
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#right
|
|
{
|
|
flex: 1;
|
|
|
|
/* Keep the prev-next buttons from scraping the floor */
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@media screen and (min-width: 800px)
|
|
{
|
|
#content_body
|
|
{
|
|
grid-template:
|
|
"left right" 1fr
|
|
/ 310px 1fr;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px)
|
|
{
|
|
#content_body
|
|
{
|
|
grid-template:
|
|
"right" auto
|
|
"left" auto
|
|
/ auto;
|
|
}
|
|
}
|
|
|
|
.prev_next_holder
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.prev_page
|
|
{
|
|
margin-right: 10px;
|
|
}
|
|
.next_page
|
|
{
|
|
margin-left: 10px;
|
|
}
|
|
.prev_page, .next_page
|
|
{
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
|
|
border: 1px solid black;
|
|
|
|
background-color: var(--color_secondary);
|
|
|
|
font-size: 20;
|
|
}
|
|
|
|
.search_builder_tagger,
|
|
#search_builder_orderby_ul
|
|
{
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
{% macro prev_next_buttons() %}
|
|
{% if prev_page_url or next_page_url %}
|
|
<div class="prev_next_holder">
|
|
{% if prev_page_url %}
|
|
<a class="prev_page" href="{{prev_page_url}}">Previous</a>
|
|
{% else %}
|
|
<a class="prev_page"><br></a>
|
|
{% endif %}
|
|
{% if next_page_url %}
|
|
<a class="next_page" href="{{next_page_url}}">Next</a>
|
|
{% else %}
|
|
<a class="next_page"><br></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro create_orderby_li(selected_column, selected_sorter) %}
|
|
<li class="search_builder_orderby_li">
|
|
<select class="select_orderby_column" onchange="return orderby_hide_direction_hook(event);">
|
|
<option value="created" {{"selected" if selected_column=="created" else ""}}>Creation date</option>
|
|
<option value="basename" {{"selected" if selected_column=="basename" else ""}}>Filename</option>
|
|
<option value="area" {{"selected" if selected_column=="area" else ""}}>Area</option>
|
|
<option value="width" {{"selected" if selected_column=="width" else ""}}>Width</option>
|
|
<option value="height" {{"selected" if selected_column=="height" else ""}}>Height</option>
|
|
<option value="ratio" {{"selected" if selected_column=="ratio" else ""}}>Aspect Ratio</option>
|
|
<option value="bytes" {{"selected" if selected_column=="bytes" else ""}}>File size</option>
|
|
<option value="duration" {{"selected" if selected_column=="duration" else ""}}>Duration</option>
|
|
<option value="bitrate" {{"selected" if selected_column=="bitrate" else ""}}>Bitrate</option>
|
|
<option value="tagged_at" {{"selected" if selected_column=="tagged_at" else ""}}>Recently tagged</option>
|
|
<option value="random" {{"selected" if selected_column=="random" else ""}}>Random</option>
|
|
</select>
|
|
<select class="select_orderby_direction" {% if selected_column=="random" %}class="hidden"{% endif %}>
|
|
<option value="desc" {{"selected" if selected_sorter=="desc" else ""}} >Descending</option>
|
|
<option value="asc" {{"selected" if selected_sorter=="asc" else ""}} >Ascending</option>
|
|
</select>
|
|
<button class="remove_tag_button_perm red_button" onclick="return orderby_remove_hook(this);"></button>
|
|
</li>
|
|
{% endmacro %}
|
|
</head>
|
|
|
|
<body>
|
|
{{header.make_header(session=session)}}
|
|
<div id="content_body">
|
|
<div id="left" class="panel">
|
|
{% for tagtype in ["musts", "mays", "forbids"] %}
|
|
<div id="search_builder_{{tagtype}}" {% if search_kwargs["tag_expression"]%}class="hidden"{%endif%}>
|
|
<span>Tag {{tagtype}}:</span>
|
|
<ul class="search_builder_tagger">
|
|
{% set key="tag_" + tagtype %}
|
|
{% if search_kwargs[key] %}
|
|
{% for tag in search_kwargs[key] %}
|
|
<li class="search_builder_{{tagtype}}_inputted">
|
|
{{cards.create_tag_card(tag, link='info', with_alt_description=True)}}<!--
|
|
--><button class="remove_tag_button red_button"
|
|
onclick="return remove_searchtag(ul_{{tagtype}}, '{{tag.name}}', inputted_{{tagtype}});"></button>
|
|
</li>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<li><input id="search_builder_{{tagtype}}_input" class="entry_with_tagname_replacements" type="text" list="tag_autocomplete_datalist"></li>
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
<div id="search_builder_expression" {% if not search_kwargs["tag_expression"]%}class="hidden"{%endif%}>
|
|
<span>Tag Expression:</span>
|
|
<input id="search_builder_expression_input" name="tag_expression" type="text"
|
|
value="{{search_kwargs['tag_expression'] or ''}}"
|
|
>
|
|
</div>
|
|
<div id="search_builder_orderby">
|
|
<span>Order by</span>
|
|
<ul id="search_builder_orderby_ul">
|
|
{% if "orderby" in search_kwargs and search_kwargs["orderby"] %}
|
|
{% for orderby in search_kwargs["orderby"] %}
|
|
{% set column, sorter=orderby.split("-") %}
|
|
{{ create_orderby_li(selected_column=column, selected_sorter=sorter) }}
|
|
{% endfor %}
|
|
{% else %}
|
|
{{ create_orderby_li(selected_column=0, selected_sorter=0) }}
|
|
{% endif %}
|
|
<li id="search_builder_orderby_newrow"><button class="green_button" onclick="return add_new_orderby();">+</button></li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<form id="search_builder_form" action="" onsubmit="return submit_search();">
|
|
|
|
<span>Min-max values</span>
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['area']%} value="{{search_kwargs['area']}}" {%endif%}
|
|
name="area" placeholder="Area: 1m-2m">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['width']%} value="{{search_kwargs['width']}}" {%endif%}
|
|
name="width" placeholder="Width: 1k-2k">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['height']%} value="{{search_kwargs['height']}}" {%endif%}
|
|
name="height" placeholder="Height: 1k-2k">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['ratio']%} value="{{search_kwargs['ratio']}}" {%endif%}
|
|
name="ratio" placeholder="Aspect Ratio: 1.7-2">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['bytes']%} value="{{search_kwargs['bytes']}}" {%endif%}
|
|
name="bytes" placeholder="File Size: 1mb-2mb">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['duration']%} value="{{search_kwargs['duration']}}" {%endif%}
|
|
name="duration" placeholder="Duration: 10:00-20:00">
|
|
|
|
<input type="text" class="basic_param"
|
|
{%if search_kwargs['created']%} value="{{search_kwargs['created']}}" {%endif%}
|
|
name="created" placeholder="Created: 1483228800-1514764800">
|
|
|
|
<br>
|
|
|
|
<span>Other filters</span>
|
|
<input type="text" class="basic_param"
|
|
value="{{search_kwargs['filename'] or ''}}"
|
|
name="filename" placeholder="Filename">
|
|
|
|
<input type="text" class="basic_param"
|
|
value="{{search_kwargs['mimetype']|comma_join}}"
|
|
name="mimetype" placeholder="Mimetype(s)">
|
|
|
|
<input type="text" class="basic_param"
|
|
value="{{search_kwargs['extension']|comma_join}}"
|
|
name="extension" placeholder="Extension(s)">
|
|
|
|
<input type="text" class="basic_param"
|
|
value="{{search_kwargs['extension_not']|comma_join}}"
|
|
name="extension_not" placeholder="Forbid extension(s)">
|
|
|
|
<input type="text" class="basic_param"
|
|
value="{{search_kwargs['author']|users_to_usernames|comma_join}}"
|
|
name="author" placeholder="Author">
|
|
|
|
<select name="limit" class="basic_param">
|
|
{% set limit_options = [20, 50, 100, 200, 500, 1000] %}
|
|
{% if search_kwargs['limit'] not in limit_options %}
|
|
{% do limit_options.append(search_kwargs['limit']) %}
|
|
{% do limit_options.sort() %}
|
|
{% endif %}
|
|
{% for limit_option in limit_options %}
|
|
<option value="{{limit_option}}" {{"selected" if search_kwargs['limit'] == limit_option else ""}}>
|
|
{{- limit_option }} items{{''-}}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select name="has_tags" class="basic_param">
|
|
<option value="" {{"selected" if search_kwargs['has_tags']==None else ""}}>Tagged and untagged</option>
|
|
<option value="yes" {{"selected" if search_kwargs['has_tags']==True else ""}}>Tagged only</option>
|
|
<option value="no" {{"selected" if search_kwargs['has_tags']==False else ""}}>Untagged only</option>
|
|
</select>
|
|
<select name="has_thumbnail" class="basic_param">
|
|
<option value="" {{"selected" if search_kwargs['has_thumbnail']==None else ""}}>Thumbnail doesn't matter</option>
|
|
<option value="yes" {{"selected" if search_kwargs['has_thumbnail']==True else ""}}>Has thumbnail</option>
|
|
<option value="no" {{"selected" if search_kwargs['has_thumbnail']==False else ""}}>No thumbnail</option>
|
|
</select>
|
|
<select name="yield_albums" class="basic_param">
|
|
<option value="yes" {{"selected" if search_kwargs['yield_albums']==True else ""}}>Include albums</option>
|
|
<option value="no" {{"selected" if search_kwargs['yield_albums']==False else ""}}>Don't include albums</option>
|
|
</select>
|
|
<select name="yield_photos" class="basic_param">
|
|
<option value="yes" {{"selected" if search_kwargs['yield_photos']==True else ""}}>Include photos</option>
|
|
<option value="no" {{"selected" if search_kwargs['yield_photos']==False else ""}}>Don't include photos</option>
|
|
</select>
|
|
<select name="view" class="basic_param">
|
|
<option value="grid" {{"selected" if search_kwargs['view']=="grid" else ""}}>Grid</option>
|
|
<option value="list" {{"selected" if search_kwargs['view']=="list" else ""}}>List</option>
|
|
</select>
|
|
<button type="submit" id="search_go_button" class="green_button" value="">Search</button>
|
|
</form>
|
|
{% if total_tags %}
|
|
<h4>Tags on this page:</h4>
|
|
<div id="tags_on_this_page_holder">
|
|
<ul id="tags_on_this_page_list">
|
|
{% for tag in total_tags %}
|
|
<li>
|
|
{{cards.create_tag_card(
|
|
tag,
|
|
link=None,
|
|
onclick="return tags_on_this_page_add_must(event, '" + tag.name + "');",
|
|
innertext="(+)",
|
|
)}}
|
|
|
|
{{cards.create_tag_card(
|
|
tag,
|
|
link=None,
|
|
onclick="return tags_on_this_page_add_may(event, '" + tag.name + "');",
|
|
innertext="(~)",
|
|
)}}
|
|
|
|
{{cards.create_tag_card(
|
|
tag,
|
|
link=None,
|
|
onclick="return tags_on_this_page_add_forbid(event, '" + tag.name + "');",
|
|
innertext="(x)",
|
|
)}}
|
|
|
|
{{cards.create_tag_card(
|
|
tag,
|
|
link="info",
|
|
with_alt_description=True,
|
|
)}}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div id="right" class="panel">
|
|
<div id="error_message_area">
|
|
{% for warning in warnings %}
|
|
<p class="error_message">{{warning}}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="happy_message_area">
|
|
<p>You got {{results|length}} items.</p>
|
|
</div>
|
|
|
|
{{prev_next_buttons()}}
|
|
|
|
<div id="search_results_holder" class="photos_holder">
|
|
{% for result in results %}
|
|
{% if result.__class__.__name__ == 'Photo' %}
|
|
{{cards.create_photo_card(result, view=search_kwargs["view"])}}
|
|
{% elif result.__class__.__name__ == 'Album' %}
|
|
{{cards.create_album_card(result, view=search_kwargs["view"])}}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{{prev_next_buttons()}}
|
|
</div>
|
|
</div>
|
|
{{clipboard_tray.clipboard_tray()}}
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
/*
|
|
These values should match those of the server itself. The purpose of this dict
|
|
is to know that we DON'T need to include these parameters in the url if the
|
|
selected form values are these.
|
|
*/
|
|
const PARAM_DEFAULTS = {
|
|
'limit': 50,
|
|
'view': 'grid',
|
|
'yield_albums': 'yes',
|
|
'yield_photos': 'yes'
|
|
}
|
|
|
|
const MAX_ORDERBY_ULS = document.getElementsByClassName("select_orderby_column")[0].children.length;
|
|
|
|
function add_searchtag(ul, value, inputted_list, li_class)
|
|
{
|
|
console.log("adding " + value);
|
|
const already_have = inputted_list.indexOf(value) !== -1;
|
|
if (already_have)
|
|
{return;}
|
|
|
|
inputted_list.push(value);
|
|
const new_li = document.createElement("li");
|
|
new_li.className = li_class;
|
|
|
|
const new_span = document.createElement("span");
|
|
new_span.className = "tag_card";
|
|
new_span.innerHTML = value;
|
|
|
|
const new_delbutton = document.createElement("button")
|
|
new_delbutton.classList.add("remove_tag_button");
|
|
new_delbutton.classList.add("red_button");
|
|
new_delbutton.onclick = function(){remove_searchtag(ul, value, inputted_list)};
|
|
|
|
new_li.appendChild(new_span);
|
|
new_li.appendChild(new_delbutton);
|
|
|
|
ul.insertBefore(new_li, ul.lastElementChild);
|
|
}
|
|
function add_searchtag_from_box(box, inputted_list, li_class)
|
|
{
|
|
if (box.offsetParent === null)
|
|
{
|
|
// The box is hidden probably because we're in Expression mode.
|
|
return;
|
|
}
|
|
|
|
if (!box.value)
|
|
{return;}
|
|
|
|
let value = box.value;
|
|
if (tag_autocomplete.datalist !== null)
|
|
{
|
|
// If the autocomplete failed for whatever reason, or is simply taking
|
|
// too long, let's just let it slide.
|
|
value = tag_autocomplete.resolve(value);
|
|
if (value === null)
|
|
{return;}
|
|
}
|
|
|
|
console.log(inputted_list);
|
|
ul = box.parentElement.parentElement;
|
|
add_searchtag(ul, value, inputted_list, li_class)
|
|
box.value = "";
|
|
// The datalist autocomplete box can sometimes stick around after the
|
|
// tag has already been submitted and the input box moves down -- now
|
|
// covered by the autocomplete. So we temporarily unfocus it to make
|
|
// that thing go away.
|
|
box.blur();
|
|
box.focus();
|
|
}
|
|
|
|
function remove_searchtag(ul, value, inputted_list)
|
|
{
|
|
console.log("removing " + value);
|
|
const lis = ul.children;
|
|
//console.log(lis);
|
|
for (const li of lis)
|
|
{
|
|
const tag_card = li.children[0];
|
|
if (! tag_card.classList.contains("tag_card"))
|
|
{continue}
|
|
|
|
const tagname = tag_card.innerHTML;
|
|
if (tagname != value)
|
|
{continue}
|
|
|
|
ul.removeChild(li);
|
|
splice_at = inputted_list.indexOf(tagname);
|
|
if (splice_at == -1)
|
|
{continue}
|
|
|
|
inputted_list.splice(splice_at, 1);
|
|
}
|
|
}
|
|
|
|
function add_new_orderby()
|
|
{
|
|
/* Called by the green + button */
|
|
const ul = document.getElementById("search_builder_orderby_ul");
|
|
const lis = ul.getElementsByClassName("search_builder_orderby_li");
|
|
if (lis.length >= MAX_ORDERBY_ULS)
|
|
{
|
|
return;
|
|
}
|
|
prev_li = lis[lis.length - 1];
|
|
const new_li = prev_li.cloneNode(true);
|
|
ul.insertBefore(new_li, prev_li.nextSibling);
|
|
}
|
|
|
|
function orderby_remove_hook(button)
|
|
{
|
|
/* Called by the red button next to orderby dropdowns */
|
|
const li = button.parentElement;
|
|
const ul = li.parentElement;
|
|
// 2 because keep 1 row and the adder button
|
|
if (ul.children.length>2)
|
|
{
|
|
/* You can't remove the only one left */
|
|
ul.removeChild(li);
|
|
}
|
|
}
|
|
|
|
function orderby_hide_direction_hook(event)
|
|
{
|
|
if (event.target.value == "random")
|
|
{
|
|
event.target.nextElementSibling.classList.add("hidden");
|
|
}
|
|
else
|
|
{
|
|
event.target.nextElementSibling.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function simplify_tagnames(tags)
|
|
{
|
|
const new_tags = [];
|
|
for (let tag of tags)
|
|
{
|
|
tag = tag.split(".");
|
|
tag = tag[tag.length - 1];
|
|
new_tags.push(tag);
|
|
}
|
|
return new_tags;
|
|
}
|
|
|
|
function build_search_params()
|
|
{
|
|
/*
|
|
Gather up all the form data and tags and compose the URL parameters.
|
|
*/
|
|
const parameters = new URLSearchParams();
|
|
|
|
// If the user has left any text in the tag boxes, but not hit Enter on
|
|
// them, then they will not be in the `inputted_` lists and would get
|
|
// ignored. So let's run through each of their hooks to get them all saved.
|
|
add_searchtag_from_box(input_musts, inputted_musts, "search_builder_musts_inputted");
|
|
add_searchtag_from_box(input_mays, inputted_mays, "search_builder_mays_inputted");
|
|
add_searchtag_from_box(input_forbids, inputted_forbids, "search_builder_forbids_inputted");
|
|
|
|
let has_tag_params = false;
|
|
const musts = simplify_tagnames(inputted_musts).join(",");
|
|
if (musts) {parameters.set("tag_musts", musts); has_tag_params = true;}
|
|
|
|
const mays = simplify_tagnames(inputted_mays).join(",");
|
|
if (mays) {parameters.set("tag_mays", mays); has_tag_params = true;}
|
|
|
|
const forbids = simplify_tagnames(inputted_forbids).join(",");
|
|
if (forbids) {parameters.set("tag_forbids", forbids); has_tag_params = true;}
|
|
|
|
const expression = document.getElementsByName("tag_expression")[0].value;
|
|
if (expression)
|
|
{
|
|
//expression = expression.replace(new RegExp(" ", 'g'), "-");
|
|
parameters.set("tag_expression", expression);
|
|
has_tag_params = true;
|
|
}
|
|
|
|
const basic_inputs = document.getElementsByClassName("basic_param");
|
|
for (const basic_input of basic_inputs)
|
|
{
|
|
let value = basic_input.value;
|
|
value = value.split("&").join("%26");
|
|
console.log(value);
|
|
if (PARAM_DEFAULTS[basic_input.name] == value)
|
|
{
|
|
// Don't clutter url with default values.
|
|
continue;
|
|
}
|
|
if (value == "")
|
|
{
|
|
continue;
|
|
}
|
|
parameters.set(basic_input.name, value);
|
|
}
|
|
|
|
const orderby_rows = document.getElementsByClassName("search_builder_orderby_li");
|
|
let orderby_params = [];
|
|
for (const orderby_row of orderby_rows)
|
|
{
|
|
const column = orderby_row.children[0].value;
|
|
if (column == "random")
|
|
{
|
|
orderby_params.push(column);
|
|
}
|
|
else
|
|
{
|
|
const sorter = orderby_row.children[1].value;
|
|
orderby_params.push(column + "-" + sorter);
|
|
}
|
|
}
|
|
orderby_params = orderby_params.join(",");
|
|
if (orderby_params && orderby_params != "created-desc")
|
|
{
|
|
// Don't clutter url with default of created-desc
|
|
parameters.set("orderby", orderby_params);
|
|
}
|
|
|
|
return parameters;
|
|
}
|
|
|
|
function submit_search()
|
|
{
|
|
const parameters = build_search_params().toString();
|
|
let url = "/search";
|
|
if (parameters !== "")
|
|
{
|
|
url += "?" + parameters.toString();
|
|
}
|
|
console.log(url);
|
|
window.location.href = url;
|
|
return false;
|
|
}
|
|
|
|
function tags_on_this_page_add_must(event, tagname)
|
|
{
|
|
add_searchtag(
|
|
ul_musts,
|
|
tagname,
|
|
inputted_musts,
|
|
"search_builder_musts_inputted"
|
|
);
|
|
submit_search();
|
|
return false;
|
|
}
|
|
function tags_on_this_page_add_may(event, tagname)
|
|
{
|
|
add_searchtag(
|
|
ul_mays,
|
|
tagname,
|
|
inputted_mays,
|
|
"search_builder_mays_inputted"
|
|
);
|
|
submit_search();
|
|
return false;
|
|
}
|
|
function tags_on_this_page_add_forbid(event, tagname)
|
|
{
|
|
add_searchtag(
|
|
ul_forbids,
|
|
tagname,
|
|
inputted_forbids,
|
|
"search_builder_forbids_inputted"
|
|
);
|
|
submit_search();
|
|
return false;
|
|
}
|
|
|
|
function tag_input_hook(box, inputted_list, li_class)
|
|
{
|
|
/*
|
|
Assigned to the input boxes for musts, mays, forbids.
|
|
Hitting Enter will add the resovled tag to the search form.
|
|
*/
|
|
if (event.key !== "Enter")
|
|
{return;}
|
|
|
|
add_searchtag_from_box(box, inputted_list, li_class)
|
|
}
|
|
|
|
function tag_input_hook_musts()
|
|
{
|
|
tag_input_hook(this, inputted_musts, "search_builder_musts_inputted");
|
|
}
|
|
function tag_input_hook_mays()
|
|
{
|
|
tag_input_hook(this, inputted_mays, "search_builder_mays_inputted");
|
|
}
|
|
function tag_input_hook_forbids()
|
|
{
|
|
tag_input_hook(this, inputted_forbids, "search_builder_forbids_inputted");
|
|
}
|
|
|
|
const input_musts = document.getElementById("search_builder_musts_input");
|
|
const ul_musts = input_musts.parentElement.parentElement;
|
|
const input_mays = document.getElementById("search_builder_mays_input");
|
|
const ul_mays = input_mays.parentElement.parentElement;
|
|
const input_forbids = document.getElementById("search_builder_forbids_input");
|
|
const ul_forbids = input_forbids.parentElement.parentElement;
|
|
const input_expression = document.getElementById("search_builder_expression_input");
|
|
|
|
/* Prefix the form with the parameters from last search */
|
|
const inputted_musts = [];
|
|
const inputted_mays = [];
|
|
const inputted_forbids = [];
|
|
{% for tagtype in ["musts", "mays", "forbids"] %}
|
|
{% set key="tag_" + tagtype %}
|
|
{% if search_kwargs[key] %}
|
|
{% for tag in search_kwargs[key] %}
|
|
inputted_{{tagtype}}.push("{{tag.name|safe}}");
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
document.getElementById("search_go_button");
|
|
input_musts.addEventListener("keyup", tag_input_hook_musts);
|
|
common.bind_box_to_button(input_musts, search_go_button, true);
|
|
|
|
input_mays.addEventListener("keyup", tag_input_hook_mays);
|
|
common.bind_box_to_button(input_mays, search_go_button, true);
|
|
|
|
input_forbids.addEventListener("keyup", tag_input_hook_forbids);
|
|
common.bind_box_to_button(input_forbids, search_go_button, true);
|
|
|
|
common.bind_box_to_button(input_expression, search_go_button);
|
|
</script>
|
|
</html>
|