Haketilo

    function nice_name(prefix, name)

    {

	return `${name} (${TYPE_NAME[prefix]})`;

    }

    const import_li_template = by_id("import_li_template");

    import_li_template.removeAttribute("id");

	let export_button = remove_button.nextElementSibling;

	export_button.addEventListener("click",

				       () => export_item(prefix, item));

	span.textContent = nice_name(prefix, name);

	span.textContent = nice_name(prefix, name);

	    page_payload_span.textContent = nice_name(prefix, name);

	    span.textContent = nice_name(prefix, name);

    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);

    }

    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);

    }

	initialize_import_facility();