1 files changed, 62 insertions, 20 deletions

diff --git a/html/options_main.js b/html/options_main.js
index 830c860..f8faf9b 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -1,5 +1,7 @@
 /**
- * Hachette HTML options page main script
+ * This file is part of Haketilo.
+ *
+ * Function: Settings page logic.
  *
  * Copyright (C) 2021 Wojtek Kosior
  * Redistribution terms are gathered in the `copyright' file.
@@ -13,24 +15,36 @@
  * IMPORT list_prefixes
  * IMPORT nice_name
  * IMPORT parse_json_with_schema
+ * IMPORT get_template
  * IMPORT by_id
  * IMPORT matchers
  * IMPORT get_import_frame
+ * IMPORT init_default_policy_dialog
  * IMPORTS_END
  */
 
 var storage;
 
-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 item_li_template = get_template("item_li");
+const bag_component_li_template = get_template("bag_component_li");
+const chbx_component_li_template = get_template("chbx_component_li");
+const radio_component_li_template = get_template("radio_component_li");
 /* 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");
 
+function list_set_scrollbar(list_elem)
+{
+    const op = ((list_elem.children.length === 1 &&
+		 list_elem.children[0].classList.contains("hide")) ||
+		list_elem.children.length < 1) ? "remove" : "add";
+    while (!list_elem.classList.contains("table_wrapper"))
+	list_elem = list_elem.parentElement;
+    list_elem.classList[op]("always_scrollbar");
+}
+
 function item_li_id(prefix, item)
 {
     return `li_${prefix}_${item}`;
@@ -65,11 +79,17 @@ function add_li(prefix, item, at_the_end=false)
 		continue;
 
 	    ul.ul.insertBefore(li, element);
-	    return;
+	    break;
 	}
     }
+    if (!li.parentElement) {
+	if (ul.work_li !== ul.ul.lastElementChild)
+	    ul.ul.appendChild(li);
+	else
+	    ul.work_li.before(li);
+    }
 
-    ul.ul.appendChild(li);
+    list_set_scrollbar(ul.ul);
 }
 
 const chbx_components_ul = by_id("chbx_components_ul");
@@ -97,12 +117,13 @@ function add_chbx_li(prefix, name)
     li.setAttribute("data-prefix", prefix);
     li.setAttribute("data-name", name);
 
-    let chbx = li.firstElementChild;
+    let chbx = li.firstElementChild.firstElementChild;
     let span = chbx.nextElementSibling;
 
     span.textContent = nice_name(prefix, name);
 
     chbx_components_ul.appendChild(li);
+    list_set_scrollbar(chbx_components_ul);
 }
 
 var radio_component_none_li = by_id("radio_component_none_li");
@@ -117,12 +138,13 @@ function add_radio_li(prefix, name)
     li.setAttribute("data-prefix", prefix);
     li.setAttribute("data-name", name);
 
-    let radio = li.firstElementChild;
+    let radio = li.firstElementChild.firstElementChild;
     let span = radio.nextElementSibling;
 
     span.textContent = nice_name(prefix, name);
 
-    radio_components_ul.insertBefore(li, radio_component_none_li);
+    radio_component_none_li.before(li);
+    list_set_scrollbar(radio_components_ul);
 }
 
 /* Used to reset edited repo. */
@@ -137,6 +159,7 @@ function work_repo_li_data(ul)
     return [ul.work_name_input.value, {}];
 }
 
+const allow_native_scripts_container = by_id("allow_native_scripts_container");
 const page_payload_span = by_id("page_payload");
 
 function set_page_components(components)
@@ -144,12 +167,14 @@ function set_page_components(components)
     if (components === undefined) {
 	page_payload_span.setAttribute("data-payload", "no");
 	page_payload_span.textContent = "(None)";
+	allow_native_scripts_container.classList.remove("form_disabled");
     } else {
 	page_payload_span.setAttribute("data-payload", "yes");
 	let [prefix, name] = components;
 	page_payload_span.setAttribute("data-prefix", prefix);
 	page_payload_span.setAttribute("data-name", name);
 	page_payload_span.textContent = nice_name(prefix, name);
+	allow_native_scripts_container.classList.add("form_disabled");
     }
 }
 
@@ -190,6 +215,13 @@ function work_page_li_data(ul)
 const empty_bag_component_li = by_id("empty_bag_component_li");
 var bag_components_ul = by_id("bag_components_ul");
 
