summaryrefslogtreecommitdiff
path: root/html/options.html
diff options
context:
space:
mode:
Diffstat (limited to 'html/options.html')
-rw-r--r--html/options.html175
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>