Hachette - page settings

From 792fbe187bdffca4a748e88d66ea29f8936ae5c8 Mon Sep 17 00:00:00 2001 From: Wojtek Kosior Date: Fri, 6 Aug 2021 17:17:45 +0200 Subject: Facilitate installation of scripts from the repository This commit includes: * removal of page_info_server * running of storage client in popup context * extraction of some common CSS to a separate file * extraction of scripts import view to a separate file * addition of a facility to conveniently clone complex structures from DOM (in DOM_helpers.js) * addition of hydrilla repo url to default settings * other minor changes and of course changes related to the actual installation of scripts from the repo --- html/DOM_helpers.js | 41 +++++ html/base.css | 44 ++++++ html/display-panel.html | 123 ++++++++------- html/display-panel.js | 392 +++++++++++++++++++++++++++++++++++++++++------- html/import_frame.html | 27 ++++ html/import_frame.js | 163 ++++++++++++++++++++ html/options.html | 47 +----- html/options_main.js | 160 +++----------------- 8 files changed, 711 insertions(+), 286 deletions(-) create mode 100644 html/DOM_helpers.js create mode 100644 html/base.css create mode 100644 html/import_frame.html create mode 100644 html/import_frame.js (limited to 'html') diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js new file mode 100644 index 0000000..2bff966 --- /dev/null +++ b/html/DOM_helpers.js @@ -0,0 +1,41 @@ +/** + * Hachette operations on DOM elements + * + * Copyright (C) 2021 Wojtek Kosior + * Redistribution terms are gathered in the `copyright' file. + */ + +function by_id(id) +{ + return document.getElementById(id); +} + +function clone_template(template_id) +{ + const clone = document.getElementById(template_id).cloneNode(true); + const result_object = {}; + const to_process = [clone]; + + while (to_process.length > 0) { + const element = to_process.pop(); + const template_key = element.getAttribute("data-template"); + + if (template_key) + result_object[template_key] = element; + + element.removeAttribute("id"); + element.removeAttribute("template_key"); + + for (const child of element.children) + to_process.push(child); + } + + return result_object; +} + +/* + * EXPORTS_START + * EXPORT by_id + * EXPORT clone_template + * EXPORTS_END + */ diff --git a/html/base.css b/html/base.css new file mode 100644 index 0000000..2256833 --- /dev/null +++ b/html/base.css @@ -0,0 +1,44 @@ +/** + * Hachette base styles + * + * Copyright (C) 2021 Wojtek Kosior + * Copyright (C) 2021 Nicholas Johnson + * Redistribution terms are gathered in the `copyright' file. + */ + +input[type="checkbox"], input[type="radio"], .hide { + display: none; +} + +.show_next:not(:checked)+* { + display: none; +} + +.show_hide_next2:not(:checked)+* { + display: none; +} + +.show_hide_next2:checked+*+* { + display: none; +} + +button, .button { + background-color: #4CAF50; + border: none; + border-radius: 8px; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + padding: 6px 12px; + margin: 2px 0px; +} + +button.slimbutton, .button.slimbutton { + padding: 2px 4px; + margin: 0; +} + +button:hover, .button:hover { + box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); +} diff --git a/html/display-panel.html b/html/display-panel.html index d8d7f5d..1b9c77b 100644 --- a/html/display-panel.html +++ b/html/display-panel.html @@ -7,35 +7,25 @@ Hachette - page settings + @@ -118,11 +98,6 @@ -

- - - -

@@ -243,25 +218,7 @@ diff --git a/html/options_main.js b/html/options_main.js index 6aed8bb..830c860 100644 --- a/html/options_main.js +++ b/html/options_main.js @@ -13,26 +13,23 @@ * IMPORT list_prefixes * IMPORT nice_name * IMPORT parse_json_with_schema + * IMPORT by_id + * IMPORT matchers + * IMPORT get_import_frame * IMPORTS_END */ var storage; -function by_id(id) -{ - return document.getElementById(id); -} const item_li_template = by_id("item_li_template"); const bag_component_li_template = by_id("bag_component_li_template"); const chbx_component_li_template = by_id("chbx_component_li_template"); const radio_component_li_template = by_id("radio_component_li_template"); -const import_li_template = by_id("import_li_template"); /* Make sure they are later cloned without id. */ item_li_template.removeAttribute("id"); bag_component_li_template.removeAttribute("id"); chbx_component_li_template.removeAttribute("id"); radio_component_li_template.removeAttribute("id"); -import_li_template.removeAttribute("id"); function item_li_id(prefix, item) { @@ -224,7 +221,6 @@ function reset_work_bag_li(ul, item, components) ul.work_li.insertBefore(bag_components_ul, old_components_ul); ul.work_li.removeChild(old_components_ul); - console.log("bag components", components); add_bag_components(components); } @@ -519,12 +515,6 @@ const ul_by_prefix = { } } -const import_window = by_id("import_window"); -const import_loading_radio = by_id("import_loading_radio"); -const import_failed_radio = by_id("import_failed_radio"); -const import_selection_radio = by_id("import_selection_radio"); -const bad_file_errormsg = by_id("bad_file_errormsg"); - /* * Newer browsers could utilise `text' method of File objects. * Older ones require FileReader. @@ -545,31 +535,30 @@ function read_file(file) _read_file(file, resolve, reject)); } -const url_regex = /^[a-z0-9]+:\/\/[^/]+\.[^/]{2}(\/[^?#]*)?$/; -const sha256_regex = /^[0-9a-f]{64}$/; -const component_schema = [ - new RegExp(`^[${TYPE_PREFIX.SCRIPT}${TYPE_PREFIX.BAG}]$`), - /.+/ -]; +const url_regex = /^[a-z0-9]+:\/\/[^/]+\.[^/]{2,}(\/[^?#]*)?$/; +const empty_regex = /^$/; const settings_schema = [ [{}, "matchentry", "minentries", 1, new RegExp(`^${TYPE_PREFIX.SCRIPT}`), { /* script data */ - "url": ["optional", url_regex], - "sha256": ["optional", sha256_regex], + "url": ["optional", url_regex, "or", empty_regex], + "sha256": ["optional", matchers.sha256, "or", empty_regex], "text": ["optional", "string"] }, new RegExp(`^${TYPE_PREFIX.BAG}`), [ "optional", - [component_schema, "repeat"], + [matchers.component, "repeat"], "default", undefined ], new RegExp(`^${TYPE_PREFIX.PAGE}`), { /* page data */ - "components": ["optional", component_schema] + "components": ["optional", matchers.component] }], "repeat" -] +]; + +const import_window = by_id("import_window"); +let import_frame; async function import_from_file(event) { @@ -578,86 +567,17 @@ async function import_from_file(event) return; import_window.classList.remove("hide"); - import_loading_radio.checked = true; - - let result = undefined; + import_frame.show_loading(); try { - result = parse_json_with_schema(settings_schema, - await read_file(files[0])); + const file = await read_file(files[0]); + var result = parse_json_with_schema(settings_schema, file); } catch(e) { - bad_file_errormsg.textContent = "" + e; - import_failed_radio.checked = true; + import_frame.show_error("Bad file :(", "" + e); return; } - populate_import_list(result); - import_selection_radio.checked = true; -} - -function import_li_id(prefix, item) -{ - return `ili_${prefix}_${item}`; -} - -let import_ul = by_id("import_ul"); -let import_chbxs_colliding = undefined; -let settings_import_map = undefined; - -function populate_import_list(settings) -{ - let old_children = import_ul.children; - while (old_children[0] !== undefined) - import_ul.removeChild(old_children[0]); - - import_chbxs_colliding = []; - settings_import_map = new Map(); - - for (let setting of settings) { - let [key, value] = Object.entries(setting)[0]; - let prefix = key[0]; - let name = key.substring(1); - add_import_li(prefix, name); - settings_import_map.set(key, value); - } -} - -function add_import_li(prefix, name) -{ - let li = import_li_template.cloneNode(true); - let name_span = li.firstElementChild; - let chbx = name_span.nextElementSibling; - let warning_span = chbx.nextElementSibling; - - li.setAttribute("data-prefix", prefix); - li.setAttribute("data-name", name); - li.id = import_li_id(prefix, name); - name_span.textContent = nice_name(prefix, name); - - if (storage.get(prefix, name) !== undefined) { - import_chbxs_colliding.push(chbx); - warning_span.textContent = "(will overwrite existing setting!)"; - } - - import_ul.appendChild(li); -} - -function check_all_imports() -{ - for (let li of import_ul.children) - li.firstElementChild.nextElementSibling.checked = true; -} - -function uncheck_all_imports() -{ - for (let li of import_ul.children) - li.firstElementChild.nextElementSibling.checked = false; -} - -function uncheck_colliding_imports() -{ - for (let chbx of import_chbxs_colliding) - chbx.checked = false; + import_frame.show_selection(result); } const file_opener_form = by_id("file_opener_form"); @@ -665,9 +585,6 @@ const file_opener_form = by_id("file_opener_form"); function hide_import_window() { import_window.classList.add("hide"); - /* Let GC free some memory */ - import_chbxs_colliding = undefined; - settings_import_map = undefined; /* * Reset file . Without this, a second attempt to import the same @@ -676,43 +593,16 @@ function hide_import_window() file_opener_form.reset(); } -function commit_import() -{ - for (let li of import_ul.children) { - let chbx = li.firstElementChild.nextElementSibling; - - if (!chbx.checked) - continue; - - let prefix = li.getAttribute("data-prefix"); - let name = li.getAttribute("data-name"); - let key = prefix + name; - let value = settings_import_map.get(key); - storage.set(prefix, name, value); - } - - hide_import_window(); -} - -function initialize_import_facility() +async function initialize_import_facility() { let import_but = by_id("import_but"); let file_opener = by_id("file_opener"); - let import_failok_but = by_id("import_failok_but"); - let check_all_import_but = by_id("check_all_import_but"); - let uncheck_all_import_but = by_id("uncheck_all_import_but"); - let uncheck_existing_import_but = by_id("uncheck_existing_import_but"); - let commit_import_but = by_id("commit_import_but"); - let cancel_import_but = by_id("cancel_import_but"); + import_but.addEventListener("click", () => file_opener.click()); file_opener.addEventListener("change", import_from_file); - import_failok_but.addEventListener("click", hide_import_window); - check_all_import_but.addEventListener("click", check_all_imports); - uncheck_all_import_but.addEventListener("click", uncheck_all_imports); - uncheck_colliding_import_but - .addEventListener("click", uncheck_colliding_imports); - commit_import_but.addEventListener("click", commit_import); - cancel_import_but.addEventListener("click", hide_import_window); + + import_frame = await get_import_frame(); + import_frame.onclose = hide_import_window; } /* @@ -784,9 +674,9 @@ async function main() jump_to_item(document.URL); - initialize_import_facility(); - storage.add_change_listener(handle_change); + + await initialize_import_facility(); } function handle_change(change) -- cgit v1.2.3

Settings import