add the ability to select data
This commit is contained in:
parent
c0dce8d9f0
commit
7ec08003bf
1 changed files with 176 additions and 60 deletions
|
@ -99,20 +99,7 @@ export default class windowman {
|
|||
});
|
||||
|
||||
[]
|
||||
.concat(
|
||||
document.querySelectorAll(`a`)
|
||||
? document.querySelectorAll(`a`)
|
||||
: [],
|
||||
document.querySelectorAll(`button`)
|
||||
? document.querySelectorAll(`button`)
|
||||
: [],
|
||||
document.querySelectorAll(`textarea`)
|
||||
? document.querySelectorAll(`textarea`)
|
||||
: [],
|
||||
document.querySelectorAll(`input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`)
|
||||
? document.querySelectorAll(`input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`)
|
||||
: []
|
||||
)
|
||||
.concat(document.querySelectorAll(`a`), document.querySelectorAll(`button`), document.querySelectorAll(`textarea`), document.querySelectorAll(`input:not([type="checkbox"]):not([type="radio"]):not([type="range"])`))
|
||||
.forEach((ELEMENT_TYPE) => {
|
||||
ELEMENT_TYPE.forEach((button) => {
|
||||
if (
|
||||
|
@ -297,13 +284,12 @@ export default class windowman {
|
|||
}
|
||||
|
||||
/* Run this function if you would like to synchronize with data. */
|
||||
sync() {
|
||||
async sync() {
|
||||
// Import the module.
|
||||
const secretariat = await import(chrome.runtime.getURL("scripts/secretariat.js"));
|
||||
const alerts = (await import(chrome.runtime.getURL(`/gui/scripts/alerts.js`))).default;
|
||||
|
||||
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) => {
|
||||
|
@ -340,11 +326,6 @@ export default class windowman {
|
|||
|
||||
/* 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) => {
|
||||
|
@ -361,7 +342,7 @@ export default class windowman {
|
|||
let UI_item = {};
|
||||
UI_item[`source`] = this.getAttribute(`data-store`);
|
||||
UI_item[`value`] = this.checked;
|
||||
secretariat.write(UI_item[`source`], UI_item[`value`]);
|
||||
secretariat.write(UI_item[`source`], UI_item[`value`], 1);
|
||||
};
|
||||
break;
|
||||
default:
|
||||
|
@ -373,7 +354,7 @@ export default class windowman {
|
|||
? parseFloat(this.value)
|
||||
: parseInt(this.value)
|
||||
: this.value;
|
||||
secretariat.write(UI_item[`source`], UI_item[`value`]);
|
||||
secretariat.write(UI_item[`source`], UI_item[`value`], 1);
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
@ -386,11 +367,6 @@ export default class windowman {
|
|||
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();
|
||||
|
||||
|
@ -432,52 +408,184 @@ export default class windowman {
|
|||
@param {object} RESULTS the results
|
||||
@param {object} TITLE_FIELD the title field for each result
|
||||
*/
|
||||
var SEARCH = {};
|
||||
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) {
|
||||
// Set the target element to the correct data structure (lists).
|
||||
TARGET_NAME = (!Array.isArray(TARGET_NAME)) ? TARGET_NAME.split(`,`) : TARGET_NAME;
|
||||
|
||||
// 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) => {
|
||||
SEARCH[TARGET_NAME][`selected`] = (element) ? (Object.keys(RESULTS))[(Array.prototype.slice.call(element.parentElement.children)).indexOf(element)] : null;
|
||||
|
||||
// Array.prototype.slice.call(element.parentElement.children)
|
||||
// console.log(new Array(element.parentElement.querySelectorAll(`*`)), (new Array(element.parentElement.querySelectorAll(`*`))).indexOf(element), (Object.keys(RESULTS))[(new Array(element.parentElement.querySelectorAll(`*`))).indexOf(element)]);
|
||||
if (element) {(element.parentElement).parentElement.querySelectorAll(`li`).forEach((element_others) => {
|
||||
element_others.classList.remove(`active`);
|
||||
}); element.parentElement.classList.add(`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;
|
||||
{
|
||||
let ACCESS_KEYS = {"top": ["1", "2", "3", "4", "5", "6", "7", "8", "9"], "nav": ["<", ">"]};
|
||||
(Object.keys(RESULTS)).forEach((result) => {
|
||||
let result_element = document.createElement(`li`);
|
||||
let result_title = document.createElement(`a`);
|
||||
result_title.classList.add(`waves-effect`);
|
||||
result_title.innerText = (RESULTS[result][TITLE_FIELD]) ? RESULTS[result][TITLE_FIELD] : result;
|
||||
|
||||
function accessKey(ELEMENT) {
|
||||
if (!ELEMENT) {
|
||||
let RESULT_INDEX = (Object.keys(RESULTS)).indexOf(result);
|
||||
if (RESULT_INDEX < ACCESS_KEYS[`top`].length) {
|
||||
result_title.setAttribute(`accesskey`, ACCESS_KEYS[`top`][RESULT_INDEX]);
|
||||
}
|
||||
} else {
|
||||
let ELEMENT_INDEX = (new Array((ELEMENT.parentElement).querySelectorAll(`*`))).indexOf(ELEMENT);
|
||||
if (ELEMENT_INDEX >= ACCESS_KEYS[`top`].length) {
|
||||
if (((ELEMENT.parentElement).querySelectorAll(`*`)).length > ELEMENT_INDEX + 1) {
|
||||
((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX + 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][1])
|
||||
};
|
||||
if ((((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].getAttribute(`accesskey`)) ? !(ACCESS_KEYS[`top`].includes(((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].getAttribute(`accesskey`))) : true) {
|
||||
((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][1])
|
||||
};
|
||||
// Set the quick return access key.
|
||||
ELEMENT.setAttribute(`accesskey`, `0`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
result_title.addEventListener(`click`, function () {
|
||||
pick(RESULTS[result], TARGET_NAME);
|
||||
setSelected(this);
|
||||
result_title.addEventListener(`click`, function () {
|
||||
setSelected(this);
|
||||
pick(result, RESULTS[result], TARGET_NAME);
|
||||
|
||||
// Set the access key.
|
||||
this.parentElement.querySelectorAll(`*`)
|
||||
accessKey(this);
|
||||
});
|
||||
|
||||
accessKey();
|
||||
result_element.appendChild(result_title);
|
||||
ELEMENT_TARGET.appendChild(result_element);
|
||||
|
||||
if ((SEARCH[TARGET_NAME]) ? SEARCH[TARGET_NAME][`selected`] == result : false) {
|
||||
setSelected(result_title);
|
||||
pick(result, RESULTS[result], TARGET_NAME);
|
||||
}
|
||||
});
|
||||
|
||||
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 {string} NAME the name of the currently selected data
|
||||
@param {object} ITEM the item picked
|
||||
@param {string} AREA the ID of this entire search thing
|
||||
@param {string} AREA the ID of the search
|
||||
*/
|
||||
function pick(ITEM, AREA) {
|
||||
async function pick(NAME, ITEM, AREA) {
|
||||
if (AREA) {
|
||||
let CONTAINERS = (document.querySelectorAll(`[data-result-linked="${AREA}"]`));
|
||||
|
||||
console.log(ITEM, AREA);
|
||||
if (CONTAINERS) {
|
||||
(CONTAINERS).forEach((CONTAINER) => {
|
||||
([].concat(CONTAINER.querySelectorAll(`[data-result-content]`), CONTAINER.querySelectorAll(`[data-result-store]`), document.querySelectorAll(`[data-result-enable]`))).forEach(function (ELEMENTS) {
|
||||
if (ELEMENTS) {
|
||||
CONTAINER.disabled = (ITEM != null) ? !((typeof ITEM).includes(`obj`) && !Array.isArray(ITEM)) : true;
|
||||
(ELEMENTS).forEach(async function(ELEMENT) {
|
||||
ELEMENT.disabled = CONTAINER.disabled;
|
||||
if (!ELEMENT.disabled) {
|
||||
if (ELEMENT.getAttribute(`data-result-store`) && ELEMENT.type) {
|
||||
// Init updater function.
|
||||
ELEMENT[`function`] = function() {};
|
||||
|
||||
// Make sure that target is contained
|
||||
let DATA = {};
|
||||
|
||||
DATA[`target`] = (Object.keys(ITEM).includes(ELEMENT.getAttribute(`data-result-store`))) ? [...AREA, ...[NAME], ...(ELEMENT.getAttribute(`data-result-store`).split(`,`))] : [...(ELEMENT.getAttribute(`data-result-store`).split(`,`)), ...[NAME]];
|
||||
DATA[`value`] = (Object.keys(ITEM).includes(ELEMENT.getAttribute(`data-result-store`))) ? ITEM[ELEMENT.getAttribute(`data-result-store`)] : await secretariat.read(DATA[`target`]);
|
||||
|
||||
console.log(DATA);
|
||||
|
||||
switch (ELEMENT[`type`]) {
|
||||
case `checkbox`:
|
||||
ELEMENT.checked = DATA[`value`];
|
||||
|
||||
ELEMENT[`function`] = async function() {
|
||||
await secretariat.write(DATA[`target`], ELEMENT.checked, 1);
|
||||
}
|
||||
|
||||
break;
|
||||
default:
|
||||
if ((typeof (ITEM[ELEMENT.getAttribute(`data-result-store`)])).includes(`obj`)) {
|
||||
ELEMENT.value = JSON.stringify(DATA[`value`]);
|
||||
|
||||
ELEMENT[`function`] = async function() {
|
||||
console.log(`running`);
|
||||
try {
|
||||
DATA[`value`] = JSON.parse(ELEMENT.value);
|
||||
secretariat.write(DATA[`target`], DATA[`value`]);
|
||||
} catch(err) {
|
||||
// The JSON isn't valid.
|
||||
alerts.error(err.name, texts.localized(`JSON_parse_error`), err.stack, false);
|
||||
};
|
||||
}
|
||||
} else {
|
||||
ELEMENT.value = DATA[`value`];
|
||||
|
||||
ELEMENT[`function`] = async function() {
|
||||
await secretariat.write(DATA[`target`], ELEMENT.value);
|
||||
console.log(`saving...`);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (ELEMENT.nodeName.toLowerCase().includes(`textarea`)) {
|
||||
ELEMENT.addEventListener(`blur`, ELEMENT[`function`]);
|
||||
} else {
|
||||
ELEMENT.addEventListener(`change`, ELEMENT[`function`]);
|
||||
}
|
||||
} else if (ELEMENT.getAttribute(`data-result-content`) || ELEMENT.getAttribute(`data-result-store`)) {
|
||||
ELEMENT.innerText = (ITEM[ELEMENT.getAttribute(`data-result-content`)] || ELEMENT.getAttribute(`data-result-content`).includes(`*`))
|
||||
? ((ELEMENT.getAttribute(`data-result-content`).includes(`*`))
|
||||
? NAME
|
||||
: ITEM[ELEMENT.getAttribute(`data-result-content`)])
|
||||
: ((ITEM[ELEMENT.getAttribute(`data-result-store`)])
|
||||
? (ITEM[ELEMENT.getAttribute(`data-result-store`)])
|
||||
: null) /*secretariat.read(((ITEM[(ELEMENT.getAttribute(`data-result-store`).split(`,`))])[ITEM])))*/;
|
||||
}
|
||||
} else {
|
||||
if (ELEMENT.getAttribute(`data-result-store`) && ELEMENT.type) {
|
||||
switch (ELEMENT[`type`]) {
|
||||
case `checkbox`:
|
||||
ELEMENT.checked = false;
|
||||
break;
|
||||
case `range`:
|
||||
case `number`:
|
||||
ELEMENT.value = 0;
|
||||
break;
|
||||
default:
|
||||
ELEMENT.value = ``;
|
||||
break;
|
||||
}
|
||||
} else if (ELEMENT.getAttribute(`data-result-content`) || ELEMENT.getAttribute(`data-result-store`)) {
|
||||
ELEMENT.innerText = ``;
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function find(element) {
|
||||
|
@ -513,11 +621,19 @@ export default class windowman {
|
|||
const secretariat = await import(
|
||||
chrome.runtime.getURL(`scripts/secretariat.js`)
|
||||
);
|
||||
|
||||
|
||||
// Return the selected result.
|
||||
return await secretariat.read(element.getAttribute(`data-result`));
|
||||
})();
|
||||
}
|
||||
display(element.getAttribute(`data-result`), SEARCH[element.getAttribute(`data-result`)][`results`], `name`);
|
||||
|
||||
if ((!((SEARCH[element.getAttribute(`data-result`)][`criteria`]) && (SEARCH[element.getAttribute(`data-result`)][`selected`])) || (typeof SEARCH[element.getAttribute(`data-result`)][`results`]).includes(`obj`) && SEARCH[element.getAttribute(`data-result`)][`results`] != null)
|
||||
? ((Object.keys(SEARCH[element.getAttribute(`data-result`)][`results`]).length <= 0) || !((SEARCH[element.getAttribute(`data-result`)][`selected`])))
|
||||
: true)
|
||||
{
|
||||
pick(null, null, element.getAttribute(`data-result`));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -527,19 +643,19 @@ export default class windowman {
|
|||
|
||||
@param {object} ELEMENT the element to change
|
||||
*/
|
||||
|
||||
element.addEventListener(`change`, async function () {find(element)});
|
||||
|
||||
element.addEventListener(`change`, async function () {find(element)});
|
||||
find(element);
|
||||
});
|
||||
|
||||
|
||||
|
||||
return (SEARCH);
|
||||
}
|
||||
}
|
||||
|
||||
fill();
|
||||
update();
|
||||
updates();
|
||||
search();
|
||||
this[`search`] = search();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue