voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add tag filter box.

Browse source
This commit is contained in:
voussoir 2021-04-18 18:50:31 -07:00
parent 1f3e8d3e7b
commit 0c085f09b9
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
1 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
frontends/etiquette_flask/templates/tags.html
View file

@ -146,12 +146,17 @@ h2, h3
{% else %} {% else %}
<h2>{{tag_count}} Tags</h2> <h2>{{tag_count}} Tags</h2>
{% endif %} {% endif %}
<div id="filter_box_holder">
<input disabled class="enable_on_pageload entry_with_tagname_replacements" type="text" id="search_filter" placeholder="filter"/>
</div>
<ul id="tag_list"> <ul id="tag_list">
{% for (qualified_name, tag) in tags %} {% for (qualified_name, tag) in tags %}
<li> <li>
{{cards.create_tag_card(tag, link="search_musts", innertext="(+)")}} {{cards.create_tag_card(tag, link="search_musts", extra_classes="must_shortcut", innertext="(+)")}}
{{cards.create_tag_card(tag, link="search_forbids", innertext="(x)")}} {{cards.create_tag_card(tag, link="search_forbids", extra_classes="forbid_shortcut", innertext="(x)")}}
{{cards.create_tag_card(tag, link="info", innertext=qualified_name, with_alt_description=True)-}} {{cards.create_tag_card(tag, link="info", extra_classes="main_card", innertext=qualified_name, with_alt_description=True)-}}
{% if specific_tag or '.' in qualified_name -%} {% if specific_tag or '.' in qualified_name -%}
<button <button
class="remove_tag_button red_button button_with_confirm" class="remove_tag_button red_button button_with_confirm"
@ -182,9 +187,9 @@ h2, h3
{% if include_synonyms %} {% if include_synonyms %}
{% for synonym in tag.get_synonyms()|sort %} {% for synonym in tag.get_synonyms()|sort %}
<li> <li>
{{-cards.create_tag_card(tag, link="search_musts", innertext="(+)")}} {{-cards.create_tag_card(tag, link="search_musts", extra_classes="must_shortcut", innertext="(+)")}}
{{cards.create_tag_card(tag, link="search_forbids", innertext="(x)")}} {{cards.create_tag_card(tag, link="search_forbids", extra_classes="forbid_shortcut", innertext="(x)")}}
{{cards.create_tag_card(tag, link='info', innertext=qualified_name + '+' + synonym)-}} {{cards.create_tag_card(tag, link='info', extra_classes="main_card", innertext=qualified_name + '+' + synonym)-}}
<button <button
class="remove_tag_button red_button button_with_confirm" class="remove_tag_button red_button button_with_confirm"
data-holder-class="confirm_holder_remove_synonym" data-holder-class="confirm_holder_remove_synonym"
@ -465,6 +470,48 @@ function tag_action_callback(response)
} }
} }
// FILTER BOX //////////////////////////////////////////////////////////////////////////////////////
var search_filter_wait_for_typing;
var search_filter_hook = function(event)
{
clearTimeout(search_filter_wait_for_typing);
search_filter_wait_for_typing = setTimeout(function()
{
filter_tag_cards(search_filter_box.value);
}, 200);
}
function filter_tag_cards(search_term)
{
search_term = search_term.toLocaleLowerCase();
let tag_list = document.getElementById("tag_list");
tag_list.classList.add("hidden");
Array.from(tag_list.children).forEach(function(tag_li)
{
console.log(tag_li);
let tag_card = tag_li.getElementsByClassName("main_card")[0];
if (tag_card === undefined)
{
// On specific tag pages, the add_child input is also here.
return;
}
if (search_term !== "" && tag_card.innerText.indexOf(search_term) === -1)
{
tag_li.classList.add("hidden");
}
else
{
tag_li.classList.remove("hidden");
}
});
tag_list.classList.remove("hidden");
}
var search_filter_box = document.getElementById("search_filter");
search_filter_box.addEventListener("keyup", search_filter_hook);
{% if specific_tag is not none %} {% if specific_tag is not none %}
rename_ed_on_open = undefined; rename_ed_on_open = undefined;