aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/options.html43
-rw-r--r--html/options_main.js247
2 files changed, 285 insertions, 5 deletions
diff --git a/html/options.html b/html/options.html
index 21ece29..cbbadec 100644
--- a/html/options.html
+++ b/html/options.html
@@ -89,15 +89,20 @@
background-color: white;
width: 50vw;
}
+
+ input[type="radio"]:not(:checked)+.import_window_content {
+ display: none;
+ }
</style>
</head>
<body>
<!-- The invisible div below is for elements that will be cloned. -->
- <div style="display: none;">
+ <div class="hide">
<li id="item_li_template">
<span></span>
<button> Edit </button>
<button> Remove </button>
+ <button> Export </button>
</li>
<li id="bag_component_li_template">
<span></span>
@@ -111,6 +116,11 @@
<input type="radio" style="display: inline;" name="page_components"></input>
<span></span>
</li>
+ <li id="import_li_template">
+ <span></span>
+ <input type="checkbox" style="display: inline;" checked></input>
+ <span></span>
+ </li>
</div>
<input type="radio" name="tabs" id="show_pages" checked></input>
@@ -186,6 +196,8 @@
<button id="add_script_but" type="button"> Add script </button>
</div>
+ <button id="import_but" style="margin-top: 40px;"> Import </button>
+
<div id="chbx_components_window" class="hide popup" position="absolute">
<div class="popup_frame">
<ul id="chbx_components_ul">
@@ -210,6 +222,35 @@
</div>
</div>
+ <div id="import_window" class="hide popup" position="absolute">
+ <div class="popup_frame">
+ <h2> Settings import </h2>
+ <input id="import_loading_radio" type="radio" name="import_window_content"></input>
+ <span class="import_window_content"> Loading... </span>
+ <input id="import_failed_radio" type="radio" name="import_window_content"></input>
+ <div class="import_window_content">
+ <span> Bad file :( </span>
+ <pre id="bad_file_errormsg"></pre>
+ <button id="import_failok_but"> OK </button>
+ </div>
+ <input id="import_selection_radio" type="radio" name="import_window_content"></input>
+ <div class="import_window_content">
+ <button id="check_all_import_but"> Check all </button>
+ <button id="uncheck_all_import_but"> Uncheck all </button>
+ <button id="uncheck_colliding_import_but"> Uncheck existing </button>
+ <ul id="import_ul">
+ </ul>
+ <button id="commit_import_but"> OK </button>
+ <button id="cancel_import_but"> Cancel </button>
+ </div>
+ </div>
+ </div>
+
+ <a id="file_downloader" class="hide"></a>
+ <form id="file_opener_form" style="visibility: hidden;">
+ <input type="file" id="file_opener"></input>
+ </form>
+
<script src="/common/connection_types.js"></script>
<script src="/common/stored_types.js"></script>
<script src="/common/once.js"></script>
diff --git a/html/options_main.js b/html/options_main.js
index 03c5ca8..468b347 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -37,15 +37,22 @@
return document.getElementById(id);
}
+ function nice_name(prefix, name)
+ {
+ return `${name} (${TYPE_NAME[prefix]})`;
+ }
+
const item_li_template = by_id("item_li_template");
const bag_component_li_template = by_id("bag_component_li_template");
const chbx_component_li_template = by_id("chbx_component_li_template");
const radio_component_li_template = by_id("radio_component_li_template");
+ const import_li_template = by_id("import_li_template");
/* Make sure they are later cloned without id. */
item_li_template.removeAttribute("id");
bag_component_li_template.removeAttribute("id");
chbx_component_li_template.removeAttribute("id");
radio_component_li_template.removeAttribute("id");
+ import_li_template.removeAttribute("id");
function item_li_id(prefix, item)
{
@@ -69,6 +76,10 @@
remove_button.addEventListener("click",
() => storage.remove(prefix, item));
+ let export_button = remove_button.nextElementSibling;
+ export_button.addEventListener("click",
+ () => export_item(prefix, item));
+
if (!at_the_end) {
for (let element of ul.ul.children) {
if (element.id < li.id || element.id.startsWith("work_"))
@@ -110,7 +121,7 @@
let chbx = li.firstElementChild;
let span = chbx.nextElementSibling;
- span.textContent = `${name} (${TYPE_NAME[prefix]})`;
+ span.textContent = nice_name(prefix, name);
chbx_components_ul.appendChild(li);
}
@@ -130,7 +141,7 @@
let radio = li.firstElementChild;
let span = radio.nextElementSibling;
- span.textContent = `${name} (${TYPE_NAME[prefix]})`;
+ span.textContent = nice_name(prefix, name);
radio_components_ul.insertBefore(li, radio_component_none_li);
}
@@ -147,7 +158,7 @@
let [prefix, name] = components;
page_payload_span.setAttribute("data-prefix", prefix);
page_payload_span.setAttribute("data-name", name);
- page_payload_span.textContent = `${name} (${TYPE_NAME[prefix]})`;
+ page_payload_span.textContent = nice_name(prefix, name);
}
}
@@ -197,7 +208,7 @@
li.setAttribute("data-prefix", prefix);
li.setAttribute("data-name", name);
let span = li.firstElementChild;
- span.textContent = `${name} (${TYPE_NAME[prefix]})`;
+ span.textContent = nice_name(prefix, name);
let remove_but = span.nextElementSibling;
remove_but.addEventListener("click", () =>
bag_components_ul.removeChild(li));
@@ -319,6 +330,50 @@
ul.edited_item = item;
}
+ const file_downloader = by_id("file_downloader");
+
+ function recursively_export_item(prefix, name, added_items, items_data)
+ {
+ let key = prefix + name;
+
+ if (added_items.has(key))
+ return;
+
+ let data = storage.get(prefix, name);
+ if (data === undefined) {
+ console.log(`${TYPE_NAME[prefix]} '${name}' for export not found`);
+ return;
+ }
+
+ if (prefix !== TYPE_PREFIX.SCRIPT) {
+ let components = prefix === TYPE_PREFIX.BAG ?
+ data : [data.components];
+
+ for (let [comp_prefix, comp_name] of components) {
+ recursively_export_item(comp_prefix, comp_name,
+ added_items, items_data);
+ }
+ }
+
+ items_data.push({[key]: data});
+ added_items.add(key);
+ }
+
+ function export_item(prefix, name)
+ {
+ let added_items = new Set();
+ let items_data = [];
+ recursively_export_item(prefix, name, added_items, items_data);
+ let file = new Blob([JSON.stringify(items_data)],
+ {type: "application/json"});
+ let url = URL.createObjectURL(file);
+ file_downloader.setAttribute("href", url);
+ file_downloader.setAttribute("download", prefix + name + ".json");
+ file_downloader.click();
+ file_downloader.removeAttribute("href");
+ URL.revokeObjectURL(url);
+ }
+
function add_new_item(prefix)
{
cancel_work(prefix);
@@ -452,6 +507,188 @@
}
}
+ const import_window = by_id("import_window");
+ const import_loading_radio = by_id("import_loading_radio");
+ const import_failed_radio = by_id("import_failed_radio");
+ const import_selection_radio = by_id("import_selection_radio");
+ const bad_file_errormsg = by_id("bad_file_errormsg");
+
+ /*
+ * Newer browsers could utilise `text' method of File objects.
+ * Older ones require FileReader.
+ */
+
+ function _read_file(file, resolve, reject)
+ {
+ let reader = new FileReader();
+
+ reader.onload = () => resolve(reader.result);
+ reader.onerror = () => reject(reader.error);
+ reader.readAsText(file);
+ }
+
+ function read_file(file)
+ {
+ return new Promise((resolve, reject) =>
+ _read_file(file, resolve, reject));
+ }
+
+ async function import_from_file(event)
+ {
+ let files = event.target.files;
+ if (files.length < 1)
+ return;
+
+ import_window.classList.remove("hide");
+ import_loading_radio.checked = true;
+
+ let result = undefined;
+
+ try {
+ result = JSON.parse(await read_file(files[0]));
+ } catch(e) {
+ bad_file_errormsg.textContent = "" + e;
+ import_failed_radio.checked = true;
+ return;
+ }
+
+ let errormsg = validate_settings(result);
+ if (errormsg !== false) {
+ bad_file_errormsg.textContent = errormsg;
+ import_failed_radio.checked = true;
+ return;
+ }
+
+ populate_import_list(result);
+ import_selection_radio.checked = true;
+ }
+
+ function validate_settings(settings)
+ {
+ // TODO
+ return false;
+ }
+
+ function import_li_id(prefix, item)
+ {
+ return `ili_${prefix}_${item}`;
+ }
+
+ let import_ul = by_id("import_ul");
+ let import_chbxs_colliding = undefined;
+ let settings_import_map = undefined;
+
+ function populate_import_list(settings)
+ {
+ let old_children = import_ul.children;
+ while (old_children[0] !== undefined)
+ import_ul.removeChild(old_children[0]);
+
+ import_chbxs_colliding = [];
+ settings_import_map = new Map();
+
+ for (let setting of settings) {
+ let [key, value] = Object.entries(setting)[0];
+ let prefix = key[0];
+ let name = key.substring(1);
+ add_import_li(prefix, name);
+ settings_import_map.set(key, value);
+ }
+ }
+
+ function add_import_li(prefix, name)
+ {
+ let li = import_li_template.cloneNode(true);
+ let name_span = li.firstElementChild;
+ let chbx = name_span.nextElementSibling;
+ let warning_span = chbx.nextElementSibling;
+
+ li.setAttribute("data-prefix", prefix);
+ li.setAttribute("data-name", name);
+ li.id = import_li_id(prefix, name);
+ name_span.textContent = nice_name(prefix, name);
+
+ if (storage.get(prefix, name) !== undefined) {
+ import_chbxs_colliding.push(chbx);
+ warning_span.textContent = "(will overwrite existing setting!)";
+ }
+
+ import_ul.appendChild(li);
+ }
+
+ function check_all_imports()
+ {
+ for (let li of import_ul.children)
+ li.firstElementChild.nextElementSibling.checked = true;
+ }
+
+ function uncheck_all_imports()
+ {
+ for (let li of import_ul.children)
+ li.firstElementChild.nextElementSibling.checked = false;
+ }
+
+ function uncheck_colliding_imports()
+ {
+ for (let chbx of import_chbxs_colliding)
+ chbx.checked = false;
+ }
+
+ const file_opener_form = by_id("file_opener_form");
+
+ function hide_import_window()
+ {
+ import_window.classList.add("hide");
+ /* Let GC free some memory */
+ import_chbxs_colliding = undefined;
+ settings_import_map = undefined;
+
+ /*
+ * Reset file <input>. Without this, a second attempt to import the same
+ * file would result in "change" event on happening on <input> element.
+ */
+ file_opener_form.reset();
+ }
+
+ function commit_import()
+ {
+ for (let li of import_ul.children) {
+ let chbx = li.firstElementChild.nextElementSibling;
+
+ if (!chbx.checked)
+ continue;
+
+ let prefix = li.getAttribute("data-prefix");
+ let name = li.getAttribute("data-name");
+ let key = prefix + name;
+ let value = settings_import_map.get(key);
+ storage.set(prefix, name, value);
+ }
+
+ hide_import_window();
+ }
+
+ function initialize_import_facility()
+ {
+ let import_but = by_id("import_but");
+ let file_opener = by_id("file_opener");
+ let import_failok_but = by_id("import_failok_but");
+ let check_all_import_but = by_id("check_all_import_but");
+ let uncheck_all_import_but = by_id("uncheck_all_import_but");
+ let uncheck_existing_import_but = by_id("uncheck_existing_import_but");
+ let commit_import_but = by_id("commit_import_but");
+ let cancel_import_but = by_id("cancel_import_but");
+ import_but.addEventListener("click", () => file_opener.click());
+ file_opener.addEventListener("change", import_from_file);
+ import_failok_but.addEventListener("click", hide_import_window);
+ check_all_import_but.addEventListener("click", check_all_imports);
+ uncheck_all_import_but.addEventListener("click", uncheck_all_imports);
+ uncheck_colliding_import_but
+ .addEventListener("click", uncheck_colliding_imports);
+ commit_import_but.addEventListener("click", commit_import);
+ cancel_import_but.addEventListener("click", hide_import_window);
+ }
+
async function main()
{
storage = await get_storage();
@@ -489,6 +726,8 @@
cancel_components_but.addEventListener("click", cancel_components);
}
+ initialize_import_facility();
+
storage.add_change_listener(handle_change);
}