Revision 826b4fd8
Added by koszko about 2 years ago
html/DOM_helpers.js | ||
---|---|---|
10 | 10 |
return document.getElementById(id); |
11 | 11 |
} |
12 | 12 |
|
13 |
const known_templates = new Map(); |
|
14 |
|
|
15 |
function get_template(template_id) |
|
16 |
{ |
|
17 |
let template = known_templates.get(template_id) || null; |
|
18 |
if (template) |
|
19 |
return template; |
|
20 |
|
|
21 |
for (const template_node of document.getElementsByTagName("TEMPLATE")) { |
|
22 |
template = template_node.content.getElementById(template_id); |
|
23 |
if (template) |
|
24 |
break; |
|
25 |
} |
|
26 |
|
|
27 |
known_templates.set(template_id, template); |
|
28 |
return template; |
|
29 |
} |
|
30 |
|
|
13 | 31 |
function clone_template(template_id) |
14 | 32 |
{ |
15 |
const clone = document.getElementById(template_id).cloneNode(true);
|
|
33 |
const clone = get_template(template_id).cloneNode(true);
|
|
16 | 34 |
const result_object = {}; |
17 | 35 |
const to_process = [clone]; |
18 | 36 |
|
... | ... | |
36 | 54 |
/* |
37 | 55 |
* EXPORTS_START |
38 | 56 |
* EXPORT by_id |
57 |
* EXPORT get_template |
|
39 | 58 |
* EXPORT clone_template |
40 | 59 |
* EXPORTS_END |
41 | 60 |
*/ |
html/display-panel.html | ||
---|---|---|
35 | 35 |
</style> |
36 | 36 |
</head> |
37 | 37 |
<body> |
38 |
<!-- The invisible div below is for elements that will be cloned. --> |
|
39 |
<div class="hide"> |
|
40 |
<li id="pattern_li_template"> |
|
38 |
<template> |
|
39 |
<li id="pattern_li"> |
|
41 | 40 |
<span></span> |
42 | 41 |
<button>View in settings</button> |
43 | 42 |
</li> |
44 |
<li id="query_match_li_template" class="queried_pattern_match" data-template="li">
|
|
43 |
<li id="query_match_li" class="queried_pattern_match" data-template="li"> |
|
45 | 44 |
<div> |
46 | 45 |
<span>pattern:</span> |
47 | 46 |
<span class="bold" data-template="pattern"></span> |
48 | 47 |
<button data-template="btn">Install</button> |
49 | 48 |
</div> |
50 |
<div id="unrollable_component_template" data-template="unroll_container">
|
|
49 |
<div id="unrollable_component" data-template="unroll_container"> |
|
51 | 50 |
<span data-template="component_label">payload:</span> |
52 | 51 |
<input type="checkbox" class="unroll_chbx" data-template="chbx"></input> |
53 | 52 |
<br data-template="br"/> |
... | ... | |
61 | 60 |
<div data-template="unroll"></div> |
62 | 61 |
</div> |
63 | 62 |
</li> |
64 |
</div>
|
|
63 |
</template>
|
|
65 | 64 |
|
66 | 65 |
<input id="show_install_view_chbx" type="checkbox" class="show_hide_next2"></input> |
67 | 66 |
<div id="install_view"> |
html/display-panel.js | ||
---|---|---|
22 | 22 |
* IMPORT open_in_settings |
23 | 23 |
* IMPORT each_url_pattern |
24 | 24 |
* IMPORT by_id |
25 |
* IMPORT get_template |
|
25 | 26 |
* IMPORT clone_template |
26 | 27 |
* IMPORTS_END |
27 | 28 |
*/ |
... | ... | |
73 | 74 |
} |
74 | 75 |
|
75 | 76 |
const possible_patterns_ul = by_id("possible_patterns"); |
76 |
const pattern_li_template = by_id("pattern_li_template");
|
|
77 |
const pattern_li_template = get_template("pattern_li");
|
|
77 | 78 |
pattern_li_template.removeAttribute("id"); |
78 | 79 |
const known_patterns = new Map(); |
79 | 80 |
|
... | ... | |
487 | 488 |
set_appended(result_item, ul); |
488 | 489 |
|
489 | 490 |
for (const match of result) { |
490 |
const entry_object = clone_template("query_match_li_template");
|
|
491 |
const entry_object = clone_template("query_match_li"); |
|
491 | 492 |
|
492 | 493 |
entry_object.pattern.textContent = match.pattern; |
493 | 494 |
|
html/import_frame.html | ||
---|---|---|
1 |
<div style="display: none;">
|
|
2 |
<li id="import_li_template">
|
|
1 |
<template>
|
|
2 |
<li id="import_li"> |
|
3 | 3 |
<span></span> |
4 | 4 |
<input type="checkbox" style="display: inline;" checked></input> |
5 | 5 |
<span></span> |
6 | 6 |
</li> |
7 |
</div>
|
|
7 |
</template>
|
|
8 | 8 |
<h2> Settings import </h2> |
9 | 9 |
<input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input> |
10 | 10 |
<span> Loading... </span> |
html/import_frame.js | ||
---|---|---|
9 | 9 |
* IMPORTS_START |
10 | 10 |
* IMPORT get_remote_storage |
11 | 11 |
* IMPORT by_id |
12 |
* IMPORT get_template |
|
12 | 13 |
* IMPORT nice_name |
13 | 14 |
* IMPORT make_once |
14 | 15 |
* IMPORTS_END |
... | ... | |
16 | 17 |
|
17 | 18 |
let storage; |
18 | 19 |
|
19 |
const import_li_template = by_id("import_li_template");
|
|
20 |
const import_li_template = get_template("import_li");
|
|
20 | 21 |
import_li_template.removeAttribute("id"); |
21 | 22 |
|
22 | 23 |
function import_li_id(prefix, item) |
html/options.html | ||
---|---|---|
78 | 78 |
</style> |
79 | 79 |
</head> |
80 | 80 |
<body> |
81 |
<!-- The invisible div below is for elements that will be cloned. --> |
|
82 |
<div class="hide"> |
|
83 |
<li id="item_li_template"> |
|
81 |
<template> |
|
82 |
<li id="item_li"> |
|
84 | 83 |
<span></span> |
85 | 84 |
<button> Edit </button> |
86 | 85 |
<button> Remove </button> |
87 | 86 |
<button> Export </button> |
88 | 87 |
</li> |
89 |
<li id="bag_component_li_template">
|
|
88 |
<li id="bag_component_li"> |
|
90 | 89 |
<span></span> |
91 | 90 |
<button> Remove </button> |
92 | 91 |
</li> |
93 |
<li id="chbx_component_li_template">
|
|
92 |
<li id="chbx_component_li"> |
|
94 | 93 |
<input type="checkbox" style="display: inline;"></input> |
95 | 94 |
<span></span> |
96 | 95 |
</li> |
97 |
<li id="radio_component_li_template">
|
|
96 |
<li id="radio_component_li"> |
|
98 | 97 |
<input type="radio" style="display: inline;" name="page_components"></input> |
99 | 98 |
<span></span> |
100 | 99 |
</li> |
101 |
</div>
|
|
100 |
</template>
|
|
102 | 101 |
|
103 | 102 |
<!-- Mind the show_*s ids below - their format is assumed in js code --> |
104 | 103 |
<input type="radio" name="tabs" id="show_repos"></input> |
html/options_main.js | ||
---|---|---|
13 | 13 |
* IMPORT list_prefixes |
14 | 14 |
* IMPORT nice_name |
15 | 15 |
* IMPORT parse_json_with_schema |
16 |
* IMPORT get_template |
|
16 | 17 |
* IMPORT by_id |
17 | 18 |
* IMPORT matchers |
18 | 19 |
* IMPORT get_import_frame |
... | ... | |
21 | 22 |
|
22 | 23 |
var storage; |
23 | 24 |
|
24 |
const item_li_template = by_id("item_li_template");
|
|
25 |
const bag_component_li_template = by_id("bag_component_li_template");
|
|
26 |
const chbx_component_li_template = by_id("chbx_component_li_template");
|
|
27 |
const radio_component_li_template = by_id("radio_component_li_template");
|
|
25 |
const item_li_template = get_template("item_li");
|
|
26 |
const bag_component_li_template = get_template("bag_component_li");
|
|
27 |
const chbx_component_li_template = get_template("chbx_component_li");
|
|
28 |
const radio_component_li_template = get_template("radio_component_li");
|
|
28 | 29 |
/* Make sure they are later cloned without id. */ |
29 | 30 |
item_li_template.removeAttribute("id"); |
30 | 31 |
bag_component_li_template.removeAttribute("id"); |
Also available in: Unified diff
start using `' tag