path: root/html/options_main.js

/**
 * Myext HTML options page main script
 *
 * Copyright (C) 2021 Wojtek Kosior
 *
 * Dual-licensed under:
 *   - 0BSD license
 *   - GPLv3 or (at your option) any later version
 */

"use strict";

(() => {
    const get_storage = window.get_storage;
    const TYPE_PREFIX = window.TYPE_PREFIX;
    const TYPE_NAME = window.TYPE_NAME;
    const list_prefixes = window.list_prefixes;

    var storage;
    function by_id(id)
    {
	return document.getElementById(id);
    }

    const item_li_template = by_id("item_li_template");
    const component_li_template = by_id("component_li_template");
    const selectable_component_li_template =
	  by_id("selectable_component_li_template");
    /* Make sure they are later cloned without id. */
    item_li_template.removeAttribute("id");
    component_li_template.removeAttribute("id");
    selectable_component_li_template.removeAttribute("id");

    function item_li_id(prefix, item)
    {
	return `li_${prefix}_${item}`;
    }

    function add_li(prefix, item, at_the_end=false)
    {
	let ul = ul_by_prefix[prefix];
	let li = item_li_template.cloneNode(true);
	li.id = item_li_id(prefix, item);

	let span = li.firstElementChild;
	span.textContent = item;

	let edit_button = span.nextElementSibling;
	edit_button.addEventListener("click", () => edit_item(prefix, item));

	let remove_button = edit_button.nextElementSibling;
	remove_button.addEventListener("click",
				       () => storage.remove(prefix, item));

	if (!at_the_end) {
	    for (let element of ul.ul.children) {
		if (element.id < li.id || element.id.startsWith("work_"))
		    continue;

		ul.ul.insertBefore(li, element);
		return;
	    }
	}

	ul.ul.appendChild(li);
    }

    const selectable_components_ul = by_id("selectable_components_ul");

    function selectable_li_id(prefix, item)
    {
	return `sli_${prefix}_${item}`;
    }

    function add_selectable(prefix, name)
    {
	if (prefix === TYPE_PREFIX.PAGE)
	    return;

	let li = selectable_component_li_template.cloneNode(true);
	li.id = selectable_li_id(prefix, name);
	li.setAttribute("data-prefix", prefix);
	li.setAttribute("data-name", name);

	let chbx = li.firstElementChild;
	let span = chbx.nextElementSibling;

	span.textContent = `${name} (${TYPE_NAME[prefix]})`;

	selectable_components_ul.appendChild(li);
    }

    /*
     * Used to construct and update components list of edited
     * bundle as well as edited page.
     */
    function add_components(ul, components)
    {
	let components_ul = ul.work_name_input.nextElementSibling;

	for (let component of components) {
	    let [prefix, name] = component;
	    let li = component_li_template.cloneNode(true);
	    li.setAttribute("data-prefix", prefix);
	    li.setAttribute("data-name", name);
	    let span = li.firstElementChild;
	    span.textContent = `${name} (${TYPE_NAME[prefix]})`;
	    let remove_but = span.nextElementSibling;
	    remove_but.addEventListener("click", () =>
					components_ul.removeChild(li));
	    components_ul.appendChild(li);
	}

	components_ul.appendChild(ul.work_empty_component_li);
    }

    /* Used to reset edited bundle as well as edited page. */
    function generic_reset_work_li(ul, item, components)
    {
	if (item === undefined) {
	    item = "";
	    components = [];
	};

	ul.work_name_input.value = item;
	let old_components_ul = ul.work_name_input.nextElementSibling;
	let components_ul = old_components_ul.cloneNode(false);

	ul.work_li.insertBefore(components_ul, old_components_ul);
	ul.work_li.removeChild(old_components_ul);

	add_components(ul, components);
    }

    function reset_work_page_li(ul, item, settings)
    {
	ul.work_page_allow_chbx.checked = !!settings?.allow;
	generic_reset_work_li(ul, item, settings?.components);
    }

    /* Used to get edited bundle as well as edited page data for saving. */
    function generic_work_li_data(ul)
    {
	let components_ul = ul.work_name_input.nextElementSibling;
	let component_li = components_ul.firstElementChild;

	let components = [];

	/* Last list element is empty li with id set. */
	while (component_li.id === '') {
	    components.push([component_li.getAttribute("data-prefix"),
			     component_li.getAttribute("data-name")]);
	    component_li = component_li.nextElementSibling;
	}

	return [ul.work_name_input.value, components];
    }

    function work_page_li_data(ul)
    {
	let [url, components] = generic_work_li_data(ul);
	let settings = {components, allow : !!ul.work_page_allow_chbx.checked};

	return [url, settings];
    }

    const script_url_input = by_id("script_url_field");
    const script_sha256_input = by_id("script_sha256_field");
    const script_contents_field = by_id("script_contents_field");

    function maybe_string(maybe_defined)
    {
	return maybe_defined === undefined ? "" : maybe_defined + "";
    }

    function reset_work_script_li(ul, name, data)
    {
	ul.work_name_input.value = maybe_string(name);
	script_url_input.value = maybe_string(data?.url);
	script_sha256_input.value = maybe_string(data?.hash);
	script_contents_field.value = maybe_string(data?.text);
    }

    function work_script_li_data(ul)
    {
	return [ul.work_name_input.value, {
	    url : script_url_input.value,
	    hash : script_sha256_input.value,
	    text : script_contents_field.value
	}];
    }

    function cancel_work(prefix)
    {
	let ul = ul_by_prefix[prefix];

	if (ul.state === UL_STATE.IDLE)
	    return;

	if (ul.state === UL_STATE.EDITING_ENTRY) {
	    add_li(prefix, ul.edited_item);
	}

	ul.work_li.classList.add("hide");
	ul.state = UL_STATE.IDLE;
    }

    function save_work(prefix)
    {
	let ul = ul_by_prefix[prefix];

	if (ul.state === UL_STATE.IDLE)
	    return;

	let [item, data] = ul.get_work_li_data(ul);

	if (prefix == TYPE_PREFIX.PAGE)

	    /* Here we fire promises and return without waiting. */

	    if (ul.state === UL_STATE.EDITING_ENTRY)
		storage.replace(prefix, ul.edited_item, item, data);

	if (ul.state === UL_STATE.ADDING_ENTRY)
	    storage.set(prefix, item, data);

	cancel_work(prefix);
    }

    function edit_item(prefix, item)
    {
	cancel_work(prefix);

	let ul = ul_by_prefix[prefix];
	let li = by_id(item_li_id(prefix, item));
	ul.reset_work_li(ul, item, storage.get(prefix, item));
	ul.ul.insertBefore(ul.work_li, li);
	ul.ul.removeChild(li);
	ul.work_li.classList.remove("hide");

	ul.state = UL_STATE.EDITING_ENTRY;
	ul.edited_item = item;
    }

    function add_new_item(prefix)
    {
	cancel_work(prefix);

	let ul = ul_by_prefix[prefix];
	ul.reset_work_li(ul);
	ul.work_li.classList.remove("hide");
	ul.ul.appendChild(ul.work_li);

	ul.state = UL_STATE.ADDING_ENTRY;
    }

    const select_components_window = by_id("select_components_window");
    var select_prefix;

    function select_components(prefix)
    {
	select_prefix = prefix;
	select_components_window.classList.remove("hide");

	for (let li of selectable_components_ul.children) {
	    let chbx = li.firstElementChild;
	    chbx.checked = false;
	}
    }

    function commit_components()
    {
	let selected = [];

	for (let li of selectable_components_ul.children) {
	    let chbx = li.firstElementChild;
	    if (!chbx.checked)
		continue;

	    selected.push([li.getAttribute("data-prefix"),
			   li.getAttribute("data-name")]);
	}

	add_components(ul_by_prefix[select_prefix], selected);
	cancel_components();
    }

    function cancel_components()
    {
	select_components_window.classList.add("hide");
    }

    const UL_STATE = {
	EDITING_ENTRY : 0,
	ADDING_ENTRY : 1,
	IDLE : 2
    };

    const ul_by_prefix = {
	[TYPE_PREFIX.PAGE] : {
	    ul : by_id("pages_ul"),
	    work_li : by_id("work_page_li"),
	    work_name_input : by_id("page_url_field"),
	    work_empty_component_li : by_id("empty_page_component_li"),
	    work_page_allow_chbx : by_id("page_allow_chbx"),
	    reset_work_li : reset_work_page_li,
	    get_work_li_data : work_page_li_data,
	    state : UL_STATE.IDLE,
	    edited_item : undefined,
	},
	[TYPE_PREFIX.BUNDLE] : {
	    ul : by_id("bundles_ul"),
	    work_li : by_id("work_bundle_li"),
	    work_name_input : by_id("bundle_name_field"),
	    work_empty_component_li : by_id("empty_bundle_component_li"),
	    reset_work_li : generic_reset_work_li,
	    get_work_li_data : generic_work_li_data,
	    state : UL_STATE.IDLE,
	    edited_item : undefined,
	},
	[TYPE_PREFIX.SCRIPT] : {
	    ul : by_id("scripts_ul"),
	    work_li : by_id("work_script_li"),
	    work_name_input : by_id("script_name_field"),
	    reset_work_li : reset_work_script_li,
	    get_work_li_data : work_script_li_data,
	    state : UL_STATE.IDLE,
	    edited_item : undefined,
	}
    }

    async function main()
    {
	storage = await get_storage();

	for (let prefix of list_prefixes) {
	    for (let item of storage.get_all_names(prefix).sort()) {
		add_li(prefix, item, true);
		add_selectable(prefix, item);
	    }
	}

	storage.add_change_listener(handle_change);

	let commit_components_but = by_id("commit_components_but");
	let cancel_components_but = by_id("cancel_components_but");
	commit_components_but.addEventListener("click", commit_components);
	cancel_components_but.addEventListener("click", cancel_components);

	for (let prefix of list_prefixes) {
	    let add_but = by_id(`add_${TYPE_NAME[prefix]}_but`);
	    let discard_but = by_id(`${TYPE_NAME[prefix]}_discard_but`);
	    let save_but = by_id(`${TYPE_NAME[prefix]}_save_but`);
	    let select_components_but =
		by_id(`${TYPE_NAME[prefix]}_select_components_but`);

	    add_but.addEventListener("click", () => add_new_item(prefix));
	    discard_but.addEventListener("click", () => cancel_work(prefix));
	    save_but.addEventListener("click", () => save_work(prefix));
	    if (select_components_but === null)
		continue;

	    select_components_but.addEventListener(
		"click",
		() => select_components(prefix)
	    );
	}
    }

    function handle_change(change)
    {
	if (change.old_val === undefined) {
	    add_li(change.prefix, change.item);
	    add_selectable(change.prefix, change.item);
	    return;
	}

	if (change.new_val !== undefined)
	    return;

	let ul = ul_by_prefix[change.prefix];
	if (ul.state === UL_STATE.EDITING_ENTRY &&
	    ul.edited_item === change.item) {
	    ul.state = UL_STATE.ADDING_ENTRY;
	    return;
	}

	let li = by_id(item_li_id(change.prefix, change.item));
	ul.ul.removeChild(li);

	if (change.prefix === TYPE_PREFIX.PAGE)
	    return;

	let sli = by_id(selectable_li_id(change.prefix, change.item));
	selectable_components_ul.removeChild(sli);
    }

    main();
})();