buzzcode2007/ShopAI-Extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rewrite windowman

Browse source 
Add all relevant elements to the windowman object to be accessed by the Page object
This commit is contained in:
buzz-lightsnack-2007 2024-05-15 08:41:07 +08:00
parent 901ad921c7
commit 9af201655b
1 changed files with 251 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

388
scripts/GUI/builder/windowman.js
View file

@ -6,8 +6,11 @@ import Window from "../window.js";
import Tabs from "/scripts/GUI/tabs.js"; import Tabs from "/scripts/GUI/tabs.js";
import logging from '/scripts/logging.js'; import logging from '/scripts/logging.js';
import {global, observe} from "/scripts/secretariat.js"; import {global, observe} from "/scripts/secretariat.js";
import {URLs} from "/scripts/utils/URLs.js";
export default class windowman { export default class windowman {
elements = {};
static new(URL, height, width) { static new(URL, height, width) {
this.window = chrome.windows.create({url: (URL.includes(`://`)) ? URL : chrome.runtime.getURL(URL), type: "popup", width: width ? parseInt(width) : 600, height: height ? parseInt(height) : 600}); this.window = chrome.windows.create({url: (URL.includes(`://`)) ? URL : chrome.runtime.getURL(URL), type: "popup", width: width ? parseInt(width) : 600, height: height ? parseInt(height) : 600});
} }
@ -64,33 +67,51 @@ export default class windowman {
this.header = UI; this.header = UI;
}; };
// Get the window.
this[`metadata`] = chrome.windows.getCurrent();
headers(((OPTIONS != null && typeof OPTIONS == `object`) ? OPTIONS[`headers`] : false) ? OPTIONS[`headers`] : null);
this.design();
}
/*
Automatically set the design based on expected fields.
*/
design () {
/* Fill in data and events. */ /* Fill in data and events. */
function appearance() { function appearance() {
// Add missing classes to all elements.
function elements() {
// Add buttons elements. // Add buttons elements.
function buttons() { function buttons() {
document.querySelectorAll(`button`).forEach((button) => { let INTERACTIVE_ELEMENTS = {};
if (!button.classList.contains(`btn`)) {
button.classList.add(`btn`); const SOURCES = {
} "buttons": "button",
"links": "a",
"text boxes": `textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`
};
(Object.keys(SOURCES)).forEach((TYPE) => {
INTERACTIVE_ELEMENTS[TYPE] = document.querySelectorAll(SOURCES[TYPE]);
// Add the style as well.
INTERACTIVE_ELEMENTS[TYPE].forEach((ELEMENT) => {
(ELEMENT.classList ? ELEMENT.classList.contains(`waves-effect`) : true)
? ELEMENT.classList.add(`waves-effect`)
: false;
})
}); });
[] (INTERACTIVE_ELEMENTS[`buttons`] ? INTERACTIVE_ELEMENTS[`buttons`].length : false)
.concat(document.querySelectorAll(`a`), document.querySelectorAll(`button`), document.querySelectorAll(`textarea`), document.querySelectorAll(`input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`)) ? INTERACTIVE_ELEMENTS[`buttons`].forEach((BUTTON) => {
.forEach((ELEMENT_TYPE) => { (!BUTTON.classList.contains(`btn`))
ELEMENT_TYPE.forEach((button) => { ? BUTTON.classList.add(`btn`)
if ( : false;
button.classList })
? !button.classList.contains(`waves-effect`) : false;
: true
) { return INTERACTIVE_ELEMENTS;
button.classList.add(`waves-effect`);
}
});
});
}
buttons();
} }
function icons() { function icons() {
@ -188,216 +209,237 @@ export default class windowman {
return text_elements; return text_elements;
}; };
function sidenav() {
let SIDENAV_ALL = document.querySelectorAll(`.sidenav`);
let SIDENAV = {};
if (SIDENAV_ALL ? SIDENAV_ALL.length : false) {
SIDENAV_ALL.forEach((SIDEBAR_ELEMENT) => {
if (!(SIDEBAR_ELEMENT.getAttribute(`name`))) {
SIDEBAR_ELEMENT.setAttribute(`name`, `sidebar-`.concat(Math.floor(Math.random() * 1000)));
}
SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)] = SIDEBAR_ELEMENT;
SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)][`trigger`] = [...document.querySelectorAll(`[works-sidebar="${SIDEBAR_ELEMENT.getAttribute(`name`)}"]`), ...document.querySelectorAll(`[data-action="ui,open,navbar"]`)];
(SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)][`trigger`] ? SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)][`trigger`].length : false)
? (SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)][`trigger`]).forEach((TRIGGER_ELEMENT) => {
TRIGGER_ELEMENT.addEventListener(`click`, () => {
M.Sidenav.getInstance(SIDENAV[SIDEBAR_ELEMENT.getAttribute(`name`)]).open();
})
})
: false;
});
}
return SIDENAV;
}
let ELEMENTS = {}; let ELEMENTS = {};
elements(); ELEMENTS[`interactive`] = buttons();
ELEMENTS[`text`] = text(); ELEMENTS[`texts`] = text();
ELEMENTS[`icons`] = icons(); ELEMENTS[`icons`] = icons();
ELEMENTS[`sidenav`] = sidenav();
return (ELEMENTS); return (ELEMENTS);
} }
// Adds events to the window. // Adds events to the window.
function events() { const events = () => {
/* Map buttons to their corresponding action buttons. */ const links = () => {
function actions() { (this[`elements`][`interactive`][`buttons`] ? this[`elements`][`interactive`][`buttons`].length : false)
function links() { ? this[`elements`][`interactive`][`buttons`].forEach((button) => {
let buttons = document.querySelectorAll("button[href]"); if (button.hasAttribute(`href`)) {
if (buttons) {
buttons.forEach((button) => {
// Get the data from the button. // Get the data from the button.
let target = {}; let TARGET = {};
target[`source`] = button.getAttribute(`href`); TARGET[`source`] = button.getAttribute(`href`);
target[`dimensions`] = {}; TARGET[`dimensions`] = {};
target[`dimensions`][`height`] = (button.getAttribute(`tab-height`)) ? parseInt(button.getAttribute(`tab-height`))
// Get the dimensions of the window.
[`height`, `width`].forEach((DIMENSION) => {
TARGET[`dimensions`][DIMENSION] = (button.getAttribute(`tab-`.concat(DIMENSION)))
? parseInt(button.getAttribute(`tab-`.concat(DIMENSION)))
: null; : null;
target[`dimensions`][`width`] = (button.getAttribute(`tab-width`)) ? parseInt(button.getAttribute(`tab-width`))
: null; (button.getAttribute(`tab-`.concat(DIMENSION)))
target[`path`] = ( ? button.removeAttribute(`tab-`.concat(DIMENSION))
!target[`source`].includes(`://`) : false;
})
// Get the path of the target.
TARGET[`path`] = (
!URLs.test(TARGET[`source`])
? window.location.pathname.split(`/`).slice(0, -1).join(`/`).concat(`/`) ? window.location.pathname.split(`/`).slice(0, -1).join(`/`).concat(`/`)
: `` : ``
).concat(target[`source`]); ).concat(TARGET[`source`]);
// Set the event itself.
const event = () => { const event = () => {
// Get the correct path.
new logging((new texts(`page_opening`)).localized, target[`path`]);
// Open the window as a popup. // Open the window as a popup.
Tabs.create(target[`path`]); Tabs.create(TARGET[`path`]);
}; };
button.addEventListener(`click`, event);
button.addEventListener("click", event);
button.removeAttribute(`href`);
});
} }
})
: false;
} }
// Responsiveness to different screen sizes.
function resize() {
function sidebar() {
if (document.querySelector(`.sidenav`)) {
(document.querySelectorAll(`.sidenav`)).forEach(function (sidebar_element) {
if (sidebar_element.getAttribute(`name`)) {
document.querySelector(`[works-sidebar="${sidebar_element.getAttribute(`name`)}"]`)
.addEventListener(`click`, () => {
M.Sidenav.getInstance(sidebar_element).open();
});
} else if (document.querySelector(`[data-action="ui,open,navbar"]`)) {
document.querySelector(`[data-action="ui,open,navbar"]`).forEach(function (button_element) {
button_element.addEventListener(`click`, () => {
M.Sidenav.getInstance(sidebar).open();
});
});
}
});
}
}
sidebar();
}
resize();
links(); links();
} }
actions(); this[`elements`] = appearance();
}
// Get the window.
this[`metadata`] = chrome.windows.getCurrent();
headers(((OPTIONS != null && typeof OPTIONS == `object`) ? OPTIONS[`headers`] : false) ? OPTIONS[`headers`] : null);
appearance();
events(); events();
} }
/* Run this function if you would like to synchronize with data. */ /* Run this function if you would like to synchronize with data. */
async sync() { async sync() {
async function fill() { this[`elements`][`linked`] = (this[`elements`][`linked`]) ? this[`elements`][`linked`] : {};
let input_elements = document.querySelectorAll("[data-store]");
input_elements.forEach(function(input_element) { const fill = () => {
const store = () => {
let ELEMENTS = document.querySelectorAll("[data-store]");
if (ELEMENTS ? ELEMENTS.length : false) {
// Add the linked elements.
this[`elements`][`linked`][`show`] = (this[`elements`][`linked`][`show`]) ? this[`elements`][`linked`][`show`] : {};
ELEMENTS.forEach((input_element) => {
// Gather data about the element. // Gather data about the element.
// Get the corresponding storage data.
let data = {}; let data = {};
data[`source`] = input_element.getAttribute(`data-store`); data[`source`] = input_element.getAttribute(`data-store`);
// data[`origin`] = (input_element.hasAttribute(`data-store-location`)) ? parseInt(input_element.getAttribute(`data-store-location`)) : -1
data[`value`] = global.read(data[`source`]);
data[`value`].then(async function(value) { // Store the remaining data about the element.
switch (input_element.getAttribute(`type`).toLowerCase()) { input_element[`storage`] = {};
input_element[`storage`][`source`] = (input_element.hasAttribute(`data-store-location`)) ? parseInt(input_element.getAttribute(`data-store-location`)) : -1;
input_element.removeAttribute(`data-store-location`);
(this[`elements`][`linked`][`show`][data[`source`]] ? this[`elements`][`linked`][`show`][data[`source`]].length : false)
? this[`elements`][`linked`][`show`][data[`source`]].push(input_element)
: this[`elements`][`linked`][`show`][data[`source`]] = [input_element];
});
};
(this[`elements`][`linked`][`show`] ? Object.keys(Object.keys(this[`elements`][`linked`][`show`])).length : false)
? (Object.keys(this[`elements`][`linked`][`show`])).forEach((SOURCE) => {
(this[`elements`][`linked`][`show`][SOURCE] ? this[`elements`][`linked`][`show`][SOURCE].length : false)
? global.read(SOURCE).then((value) => {
(this[`elements`][`linked`][`show`][SOURCE]).forEach((ELEMENT) => {
switch (ELEMENT.getAttribute(`type`).toLowerCase()) {
case `checkbox`: case `checkbox`:
input_element.checked = value; ELEMENT.checked = value;
break; break;
case `progress`: case `progress`:
case `range`: case `range`:
// Ensure that it is a positive floating-point number. // Ensure that it is a positive floating-point number.
value = !value ? 0 : Math.abs(parseFloat(value)); value = !value ? 0 : Math.abs(parseFloat(value));
if (value > 100) { value = (value > 100) ? value / 100 : value;
value = value / 100;
}
// Set the attribute of the progress bar. // Set the attribute of the progress bar.
input_element.setAttribute(`value`, value); ELEMENT.setAttribute(`value`, value);
input_element.setAttribute(`max`, 1); ELEMENT.setAttribute(`max`, 1);
break; break;
default: default:
input_element.value = value ? value : ``; ELEMENT.value = value ? value : ``;
break; break;
}; };
}); })
}); })
: false;
})
: false;
} }
/* Add events related to storage. */ const enable = () => {
async function update() { // Get enabled elements.
let input_elements = document.querySelectorAll("[data-store]"); let ELEMENTS = document.querySelectorAll("[data-enable]");
if (ELEMENTS ? ELEMENTS.length : false) {
// Add the linked elements.
this[`elements`][`linked`][`enable`] = (this[`elements`][`linked`][`enable`]) ? this[`elements`][`linked`][`enable`] : {};
input_elements.forEach((input_element) => { ELEMENTS.forEach(async (input_element) => {
// Gather data about the element. if (input_element.getAttribute(`data-enable`)) {
// Get the corresponding storage data. // Get the source of the element.
let SOURCE = input_element.getAttribute(`data-enable`);
let element = {}; // Put the element into the linked elements list.
element[`type`] = input_element.getAttribute(`type`).toLowerCase(); (this[`elements`][`linked`][`enable`][SOURCE] ? this[`elements`][`linked`][`enable`][SOURCE].length : false)
element[`event`] = function () {}; ? this[`elements`][`linked`][`enable`][SOURCE].push(input_element)
switch (element[`type`]) { : this[`elements`][`linked`][`enable`][SOURCE] = [input_element];
case `checkbox`:
element[`event`] = function () {
let UI_item = {};
UI_item[`source`] = this.getAttribute(`data-store`);
UI_item[`value`] = this.checked;
UI_item[`store`] = (this.hasAttribute(`data-store-location`)) ? parseInt(this.getAttribute(`data-store-location`)) : -1;
global.write(UI_item[`source`], UI_item[`value`], UI_item[`store`]);
};
break;
default:
element[`event`] = function () {
let UI_item = {};
UI_item[`source`] = this.getAttribute(`data-store`);
if (element[`type`].includes(`num`) || element[`type`].includes(`range`)) {
if ((this.hasAttribute(`min`)) ? this.value < parseFloat(this.getAttribute(`min`)) : false) {
this.value = this.getAttribute(`min`);
} else if((this.hasAttribute(`max`)) ? this.value > parseFloat(this.getAttribute(`max`)) : false) {
this.value = this.getAttribute(`max`);
};
};
UI_item[`value`] = element[`type`].includes(`num`)
? this.value % parseInt(this.value) != 0
? parseFloat(this.value)
: parseInt(this.value)
: this.value;
UI_item[`store`] = (this.hasAttribute(`data-store-location`)) ? parseInt(this.getAttribute(`data-store-location`)) : -1;
global.write(UI_item[`source`], UI_item[`value`], UI_item[`store`]);
};
break;
} }
input_element.addEventListener(`change`, element[`event`]);
}); });
} };
/* (this[`elements`][`linked`][`enable`] ? Object.keys(Object.keys(this[`elements`][`linked`][`enable`])).length : false)
Update the interface based on the storage data changes. ? (Object.keys(this[`elements`][`linked`][`enable`])).forEach((SOURCE) => {
*/ ((this[`elements`][`linked`][`enable`][SOURCE]) ? this[`elements`][`linked`][`enable`][SOURCE].length : false)
async function updates() { ? global.read(SOURCE).then((DATA) => {
// Get the storage data. (this[`elements`][`linked`][`enable`][SOURCE]).forEach((input_element) => {
let storage_data = await global.read();
async function enable() {
let input_elements = document.querySelectorAll("[data-enable]");
if (input_elements) {
input_elements.forEach(async (input_element) => {
if (input_element.getAttribute("data-enable")) {
// Enable the element. // Enable the element.
input_element.disabled = ((await global.read(input_element.getAttribute("data-enable"))) != null input_element.disabled = ((DATA) != null
? (typeof (await global.read(input_element.getAttribute("data-enable")))).includes(`obj`) ? (typeof (DATA)).includes(`obj`)
? (Object.keys(await global.read(input_element.getAttribute("data-enable")))).length <= 0 ? ((Array.isArray(DATA) ? DATA.length : (Object.keys(DATA)).length) <= 0)
: !(!!(await global.read(input_element.getAttribute("data-enable")))) : ((typeof DATA).includes(`bool`) ? false : !(!!(DATA)))
: true); : true);
(input_element.disabled) ? input_element.classList.add(`disabled`) : input_element.classList.remove(`disabled`); input_element.classList[(input_element.disabled) ? `add` : `remove`](`disabled`);
// If it is under a list element (usually in navigation bars), then also disable that element too. // If it is under a list element (usually in navigation bars), then also disable that element too.
if ((input_element.parentElement.nodeName.toLowerCase()).includes(`li`)) { if ((input_element.parentElement.nodeName.toLowerCase()).includes(`li`)) {
input_element.parentElement.disabled = input_element.disabled; input_element.parentElement.disabled = input_element.disabled;
(input_element.disabled) ? input_element.parentElement.classList.add(`disabled`) : input_element.parentElement.classList.remove(`disabled`); input_element.parentElement.classList[(input_element.disabled) ? `add` : `remove`](`disabled`);
}
} }
}); });
} })
: false;
})
: false;
} }
// Update the input elements. store();
observe((what) => {
enable(); enable();
}
/* Add events related to storage. */
const write = async () => {
if (this[`elements`][`linked`][`show`] ? Object.keys(this[`elements`][`linked`][`show`]).length : false) {
Object.keys(this[`elements`][`linked`][`show`]).forEach((SOURCE) => {
(this[`elements`][`linked`][`show`][SOURCE] ? this[`elements`][`linked`][`show`][SOURCE].length : false)
? this[`elements`][`linked`][`show`][SOURCE].forEach((ELEMENT) => {
ELEMENT[`type`] = ELEMENT.getAttribute(`type`).toLowerCase();
ELEMENT[`event`] = function () {};
switch (ELEMENT[`type`]) {
case `checkbox`:
ELEMENT[`event`] = () => {
global.write(SOURCE, ELEMENT.checked, ELEMENT[`storage`][`source`]);
};
break;
default:
ELEMENT[`event`] = () => {
if (ELEMENT[`type`].includes(`num`) || ELEMENT[`type`].includes(`range`)) {
ELEMENT.value = ((((ELEMENT.hasAttribute(`min`)) ? ELEMENT.value < parseFloat(ELEMENT.getAttribute(`min`)) : false))
? ELEMENT.getAttribute(`min`)
: (((ELEMENT.hasAttribute(`max`)) ? ELEMENT.value > parseFloat(ELEMENT.getAttribute(`max`)) : false)
? ELEMENT.getAttribute(`max`)
: ELEMENT.value))
};
let VALUE = ELEMENT[`type`].includes(`num`)
? (ELEMENT.value % parseInt(ELEMENT.value) != 0
? parseFloat(ELEMENT.value)
: parseInt(ELEMENT.value))
: ELEMENT.value;
global.write(SOURCE, VALUE, ELEMENT[`storage`][`source`]);
};
break;
};
ELEMENT.addEventListener(`change`, ELEMENT[`event`]);
})
: false;
}); });
}
enable();
}; };
/* Enable the searching interface. */ /* Enable the searching interface. */
@ -407,8 +449,12 @@ export default class windowman {
}; };
fill(); fill();
update(); write();
updates();
this[`search`] = search(); this[`search`] = search();
// Update the input elements.
observe((what) => {
fill();
});
} }
} }