From 544c6df3ab1e331c6b6779b76ad33180a06b0b4d Mon Sep 17 00:00:00 2001 From: Wojtek Kosior Date: Mon, 30 Aug 2021 11:54:47 +0200 Subject: add styling for options page\n\nThis does not include styling for contents of the import popup --- html/options_main.js | 55 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 15 deletions(-) (limited to 'html/options_main.js') diff --git a/html/options_main.js b/html/options_main.js index 825728e..8067fe7 100644 --- a/html/options_main.js +++ b/html/options_main.js @@ -32,6 +32,14 @@ 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"; + list_elem.parentElement.parentElement.classList[op]("always_scrollbar"); +} + function item_li_id(prefix, item) { return `li_${prefix}_${item}`; @@ -66,11 +74,13 @@ function add_li(prefix, item, at_the_end=false) continue; ul.ul.insertBefore(li, element); - return; + break; } } + if (!li.parentElement) + ul.ul.appendChild(li); - ul.ul.appendChild(li); + list_set_scrollbar(ul.ul); } const chbx_components_ul = by_id("chbx_components_ul"); @@ -98,12 +108,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"); @@ -118,12 +129,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. */ @@ -191,6 +203,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) { @@ -199,15 +218,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. */ @@ -219,8 +240,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); } @@ -228,8 +248,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 = []; @@ -285,6 +304,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; } @@ -323,6 +344,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; @@ -380,6 +402,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; @@ -394,7 +417,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; } } @@ -404,7 +427,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; @@ -432,10 +455,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() @@ -443,7 +467,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; @@ -710,6 +734,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); } } -- cgit v1.2.3