+function remove_bag_component_entry(entry)
+{
+    const list = entry.parentElement;
+    entry.remove();
+    list_set_scrollbar(list);
+}
+
 /* Used to construct and update components list of edited bag. */
 function add_bag_components(components)
 {
@@ -198,15 +230,17 @@ function add_bag_components(components)
 	let li = bag_component_li_template.cloneNode(true);
 	li.setAttribute("data-prefix", prefix);
 	li.setAttribute("data-name", name);
+
 	let span = li.firstElementChild;
 	span.textContent = nice_name(prefix, name);
 	let remove_but = span.nextElementSibling;
-	remove_but.addEventListener("click", () =>
-				    bag_components_ul.removeChild(li));
+	remove_but.addEventListener("click",
+				    () => remove_bag_component_entry(li));
 	bag_components_ul.appendChild(li);
     }
 
     bag_components_ul.appendChild(empty_bag_component_li);
+    list_set_scrollbar(bag_components_ul);
 }
 
 /* Used to reset edited bag. */
@@ -218,8 +252,7 @@ function reset_work_bag_li(ul, item, components)
     let old_components_ul = bag_components_ul;
     bag_components_ul = old_components_ul.cloneNode(false);
 
-    ul.work_li.insertBefore(bag_components_ul, old_components_ul);
-    ul.work_li.removeChild(old_components_ul);
+    old_components_ul.replaceWith(bag_components_ul);
 
     add_bag_components(components);
 }
@@ -227,8 +260,7 @@ function reset_work_bag_li(ul, item, components)
 /* Used to get edited bag data for saving. */
 function work_bag_li_data(ul)
 {
-    let components_ul = ul.work_name_input.nextElementSibling;
-    let component_li = components_ul.firstElementChild;
+    let component_li = bag_components_ul.firstElementChild;
 
     let components = [];
 
@@ -284,6 +316,8 @@ function cancel_work(prefix)
     }
 
     ul.work_li.classList.add("hide");
+    ul.ul.append(ul.work_li);
+    list_set_scrollbar(ul.ul);
     ul.state = UL_STATE.IDLE;
 }
 
@@ -322,6 +356,7 @@ function edit_item(prefix, item)
     ul.ul.insertBefore(ul.work_li, li);
     ul.ul.removeChild(li);
     ul.work_li.classList.remove("hide");
+    list_set_scrollbar(ul.ul);
 
     ul.state = UL_STATE.EDITING_ENTRY;
     ul.edited_item = item;
@@ -379,6 +414,7 @@ function add_new_item(prefix, name)
     ul.reset_work_li(ul);
     ul.work_li.classList.remove("hide");
     ul.ul.appendChild(ul.work_li);
+    list_set_scrollbar(ul.ul);
 
     if (name !== undefined)
 	ul.work_name_input.value = name;
@@ -393,7 +429,7 @@ function bag_components()
     radio_components_window.classList.add("hide");
 
     for (let li of chbx_components_ul.children) {
-	let chbx = li.firstElementChild;
+	let chbx = li.firstElementChild.firstElementChild;
 	chbx.checked = false;
     }
 }
@@ -403,7 +439,7 @@ function commit_bag_components()
     let selected = [];
 
     for (let li of chbx_components_ul.children) {
-	let chbx = li.firstElementChild;
+	let chbx = li.firstElementChild.firstElementChild;
 	if (!chbx.checked)
 	    continue;
 
@@ -431,10 +467,11 @@ function page_components()
 
     let [prefix, item] = components;
     let li = by_id(radio_li_id(prefix, item));
+
     if (li === null)
 	radio_component_none_input.checked = false;
     else
-	li.firstElementChild.checked = true;
+	li.firstElementChild.firstElementChild.checked = true;
 }
 
 function commit_page_components()
@@ -442,7 +479,7 @@ function commit_page_components()
     let components = null;
 
     for (let li of radio_components_ul.children) {
-	let radio = li.firstElementChild;
+	let radio = li.firstElementChild.firstElementChild;
 	if (!radio.checked)
 	    continue;
 
@@ -603,6 +640,8 @@ async function initialize_import_facility()
 
     import_frame = await get_import_frame();
     import_frame.onclose = hide_import_window;
+    import_frame.style_table("has_bottom_line", "always_scrollbar",
+			     "has_upper_line", "tight_table");
 }
 
 /*
@@ -637,6 +676,8 @@ function jump_to_item(url_with_item)
 
 async function main()
 {
+    init_default_policy_dialog();
+
     storage = await get_remote_storage();
 
     for (let prefix of list_prefixes) {
@@ -709,6 +750,7 @@ function handle_change(change)
     for (let [components_ul, id_creator] of uls_creators) {
 	let li = by_id(id_creator(change.prefix, change.item));
 	components_ul.removeChild(li);
+	list_set_scrollbar(components_ul);
     }
 }