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

fix sidebar

Browse source
This commit is contained in:
buzz-lightsnack-2007 2024-04-02 19:12:13 +08:00
parent fe41352afd
commit 9d23ad1150
1 changed files with 409 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

715
gui/scripts/windowman.JS
View file

@ -7,369 +7,462 @@ import texts from "./read.js";
let DEBUG = false; let DEBUG = false;
export default class windowman { export default class windowman {
static new(URL, height, width) { static new(URL, height, width) {
this.window = chrome.windows.create({ this.window = chrome.windows.create({
url: chrome.runtime.getURL(URL), url: chrome.runtime.getURL(URL),
type: "popup", type: "popup",
width: width ? parseInt(width) : 600, width: width ? parseInt(width) : 600,
height: height ? parseInt(height) : 600, height: height ? parseInt(height) : 600,
}); });
} }
// Prepare the window with its metadata. // Prepare the window with its metadata.
constructor() { constructor() {
function headers() { function headers() {
let LOAD_STATE = true; let LOAD_STATE = true;
let UI = { let UI = {
"CSS": [ CSS: [
chrome.runtime.getURL( chrome.runtime.getURL(
"gui/styles/external/fonts/materialdesignicons.min.css", "gui/styles/external/fonts/materialdesignicons.min.css",
), ),
chrome.runtime.getURL( chrome.runtime.getURL(
"gui/styles/external/materialize/css/materialize.css", "gui/styles/external/materialize/css/materialize.css",
), ),
chrome.runtime.getURL("gui/styles/ui.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++) { (async () => {
const source = UI.CSS[index]; const net = await import(chrome.runtime.getURL(`/scripts/net.js`));
(async () => { let resource = false;
const net = await import(chrome.runtime.getURL(`/scripts/net.js`)); try {
resource = await net.download(source, `text`, true);
} catch (err) {}
let resource = false; if (resource) {
try { let metadata_element = document.createElement(`link`);
resource = await net.download(source, `text`, true); metadata_element.setAttribute(`rel`, `stylesheet`);
} catch(err) {}; 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;
if (resource) { alerts.error(-1, reader.localized(`error_msg_fileNotFound`), true, [
let metadata_element = document.createElement(`link`); source,
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]); // Stop loading the page when an error has occured; it's not going to work!
if (!DEBUG) {
window.close();
}
}
})();
}
}
// Stop loading the page when an error has occured; it's not going to work! // Get the window.
if (!DEBUG) {window.close()}; this[`metadata`] = chrome.windows.getCurrent();
}
})();
}
}
// 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;*/
/* /* Fill in data and events. */
window_metadata[`id`] = window.id; function appearance() {
window_metadata[`focused`] = window.focused; // Add missing classes to all elements.
window_metadata[`state`] = window.state; function elements() {
window_metadata[`type`] = window.type; // Add buttons elements.
window_metadata[`incognito`] = window.incognito; function buttons() {
window_metadata[`alwaysOnTop`] = window.alwaysOnTop; document.querySelectorAll(`button`).forEach((button) => {
window_metadata[`sessionId`] = window.sessionId; if (!button.classList.contains(`btn`)) {
window_metadata[`tabs`] = window.tabs;*/ button.classList.add(`btn`);
}
});
/* Fill in data and events. */ []
function appearance() { .concat(
// Add missing classes to all elements. document.querySelectorAll(`a`)
function elements() { ? document.querySelectorAll(`a`)
// Add buttons elements. : [],
function buttons() { document.querySelectorAll(`button`)
document.querySelectorAll(`button`).forEach((button) => { ? document.querySelectorAll(`button`)
if (!button.classList.contains(`btn`)) { : [],
button.classList.add(`btn`); document.querySelectorAll(
} `input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`,
if (!button.classList.contains(`waves-effect`)) { )
button.classList.add(`waves-effect`); ? document.querySelectorAll(
} `input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`,
}) )
document.querySelectorAll(`a`).forEach((button) => { : [],
if (!button.classList.contains(`waves-effect`)) { )
button.classList.add(`waves-effect`); .forEach((ELEMENT_TYPE) => {
} ELEMENT_TYPE.forEach((button) => {
}) if (
button.classList
? !button.classList.contains(`waves-effect`)
: true
) {
button.classList.add(`waves-effect`);
}
});
});
}
buttons();
}
function icons() {
let target_elements = document.querySelectorAll(`[data-icon]`);
} target_elements.forEach((element) => {
buttons(); // Get the content before removing it.
} let element_data = {};
// Swap the placement of the existing content.
function swap() {
element_data[`content`] = element.innerHTML;
element.innerHTML = ``;
function icons() { let element_text = document.createElement(`span`);
let target_elements = document.querySelectorAll(`[data-icon]`); element_text.innerHTML = element_data[`content`];
target_elements.forEach((element) => { element.appendChild(element_text);
// Get the content before removing it. }
let element_data = {};
// Swap the placement of the existing content. // Add the icon.
function swap() { function iconify() {
element_data[`content`] = element.innerHTML; // Get the icon.
element.innerHTML = ``; element_data[`icon`] = element.getAttribute(`data-icon`);
let element_text = document.createElement(`span`); // Get the icon.
element_text.innerHTML = element_data[`content`]; 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 text() {
function iconify() { let text_elements = {};
// Get the icon. text_elements[`content`] = document.querySelectorAll("[for]");
element_data[`icon`] = element.getAttribute(`data-icon`); text_elements[`alt`] = document.querySelectorAll("[alt-for]");
text_elements[`title`] = document.querySelectorAll("[title-for]");
// Get the icon. text_elements[`content`].forEach((text_element) => {
let icon_element = document.createElement(`i`); let text_inserted = texts.localized(
icon_element.className = `mdi mdi-`.concat(element_data[`icon`]); text_element.getAttribute(`for`),
element.prepend(icon_element); 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(); if (text_element.tagName.toLowerCase().includes(`input`)) {
iconify(); text_element.setAttribute(`placholder`, text_inserted);
}); } else {
} text_element.innerText = text_inserted;
}
});
function text() { delete text_elements[`content`];
let text_elements = {}; Object.keys(text_elements).forEach((key) => {
text_elements[`content`] = document.querySelectorAll("[for]"); if (text_elements[key]) {
text_elements[`alt`] = document.querySelectorAll("[alt-for]"); text_elements[key].forEach((text_element) => {
text_elements[`title`] = document.querySelectorAll("[title-for]"); 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) => { text_element.setAttribute(key, text_inserted);
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`)),
);
}
if (text_element.tagName.toLowerCase().includes(`input`)) { async function storage() {
text_element.setAttribute(`placholder`, text_inserted); // Import the module.
} else { const secretariat = await import(
text_element.innerText = text_inserted; chrome.runtime.getURL("scripts/secretariat.js")
} );
});
delete text_elements[`content`]; let input_elements = document.querySelectorAll("[data-store]");
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_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() { data[`value`].then((value) => {
// Import the module. switch (input_element.getAttribute(`type`).toLowerCase()) {
const secretariat = await import( case `checkbox`:
chrome.runtime.getURL("scripts/secretariat.js") 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) => { elements();
// Gather data about the element. text();
// Get the corresponding storage data. icons();
let data = {}; storage();
data[`source`] = input_element.getAttribute(`data-store`); }
data[`value`] = secretariat.read(data[`source`], -1);
data[`value`].then((value) => { // Adds events to the window.
switch (input_element.getAttribute(`type`).toLowerCase()) { function events() {
case `checkbox`: /* Add events related to storage. */
input_element.checked = value; async function storage() {
break; // Import the module.
case `progress`: const secretariat = await import(
case `range`: chrome.runtime.getURL("scripts/secretariat.js")
// 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. let input_elements = document.querySelectorAll("[data-store]");
input_element.setAttribute(`value`, value);
input_element.setAttribute(`max`, 1);
break;
default:
input_element.value = value ? value : ``;
break;
}
});
});
}
elements(); input_elements.forEach((input_element) => {
text(); // Gather data about the element.
icons(); // Get the corresponding storage data.
storage();
}
// Adds events to the window. let element = {};
function events() { element[`type`] = input_element.getAttribute(`type`).toLowerCase();
/* Add events related to storage. */ element[`event`] = function () {};
async function storage() {
// Import the module.
const secretariat = await import(
chrome.runtime.getURL("scripts/secretariat.js")
);
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) => { input_element.addEventListener("change", element[`event`]);
// Gather data about the element. });
// Get the corresponding storage data. }
let element = {}; /* Map buttons to their corresponding action buttons. */
element[`type`] = input_element.getAttribute(`type`).toLowerCase(); function actions() {
element[`event`] = function () {}; function links() {
let buttons = document.querySelectorAll("button[href]");
switch (element[`type`]) { if (buttons) {
case `checkbox`: buttons.forEach((button) => {
element[`event`] = function () { let event = function () {
let UI_item = {}; // Get the data from the button.
UI_item[`source`] = this.getAttribute(`data-store`); let target = {};
UI_item[`value`] = this.checked; target[`source`] = this.getAttribute(`href`);
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_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. */ windowman.new(
function actions() { target[`path`],
function links() { this.getAttribute(`tab-height`)
let buttons = document.querySelectorAll("button[href]"); ? this.getAttribute(`tab-height`)
: null,
this.getAttribute(`tab-width`)
? this.getAttribute(`tab-width`)
: null,
);
};
button.addEventListener("click", event);
});
}
}
if (buttons) { /* Enable the searching interface. */
buttons.forEach((button) => { function search() {}
let event = function () {
// Get the data from the button.
let target = {};
target[`source`] = this.getAttribute(`href`);
// Get the correct path. // Responsiveness to different screen sizes.
target[`path`] = ( function resize() {
!target[`source`].includes(`://`) function sidebar() {
? window.location.pathname if (document.querySelector(`.sidebar`)) {
.split(`/`) if (window.innerWidth < 600) {
.slice(0, -1) document
.join(`/`) .querySelector(`.sidebar`)
.concat(`/`) .style.setProperty(`display`, `none`);
: `` document
).concat(target[`source`]); .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");
});
}
}
}
windowman.new( sidebar();
target[`path`], }
this.getAttribute(`tab-height`)
? this.getAttribute(`tab-height`)
: null,
this.getAttribute(`tab-width`)
? this.getAttribute(`tab-width`)
: null,
);
};
button.addEventListener("click", event);
});
}
}
links(); window.addEventListener("resize", resize);
} resize();
links();
}
/* /*
Update the interface based on the storage data changes. Update the interface based on the storage data changes.
*/ */
async function updates() { async function updates() {
// Import the module. // Import the module.
const secretariat = await import( const secretariat = await import(
chrome.runtime.getURL("scripts/secretariat.js") chrome.runtime.getURL("scripts/secretariat.js")
); );
// Get the storage data. // Get the storage data.
let storage_data = await secretariat.read(); let storage_data = await secretariat.read();
async function enable() { async function enable() {
let input_elements = document.querySelectorAll("[data-enable]"); let input_elements = document.querySelectorAll("[data-enable]");
if (input_elements) { if (input_elements) {
input_elements.forEach((input_element) => { input_elements.forEach((input_element) => {
if (input_element.getAttribute("data-enable")) { if (input_element.getAttribute("data-enable")) {
(async () => { (async () => {
input_element.disabled = console.log(
!(((await secretariat.read(input_element.getAttribute("data-enable"))) != null) await secretariat.read(
? ((typeof (await secretariat.read(input_element.getAttribute("data-enable")))).includes(`Object`) input_element.getAttribute("data-enable"),
? ((await secretariat.read(input_element.getAttribute("data-enable"))).length > 0) ),
: !!(await secretariat.read(input_element.getAttribute("data-enable"))) );
) input_element.disabled = !((await secretariat.read(
: false); 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. // Update the input elements.
secretariat.observe((what) => { secretariat.observe((what) => {
enable(); enable();
}); });
enable(); enable();
} }
storage(); storage();
actions(); actions();
updates(); updates();
} }
headers(); headers();
appearance(); appearance();
events(); events();
} }
} }
export { windowman }; export { windowman };