don’t read for storage data automatically
saves on resources for files that don’t necessarily need it
This commit is contained in:
buzzcode2007
parent
51574e0ba8
commit
333310fcc8
1 changed files with 247 additions and 243 deletions
|
|
@ -214,98 +214,13 @@ export default class windowman {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function storage() {
|
|
||||||
// Import the module.
|
|
||||||
const secretariat = await import(
|
|
||||||
chrome.runtime.getURL("scripts/secretariat.js")
|
|
||||||
);
|
|
||||||
|
|
||||||
let input_elements = document.querySelectorAll("[data-store]");
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
elements();
|
elements();
|
||||||
text();
|
text();
|
||||||
icons();
|
icons();
|
||||||
storage();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adds events to the window.
|
// Adds events to the window.
|
||||||
function events() {
|
function events() {
|
||||||
/* Add events related to storage. */
|
|
||||||
async function storage() {
|
|
||||||
// Import the module.
|
|
||||||
const secretariat = await import(
|
|
||||||
chrome.runtime.getURL("scripts/secretariat.js")
|
|
||||||
);
|
|
||||||
|
|
||||||
let input_elements = document.querySelectorAll("[data-store]");
|
|
||||||
|
|
||||||
input_elements.forEach((input_element) => {
|
|
||||||
// Gather data about the element.
|
|
||||||
// Get the corresponding storage data.
|
|
||||||
|
|
||||||
let element = {};
|
|
||||||
element[`type`] = input_element.getAttribute(`type`).toLowerCase();
|
|
||||||
element[`event`] = function () {};
|
|
||||||
|
|
||||||
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_element.addEventListener("change", element[`event`]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Map buttons to their corresponding action buttons. */
|
/* Map buttons to their corresponding action buttons. */
|
||||||
function actions() {
|
function actions() {
|
||||||
function links() {
|
function links() {
|
||||||
|
|
@ -344,120 +259,6 @@ export default class windowman {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Enable the searching interface. */
|
|
||||||
function search() {
|
|
||||||
if (document.querySelectorAll(`[data-result]`)) {
|
|
||||||
/*
|
|
||||||
Display the search result.
|
|
||||||
|
|
||||||
@param {object} ELEMENT_TARGET the target element
|
|
||||||
@param {object} RESULTS the results
|
|
||||||
@param {object} TITLE_FIELD the title field for each result
|
|
||||||
*/
|
|
||||||
var SEARCH = {};
|
|
||||||
|
|
||||||
function display(TARGET_NAME, RESULTS, TITLE_FIELD) {
|
|
||||||
|
|
||||||
if (document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)) {
|
|
||||||
(document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)).forEach(function (ELEMENT_TARGET) {
|
|
||||||
// Clear the target element.
|
|
||||||
ELEMENT_TARGET.innerHTML = ``;
|
|
||||||
|
|
||||||
function setSelected(element) {
|
|
||||||
SEARCH[TARGET_NAME][`selected`] = element.getAttribute(`data-result-linked`);
|
|
||||||
(element.parentElement).parentElement.querySelectorAll(`li`).forEach((element_others) => {
|
|
||||||
element_others.classList.remove(`active`);
|
|
||||||
}); element.parentElement.classList.add(`active`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Display the results.
|
|
||||||
(Object.keys(RESULTS)).forEach((result) => {
|
|
||||||
let result_element = document.createElement(`li`);
|
|
||||||
let result_title = document.createElement(`a`);
|
|
||||||
result_title.setAttribute(`data-result-linked`, result);
|
|
||||||
result_title.classList.add(`waves-effect`);
|
|
||||||
result_title.innerText = (RESULTS[result][TITLE_FIELD]) ? RESULTS[result][TITLE_FIELD] : result;
|
|
||||||
|
|
||||||
result_title.addEventListener(`click`, function () {
|
|
||||||
pick(RESULTS[result], TARGET_NAME);
|
|
||||||
setSelected(this);
|
|
||||||
});
|
|
||||||
|
|
||||||
result_element.appendChild(result_title);
|
|
||||||
ELEMENT_TARGET.appendChild(result_element);
|
|
||||||
|
|
||||||
if (SEARCH[TARGET_NAME][`selected`] == result) {setSelected(result_title);}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Function to execute when a search result item has been picked.
|
|
||||||
|
|
||||||
@param {object} ITEM the item picked
|
|
||||||
@param {string} AREA the ID of this entire search thing
|
|
||||||
*/
|
|
||||||
function pick(ITEM, AREA) {
|
|
||||||
|
|
||||||
console.log(ITEM, AREA);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function find(element) {
|
|
||||||
if (element.getAttribute(`data-result`)) {
|
|
||||||
if (!SEARCH[element.getAttribute(`data-result`)]) {
|
|
||||||
SEARCH[element.getAttribute(`data-result`)] = {};
|
|
||||||
}
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`criteria`] = element.value.trim();
|
|
||||||
|
|
||||||
if (SEARCH[element.getAttribute(`data-result`)][`criteria`]) {
|
|
||||||
if (
|
|
||||||
element.getAttribute(`data-results-filters`)
|
|
||||||
? element.getAttribute(`data-results-filters`).trim()
|
|
||||||
: false
|
|
||||||
) {
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`additional criteria`] = element
|
|
||||||
.getAttribute(`data-results-filters`)
|
|
||||||
.split(`,`);
|
|
||||||
}
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`results`] = await (async () => {
|
|
||||||
const secretariat = await import(
|
|
||||||
chrome.runtime.getURL(`scripts/secretariat.js`)
|
|
||||||
);
|
|
||||||
|
|
||||||
return await secretariat.search(
|
|
||||||
element.getAttribute(`data-result`),
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`criteria`],
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`additional criteria`],
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
} else {
|
|
||||||
SEARCH[element.getAttribute(`data-result`)][`results`] = await (async () => {
|
|
||||||
const secretariat = await import(
|
|
||||||
chrome.runtime.getURL(`scripts/secretariat.js`)
|
|
||||||
);
|
|
||||||
|
|
||||||
return await secretariat.read(element.getAttribute(`data-result`));
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
display(element.getAttribute(`data-result`), SEARCH[element.getAttribute(`data-result`)][`results`], `name`);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelectorAll(`[data-result]`).forEach((element) => {
|
|
||||||
/* GUI changes to find
|
|
||||||
|
|
||||||
@param {object} ELEMENT the element to change
|
|
||||||
*/
|
|
||||||
|
|
||||||
element.addEventListener(`change`, async function () {find(element)});
|
|
||||||
find(element);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsiveness to different screen sizes.
|
// Responsiveness to different screen sizes.
|
||||||
function resize() {
|
function resize() {
|
||||||
function sidebar() {
|
function sidebar() {
|
||||||
|
|
@ -484,59 +285,262 @@ export default class windowman {
|
||||||
}
|
}
|
||||||
|
|
||||||
resize();
|
resize();
|
||||||
search();
|
|
||||||
links();
|
links();
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
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")
|
|
||||||
);
|
|
||||||
|
|
||||||
// Get the storage data.
|
|
||||||
let storage_data = await secretariat.read();
|
|
||||||
|
|
||||||
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 () => {
|
|
||||||
input_element.disabled = !((await secretariat.read(input_element.getAttribute("data-enable"))) != null
|
|
||||||
? (typeof (await secretariat.read(input_element.getAttribute("data-enable")))).includes(`obj`)
|
|
||||||
? (Object.keys(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();
|
actions();
|
||||||
updates();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
headers();
|
headers();
|
||||||
appearance();
|
appearance();
|
||||||
events();
|
events();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Run this function if you would like to synchronize with data. */
|
||||||
|
sync() {
|
||||||
|
async function fill() {
|
||||||
|
// Import the module.
|
||||||
|
const secretariat = await import(
|
||||||
|
chrome.runtime.getURL("scripts/secretariat.js")
|
||||||
|
);
|
||||||
|
|
||||||
|
let input_elements = document.querySelectorAll("[data-store]");
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add events related to storage. */
|
||||||
|
async function update() {
|
||||||
|
// Import the module.
|
||||||
|
const secretariat = await import(
|
||||||
|
chrome.runtime.getURL("scripts/secretariat.js")
|
||||||
|
);
|
||||||
|
|
||||||
|
let input_elements = document.querySelectorAll("[data-store]");
|
||||||
|
|
||||||
|
input_elements.forEach((input_element) => {
|
||||||
|
// Gather data about the element.
|
||||||
|
// Get the corresponding storage data.
|
||||||
|
|
||||||
|
let element = {};
|
||||||
|
element[`type`] = input_element.getAttribute(`type`).toLowerCase();
|
||||||
|
element[`event`] = function () {};
|
||||||
|
|
||||||
|
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_element.addEventListener("change", element[`event`]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
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")
|
||||||
|
);
|
||||||
|
|
||||||
|
// Get the storage data.
|
||||||
|
let storage_data = await secretariat.read();
|
||||||
|
|
||||||
|
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 () => {
|
||||||
|
input_element.disabled = !((await secretariat.read(input_element.getAttribute("data-enable"))) != null
|
||||||
|
? (typeof (await secretariat.read(input_element.getAttribute("data-enable")))).includes(`obj`)
|
||||||
|
? (Object.keys(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();
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Enable the searching interface. */
|
||||||
|
function search() {
|
||||||
|
if (document.querySelectorAll(`[data-result]`)) {
|
||||||
|
/*
|
||||||
|
Display the search result.
|
||||||
|
|
||||||
|
@param {object} ELEMENT_TARGET the target element
|
||||||
|
@param {object} RESULTS the results
|
||||||
|
@param {object} TITLE_FIELD the title field for each result
|
||||||
|
*/
|
||||||
|
var SEARCH = {};
|
||||||
|
|
||||||
|
function display(TARGET_NAME, RESULTS, TITLE_FIELD) {
|
||||||
|
|
||||||
|
if (document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)) {
|
||||||
|
(document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)).forEach(function (ELEMENT_TARGET) {
|
||||||
|
// Clear the target element.
|
||||||
|
ELEMENT_TARGET.innerHTML = ``;
|
||||||
|
|
||||||
|
function setSelected(element) {
|
||||||
|
SEARCH[TARGET_NAME][`selected`] = element.getAttribute(`data-result-linked`);
|
||||||
|
(element.parentElement).parentElement.querySelectorAll(`li`).forEach((element_others) => {
|
||||||
|
element_others.classList.remove(`active`);
|
||||||
|
}); element.parentElement.classList.add(`active`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display the results.
|
||||||
|
(Object.keys(RESULTS)).forEach((result) => {
|
||||||
|
let result_element = document.createElement(`li`);
|
||||||
|
let result_title = document.createElement(`a`);
|
||||||
|
result_title.setAttribute(`data-result-linked`, result);
|
||||||
|
result_title.classList.add(`waves-effect`);
|
||||||
|
result_title.innerText = (RESULTS[result][TITLE_FIELD]) ? RESULTS[result][TITLE_FIELD] : result;
|
||||||
|
|
||||||
|
result_title.addEventListener(`click`, function () {
|
||||||
|
pick(RESULTS[result], TARGET_NAME);
|
||||||
|
setSelected(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
result_element.appendChild(result_title);
|
||||||
|
ELEMENT_TARGET.appendChild(result_element);
|
||||||
|
|
||||||
|
if (SEARCH[TARGET_NAME][`selected`] == result) {setSelected(result_title);}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Function to execute when a search result item has been picked.
|
||||||
|
|
||||||
|
@param {object} ITEM the item picked
|
||||||
|
@param {string} AREA the ID of this entire search thing
|
||||||
|
*/
|
||||||
|
function pick(ITEM, AREA) {
|
||||||
|
|
||||||
|
console.log(ITEM, AREA);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function find(element) {
|
||||||
|
if (element.getAttribute(`data-result`)) {
|
||||||
|
if (!SEARCH[element.getAttribute(`data-result`)]) {
|
||||||
|
SEARCH[element.getAttribute(`data-result`)] = {};
|
||||||
|
}
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`criteria`] = element.value.trim();
|
||||||
|
|
||||||
|
if (SEARCH[element.getAttribute(`data-result`)][`criteria`]) {
|
||||||
|
if (
|
||||||
|
element.getAttribute(`data-results-filters`)
|
||||||
|
? element.getAttribute(`data-results-filters`).trim()
|
||||||
|
: false
|
||||||
|
) {
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`additional criteria`] = element
|
||||||
|
.getAttribute(`data-results-filters`)
|
||||||
|
.split(`,`);
|
||||||
|
}
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`results`] = await (async () => {
|
||||||
|
const secretariat = await import(
|
||||||
|
chrome.runtime.getURL(`scripts/secretariat.js`)
|
||||||
|
);
|
||||||
|
|
||||||
|
return await secretariat.search(
|
||||||
|
element.getAttribute(`data-result`),
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`criteria`],
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`additional criteria`],
|
||||||
|
);
|
||||||
|
})();
|
||||||
|
} else {
|
||||||
|
SEARCH[element.getAttribute(`data-result`)][`results`] = await (async () => {
|
||||||
|
const secretariat = await import(
|
||||||
|
chrome.runtime.getURL(`scripts/secretariat.js`)
|
||||||
|
);
|
||||||
|
|
||||||
|
return await secretariat.read(element.getAttribute(`data-result`));
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
display(element.getAttribute(`data-result`), SEARCH[element.getAttribute(`data-result`)][`results`], `name`);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(`[data-result]`).forEach((element) => {
|
||||||
|
/* GUI changes to find
|
||||||
|
|
||||||
|
@param {object} ELEMENT the element to change
|
||||||
|
*/
|
||||||
|
|
||||||
|
element.addEventListener(`change`, async function () {find(element)});
|
||||||
|
find(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fill();
|
||||||
|
update();
|
||||||
|
updates();
|
||||||
|
search();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { windowman };
|
export { windowman };
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue