diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/DOM_helpers.js | 47 | ||||
| -rw-r--r-- | html/base.css | 4 | ||||
| -rw-r--r-- | html/dialog.js | 41 | ||||
| -rw-r--r-- | html/install.html | 3 | ||||
| -rw-r--r-- | html/install.js | 73 | ||||
| -rw-r--r-- | html/repo_query.html | 148 | ||||
| -rw-r--r-- | html/repo_query.js | 210 | ||||
| -rw-r--r-- | html/settings.html | 4 | ||||
| -rw-r--r-- | html/text_entry_list.js | 7 |
9 files changed, 448 insertions, 89 deletions
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js index 88092e5..9e64956 100644 --- a/html/DOM_helpers.js +++ b/html/DOM_helpers.js @@ -85,3 +85,50 @@ function clone_template(template_id) return result_object; } #EXPORT clone_template + +function Showable(on_show_cb, on_hide_cb) { + this.shown = false; + + /* + * Wrap the requested callback into one that only executes it if showable is + * not shown. + */ + this.when_hidden = cb => { + const wrapped_cb = (...args) => { + if (!this.shown) + return cb(...args); + } + return wrapped_cb; + } + + this.show = () => { + if (this.shown) + return false; + + this.shown = true; + + try { + on_show_cb(); + } catch(e) { + console.error(e); + } + + return true; + } + + this.hide = () => { + if (!this.shown) + return false; + + this.shown = false; + + try { + on_hide_cb(); + } catch(e) { + console.error(e); + } + + return true; + } +} +#EXPORT Showable diff --git a/html/base.css b/html/base.css index df6213a..dd08387 100644 --- a/html/base.css +++ b/html/base.css @@ -88,11 +88,11 @@ body { --line-height: 0.4em; } -div.bottom_line { +div.top_line { height: var(--line-height); background: linear-gradient(#555, transparent); } -div.top_line { +div.bottom_line { height: var(--line-height); background: linear-gradient(transparent, #555); } diff --git a/html/dialog.js b/html/dialog.js index a4e275f..fbea657 100644 --- a/html/dialog.js +++ b/html/dialog.js @@ -41,17 +41,14 @@ * proprietary program, I am not going to enforce this in court. */ -#FROM html/DOM_helpers.js IMPORT clone_template +#FROM html/DOM_helpers.js IMPORT clone_template, Showable function make(on_dialog_show, on_dialog_hide) { const dialog_context = clone_template("dialog"); - Object.assign(dialog_context, { - on_dialog_show, - on_dialog_hide, - shown: false, - queue: [], - }); + dialog_context.queue = []; + + Showable.call(dialog_context, on_dialog_show, on_dialog_hide); for (const [id, val] of [["yes", true], ["no", false], ["ok", undefined]]) { const but = dialog_context[`${id}_but`]; @@ -74,12 +71,7 @@ function close_dialog(dialog_context, event) if (dialog_context.queue.length > 0) { process_queue_item(dialog_context); } else { - dialog_context.shown = false; - try { - dialog_context.on_dialog_hide(); - } catch(e) { - console.error(e); - } + dialog_context.hide(); } resolve(event ? event.target.haketilo_dialog_result : undefined); @@ -104,15 +96,8 @@ async function show_dialog(dialog_context, shown_buts_id, msg) const result_prom = new Promise(cb => resolve = cb); dialog_context.queue.push([shown_buts_id, msg, resolve]); - if (!dialog_context.shown) { + if (dialog_context.show()) process_queue_item(dialog_context); - dialog_context.shown = true; - try { - dialog_context.on_dialog_show(); - } catch(e) { - console.error(e); - } - } return await result_prom; } @@ -129,17 +114,3 @@ const ask = (ctx, ...msg) => show_dialog(ctx, "ask_buts", msg); const loader = (ctx, ...msg) => show_dialog(ctx, null, msg); #EXPORT loader - -/* - * Wrapper the requested callback into one that only executes it if dialog is - * not shown. - */ -function when_hidden(ctx, cb) -{ - function wrapped_cb(...args) { - if (!ctx.shown) - return cb(...args); - } - return wrapped_cb; -} -#EXPORT when_hidden diff --git a/html/install.html b/html/install.html index b8d0927..0146a8d 100644 --- a/html/install.html +++ b/html/install.html @@ -67,7 +67,7 @@ } .install_bottom_buttons { - margin: 1em auto; + margin: 1em; text-align: center; } </style> @@ -95,6 +95,7 @@ </div> </div> </div> + <li id="install_list_entry" data-template="main_li" class="install_entry_li"> <div class="install_item_info"> diff --git a/html/install.js b/html/install.js index dbc490d..e972924 100644 --- a/html/install.js +++ b/html/install.js @@ -46,8 +46,9 @@ #IMPORT html/item_preview.js AS ip #FROM common/browser.js IMPORT browser -#FROM html/DOM_helpers.js IMPORT clone_template -#FROM common/entities.js IMPORT item_id_string, version_string, get_files +#FROM html/DOM_helpers.js IMPORT clone_template, Showable +#FROM common/entities.js IMPORT item_id_string, version_string, get_files, \ + is_valid_version #FROM common/misc.js IMPORT sha256_async AS sha256 const coll = new Intl.Collator(); @@ -78,7 +79,7 @@ function ItemEntry(install_view, item) { } let preview_cb = () => install_view.preview_item(item.def); - preview_cb = dialog.when_hidden(install_view.dialog_ctx, preview_cb); + preview_cb = install_view.dialog_ctx.when_hidden(preview_cb); this.details_but.addEventListener("click", preview_cb); } @@ -114,8 +115,9 @@ async function init_work() { } function InstallView(tab_id, on_view_show, on_view_hide) { + Showable.call(this, on_view_show, on_view_hide); + Object.assign(this, clone_template("install_view")); - this.shown = false; const show_container = name => { for (const cid of container_ids) { @@ -154,8 +156,8 @@ function InstallView(tab_id, on_view_show, on_view_hide) { this[container_name].prepend(preview_ctx.main_div); } - const back_cb = dialog.when_hidden(this.dialog_ctx, - () => show_container("install_preview")); + let back_cb = () => show_container("install_preview"); + back_cb = this.dialog_ctx.when_hidden(back_cb); for (const type of ["resource", "mapping"]) this[`${type}_back_but`].addEventListener("click", back_cb); @@ -189,17 +191,18 @@ function InstallView(tab_id, on_view_show, on_view_hide) { "Repository's response is not valid JSON :("); } - if (response.json.api_schema_version > [1]) { - let api_ver = ""; - try { - api_ver = - ` (${version_string(response.json.api_schema_version)})`; - } catch(e) { - console.warn(e); - } + if (!is_valid_version(response.json.api_schema_version)) { + var bad_api_ver = ""; + } else if (response.json.api_schema_version > [1]) { + var bad_api_ver = + ` (${version_string(response.json.api_schema_version)})`; + } else { + var bad_api_ver = false; + } + if (bad_api_ver !== false) { const captype = item_type[0].toUpperCase() + item_type.substring(1); - const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${api_ver}. You might need to update Haketilo.`; + const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`; return work.err(null, msg); } @@ -256,23 +259,16 @@ function InstallView(tab_id, on_view_show, on_view_hide) { return items; } + const show_super = this.show; this.show = async (repo_url, item_type, item_id, item_ver) => { - if (this.shown) + if (!show_super()) return; - this.shown = true; - this.repo_url = repo_url; dialog.loader(this.dialog_ctx, "Fetching data from repository..."); try { - on_view_show(); - } catch(e) { - console.error(e); - } - - try { var items = await compute_deps(item_type, item_id, item_ver); } catch(e) { var dialog_prom = dialog.error(this.dialog_ctx, e); @@ -288,7 +284,7 @@ function InstallView(tab_id, on_view_show, on_view_hide) { await dialog_prom; - hide(); + this.hide(); return; } @@ -419,35 +415,22 @@ function InstallView(tab_id, on_view_show, on_view_hide) { await dialog_prom; - hide(); + this.hide(); } - const hide = () => { - if (!this.shown) + const hide_super = this.hide; + this.hide = () => { + if (!hide_super()) return; - this.shown = false; delete this.item_entries; [...this.to_install_list.children].forEach(n => n.remove()); - - try { - on_view_hide(); - } catch(e) { - console.error(e); - } - } - - this.when_hidden = cb => { - const wrapped_cb = (...args) => { - if (!this.shown) - return cb(...args); - } - return wrapped_cb; } - const hide_cb = dialog.when_hidden(this.dialog_ctx, hide); + const hide_cb = this.dialog_ctx.when_hidden(this.hide); this.cancel_but.addEventListener("click", hide_cb); - const install_cb = dialog.when_hidden(this.dialog_ctx, perform_install); + const install_cb = this.dialog_ctx.when_hidden(perform_install); this.install_but.addEventListener("click", install_cb); } +#EXPORT InstallView diff --git a/html/repo_query.html b/html/repo_query.html new file mode 100644 index 0000000..73b0f00 --- /dev/null +++ b/html/repo_query.html @@ -0,0 +1,148 @@ +#IF !REPO_QUERY_LOADED +#DEFINE REPO_QUERY_LOADED +<!-- + SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + + Show available repositories and allow querying them for resources. + + This file is part of Haketilo. + + Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org> + + File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + I, Wojtek Kosior, thereby promise not to sue for violation of this file's + licenses. Although I request that you do not make use of this code in a + proprietary program, I am not going to enforce this in court. + --> + +<!-- + This is not a standalone page. This file is meant to be imported into other + HTML code. + --> + +#INCLUDE html/install.html + +#LOADCSS html/reset.css +#LOADCSS html/base.css +#LOADCSS html/grid.css +<style> + .repo_query_top_text { + text-align: center; + margin: 0.4em; + } + .repo_queried_url { + text-decoration: underline; + } + + .repo_query_repo_li { + margin: 0; + background-color:#dadada; + } + .repo_query_repo_li > .repo_query_entry { + padding: 0.2em; + } + .repo_query_repo_li > .repo_query_results_list { + background-color: #f0f0f0; + } + + .repo_query_result_li { + margin: 0; + padding: 0.2em; + } + .repo_query_result_li:nth-child(2n) { + background-color:#dadada; + } + + .repo_query_entry { + display: flex; + align-items: center; + } + .repo_query_entry_info { + display: grid; + grid-template-columns: auto; + flex: 1 1 auto; + min-width: 0; + } + .repo_query_entry_info > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .repo_query_entry button { + white-space: nowrap; + } + + .repo_query_mapping_id { + font-size: 80%; + font-style: italic; + } + + .repo_query_bottom_buttons { + margin: 1em; + text-align: center; + } +</style> +<template> + <div id="repo_query" data-template="main_div" + class="grid_1 repo_query_main_div"> + <div data-template="repos_list_container"> + <div class="repo_query_top_text"> + Browsing custom resources for + <span data-template="url_span" class="repo_queried_url"></span>. + </div> + <ul data-template="repos_list"></ul> + <div class="repo_query_bottom_buttons"> + <button data-template="cancel_but">Cancel</button> + </div> + </div> + <div data-template="install_view_container" class="hide"> + <!-- Install view will be dynamically inserted here. --> + </div> + </div> + + <li id="repo_query_single_repo" data-template="main_li" + class="repo_query_repo_li"> + <div class="top_line"></div> + <div class="repo_query_entry"> + <div class="repo_query_entry_info"> + <label data-template="repo_url_label"></label> + </div> + <span class="repo_query_buttons"> + <button data-template="show_results_but"> + Show results + </button> + <button data-template="hide_results_but" class="hide"> + Hide results + </button> + </span> + </div> + <div data-template="list_container" class="hide repo_query_results_list"> + <span data-template="info_span">Querying repository...</span> + <ul data-template="results_list" class="hide"></ul> + </div> + </li> + + <li id="repo_query_single_result" data-template="main_li" + class="repo_query_entry repo_query_result_li"> + <div class="repo_query_entry_info"> + <span data-template="mapping_name"></span> + <span data-template="mapping_id" class="repo_query_mapping_id"></span> + </div> + <span><button data-template="install_but">Install preview</button></span> + </li> +</template> +#ENDIF diff --git a/html/repo_query.js b/html/repo_query.js new file mode 100644 index 0000000..8f33356 --- /dev/null +++ b/html/repo_query.js @@ -0,0 +1,210 @@ +/** + * This file is part of Haketilo. + * + * Function: Show available repositories and allow querying them for resources. + * + * Copyright (C) 2022 Wojtek Kosior + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * As additional permission under GNU GPL version 3 section 7, you + * may distribute forms of that code without the copy of the GNU + * GPL normally required by section 4, provided you include this + * license notice and, in case of non-source distribution, a URL + * through which recipients can access the Corresponding Source. + * If you modify file(s) with this exception, you may extend this + * exception to your version of the file(s), but you are not + * obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + * + * As a special exception to the GPL, any HTML file which merely + * makes function calls to this code, and for that purpose + * includes it by reference shall be deemed a separate work for + * copyright law purposes. If you modify this code, you may extend + * this exception to your version of the code, but you are not + * obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + * + * I, Wojtek Kosior, thereby promise not to sue for violation of this file's + * license. Although I request that you do not make use of this code in a + * proprietary program, I am not going to enforce this in court. + */ + +#IMPORT common/indexeddb.js AS haketilodb + +#FROM common/browser.js IMPORT browser +#FROM html/DOM_helpers.js IMPORT clone_template, Showable +#FROM common/entities.js IMPORT item_id_string, version_string, \ + is_valid_version +#FROM html/install.js IMPORT InstallView + +const coll = new Intl.Collator(); + +function ResultEntry(repo_entry, mapping_ref) { + Object.assign(this, clone_template("repo_query_single_result")); + Object.assign(this, {repo_entry, mapping_ref}); + + this.mapping_name.innerText = mapping_ref.long_name; + this.mapping_id.innerText = item_id_string(mapping_ref); + + const iv = repo_entry.query_view.install_view; + + function start_install() { + iv.show(repo_entry.repo_url, "mapping", + mapping_ref.identifier, mapping_ref.version); + } + + const cb = repo_entry.query_view.install_view.when_hidden(start_install); + this.install_but.addEventListener("click", cb); +} + +function RepoEntry(query_view, repo_url) { + Object.assign(this, clone_template("repo_query_single_repo")); + Object.assign(this, {query_view, repo_url}); + this.results_shown_before = false; + + this.repo_url_label.innerText = repo_url; + + const query_results = async () => { + const msg = [ + "repo_query", + `${repo_url}query?url=${encodeURIComponent(query_view.url)}` + ]; + const response = await browser.tabs.sendMessage(query_view.tab_id, msg); + + if ("error" in response) + throw "Failure to communicate with repository :("; + + if (!response.ok) + throw `Repository sent HTTP code ${response.status} :(`; + if ("error_json" in response) + throw "Repository's response is not valid JSON :("; + + if (!is_valid_version(response.json.api_schema_version)) { + var bad_api_ver = ""; + } else if (response.json.api_schema_version > [1]) { + var bad_api_ver = + ` (${version_string(response.json.api_schema_version)})`; + } else { + var bad_api_ver = false; + } + + if (bad_api_ver !== false) + throw `Results were served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`; + + /* TODO: here we should perform JSON schema validation! */ + + return response.json.mappings; + } + + const populate_results = async () => { + this.results_shown_before = true; + + try { + var results = await query_results(); + } catch(e) { + this.info_span.innerText = e; + return; + } + + this.info_span.remove(); + this.results_list.classList.remove("hide"); + + this.result_entries = results.map(ref => new ResultEntry(this, ref)); + + const to_append = this.result_entries.length > 0 ? + this.result_entries.map(re => re.main_li) : + ["No results :("]; + + this.results_list.append(...to_append); + } + + let show_results = () => { + if (!query_view.shown) + return; + + if (!this.results_shown_before) + populate_results(); + + this.list_container.classList.remove("hide"); + this.hide_results_but.classList.remove("hide"); + this.show_results_but.classList.add("hide"); + } + show_results = query_view.install_view.when_hidden(show_results); + + let hide_results = () => { + if (!query_view.shown) + return; + + this.list_container.classList.add("hide"); + this.hide_results_but.classList.add("hide"); + this.show_results_but.classList.remove("hide"); + } + hide_results = query_view.install_view.when_hidden(hide_results); + + this.show_results_but.addEventListener("click", show_results); + this.hide_results_but.addEventListener("click", hide_results); +} + +const container_ids = ["repos_list_container", "install_view_container"]; + +function RepoQueryView(tab_id, on_view_show, on_view_hide) { + Showable.call(this, on_view_show, on_view_hide); + + Object.assign(this, clone_template("repo_query")); + this.tab_id = tab_id; + + const show_container = name => { + for (const cid of container_ids) { + if (cid !== name) + this[cid].classList.add("hide"); + } + this[name].classList.remove("hide"); + } + + this.install_view = new InstallView( + tab_id, + () => show_container("install_view_container"), + () => show_container("repos_list_container") + ); + this.install_view_container.prepend(this.install_view.main_div); + + const show_super = this.show; + this.show = async url => { + if (!show_super()) + return; + + this.url = url; + this.url_span.innerText = url; + + [...this.repos_list.children].forEach(c => c.remove()); + + const repo_urls = await haketilodb.get_repos(); + repo_urls.sort((a, b) => coll.compare(a, b)); + this.repo_entries = repo_urls.map(ru => new RepoEntry(this, ru)); + + if (repo_urls.length === 0) { + const info_li = document.createElement("li"); + info_li.innerText = "You have no repositories configured :("; + this.repos_list.append(info_li); + return; + } + + this.repos_list.append(...this.repo_entries.map(re => re.main_li)); + } + + this.cancel_but.addEventListener("click", + this.install_view.when_hidden(this.hide)); +} +#EXPORT RepoQueryView diff --git a/html/settings.html b/html/settings.html index f318e2c..ce19e55 100644 --- a/html/settings.html +++ b/html/settings.html @@ -115,14 +115,14 @@ #INCLUDE html/item_preview.html #INCLUDE html/text_entry_list.html #INCLUDE html/payload_create.html - <ul id="tab_heads" class="has_bottom_line"> + <ul id="tab_heads"> <li id="blocking_head"> Blocking </li> <li id="mappings_head"> Mappings </li> <li id="resources_head"> Resources </li> <li id="new_payload_head" class="active_head"> New payload </li> <li id="repos_head"> Repositories </li> </ul> - <div id="top_menu_line" class="bottom_line"></div> + <div id="top_menu_line" class="top_line"></div> <div id="blocking_tab" class="tab"> <div id="blocking_editable_container" class="grid_2"> <div id="blocking_list_container"> diff --git a/html/text_entry_list.js b/html/text_entry_list.js index 8cef08f..0ea2862 100644 --- a/html/text_entry_list.js +++ b/html/text_entry_list.js @@ -162,11 +162,11 @@ function Entry(text, list, entry_idx) { [this.cancel_but, this.make_noneditable], [this.noneditable_view, this.make_editable], ]) - node.addEventListener("click", dialog.when_hidden(list.dialog_ctx, cb)); + node.addEventListener("click", list.dialog_ctx.when_hidden(cb)); const enter_cb = e => (e.key === 'Enter') && enter_hit(); this.input.addEventListener("keypress", - dialog.when_hidden(list.dialog_ctx, enter_cb)); + list.dialog_ctx.when_hidden(enter_cb)); if (entry_idx > 0) { const prev_text = list.shown_texts[entry_idx - 1]; @@ -227,8 +227,7 @@ function TextEntryList(dialog_ctx, destroy_cb, const add_new = () => new Entry(null, this, 0); - this.new_but.addEventListener("click", - dialog.when_hidden(dialog_ctx, add_new)); + this.new_but.addEventListener("click", dialog_ctx.when_hidden(add_new)); } async function repo_list(dialog_ctx) { |