start using `<template>' tag

author: Wojtek Kosior <koszko@koszko.org> 2021-08-27 18:01:34 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-08-27 18:01:34 +0200
commit: 826b4fd80a288f13841b6f6d56cc38e2f43bbc03 (patch)
tree: 1b28d79d88817b19ca4cf6a229cfee9143531dc3 /html
parent: 53891495d6f6b901da3058b1227d326313d922e9 (diff)
download: browser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.tar.gz
browser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.zip
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");
author	Wojtek Kosior <koszko@koszko.org>	2021-08-27 18:01:34 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-08-27 18:01:34 +0200
commit	826b4fd80a288f13841b6f6d56cc38e2f43bbc03 (patch)
tree	1b28d79d88817b19ca4cf6a229cfee9143531dc3 /html
parent	53891495d6f6b901da3058b1227d326313d922e9 (diff)
download	browser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.tar.gz browser-extension-826b4fd80a288f13841b6f6d56cc38e2f43bbc03.zip