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