From 9d23ad11500f938ab7174593bd10aff8b3cd87a5 Mon Sep 17 00:00:00 2001 From: buzz-lightsnack-2007 <73412182+buzz-lightsnack-2007@users.noreply.github.com> Date: Tue, 2 Apr 2024 19:12:13 +0800 Subject: [PATCH] fix sidebar --- gui/scripts/windowman.JS | 725 ++++++++++++++++++++++----------------- 1 file changed, 409 insertions(+), 316 deletions(-) diff --git a/gui/scripts/windowman.JS b/gui/scripts/windowman.JS index 895b7d3..9afefe3 100644 --- a/gui/scripts/windowman.JS +++ b/gui/scripts/windowman.JS @@ -7,369 +7,462 @@ import texts from "./read.js"; let DEBUG = false; export default class windowman { - static new(URL, height, width) { - this.window = chrome.windows.create({ - url: chrome.runtime.getURL(URL), - type: "popup", - width: width ? parseInt(width) : 600, - height: height ? parseInt(height) : 600, - }); - } + static new(URL, height, width) { + this.window = chrome.windows.create({ + url: chrome.runtime.getURL(URL), + type: "popup", + width: width ? parseInt(width) : 600, + height: height ? parseInt(height) : 600, + }); + } - // Prepare the window with its metadata. - constructor() { - function headers() { - let LOAD_STATE = true; - let UI = { - "CSS": [ - chrome.runtime.getURL( - "gui/styles/external/fonts/materialdesignicons.min.css", - ), - chrome.runtime.getURL( - "gui/styles/external/materialize/css/materialize.css", - ), - chrome.runtime.getURL("gui/styles/ui.css"), - ], - }; + // Prepare the window with its metadata. + constructor() { + function headers() { + let LOAD_STATE = true; + let UI = { + CSS: [ + chrome.runtime.getURL( + "gui/styles/external/fonts/materialdesignicons.min.css", + ), + chrome.runtime.getURL( + "gui/styles/external/materialize/css/materialize.css", + ), + chrome.runtime.getURL("gui/styles/ui.css"), + ], + }; + for (let index = 0; index < UI[`CSS`].length; index++) { + const source = UI.CSS[index]; - for (let index = 0; index < UI[`CSS`].length; index++) { - const source = UI.CSS[index]; - - (async () => { - const net = await import(chrome.runtime.getURL(`/scripts/net.js`)); - - let resource = false; - try { - resource = await net.download(source, `text`, true); - } catch(err) {}; - - if (resource) { - let metadata_element = document.createElement(`link`); - metadata_element.setAttribute(`rel`, `stylesheet`); - metadata_element.setAttribute(`type`, `text/css`); - metadata_element.setAttribute(`href`, source); - document.querySelector(`head`).appendChild(metadata_element); - } else { - const alerts = (await import(chrome.runtime.getURL(`/gui/scripts/alerts.js`))).default; - const reader = (await import(chrome.runtime.getURL(`/gui/scripts/read.js`))).default; - - alerts.error(-1, reader.localized(`error_msg_fileNotFound`), true, [source]); + (async () => { + const net = await import(chrome.runtime.getURL(`/scripts/net.js`)); - // Stop loading the page when an error has occured; it's not going to work! - if (!DEBUG) {window.close()}; - } - })(); - } - } + let resource = false; + try { + resource = await net.download(source, `text`, true); + } catch (err) {} - // Get the window. - this[`metadata`] = chrome.windows.getCurrent(); + if (resource) { + let metadata_element = document.createElement(`link`); + metadata_element.setAttribute(`rel`, `stylesheet`); + metadata_element.setAttribute(`type`, `text/css`); + metadata_element.setAttribute(`href`, source); + document.querySelector(`head`).appendChild(metadata_element); + } else { + const alerts = ( + await import(chrome.runtime.getURL(`/gui/scripts/alerts.js`)) + ).default; + const reader = ( + await import(chrome.runtime.getURL(`/gui/scripts/read.js`)) + ).default; - /* - window_metadata[`id`] = window.id; - window_metadata[`focused`] = window.focused; - window_metadata[`state`] = window.state; - window_metadata[`type`] = window.type; - window_metadata[`incognito`] = window.incognito; - window_metadata[`alwaysOnTop`] = window.alwaysOnTop; - window_metadata[`sessionId`] = window.sessionId; - window_metadata[`tabs`] = window.tabs;*/ + alerts.error(-1, reader.localized(`error_msg_fileNotFound`), true, [ + source, + ]); - /* Fill in data and events. */ - function appearance() { - // Add missing classes to all elements. - function elements() { - // Add buttons elements. - function buttons() { - document.querySelectorAll(`button`).forEach((button) => { - if (!button.classList.contains(`btn`)) { - button.classList.add(`btn`); - } - if (!button.classList.contains(`waves-effect`)) { - button.classList.add(`waves-effect`); - } - }) - document.querySelectorAll(`a`).forEach((button) => { - if (!button.classList.contains(`waves-effect`)) { - button.classList.add(`waves-effect`); - } - }) + // Stop loading the page when an error has occured; it's not going to work! + if (!DEBUG) { + window.close(); + } + } + })(); + } + } - - } - buttons(); - } + // Get the window. + this[`metadata`] = chrome.windows.getCurrent(); + /* + window_metadata[`id`] = window.id; + window_metadata[`focused`] = window.focused; + window_metadata[`state`] = window.state; + window_metadata[`type`] = window.type; + window_metadata[`incognito`] = window.incognito; + window_metadata[`alwaysOnTop`] = window.alwaysOnTop; + window_metadata[`sessionId`] = window.sessionId; + window_metadata[`tabs`] = window.tabs;*/ - function icons() { - let target_elements = document.querySelectorAll(`[data-icon]`); + /* Fill in data and events. */ + function appearance() { + // Add missing classes to all elements. + function elements() { + // Add buttons elements. + function buttons() { + document.querySelectorAll(`button`).forEach((button) => { + if (!button.classList.contains(`btn`)) { + button.classList.add(`btn`); + } + }); - target_elements.forEach((element) => { - // Get the content before removing it. - let element_data = {}; + [] + .concat( + document.querySelectorAll(`a`) + ? document.querySelectorAll(`a`) + : [], + document.querySelectorAll(`button`) + ? document.querySelectorAll(`button`) + : [], + document.querySelectorAll( + `input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`, + ) + ? document.querySelectorAll( + `input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`, + ) + : [], + ) + .forEach((ELEMENT_TYPE) => { + ELEMENT_TYPE.forEach((button) => { + if ( + button.classList + ? !button.classList.contains(`waves-effect`) + : true + ) { + button.classList.add(`waves-effect`); + } + }); + }); + } + buttons(); + } - // Swap the placement of the existing content. - function swap() { - element_data[`content`] = element.innerHTML; - element.innerHTML = ``; + function icons() { + let target_elements = document.querySelectorAll(`[data-icon]`); - let element_text = document.createElement(`span`); - element_text.innerHTML = element_data[`content`]; + target_elements.forEach((element) => { + // Get the content before removing it. + let element_data = {}; - element.appendChild(element_text); - } + // Swap the placement of the existing content. + function swap() { + element_data[`content`] = element.innerHTML; + element.innerHTML = ``; - // Add the icon. - function iconify() { - // Get the icon. - element_data[`icon`] = element.getAttribute(`data-icon`); + let element_text = document.createElement(`span`); + element_text.innerHTML = element_data[`content`]; - // Get the icon. - let icon_element = document.createElement(`i`); - icon_element.className = `mdi mdi-`.concat(element_data[`icon`]); - element.prepend(icon_element); - } + element.appendChild(element_text); + } - swap(); - iconify(); - }); - } + // Add the icon. + function iconify() { + // Get the icon. + element_data[`icon`] = element.getAttribute(`data-icon`); - function text() { - let text_elements = {}; - text_elements[`content`] = document.querySelectorAll("[for]"); - text_elements[`alt`] = document.querySelectorAll("[alt-for]"); - text_elements[`title`] = document.querySelectorAll("[title-for]"); + // Get the icon. + let icon_element = document.createElement(`i`); + icon_element.className = `mdi mdi-`.concat(element_data[`icon`]); + element.prepend(icon_element); + } - text_elements[`content`].forEach((text_element) => { - let text_inserted = texts.localized( - text_element.getAttribute(`for`), - false, - text_element.hasAttribute(`for-parameter`) - ? text_element.getAttribute(`for-parameter`).split(",") - : null, - ); - if (!text_inserted) { - text_inserted = texts.localized( - `term_`.concat(text_element.getAttribute(`for`)), - ); - } + swap(); + iconify(); + }); + } - if (text_element.tagName.toLowerCase().includes(`input`)) { - text_element.setAttribute(`placholder`, text_inserted); - } else { - text_element.innerText = text_inserted; - } - }); + function text() { + let text_elements = {}; + text_elements[`content`] = document.querySelectorAll("[for]"); + text_elements[`alt`] = document.querySelectorAll("[alt-for]"); + text_elements[`title`] = document.querySelectorAll("[title-for]"); - delete text_elements[`content`]; - Object.keys(text_elements).forEach((key) => { - if (text_elements[key]) { - text_elements[key].forEach((text_element) => { - let text_inserted = texts.localized( - text_element.getAttribute(key.concat(`-for`)), - false, - text_element.hasAttribute(key.concat(`for-parameter`)) - ? text_element - .getAttribute(key.concat(`for-parameter`)) - .split(",") - : null, - ); - if (!text_inserted) { - text_inserted = texts.localized( - `term_`.concat(text_element.getAttribute(key.concat(`-for`))), - ); - } + text_elements[`content`].forEach((text_element) => { + let text_inserted = texts.localized( + text_element.getAttribute(`for`), + false, + text_element.hasAttribute(`for-parameter`) + ? text_element.getAttribute(`for-parameter`).split(",") + : null, + ); + if (!text_inserted) { + text_inserted = texts.localized( + `term_`.concat(text_element.getAttribute(`for`)), + ); + } - text_element.setAttribute(key, text_inserted); - }); - } - }); - } + if (text_element.tagName.toLowerCase().includes(`input`)) { + text_element.setAttribute(`placholder`, text_inserted); + } else { + text_element.innerText = text_inserted; + } + }); - async function storage() { - // Import the module. - const secretariat = await import( - chrome.runtime.getURL("scripts/secretariat.js") - ); + delete text_elements[`content`]; + Object.keys(text_elements).forEach((key) => { + if (text_elements[key]) { + text_elements[key].forEach((text_element) => { + let text_inserted = texts.localized( + text_element.getAttribute(key.concat(`-for`)), + false, + text_element.hasAttribute(key.concat(`for-parameter`)) + ? text_element + .getAttribute(key.concat(`for-parameter`)) + .split(",") + : null, + ); + if (!text_inserted) { + text_inserted = texts.localized( + `term_`.concat(text_element.getAttribute(key.concat(`-for`))), + ); + } - let input_elements = document.querySelectorAll("[data-store]"); + text_element.setAttribute(key, text_inserted); + }); + } + }); + } - input_elements.forEach((input_element) => { - // Gather data about the element. - // Get the corresponding storage data. - let data = {}; - data[`source`] = input_element.getAttribute(`data-store`); - data[`value`] = secretariat.read(data[`source`], -1); + async function storage() { + // Import the module. + const secretariat = await import( + chrome.runtime.getURL("scripts/secretariat.js") + ); - data[`value`].then((value) => { - switch (input_element.getAttribute(`type`).toLowerCase()) { - case `checkbox`: - input_element.checked = value; - break; - case `progress`: - case `range`: - // Ensure that it is a positive floating-point number. - value = !value ? 0 : Math.abs(parseFloat(value)); - if (value > 100) { - value = value / 100; - } + let input_elements = document.querySelectorAll("[data-store]"); - // Set the attribute of the progress bar. - input_element.setAttribute(`value`, value); - input_element.setAttribute(`max`, 1); - break; - default: - input_element.value = value ? value : ``; - break; - } - }); - }); - } + input_elements.forEach((input_element) => { + // Gather data about the element. + // Get the corresponding storage data. + let data = {}; + data[`source`] = input_element.getAttribute(`data-store`); + data[`value`] = secretariat.read(data[`source`], -1); - elements(); - text(); - icons(); - storage(); - } + data[`value`].then((value) => { + switch (input_element.getAttribute(`type`).toLowerCase()) { + case `checkbox`: + input_element.checked = value; + break; + case `progress`: + case `range`: + // Ensure that it is a positive floating-point number. + value = !value ? 0 : Math.abs(parseFloat(value)); + if (value > 100) { + value = value / 100; + } - // Adds events to the window. - function events() { - /* Add events related to storage. */ - async function storage() { - // Import the module. - const secretariat = await import( - chrome.runtime.getURL("scripts/secretariat.js") - ); + // Set the attribute of the progress bar. + input_element.setAttribute(`value`, value); + input_element.setAttribute(`max`, 1); + break; + default: + input_element.value = value ? value : ``; + break; + } + }); + }); + } - let input_elements = document.querySelectorAll("[data-store]"); + elements(); + text(); + icons(); + storage(); + } - input_elements.forEach((input_element) => { - // Gather data about the element. - // Get the corresponding storage data. + // Adds events to the window. + function events() { + /* Add events related to storage. */ + async function storage() { + // Import the module. + const secretariat = await import( + chrome.runtime.getURL("scripts/secretariat.js") + ); - let element = {}; - element[`type`] = input_element.getAttribute(`type`).toLowerCase(); - element[`event`] = function () {}; + let input_elements = document.querySelectorAll("[data-store]"); - switch (element[`type`]) { - case `checkbox`: - element[`event`] = function () { - let UI_item = {}; - UI_item[`source`] = this.getAttribute(`data-store`); - UI_item[`value`] = this.checked; - secretariat.write(UI_item[`source`], UI_item[`value`]); - }; - break; - default: - element[`event`] = function () { - let UI_item = {}; - UI_item[`source`] = this.getAttribute(`data-store`); - UI_item[`value`] = element[`type`].includes(`num`) - ? parseFloat(this.value) % 1 != 0 - ? parseFloat(this.value) - : parseInt(this.value) - : this.value; - secretariat.write(UI_item[`source`], UI_item[`value`]); - }; - break; - } + input_elements.forEach((input_element) => { + // Gather data about the element. + // Get the corresponding storage data. - input_element.addEventListener("change", element[`event`]); - }); - } + let element = {}; + element[`type`] = input_element.getAttribute(`type`).toLowerCase(); + element[`event`] = function () {}; - /* Map buttons to their corresponding action buttons. */ - function actions() { - function links() { - let buttons = document.querySelectorAll("button[href]"); + switch (element[`type`]) { + case `checkbox`: + element[`event`] = function () { + let UI_item = {}; + UI_item[`source`] = this.getAttribute(`data-store`); + UI_item[`value`] = this.checked; + secretariat.write(UI_item[`source`], UI_item[`value`]); + }; + break; + default: + element[`event`] = function () { + let UI_item = {}; + UI_item[`source`] = this.getAttribute(`data-store`); + UI_item[`value`] = element[`type`].includes(`num`) + ? parseFloat(this.value) % 1 != 0 + ? parseFloat(this.value) + : parseInt(this.value) + : this.value; + secretariat.write(UI_item[`source`], UI_item[`value`]); + }; + break; + } - if (buttons) { - buttons.forEach((button) => { - let event = function () { - // Get the data from the button. - let target = {}; - target[`source`] = this.getAttribute(`href`); + input_element.addEventListener("change", element[`event`]); + }); + } - // Get the correct path. - target[`path`] = ( - !target[`source`].includes(`://`) - ? window.location.pathname - .split(`/`) - .slice(0, -1) - .join(`/`) - .concat(`/`) - : `` - ).concat(target[`source`]); + /* Map buttons to their corresponding action buttons. */ + function actions() { + function links() { + let buttons = document.querySelectorAll("button[href]"); - windowman.new( - target[`path`], - this.getAttribute(`tab-height`) - ? this.getAttribute(`tab-height`) - : null, - this.getAttribute(`tab-width`) - ? this.getAttribute(`tab-width`) - : null, - ); - }; - button.addEventListener("click", event); - }); - } - } + if (buttons) { + buttons.forEach((button) => { + let event = function () { + // Get the data from the button. + let target = {}; + target[`source`] = this.getAttribute(`href`); - links(); - } + // Get the correct path. + target[`path`] = ( + !target[`source`].includes(`://`) + ? window.location.pathname + .split(`/`) + .slice(0, -1) + .join(`/`) + .concat(`/`) + : `` + ).concat(target[`source`]); - /* - Update the interface based on the storage data changes. - */ - async function updates() { - // Import the module. - const secretariat = await import( - chrome.runtime.getURL("scripts/secretariat.js") - ); + windowman.new( + target[`path`], + this.getAttribute(`tab-height`) + ? this.getAttribute(`tab-height`) + : null, + this.getAttribute(`tab-width`) + ? this.getAttribute(`tab-width`) + : null, + ); + }; + button.addEventListener("click", event); + }); + } + } - // Get the storage data. - let storage_data = await secretariat.read(); + /* Enable the searching interface. */ + function search() {} - async function enable() { - let input_elements = document.querySelectorAll("[data-enable]"); + // Responsiveness to different screen sizes. + function resize() { + function sidebar() { + if (document.querySelector(`.sidebar`)) { + if (window.innerWidth < 600) { + document + .querySelector(`.sidebar`) + .style.setProperty(`display`, `none`); + document + .querySelector(`.sidebar`) + .style.setProperty(`position`, `fixed`); + } else { + document + .querySelector(`.sidebar`) + .style.removeProperty(`display`); + document + .querySelector(`.sidebar`) + .style.removeProperty(`position`); + } + if (document.querySelector(`[data-action="ui,close,navbar"]`)) { + document + .querySelector(`[data-action="ui,close,navbar"]`) + .addEventListener(`click`, function () { + if (document.querySelector(`.sidebar`)) { + document + .querySelector(`.sidebar`) + .style.removeProperty("display"); + document + .querySelector(`.sidebar`) + .style.removeProperty("position"); + } + }); + } + if (document.querySelector(`[data-action="ui,open,navbar"]`)) { + document + .querySelector(`[data-action="ui,open,navbar"]`) + .addEventListener(`click`, function () { + document + .querySelector(`.sidebar`) + .style.setProperty("display", "block"); + document + .querySelector(`.sidebar`) + .style.setProperty("position", "fixed"); + }); + } + } + } - if (input_elements) { - input_elements.forEach((input_element) => { - if (input_element.getAttribute("data-enable")) { - (async () => { - input_element.disabled = - !(((await secretariat.read(input_element.getAttribute("data-enable"))) != null) - ? ((typeof (await secretariat.read(input_element.getAttribute("data-enable")))).includes(`Object`) - ? ((await secretariat.read(input_element.getAttribute("data-enable"))).length > 0) - : !!(await secretariat.read(input_element.getAttribute("data-enable"))) - ) - : false); - })(); - } - }); - } - } + sidebar(); + } - // Update the input elements. - secretariat.observe((what) => { - enable(); - }); + window.addEventListener("resize", resize); + resize(); + links(); + } - enable(); - } + /* + Update the interface based on the storage data changes. + */ + async function updates() { + // Import the module. + const secretariat = await import( + chrome.runtime.getURL("scripts/secretariat.js") + ); - storage(); - actions(); - updates(); - } + // Get the storage data. + let storage_data = await secretariat.read(); - headers(); - appearance(); - events(); - } + async function enable() { + let input_elements = document.querySelectorAll("[data-enable]"); + + if (input_elements) { + input_elements.forEach((input_element) => { + if (input_element.getAttribute("data-enable")) { + (async () => { + console.log( + await secretariat.read( + input_element.getAttribute("data-enable"), + ), + ); + input_element.disabled = !((await secretariat.read( + input_element.getAttribute("data-enable"), + )) != null + ? (typeof (await secretariat.read( + input_element.getAttribute("data-enable"), + ))).includes(`obj`) + ? ( + await secretariat.read( + input_element.getAttribute("data-enable"), + ) + ).length > 0 + : !!(await secretariat.read( + input_element.getAttribute("data-enable"), + )) + : false); + })(); + } + }); + } + } + + // Update the input elements. + secretariat.observe((what) => { + enable(); + }); + + enable(); + } + + storage(); + actions(); + updates(); + } + + headers(); + appearance(); + events(); + } } export { windowman };