diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/DOM_helpers.js | 21 | ||||
| -rw-r--r-- | html/display-panel.html | 11 | ||||
| -rw-r--r-- | html/display-panel.js | 5 | ||||
| -rw-r--r-- | html/import_frame.html | 6 | ||||
| -rw-r--r-- | html/import_frame.js | 3 | ||||
| -rw-r--r-- | html/options.html | 13 | ||||
| -rw-r--r-- | html/options_main.js | 9 |
7 files changed, 44 insertions, 24 deletions
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js index 2bff966..392299f 100644 --- a/html/DOM_helpers.js +++ b/html/DOM_helpers.js @@ -10,9 +10,27 @@ function by_id(id) return document.getElementById(id); } +const known_templates = new Map(); + +function get_template(template_id) +{ + let template = known_templates.get(template_id) || null; + if (template) + return template; + + for (const template_node of document.getElementsByTagName("TEMPLATE")) { + template = template_node.content.getElementById(template_id); + if (template) + break; + } + + known_templates.set(template_id, template); + return template; +} + function clone_template(template_id) { - const clone = document.getElementById(template_id).cloneNode(true); + const clone = get_template(template_id).cloneNode(true); const result_object = {}; const to_process = [clone]; @@ -36,6 +54,7 @@ function clone_template(template_id) /* * EXPORTS_START * EXPORT by_id + * EXPORT get_template * EXPORT clone_template * EXPORTS_END */ diff --git a/html/display-panel.html b/html/display-panel.html index 1b9c77b..c5b500d 100644 --- a/html/display-panel.html +++ b/html/display-panel.html @@ -35,19 +35,18 @@ </style> </head> <body> - <!-- The invisible div below is for elements that will be cloned. --> - <div class="hide"> - <li id="pattern_li_template"> + <template> + <li id="pattern_li"> <span></span> <button>View in settings</button> </li> - <li id="query_match_li_template" class="queried_pattern_match" data-template="li"> + <li id="query_match_li" class="queried_pattern_match" data-template="li"> <div> <span>pattern:</span> <span class="bold" data-template="pattern"></span> <button data-template="btn">Install</button> </div> - <div id="unrollable_component_template" data-template="unroll_container"> + <div id="unrollable_component" data-template="unroll_container"> <span data-template="component_label">payload:</span> <input type="checkbox" class="unroll_chbx" data-template="chbx"></input> <br data-template="br"/> @@ -61,7 +60,7 @@ <div data-template="unroll"></div> </div> </li> - </div> + </template> <input id="show_install_view_chbx" type="checkbox" class="show_hide_next2"></input> <div id="install_view"> diff --git a/html/display-panel.js b/html/display-panel.js index bc190ac..54b5578 100644 --- a/html/display-panel.js +++ b/html/display-panel.js @@ -22,6 +22,7 @@ * IMPORT open_in_settings * IMPORT each_url_pattern * IMPORT by_id + * IMPORT get_template * IMPORT clone_template * IMPORTS_END */ @@ -73,7 +74,7 @@ async function show_page_activity_info() } const possible_patterns_ul = by_id("possible_patterns"); -const pattern_li_template = by_id("pattern_li_template"); +const pattern_li_template = get_template("pattern_li"); pattern_li_template.removeAttribute("id"); const known_patterns = new Map(); @@ -487,7 +488,7 @@ function show_query_successful_result(result_item, repo_url, result) set_appended(result_item, ul); for (const match of result) { - const entry_object = clone_template("query_match_li_template"); + const entry_object = clone_template("query_match_li"); entry_object.pattern.textContent = match.pattern; diff --git a/html/import_frame.html b/html/import_frame.html index c86c3de..0511e6c 100644 --- a/html/import_frame.html +++ b/html/import_frame.html @@ -1,10 +1,10 @@ -<div style="display: none;"> - <li id="import_li_template"> +<template> + <li id="import_li"> <span></span> <input type="checkbox" style="display: inline;" checked></input> <span></span> </li> -</div> +</template> <h2> Settings import </h2> <input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input> <span> Loading... </span> diff --git a/html/import_frame.js b/html/import_frame.js index 4075433..ab39702 100644 --- a/html/import_frame.js +++ b/html/import_frame.js @@ -9,6 +9,7 @@ * IMPORTS_START * IMPORT get_remote_storage * IMPORT by_id + * IMPORT get_template * IMPORT nice_name * IMPORT make_once * IMPORTS_END @@ -16,7 +17,7 @@ let storage; -const import_li_template = by_id("import_li_template"); +const import_li_template = get_template("import_li"); import_li_template.removeAttribute("id"); function import_li_id(prefix, item) diff --git a/html/options.html b/html/options.html index 2246f9a..81ab002 100644 --- a/html/options.html +++ b/html/options.html @@ -78,27 +78,26 @@ </style> </head> <body> - <!-- The invisible div below is for elements that will be cloned. --> - <div class="hide"> - <li id="item_li_template"> + <template> + <li id="item_li"> <span></span> <button> Edit </button> <button> Remove </button> <button> Export </button> </li> - <li id="bag_component_li_template"> + <li id="bag_component_li"> <span></span> <button> Remove </button> </li> - <li id="chbx_component_li_template"> + <li id="chbx_component_li"> <input type="checkbox" style="display: inline;"></input> <span></span> </li> - <li id="radio_component_li_template"> + <li id="radio_component_li"> <input type="radio" style="display: inline;" name="page_components"></input> <span></span> </li> - </div> + </template> <!-- Mind the show_*s ids below - their format is assumed in js code --> <input type="radio" name="tabs" id="show_repos"></input> diff --git a/html/options_main.js b/html/options_main.js index 830c860..825728e 100644 --- a/html/options_main.js +++ b/html/options_main.js @@ -13,6 +13,7 @@ * IMPORT list_prefixes * IMPORT nice_name * IMPORT parse_json_with_schema + * IMPORT get_template * IMPORT by_id * IMPORT matchers * IMPORT get_import_frame @@ -21,10 +22,10 @@ var storage; -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 item_li_template = get_template("item_li"); +const bag_component_li_template = get_template("bag_component_li"); +const chbx_component_li_template = get_template("chbx_component_li"); +const radio_component_li_template = get_template("radio_component_li"); /* Make sure they are later cloned without id. */ item_li_template.removeAttribute("id"); bag_component_li_template.removeAttribute("id"); |