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

Pull out init_* function innards to separate one-item functions.

master
voussoir 2020-09-12 20:34:59 -07:00
parent 329c6dd27b
commit cc34c4d189
1 changed files with 208 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
frontends/etiquette_flask/static/js/common.js
View File

@ -174,7 +174,7 @@ function html_to_element(html)
} }
common.init_atag_merge_params = common.init_atag_merge_params =
function init_atag_merge_params() function init_atag_merge_params(a)
{ {
/* /*
To create an <a> tag where the ?parameters written on the href are merged To create an <a> tag where the ?parameters written on the href are merged
@ -195,42 +195,47 @@ function init_atag_merge_params()
href: "?orderby=date" href: "?orderby=date"
Result: "?filter=hello&orderby=date" Result: "?filter=hello&orderby=date"
*/ */
function ingest(params, new_params)
{
for (const [key, value] of params) { new_params.set(key, value); }
}
const page_params = Array.from(new URLSearchParams(window.location.search)); const page_params = Array.from(new URLSearchParams(window.location.search));
let as = Array.from(document.getElementsByClassName("merge_params")); let to_merge;
for (const a of as)
{
const a_params = new URLSearchParams(a.search);
const new_params = new URLSearchParams();
if (a.dataset.mergeParams) if (a.dataset.mergeParams)
{ {
let keep = new Set(a.dataset.mergeParams.split(/[\s,]+/)); let keep = new Set(a.dataset.mergeParams.split(/[\s,]+/));
ingest(page_params.filter(key_value => keep.has(key_value[0])), new_params); to_merge = page_params.filter(key_value => keep.has(key_value[0]));
delete a.dataset.mergeParams; delete a.dataset.mergeParams;
} }
else if (a.dataset.mergeParamsExcept) else if (a.dataset.mergeParamsExcept)
{ {
let remove = new Set(a.dataset.mergeParamsExcept.split(/[\s,]+/)); let remove = new Set(a.dataset.mergeParamsExcept.split(/[\s,]+/));
ingest(page_params.filter(key_value => (! remove.has(key_value[0]))), new_params); to_merge = page_params.filter(key_value => (! remove.has(key_value[0])));
delete a.dataset.mergeParamsExcept; delete a.dataset.mergeParamsExcept;
} }
else else
{ {
ingest(page_params, new_params); to_merge = page_params;
} }
ingest(a_params, new_params); to_merge = to_merge.concat(Array.from(new URLSearchParams(a.search)));
const new_params = new URLSearchParams();
for (const [key, value] of to_merge)
{ new_params.set(key, value); }
a.search = new_params.toString(); a.search = new_params.toString();
a.classList.remove("merge_params"); a.classList.remove("merge_params");
}
common.init_all_atag_merge_params =
function init_all_atag_merge_params()
{
const page_params = Array.from(new URLSearchParams(window.location.search));
let as = Array.from(document.getElementsByClassName("merge_params"));
for (const a of as)
{
common.init_atag_merge_params(a);
} }
} }
common.init_button_with_confirm = common.init_button_with_confirm =
function init_button_with_confirm() function init_button_with_confirm(button)
{ {
/* /*
To create a button that requires a second confirmation step, assign it the To create a button that requires a second confirmation step, assign it the
@ -262,9 +267,6 @@ function init_button_with_confirm()
data-holder-class: CSS class for the new span that holds the menu. data-holder-class: CSS class for the new span that holds the menu.
*/ */
let buttons = Array.from(document.getElementsByClassName("button_with_confirm"));
for (const button of buttons)
{
button.classList.remove("button_with_confirm"); button.classList.remove("button_with_confirm");
let holder = document.createElement("span"); let holder = document.createElement("span");
@ -358,42 +360,96 @@ function init_button_with_confirm()
holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden"); holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden");
} }
delete button.dataset.onclick; delete button.dataset.onclick;
}
common.init_all_button_with_confirm =
function init_all_button_with_confirm()
{
let buttons = Array.from(document.getElementsByClassName("button_with_confirm"));
for (const button of buttons)
{
common.init_button_with_confirm(button);
} }
} }
common.init_enable_on_pageload = common.init_enable_on_pageload =
function init_enable_on_pageload() function init_enable_on_pageload(element)
{ {
/* /*
To create an input element which is disabled at first, and is enabled when To create an input element which is disabled at first, and is enabled when
the DOM has completed loading, give it the disabled attribute and the the DOM has completed loading, give it the disabled attribute and the
class "enable_on_pageload". class "enable_on_pageload".
*/ */
element.disabled = false;
element.classList.remove("enable_on_pageload");
}
common.init_all_enable_on_pageload =
function init_all_enable_on_pageload()
{
let elements = Array.from(document.getElementsByClassName("enable_on_pageload")); let elements = Array.from(document.getElementsByClassName("enable_on_pageload"));
for (const element of elements) for (const element of elements)
{ {
element.disabled = false; common.init_enable_on_pageload(element);
element.classList.remove("enable_on_pageload");
} }
} }
common.init_entry_with_history = common.init_entry_with_history =
function init_entry_with_history() function init_entry_with_history(input)
{
input.addEventListener("keydown", common.entry_with_history_hook);
input.classList.remove("entry_with_history");
}
common.init_all_entry_with_history =
function init_all_entry_with_history()
{ {
const inputs = Array.from(document.getElementsByClassName("entry_with_history")); const inputs = Array.from(document.getElementsByClassName("entry_with_history"));
for (const input of inputs) for (const input of inputs)
{ {
input.addEventListener("keydown", common.entry_with_history_hook); common.init_entry_with_history(input);
input.classList.remove("entry_with_history");
} }
} }
common.init_tabbed_container = common.init_tabbed_container =
function init_tabbed_container() function init_tabbed_container(tabbed_container)
{ {
let switch_tab = let button_container = document.createElement("div");
function switch_tab(event) button_container.className = "tab_buttons";
tabbed_container.prepend(button_container);
let tabs = Array.from(tabbed_container.getElementsByClassName("tab"));
for (const tab of tabs)
{ {
tab.classList.add("hidden");
let tab_id = tab.dataset.tabId || tab.dataset.tabTitle;
tab.dataset.tabId = tab_id;
tab.style.borderTopColor = "transparent";
let button = document.createElement("button");
button.className = "tab_button tab_button_inactive";
button.onclick = common.tabbed_container_switcher;
button.innerText = tab.dataset.tabTitle;
button.dataset.tabId = tab_id;
button_container.append(button);
}
tabs[0].classList.remove("hidden");
button_container.firstElementChild.classList.remove("tab_button_inactive");
button_container.firstElementChild.classList.add("tab_button_active");
}
common.init_all_tabbed_container =
function init_all_tabbed_container()
{
let tabbed_containers = Array.from(document.getElementsByClassName("tabbed_container"));
for (const tabbed_container of tabbed_containers)
{
common.init_tabbed_container(tabbed_container);
}
}
common.tabbed_container_switcher =
function tabbed_container_switcher(event)
{
let tab_button = event.target; let tab_button = event.target;
if (tab_button.classList.contains("tab_button_active")) if (tab_button.classList.contains("tab_button_active"))
{ return; } { return; }
@ -421,33 +477,6 @@ function init_tabbed_container()
else else
{ tab.classList.add("hidden"); } { tab.classList.add("hidden"); }
} }
}
let tabbed_containers = Array.from(document.getElementsByClassName("tabbed_container"));
for (const tabbed_container of tabbed_containers)
{
let button_container = document.createElement("div");
button_container.className = "tab_buttons";
tabbed_container.prepend(button_container);
let tabs = Array.from(tabbed_container.getElementsByClassName("tab"));
for (const tab of tabs)
{
tab.classList.add("hidden");
let tab_id = tab.dataset.tabId || tab.dataset.tabTitle;
tab.dataset.tabId = tab_id;
tab.style.borderTopColor = "transparent";
let button = document.createElement("button");
button.className = "tab_button tab_button_inactive";
button.onclick = switch_tab;
button.innerText = tab.dataset.tabTitle;
button.dataset.tabId = tab_id;
button_container.append(button);
}
tabs[0].classList.remove("hidden");
button_container.firstElementChild.classList.remove("tab_button_inactive");
button_container.firstElementChild.classList.add("tab_button_active");
}
} }
common.refresh = common.refresh =
@ -459,10 +488,10 @@ function refresh()
common.on_pageload = common.on_pageload =
function on_pageload() function on_pageload()
{ {
common.init_atag_merge_params(); common.init_all_atag_merge_params();
common.init_button_with_confirm(); common.init_all_button_with_confirm();
common.init_enable_on_pageload(); common.init_all_enable_on_pageload();
common.init_entry_with_history(); common.init_all_entry_with_history();
common.init_tabbed_container(); common.init_all_tabbed_container();
} }
document.addEventListener("DOMContentLoaded", common.on_pageload); document.addEventListener("DOMContentLoaded", common.on_pageload);