diff options
Diffstat (limited to 'html/options.html')
| -rw-r--r-- | html/options.html | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/html/options.html b/html/options.html new file mode 100644 index 0000000..921b423 --- /dev/null +++ b/html/options.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"/> + <title>Myext options</title> + <style> + input[type="checkbox"], input[type="radio"], + .hide { + display: none; + } + + /* pages list */ + #page_components_ul { + max-height: 80vh; + overflow-y: auto; + } + #page_components_ul li.dragover_li { + border-top: 2px solid blue; + } + #page_components_ul li { + border-top: 2px solid white; + } + li[draggable=true] * { + pointer-events: none; + } + li[draggable=true] label, + li[draggable=true] button { + pointer-events: auto; + } + + /* tabbed view */ + #show_pages:not(:checked) ~ #pages, + #show_bundles:not(:checked) ~ #bundles, + #show_scripts:not(:checked) ~ #scripts { + display: none; + } + + #show_pages:checked ~ #pages_lbl, + #show_bundles:checked ~ #bundles_lbl, + #show_scripts:checked ~ #scripts_lbl { + border-left: 2px solid green; + border-right: 2px solid green; + } + + body > div { + border-top: 2px solid green; + } + + .tab_head { + display: inline-block; + } + + /* popup window with list of selectable components for adding */ + #select_components_window { + position: fixed; + width: 100vw; + height: 100vh; + left: 0; + top: 0; + background-color: rgba(0,0,0,0.4); + z-index: 1; + overflow: auto; + vertical-align: center; + horizontal-align: center; + } + + #select_components_frame { + background-color: white; + width: 50vw; + } + </style> + </head> + <body> + <!-- The invisible div below is for elements that will be cloned. --> + <div style="display: none;"> + <li id="item_li_template"> + <span></span> + <button> Edit </button> + <button> Remove </button> + </li> + <li id="component_li_template"> + <span></span> + <button> Remove </button> + </li> + <li id="selectable_component_li_template"> + <input type="checkbox" style="display: inline;"></input> + <span></span> + </li> + </div> + + <input type="radio" name="tabs" id="show_pages" checked></input> + <input type="radio" name="tabs" id="show_bundles"></input> + <input type="radio" name="tabs" id="show_scripts"></input> + <label for="show_pages" id="pages_lbl" + class="tab_head"> Pages </label> + <label for="show_bundles" id="bundles_lbl" + class="tab_head"> Bundles </label> + <label for="show_scripts" id="scripts_lbl" + class="tab_head"> Scripts </label> + + <div id="pages"> + <ul id="pages_ul"> + <li id="work_page_li" class="hide"> + <label for="page_url_field">URL: </label> + <input id="page_url_field"></input> + <ul id="page_components_ul"> + <li id="empty_page_component_li" class="hide"></li> + </ul> + <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input> + <label for="page_allow_chbx">Allow native scripts</label> + <button id="page_select_components_but"> + Add scripts + </button> + <br/> + <button id="page_save_but" type="button"> Save </button> + <button id="page_discard_but" type="button"> Cancel </button> + </li> + </ul> + <button id="add_page_but" type="button"> Add page </button> + </div> + + <div id="bundles"> + <ul id="bundles_ul"> + <li id="work_bundle_li" class="hide"> + <label for="bundle_name_field"> Name: </label> + <input id="bundle_name_field"></input> + <ul id="bundle_components_ul"> + <li id="empty_bundle_component_li" class="hide"></li> + </ul> + <button id="bundle_select_components_but"> + Add scripts + </button> + <br/> + <button id="bundle_save_but"> Save </button> + <button id="bundle_discard_but"> Cancel </button> + </li> + </ul> + <button id="add_bundle_but" type="button"> Add bundle </button> + </div> + + <div id="scripts"> + <ul id="scripts_ul"> + <li id="work_script_li" class="hide"> + <label for="script_name_field"> Name: </label> + <input id="script_name_field"></input> + <br/> + <label for="script_url_field"> URL: </label> + <input id="script_url_field"></input> + <br/> + <label for="script_sha256_field"> sha256: </label> + <input id="script_sha256_field"></input> + <br/> + <label for="script_contents_field"> contents: </label> + <textarea id="script_contents_field" rows="20" cols="80"></textarea> + <br/> + <button id="script_save_but"> Save </button> + <button id="script_discard_but"> Cancel </button> + </li> + </ul> + <button id="add_script_but" type="button"> Add script </button> + </div> + + <div id="select_components_window" class="hide" position="absolute"> + <div id="select_components_frame"> + <ul id="selectable_components_ul"> + + </ul> + <button id="commit_components_but"> Add </button> + <button id="cancel_components_but"> Cancel </button> + </div> + </div> + + <script src="./options_main.mjs" type="module"></script> + </body> +</html> |