From 938f8239c7d34bf22d4fc366d360725c885c170d Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Sat, 17 Oct 2020 17:32:19 -0700 Subject: [PATCH] Rearrange common.js and add headers. --- frontends/etiquette_flask/static/js/common.js | 256 ++++++++++-------- 1 file changed, 143 insertions(+), 113 deletions(-) diff --git a/frontends/etiquette_flask/static/js/common.js b/frontends/etiquette_flask/static/js/common.js index 60aab52..d9fe685 100644 --- a/frontends/etiquette_flask/static/js/common.js +++ b/frontends/etiquette_flask/static/js/common.js @@ -2,6 +2,48 @@ const common = {}; common.INPUT_TYPES = new Set(["INPUT", "TEXTAREA"]); +//////////////////////////////////////////////////////////////////////////////////////////////////// +// UTILS /////////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////////////////////// + +common.create_message_bubble = +function create_message_bubble(message_area, message_positivity, message_text, lifespan) +{ + if (lifespan === undefined) + { + lifespan = 8000; + } + const message = document.createElement("div"); + message.className = "message_bubble " + message_positivity; + const span = document.createElement("span"); + span.innerHTML = message_text; + message.appendChild(span); + message_area.appendChild(message); + setTimeout(function(){message_area.removeChild(message);}, lifespan); +} + +common.is_narrow_mode = +function is_narrow_mode() +{ + return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1"; +} + +common.is_wide_mode = +function is_wide_mode() +{ + return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1"; +} + +common.refresh = +function refresh() +{ + window.location.reload(); +} + +//////////////////////////////////////////////////////////////////////////////////////////////////// +// HTTP //////////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////////////////////// + common._request = function _request(method, url, callback) { @@ -56,6 +98,31 @@ function post(url, data, callback) request.send(data); } +//////////////////////////////////////////////////////////////////////////////////////////////////// +// HTML & DOM ////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////////////////////// + +common.delete_all_children = +function delete_all_children(element) +{ + while (element.firstChild) + { + element.removeChild(element.firstChild); + } +} + +common.html_to_element = +function html_to_element(html) +{ + const template = document.createElement("template"); + template.innerHTML = html.trim(); + return template.content.firstElementChild; +} + +//////////////////////////////////////////////////////////////////////////////////////////////////// +// HOOKS & ADD-ONS ///////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////////////////////// + common.bind_box_to_button = function bind_box_to_button(box, button, ctrl_enter) { @@ -84,102 +151,9 @@ function bind_box_to_button(box, button, ctrl_enter) box.addEventListener("keyup", bound_box_hook); } -common.create_message_bubble = -function create_message_bubble(message_area, message_positivity, message_text, lifespan) -{ - if (lifespan === undefined) - { - lifespan = 8000; - } - const message = document.createElement("div"); - message.className = "message_bubble " + message_positivity; - const span = document.createElement("span"); - span.innerHTML = message_text; - message.appendChild(span); - message_area.appendChild(message); - setTimeout(function(){message_area.removeChild(message);}, lifespan); -} - -common.delete_all_children = -function delete_all_children(element) -{ - while (element.firstChild) - { - element.removeChild(element.firstChild); - } -} - -common.entry_with_history_hook = -function entry_with_history_hook(event) -{ - const box = event.target; - - if (box.entry_history === undefined) - {box.entry_history = [];} - - if (box.entry_history_pos === undefined) - {box.entry_history_pos = null;} - - if (event.key === "Enter") - { - if (box.value === "") - {return;} - box.entry_history.push(box.value); - box.entry_history_pos = null; - } - else if (event.key === "Escape") - { - box.entry_history_pos = null; - box.value = ""; - } - - if (box.entry_history.length == 0) - {return} - - if (box.entry_history_pos !== null && box.value !== box.entry_history[box.entry_history_pos]) - {return;} - - if (event.key === "ArrowUp") - { - if (box.entry_history_pos === null) - {box.entry_history_pos = box.entry_history.length - 1;} - else if (box.entry_history_pos == 0) - {;} - else - {box.entry_history_pos -= 1;} - - if (box.entry_history_pos === null) - {box.value = "";} - else - {box.value = box.entry_history[box.entry_history_pos];} - - setTimeout(function(){box.selectionStart = box.value.length;}, 0); - } - else if (event.key === "ArrowDown") - { - if (box.entry_history_pos === null) - {;} - else if (box.entry_history_pos == box.entry_history.length-1) - {box.entry_history_pos = null;} - else - {box.entry_history_pos += 1;} - - if (box.entry_history_pos === null) - {box.value = "";} - else - {box.value = box.entry_history[box.entry_history_pos];} - - setTimeout(function(){box.selectionStart = box.value.length;}, 0); - } -} - -common.html_to_element = -function html_to_element(html) -{ - const template = document.createElement("template"); - template.innerHTML = html.trim(); - return template.content.firstElementChild; -} +//////////////////////////////////////////////////////////////////////////////////////////////////// +// CSS-JS CLASSES ////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////////////////////// common.init_atag_merge_params = function init_atag_merge_params(a) @@ -242,6 +216,8 @@ function init_all_atag_merge_params() } } +//////////////////////////////////////////////////////////////////////////////////////////////////// + common.init_button_with_confirm = function init_button_with_confirm(button) { @@ -387,6 +363,8 @@ function init_all_button_with_confirm() } } +//////////////////////////////////////////////////////////////////////////////////////////////////// + common.init_enable_on_pageload = function init_enable_on_pageload(element) { @@ -409,6 +387,8 @@ function init_all_enable_on_pageload() } } +//////////////////////////////////////////////////////////////////////////////////////////////////// + common.init_entry_with_history = function init_entry_with_history(input) { @@ -426,6 +406,72 @@ function init_all_entry_with_history() } } +common.entry_with_history_hook = +function entry_with_history_hook(event) +{ + const box = event.target; + + if (box.entry_history === undefined) + {box.entry_history = [];} + + if (box.entry_history_pos === undefined) + {box.entry_history_pos = null;} + + if (event.key === "Enter") + { + if (box.value === "") + {return;} + box.entry_history.push(box.value); + box.entry_history_pos = null; + } + else if (event.key === "Escape") + { + box.entry_history_pos = null; + box.value = ""; + } + + if (box.entry_history.length == 0) + {return} + + if (box.entry_history_pos !== null && box.value !== box.entry_history[box.entry_history_pos]) + {return;} + + if (event.key === "ArrowUp") + { + if (box.entry_history_pos === null) + {box.entry_history_pos = box.entry_history.length - 1;} + else if (box.entry_history_pos == 0) + {;} + else + {box.entry_history_pos -= 1;} + + if (box.entry_history_pos === null) + {box.value = "";} + else + {box.value = box.entry_history[box.entry_history_pos];} + + setTimeout(function(){box.selectionStart = box.value.length;}, 0); + } + else if (event.key === "ArrowDown") + { + if (box.entry_history_pos === null) + {;} + else if (box.entry_history_pos == box.entry_history.length-1) + {box.entry_history_pos = null;} + else + {box.entry_history_pos += 1;} + + if (box.entry_history_pos === null) + {box.value = "";} + else + {box.value = box.entry_history[box.entry_history_pos];} + + setTimeout(function(){box.selectionStart = box.value.length;}, 0); + } +} + +//////////////////////////////////////////////////////////////////////////////////////////////////// + common.init_tabbed_container = function init_tabbed_container(tabbed_container) { @@ -463,18 +509,6 @@ function init_all_tabbed_container() } } -common.is_narrow_mode = -function is_narrow_mode() -{ - return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1"; -} - -common.is_wide_mode = -function is_wide_mode() -{ - return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1"; -} - common.tabbed_container_switcher = function tabbed_container_switcher(event) { @@ -509,11 +543,7 @@ function tabbed_container_switcher(event) } } -common.refresh = -function refresh() -{ - window.location.reload(); -} +//////////////////////////////////////////////////////////////////////////////////////////////////// common.on_pageload = function on_pageload()