aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2021-08-27 18:01:34 +0200
committerWojtek Kosior <koszko@koszko.org>2021-08-27 18:01:34 +0200
commit826b4fd80a288f13841b6f6d56cc38e2f43bbc03 (patch)
tree1b28d79d88817b19ca4cf6a229cfee9143531dc3 /html
parent53891495d6f6b901da3058b1227d326313d922e9 (diff)
downloadbrowser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.tar.gz
browser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.zip
start using `<template>' tag
Diffstat (limited to 'html')
-rw-r--r--html/DOM_helpers.js21
-rw-r--r--html/display-panel.html11
-rw-r--r--html/display-panel.js5
-rw-r--r--html/import_frame.html6
-rw-r--r--html/import_frame.js3
-rw-r--r--html/options.html13
-rw-r--r--html/options_main.js9
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");
generated by cgit