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

450
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. // Add buttons elements.
function elements() { function buttons() {
// Add buttons elements. let INTERACTIVE_ELEMENTS = {};
function buttons() {
document.querySelectorAll(`button`).forEach((button) => {
if (!button.classList.contains(`btn`)) {
button.classList.add(`btn`);
}
});
[] const SOURCES = {
.concat(document.querySelectorAll(`a`), document.querySelectorAll(`button`), document.querySelectorAll(`textarea`), document.querySelectorAll(`input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`)) "buttons": "button",
.forEach((ELEMENT_TYPE) => { "links": "a",
ELEMENT_TYPE.forEach((button) => { "text boxes": `textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`
if ( };
button.classList
? !button.classList.contains(`waves-effect`) (Object.keys(SOURCES)).forEach((TYPE) => {
: true INTERACTIVE_ELEMENTS[TYPE] = document.querySelectorAll(SOURCES[TYPE]);
) {
button.classList.add(`waves-effect`); // Add the style as well.
} INTERACTIVE_ELEMENTS[TYPE].forEach((ELEMENT) => {
}); (ELEMENT.classList ? ELEMENT.classList.contains(`waves-effect`) : true)
}); ? ELEMENT.classList.add(`waves-effect`)
} : false;
buttons(); })
});
(INTERACTIVE_ELEMENTS[`buttons`] ? INTERACTIVE_ELEMENTS[`buttons`].length : false)
? INTERACTIVE_ELEMENTS[`buttons`].forEach((BUTTON) => {
(!BUTTON.classList.contains(`btn`))
? BUTTON.classList.add(`btn`)
: false;
})
: false;
return INTERACTIVE_ELEMENTS;
} }
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`))
: null;
target[`dimensions`][`width`] = (button.getAttribute(`tab-width`)) ? parseInt(button.getAttribute(`tab-width`))
: null;
target[`path`] = (
!target[`source`].includes(`://`)
? window.location.pathname.split(`/`).slice(0, -1).join(`/`).concat(`/`)
: ``
).concat(target[`source`]);
// 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;
(button.getAttribute(`tab-`.concat(DIMENSION)))
? button.removeAttribute(`tab-`.concat(DIMENSION))
: false;
})
// Get the path of the target.
TARGET[`path`] = (
!URLs.test(TARGET[`source`])
? window.location.pathname.split(`/`).slice(0, -1).join(`/`).concat(`/`)
: ``
).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`);
});
}
}
// 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();
});
});
}
});
} }
} })
: false;
sidebar();
}
resize();
links();
} }
actions(); links();
} }
// Get the window. this[`elements`] = appearance();
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 = () => {
// Gather data about the element. const store = () => {
// Get the corresponding storage data. let ELEMENTS = document.querySelectorAll("[data-store]");
let data = {};
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) { if (ELEMENTS ? ELEMENTS.length : false) {
switch (input_element.getAttribute(`type`).toLowerCase()) { // Add the linked elements.
case `checkbox`: this[`elements`][`linked`][`show`] = (this[`elements`][`linked`][`show`]) ? this[`elements`][`linked`][`show`] : {};
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;
}
// Set the attribute of the progress bar. ELEMENTS.forEach((input_element) => {
input_element.setAttribute(`value`, value); // Gather data about the element.
input_element.setAttribute(`max`, 1); let data = {};
break; data[`source`] = input_element.getAttribute(`data-store`);
default:
input_element.value = value ? value : ``; // Store the remaining data about the element.
break; 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`:
ELEMENT.checked = value;
break;
case `progress`:
case `range`:
// Ensure that it is a positive floating-point number.
value = !value ? 0 : Math.abs(parseFloat(value));
value = (value > 100) ? value / 100 : value;
// Set the attribute of the progress bar.
ELEMENT.setAttribute(`value`, value);
ELEMENT.setAttribute(`max`, 1);
break;
default:
ELEMENT.value = value ? value : ``;
break;
};
})
})
: false;
})
: false;
}
const enable = () => {
// Get enabled elements.
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`] : {};
ELEMENTS.forEach(async (input_element) => {
if (input_element.getAttribute(`data-enable`)) {
// Get the source of the element.
let SOURCE = input_element.getAttribute(`data-enable`);
// Put the element into the linked elements list.
(this[`elements`][`linked`][`enable`][SOURCE] ? this[`elements`][`linked`][`enable`][SOURCE].length : false)
? this[`elements`][`linked`][`enable`][SOURCE].push(input_element)
: this[`elements`][`linked`][`enable`][SOURCE] = [input_element];
}
});
};
(this[`elements`][`linked`][`enable`] ? Object.keys(Object.keys(this[`elements`][`linked`][`enable`])).length : false)
? (Object.keys(this[`elements`][`linked`][`enable`])).forEach((SOURCE) => {
((this[`elements`][`linked`][`enable`][SOURCE]) ? this[`elements`][`linked`][`enable`][SOURCE].length : false)
? global.read(SOURCE).then((DATA) => {
(this[`elements`][`linked`][`enable`][SOURCE]).forEach((input_element) => {
// Enable the element.
input_element.disabled = ((DATA) != null
? (typeof (DATA)).includes(`obj`)
? ((Array.isArray(DATA) ? DATA.length : (Object.keys(DATA)).length) <= 0)
: ((typeof DATA).includes(`bool`) ? false : !(!!(DATA)))
: true);
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 ((input_element.parentElement.nodeName.toLowerCase()).includes(`li`)) {
input_element.parentElement.disabled = input_element.disabled;
input_element.parentElement.classList[(input_element.disabled) ? `add` : `remove`](`disabled`);
}
});
})
: false;
})
: false;
}
store();
enable();
} }
/* Add events related to storage. */ /* Add events related to storage. */
async function update() { const write = async () => {
let input_elements = document.querySelectorAll("[data-store]"); 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 () {};
input_elements.forEach((input_element) => { switch (ELEMENT[`type`]) {
// Gather data about the element. case `checkbox`:
// Get the corresponding storage data. 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 element = {}; let VALUE = ELEMENT[`type`].includes(`num`)
element[`type`] = input_element.getAttribute(`type`).toLowerCase(); ? (ELEMENT.value % parseInt(ELEMENT.value) != 0
element[`event`] = function () {}; ? parseFloat(ELEMENT.value)
switch (element[`type`]) { : parseInt(ELEMENT.value))
case `checkbox`: : ELEMENT.value;
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`)) { global.write(SOURCE, VALUE, ELEMENT[`storage`][`source`]);
if ((this.hasAttribute(`min`)) ? this.value < parseFloat(this.getAttribute(`min`)) : false) { };
this.value = this.getAttribute(`min`); break;
} else if((this.hasAttribute(`max`)) ? this.value > parseFloat(this.getAttribute(`max`)) : false) {
this.value = this.getAttribute(`max`);
};
}; };
UI_item[`value`] = element[`type`].includes(`num`) ELEMENT.addEventListener(`change`, ELEMENT[`event`]);
? this.value % parseInt(this.value) != 0 })
? parseFloat(this.value) : false;
: 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`]);
});
}
/*
Update the interface based on the storage data changes.
*/
async function updates() {
// Get the storage data.
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.
input_element.disabled = ((await global.read(input_element.getAttribute("data-enable"))) != null
? (typeof (await global.read(input_element.getAttribute("data-enable")))).includes(`obj`)
? (Object.keys(await global.read(input_element.getAttribute("data-enable")))).length <= 0
: !(!!(await global.read(input_element.getAttribute("data-enable"))))
: true);
(input_element.disabled) ? input_element.classList.add(`disabled`) : input_element.classList.remove(`disabled`);
// 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`)) {
input_element.parentElement.disabled = input_element.disabled;
(input_element.disabled) ? input_element.parentElement.classList.add(`disabled`) : input_element.parentElement.classList.remove(`disabled`);
}
}
});
}
} }
// Update the input elements.
observe((what) => {
enable();
});
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();
});
} }
} }