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