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

rewrite search interface

Browse source
This commit is contained in:
buzz-lightsnack-2007 2024-05-17 23:02:15 +08:00
parent b9e6beb496
commit e25dad36f9
2 changed files with 592 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

18
_locales/en/messages.json
View file

@ -197,6 +197,21 @@
"message": "The icon change doesn't happen automatically." "message": "The icon change doesn't happen automatically."
}, },
"search_found_heading": {
"message": "Found the following:"
},
"search_notfound_heading": {
"message": "Didn't find anything."
},
"search_selected_heading": {
"message": "$item$:",
"placeholders": {
"item": {
"content": "$1"
}
}
},
"saving_current": { "saving_current": {
"message": "Saving…" "message": "Saving…"
}, },
@ -290,6 +305,9 @@
} }
} }
}, },
"error_msg_notURL_syntax": {
"message": "Double check your URLs and try again."
},
"error_msg_notJSON": { "error_msg_notJSON": {
"message": "The file has been downloaded, but it is not the correct file type." "message": "The file has been downloaded, but it is not the correct file type."
}, },

830
scripts/GUI/builder/windowman.search.js
View file

@ -1,256 +1,574 @@
import {global, observe} from "/scripts/secretariat.js"; import {global, background} from "/scripts/secretariat.js";
import logging from "/scripts/logging.js" import logging from "/scripts/logging.js"
import texts from "/scripts/mapping/read.js"; import texts from "/scripts/mapping/read.js";
import nested from "/scripts/utils/nested.js";
import wait from "/scripts/utils/wait.js";
export default class UI {
static Search() { class Search {
if (document.querySelectorAll(`[data-result]`)) { state = {};
/*
Display the search result. constructor () {
if (document.querySelectorAll(`[data-result]`)) {
@param {object} ELEMENT_TARGET the target element this.#get();
@param {object} RESULTS the results this.#set();
@param {object} TITLE_FIELD the title field for each result };
*/ };
var SEARCH = {};
/*
function display(TARGET_NAME, RESULTS, TITLE_FIELD) { Include all relevant DOM elements into this object.
*/
if (document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)) { #get() {
(document.querySelectorAll(`[data-results-list="${TARGET_NAME}"]`)).forEach(function (ELEMENT_TARGET) { document.querySelectorAll(`[data-result]`).forEach((ELEMENT) => {
// Set the target element to the correct data structure (lists). let SOURCE = ELEMENT.getAttribute(`data-result`);
TARGET_NAME = (!Array.isArray(TARGET_NAME)) ? TARGET_NAME.split(`,`) : TARGET_NAME;
if (SOURCE != `state`) {
// Clear the target element. this[SOURCE] = (!this[SOURCE])
ELEMENT_TARGET.innerHTML = ``; ? {}
: this[SOURCE];
function setSelected(element) {
SEARCH[TARGET_NAME][`selected`] = (element) ? (Object.keys(RESULTS))[(Array.prototype.slice.call(element.parentElement.parentElement.querySelectorAll(`a`))).indexOf(element)] : null; const elements = () => {
this[SOURCE][`elements`] = (this[SOURCE][`elements`]) ? this[SOURCE][`elements`] : {};
// Array.prototype.slice.call(element.parentElement.children)
if (element) { // First, add the search box.
(element.parentElement).parentElement.querySelectorAll(`li`).forEach((element_others) => { this[SOURCE][`elements`][`search box`] = (this[SOURCE][`elements`][`search box`])
element_others.classList.remove(`active`); ? this[SOURCE][`elements`][`search box`].push(ELEMENT)
}); : [ELEMENT];
element.parentElement.classList.add(`active`)
}; let SOURCES = {
} "results list": `[data-results-list="${SOURCE}"]`,
"container": `[data-result-linked="${SOURCE}"]`,
// Display the results. "enable": `[data-result-enable]`
if ((RESULTS != null && (typeof RESULTS).includes(`obj`) && !Array.isArray(RESULTS)) ? Object.keys(RESULTS).length > 0 : false) { };
let ACCESS_KEYS = {"top": ["1", "2", "3", "4", "5", "6", "7", "8", "9"], "nav": ["<", ">"]};
(Object.keys(RESULTS)).forEach((result) => { const linked = () => {
let result_element = document.createElement(`li`); let LINKED_SOURCES = {
let result_title = document.createElement(`a`); "content": "data-result-content",
result_title.classList.add(`waves-effect`); "fields": "data-result-store"
result_title.innerText = (RESULTS[result][TITLE_FIELD]) ? RESULTS[result][TITLE_FIELD] : result; };
function accessKey(ELEMENT) { (Object.keys(LINKED_SOURCES)).forEach((COMPONENT) => {
if (!ELEMENT) { (document.querySelector(SOURCES[`container`].concat(` [`, LINKED_SOURCES[COMPONENT], `]`)))
let RESULT_INDEX = (Object.keys(RESULTS)).indexOf(result); ? (document.querySelectorAll(SOURCES[`container`].concat(` [`, LINKED_SOURCES[COMPONENT], `]`))).forEach((ELEMENT) => {
if (RESULT_INDEX < ACCESS_KEYS[`top`].length) { this[SOURCE][`elements`][COMPONENT] = (this[SOURCE][`elements`][COMPONENT] && !(Array.isArray(this[SOURCE][`elements`][COMPONENT])) && (typeof this[SOURCE][`elements`][COMPONENT]).includes(`obj`)) ? this[SOURCE][`elements`][COMPONENT] : {};
result_title.setAttribute(`accesskey`, ACCESS_KEYS[`top`][RESULT_INDEX]);
} // Get the name of the element.
} else { let NAME = ELEMENT.getAttribute(LINKED_SOURCES[COMPONENT]);
let ELEMENT_INDEX = (new Array((ELEMENT.parentElement).querySelectorAll(`*`))).indexOf(ELEMENT);
if (ELEMENT_INDEX >= ACCESS_KEYS[`top`].length) { // Set the element.
if (((ELEMENT.parentElement).querySelectorAll(`*`)).length > ELEMENT_INDEX + 1) { this[SOURCE][`elements`][COMPONENT][NAME] = (this[SOURCE][`elements`][COMPONENT][NAME] ? this[SOURCE][`elements`][COMPONENT][NAME].length : false)
((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX + 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][1]) ? (this[SOURCE][`elements`][COMPONENT][NAME].includes(ELEMENT)
}; ? false
if ((((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].getAttribute(`accesskey`)) ? !(ACCESS_KEYS[`top`].includes(((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].getAttribute(`accesskey`))) : true) { : [...this[SOURCE][`elements`][COMPONENT][NAME], ELEMENT])
((ELEMENT.parentElement).querySelectorAll(`*`))[ELEMENT_INDEX - 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][1]) : [ELEMENT];
};
// Set the quick return access key.
ELEMENT.setAttribute(`accesskey`, `0`); // Remove the attribute.
} ELEMENT.removeAttribute(LINKED_SOURCES[COMPONENT]);
} })
} : false;
})
result_title.addEventListener(`click`, function () { }
setSelected(this);
pick(result, RESULTS[result], TARGET_NAME); if (SOURCES ? Object.keys(SOURCES) : false) {
(Object.keys(SOURCES)).forEach((COMPONENT) => {
// Set the access key. (document.querySelector(SOURCES[COMPONENT]))
accessKey(this); ? this[SOURCE][`elements`][COMPONENT] = document.querySelectorAll(SOURCES[COMPONENT])
}); : false;
})
accessKey(); linked();
result_element.appendChild(result_title); }
ELEMENT_TARGET.appendChild(result_element); }
if ((SEARCH[TARGET_NAME]) ? SEARCH[TARGET_NAME][`selected`] == result : false) { // Get relevant data.
setSelected(result_title); const attributes = () => {
pick(result, RESULTS[result], TARGET_NAME); // Accumulate all search criteria where possible.
} (ELEMENT.hasAttribute(`data-results-filters`))
}); ? this[SOURCE][`additional criteria`] = (this[SOURCE][`additional criteria`]) ? [...this[SOURCE][`additional criteria`], ...ELEMENT.getAttribute(`data-results-filters`).split(`,`)] : ELEMENT.getAttribute(`data-results-filters`).split(`,`)
} : false;
}); (ELEMENT.hasAttribute(`data-show`))
} ? this[SOURCE][`preview`] = ELEMENT.getAttribute(`data-show`)
} : false;
/* Function to execute when a search result item has been picked. // Remove attributes only used during construction, simultaneously protecting against edited HTML from the debugger.
[`data-result`, `data-results-filters`, `data-show`].forEach((ATTRIBUTE) => {
@param {string} NAME the name of the currently selected data ELEMENT.removeAttribute(ATTRIBUTE);
@param {object} ITEM the item picked });
@param {string} AREA the ID of the search }
*/
async function pick(NAME, ITEM, AREA) { elements();
if (AREA) { attributes();
let CONTAINERS = (document.querySelectorAll(`[data-result-linked="${AREA}"]`)); }
});
if (CONTAINERS) {
(CONTAINERS).forEach((CONTAINER) => { };
CONTAINER.disabled = (ITEM != null) ? !((typeof ITEM).includes(`obj`) && !Array.isArray(ITEM)) : true;
([].concat(CONTAINER.querySelectorAll(`[data-result-content]`), CONTAINER.querySelectorAll(`[data-result-store]`), document.querySelectorAll(`[data-result-enable]`))).forEach(async function (ELEMENTS) { /*
if (ELEMENTS) { Set the functions of the relevant elements.
(ELEMENTS).forEach(async function(ELEMENT) { */
ELEMENT.disabled = CONTAINER.disabled; #set() {
if (!ELEMENT.disabled) { (Object.keys(this)).forEach((SOURCE) => {
if (ELEMENT.getAttribute(`data-result-store`) && ELEMENT.type) { if (SOURCE != `state`) {
// Init updater function. this[SOURCE][`elements`][`search box`].forEach((ELEMENT) => {
ELEMENT[`function`] = function() {}; ELEMENT.addEventListener(`change`, () => {this.run({"name": SOURCE, "element": ELEMENT}, null, {"auto sync": true});});
});
var DATA = {};
// Set the state.
DATA[`target`] = ((ELEMENT.getAttribute(`data-result-store`).split(`,`))[0] == ``) ? [...(ELEMENT.getAttribute(`data-result-store`).split(`,`).slice(1)), ...[NAME]] : [...AREA, ...[NAME], ...(ELEMENT.getAttribute(`data-result-store`).split(`,`))]; this[SOURCE][`scripts`] = {"background": {}};
DATA[`value`] = ((Object.keys(ITEM).includes(ELEMENT.getAttribute(`data-result-store`))) ? ITEM[ELEMENT.getAttribute(`data-result-store`)] : await global.read(DATA[`target`], (ELEMENT.hasAttribute(`data-store-location`)) ? parseInt(ELEMENT.getAttribute(`data-store-location`)) : -1));
// Find the data.
switch (ELEMENT[`type`]) { this.run({"name": SOURCE}, `*`, {"auto sync": true});
case `checkbox`: this.pick(SOURCE, null);
ELEMENT.checked = (DATA[`value`]); }
});
ELEMENT[`function`] = function() { };
DATA[`target`] = ((ELEMENT.getAttribute(`data-result-store`).split(`,`))[0] == ``) ? [...(ELEMENT.getAttribute(`data-result-store`).split(`,`).slice(1)), ...[NAME]] : [...AREA, ...[NAME], ...(ELEMENT.getAttribute(`data-result-store`).split(`,`))];
global.write(DATA[`target`], ELEMENT.checked, (ELEMENT.hasAttribute(`data-store-location`)) ? parseInt(ELEMENT.getAttribute(`data-store-location`)) : -1); /*
}; Run a search.
break;
default: @param {object} source the source data
if ((typeof (ITEM[ELEMENT.getAttribute(`data-result-store`)])).includes(`obj`)) { @param {object} data the data to find for
ELEMENT.value = JSON.stringify(DATA[`value`]); @param {object} options the options to use
*/
ELEMENT[`function`] = function() { async run(source, data, options) {
try { const show = () => {
DATA[`target`] = ((ELEMENT.getAttribute(`data-result-store`).split(`,`))[0] == ``) ? [...(ELEMENT.getAttribute(`data-result-store`).split(`,`).slice(1)), ...[NAME]] : [...AREA, ...[NAME], ...(ELEMENT.getAttribute(`data-result-store`).split(`,`))]; return(new Promise((resolve, reject) => {
DATA[`value`] = JSON.parse(ELEMENT.value.trim()); Object.keys(this).includes(source[`name`]) ? resolve(
global.write(DATA[`target`], DATA[`value`], (ELEMENT.hasAttribute(`data-store-location`)) ? parseInt(ELEMENT.getAttribute(`data-store-location`)) : -1); this.find(source, data).then((results) => {
} catch(err) { return(this.display(source[`name`], results, (this[source[`name`]][`preview`]) ? (this[source[`name`]][`preview`]) : `name`));
// The JSON isn't valid. }))
logging.error(err.name, texts.localized(`error_msg_notJSON_syntax`), err.stack, false); : reject();
}; }));
} };
} else {
ELEMENT.value = DATA[`value`]; show().then(() => {
if (((typeof options).includes(`obj`) && options) ? options[`auto sync`] : false) {
ELEMENT[`function`] = function() { // Set the refresh function.
DATA[`target`] = ((ELEMENT.getAttribute(`data-result-store`).split(`,`))[0] == ``) ? [...(ELEMENT.getAttribute(`data-result-store`).split(`,`).slice(1)), ...[NAME]] : [...AREA, ...[NAME], ...(ELEMENT.getAttribute(`data-result-store`).split(`,`))]; let item = this[source[`name`]][`selected`];
global.write(DATA[`target`], ELEMENT.value.trim(), (ELEMENT.hasAttribute(`data-store-location`)) ? parseInt(ELEMENT.getAttribute(`data-store-location`)) : -1);
} this[source[`name`]][`scripts`][`refresh`] = () => {
} wait((this[`state`][`read/write`] ? this[`state`][`read/write`] >= 0 : true)).then(
break; () => {
} if (this[source][`selected`] == item) {
show()
if (ELEMENT.nodeName.toLowerCase().includes(`textarea`)) { } else if (this[source[`name`]][`scripts`][`background`][`refresh`]) {
ELEMENT.addEventListener(`blur`, ELEMENT[`function`]); this[source[`name`]][`scripts`][`background`][`refresh`].cancel();
} 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(`*`)) this[source[`name`]][`scripts`][`background`][`refresh`] = new background(() => {this[source[`name`]][`scripts`][`refresh`]});
? NAME };
: ITEM[ELEMENT.getAttribute(`data-result-content`)]) }).catch((err) => {
: ((ITEM[ELEMENT.getAttribute(`data-result-store`)]) logging.error(err);
? (ITEM[ELEMENT.getAttribute(`data-result-store`)]) });
: null) /*global.read(((ITEM[(ELEMENT.getAttribute(`data-result-store`).split(`,`))])[ITEM])));*/ };
}
} else { /*
if (ELEMENT.getAttribute(`data-result-store`) && ELEMENT.type) { Find the data.
switch (ELEMENT[`type`]) {
case `checkbox`: @param {object} source the source data
ELEMENT.checked = false; @param {string} data the data to find for
break; @param {object} the results, with their corresponding name as the key
case `range`: */
case `number`: async find (source, data) {
ELEMENT.value = 0; ((((typeof source).includes(`str`) ? source.trim() : false) || Array.isArray(source)) && source)
break; ? source = {"name": source}
default: : false;
ELEMENT.value = ``;
break; // Set the primary search criteria.
} if (data && data != `*`) {
} else if (ELEMENT.getAttribute(`data-result-content`) || ELEMENT.getAttribute(`data-result-store`)) { // Having data filled means an override.
ELEMENT.innerText = ``; this[source[`name`]][`criteria`] = ((typeof data).includes(`str`)) ? data.trim() : data;
} } else if ((source[`element`]) ? source[`element`].value.trim() : false) {
// There is an element to use.
// Disable the list element if in case it is a clickable element. this[source[`name`]][`criteria`] = source[`element`].value.trim();
if ((ELEMENT.parentElement.nodeName.toLowerCase()).includes(`li`)) { } else if (this[source[`name`]][`elements`][`search box`] ? this[source[`name`]][`elements`][`search box`].length : false) {
ELEMENT.parentElement.disabled = CONTAINER.disabled; // No element defined, look for every box.
} (this[source[`name`]][`elements`][`search box`]).forEach((ELEMENT) => {
}; this[source[`name`]][`criteria`] = (ELEMENT.type.includes(`num`) || ELEMENT.type.includes(`range`))
}) ? ((parseFloat(ELEMENT.value.trim()) != parseInt(ELEMENT.value.trim()))
} ? parseFloat(ELEMENT.value.trim())
}) : parseInt(ELEMENT.value.trim()))
}) : ELEMENT.value.trim();
}
} this[source[`name`]][`criteria`] = (this[source[`name`]][`criteria`] != ``) ? this[source[`name`]][`criteria`] : null;
} })
} else {
async function find(element) { this[source[`name`]][`criteria`] = null;
if (element.getAttribute(`data-result`)) { };
if (!SEARCH[element.getAttribute(`data-result`)]) {
SEARCH[element.getAttribute(`data-result`)] = {}; // Find.
} this[source[`name`]][`results`] = await ((this[source[`name`]][`criteria`] != null)
SEARCH[element.getAttribute(`data-result`)][`criteria`] = element.value.trim(); ? ((this[source[`name`]][`additional criteria`] ? this[source[`name`]][`additional criteria`].length : false)
? global.search(source[`name`], this[source[`name`]][`criteria`], this[source[`name`]][`additional criteria`])
if (SEARCH[element.getAttribute(`data-result`)][`criteria`]) { : global.search(source[`name`], this[source[`name`]][`criteria`]))
if ( : global.read(source[`name`]));
element.getAttribute(`data-results-filters`)
? element.getAttribute(`data-results-filters`).trim() // Return the data.
: false return (this[source[`name`]][`results`]);
) { }
SEARCH[element.getAttribute(`data-result`)][`additional criteria`] = element
.getAttribute(`data-results-filters`) /*
.split(`,`); Display the search results.
}
SEARCH[element.getAttribute(`data-result`)][`results`] = await global.search(element.getAttribute(`data-result`), SEARCH[element.getAttribute(`data-result`)][`criteria`], SEARCH[element.getAttribute(`data-result`)][`additional criteria`]); @param {string} source the source data
} else { @param {object} data the data to display
SEARCH[element.getAttribute(`data-result`)][`results`] = await global.read(element.getAttribute(`data-result`)); @param {string} title the field to display
}; */
display(source, data, title) {
display(element.getAttribute(`data-result`), SEARCH[element.getAttribute(`data-result`)][`results`], `name`); if (source ? (Array.isArray(source) ? source.length : String(source)) : false) {
source = (Array.isArray(source)) ? source.join(`,`) : String(source);
// Make sure it compensates vanished objects and no results detection.
if ( // Get the data.
((!(SEARCH[element.getAttribute(`data-result`)][`selected`]) || (typeof SEARCH[element.getAttribute(`data-result`)][`results`]).includes(`obj`) && SEARCH[element.getAttribute(`data-result`)][`results`] != null) data = (data && ((typeof data).includes(`obj`))) ? data : this[source][`results`];
? (((SEARCH[element.getAttribute(`data-result`)][`results`] != null) ? (Object.keys(SEARCH[element.getAttribute(`data-result`)][`results`]).length <= 0) : false)
|| !((SEARCH[element.getAttribute(`data-result`)][`selected`]))) const gui_output = () => {
: true) || // Prepare the elements we will need.
(((((typeof SEARCH[element.getAttribute(`data-result`)][`results`]).includes(`obj`) && SEARCH[element.getAttribute(`data-result`)][`results`] != undefined && SEARCH[element.getAttribute(`data-result`)][`results`]) ? Object.keys(SEARCH[element.getAttribute(`data-result`)][`results`]).length : false) && SEARCH[element.getAttribute(`data-result`)][`selected`]) if (this[source][`elements`][`results list`] ? this[source][`elements`][`results list`].length : false) {
? !(Object.keys(SEARCH[element.getAttribute(`data-result`)][`results`]).includes(SEARCH[element.getAttribute(`data-result`)][`selected`])) const design = () => {
: false) // Prepare the access keys.
) { let ACCESS_KEYS = {"top": ["1", "2", "3", "4", "5", "6", "7", "8", "9"], "nav": ["<", ">"]};
pick(null, null, element.getAttribute(`data-result`));
} /*
Add the selected state.
*/
} const select = (element) => {
} if (element) {
// Remove all active classes.
document.querySelectorAll(`[data-result]`).forEach((element) => { (element.parentElement).parentElement.querySelectorAll(`li`).forEach((ELEMENT) => {
/* GUI changes to find ELEMENT.classList.remove(`active`);
});
@param {object} ELEMENT the element to change
*/ // Add the active.
element.parentElement.classList.add(`active`);
element.addEventListener(`change`, async function () {find(element)});
find(element); return (element);
};
observe(() => { };
new logging(texts.localized(`saving_reload_title`), texts.localized(`saving_reload_body`));
}); /*
}); Add the access keys (shortcut).
return (SEARCH); @param {string} name the name of the element
} @param {object} ELEMENT the element to add the access key to
} @param {object} state the current state of the element
} */
const shortcut = (name, element, state) => {
let RESULT_INDEX = (Object.keys(data)).indexOf(name);
if (RESULT_INDEX >= 0) {
if (state.includes(`config`)) {
((RESULT_INDEX < ACCESS_KEYS[`top`].length) && (RESULT_INDEX >= 0))
? element.setAttribute(`accesskey`, ACCESS_KEYS[`top`][RESULT_INDEX])
: false;
return (element);
} else if (state.includes(`execute`)) {
let ELEMENT = {"selected": element};
ELEMENT[`neighbors`] = (ELEMENT[`selected`].parentElement.parentElement).querySelectorAll(`a`);
// Remove elements with accesskeys in nav.
(ELEMENT[`neighbors`]).forEach((OTHER) => {
(OTHER.getAttribute(`accesskey`) ? (ACCESS_KEYS[`nav`].includes(OTHER.getAttribute(`accesskey`))) : false)
? OTHER.removeAttribute(`accesskey`)
: false;
})
if ((RESULT_INDEX + 1 >= ACCESS_KEYS[`top`].length) && (RESULT_INDEX + 1 < ELEMENT[`neighbors`].length)) {
ELEMENT[`neighbors`][RESULT_INDEX + 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][1])
}
(RESULT_INDEX > ACCESS_KEYS[`top`].length)
? (ELEMENT[`neighbors`])[RESULT_INDEX - 1].setAttribute(`accesskey`, ACCESS_KEYS[`nav`][0])
: false;
(RESULT_INDEX >= ACCESS_KEYS[`top`].length)
? ELEMENT[`selected`].setAttribute(`accesskey`, `0`)
: false;
return (ELEMENT);
}
}
}
let ELEMENTS = [];
(data ? Object.keys(data).length : false)
? (Object.keys(data)).forEach((RESULT) => {
let ELEMENTS_RESULT = {}
ELEMENTS_RESULT[`container`] = document.createElement(`li`);
ELEMENTS_RESULT[`title`] = document.createElement(`a`);
// Add the classes.
ELEMENTS_RESULT[`title`].classList.add(`waves-effect`);
ELEMENTS_RESULT[`title`].textContent = String((title && data[RESULT][title]) ? data[RESULT][title] : RESULT);
// Add the action.
ELEMENTS_RESULT[`title`].addEventListener(`click`, () => {
// Set the visual state.
select(ELEMENTS_RESULT[`title`]);
shortcut(RESULT, ELEMENTS_RESULT[`title`], `execute`);
// Pick the data.
this.pick(source, RESULT, data[RESULT]);
});
// Add the shortcut.
ELEMENTS_RESULT[`title`] = shortcut(RESULT, ELEMENTS_RESULT[`title`], `config`);
// Add the elements to the container.
ELEMENTS_RESULT[`container`].appendChild(ELEMENTS_RESULT[`title`]);
ELEMENTS.push(ELEMENTS_RESULT[`container`]);
})
: false;
return (ELEMENTS);
}
let TEMPLATE = design();
(this[source][`elements`][`results list`]).forEach((ELEMENT_TARGET) => {
// Clear the target element.
ELEMENT_TARGET.innerHTML = ``;
(TEMPLATE.length)
? TEMPLATE.forEach((ELEMENT) => {
ELEMENT_TARGET.appendChild(ELEMENT);
})
: this.pick(source, null);
})
};
}
/*
Display the search results in the log.
*/
function log (data, title) {
if (Object.keys(data).length) {
let RESULT_STRING = ``;
(Object.keys(data)).forEach((RESULT_KEY) => {
RESULT_STRING += RESULT_KEY.concat(((title) ? data[RESULT_KEY][title] : false) ? `: `.concat(data[RESULT_KEY][title]) : ``, `\n`);
})
new logging(texts.localized(`search_found_heading`), RESULT_STRING, {"silent": true});
} else {
new logging(texts.localized(`search_notfound_heading`));
}
};
log(data, title);
gui_output();
}
};
/*
Pick a result from the search.
@param {string} source the name of the source
@param {object} item the item picked
@param {string} details the details of the selected item
*/
pick(source, item, details) {
// Fill in the details if it's missing when the item and source isn't.
if (!details && (source && item)) {
(Object.hasOwn(this[source][`results`], item))
? details = this[source][`results`][item]
: false;
};
const set = () => {
this[source][`selected`] = item;
// Set the background state.
nested.dictionary.get(this, [source, `scripts`, `background`, `selected`])
? this[source][`scripts`][`background`][`selected`].cancel()
: false;
if (!EMPTY) {
this[source][`scripts`][`reader`] = wait((this[`state`][`read/write`] ? this[`state`][`read/write`] >= 0 : true)).then(
() => {(this[source][`selected`] == item) ? gui_display() : false;}
);
// Reset the background.
this[source][`scripts`][`background`][`selected`] = new background(() => {this[source][`scripts`][`reader`]});
}
}
const gui_display = () => {
const enable = () => {
let DISABLED = EMPTY;
let TARGETS = [];
TARGETS = [...((this[source][`elements`][`container`] ? this[source][`elements`][`container`].length : false) ? this[source][`elements`][`container`] : []), ...((this[source][`elements`][`enable`] ? this[source][`elements`][`enable`].length : false) ? this[source][`elements`][`enable`] : [])];
[`content`, `fields`].forEach((ELEMENTS) => {
(this[source][`elements`][ELEMENTS] ? Object.keys(this[source][`elements`][ELEMENTS]).length : false)
? Object.keys(this[source][`elements`][ELEMENTS]).forEach((SOURCE) => {
(this[source][`elements`][ELEMENTS][SOURCE] ? this[source][`elements`][ELEMENTS][SOURCE].length : false)
? TARGETS = [...TARGETS, ...this[source][`elements`][ELEMENTS][SOURCE]]
: false;
})
: false;
});
(TARGETS.length)
? (TARGETS).forEach((ELEMENT) => {
ELEMENT.disabled = DISABLED;
})
: false;
};
const fill = () => {
[`content`, `fields`].forEach((ELEMENTS) => {
(this[source][`elements`][ELEMENTS] ? Object.keys(this[source][`elements`][ELEMENTS]).length : false)
? Object.keys(this[source][`elements`][ELEMENTS]).forEach(async (SOURCE) => {
if ((this[source][`elements`][ELEMENTS][SOURCE]) ? this[source][`elements`][ELEMENTS][SOURCE].length : false) {
if (EMPTY) {
this[source][`elements`][ELEMENTS][SOURCE].forEach((ELEMENT) => {
if ((ELEMENT.nodeName.toLowerCase()).includes(`input`) || (ELEMENT.nodeName.toLowerCase()).includes(`textarea`) || (ELEMENT.nodeName.toLowerCase()).includes(`progress`)) {
switch (ELEMENT.type) {
case `checkbox`:
case `radio`:
ELEMENT.checked = false;
break;
default:
ELEMENT.value = ``;
};
if ((ELEMENT.nodeName.toLowerCase()).includes(`input`) || (ELEMENT.nodeName.toLowerCase()).includes(`textarea`)) {
// Check if the element has an event listener and remove it.
(ELEMENT.func)
? [`change`, `blur`].forEach((EVENT) => {
ELEMENT.removeEventListener(EVENT, ELEMENT.func)
})
: false;
}
} else {
ELEMENT.innerText = ``;
};
})
} else {
let DATA = {};
DATA[`source`] = (SOURCE != `*`) ? SOURCE.split(`,`) : SOURCE;
DATA[`target`] = (DATA[`source`] != `*`)
? ((DATA[`source`][0] == `` || DATA[`source`][0] == `/`)
? [...(DATA[`source`].slice(1)), ...[item]]
: [...[item], ...(DATA[`source`])])
: DATA[`source`];
DATA[`value`] = (DATA[`source`] != `*`)
? ((nested.dictionary.get(details, DATA[`source`]) != null)
? nested.dictionary.get(details, DATA[`source`])
: await global.read(DATA[`target`]))
: ((typeof item).includes(`str`)
? item.trim()
: item);
this[source][`elements`][ELEMENTS][SOURCE].forEach((ELEMENT) => {
if ((ELEMENT.nodeName.toLowerCase()).includes(`input`) || (ELEMENT.nodeName.toLowerCase()).includes(`textarea`) || (ELEMENT.nodeName.toLowerCase()).includes(`progress`)) {
switch (ELEMENT.type) {
case `checkbox`:
case `radio`:
ELEMENT.checked = (DATA[`value`]);
break;
default:
ELEMENT.value = DATA[`value`];
};
if ((DATA[`source`] != `*`) && (ELEMENT.nodeName.toLowerCase()).includes(`input`) || (ELEMENT.nodeName.toLowerCase()).includes(`textarea`)) {
// Remove the existing function.
(ELEMENT.func)
? [`change`, `blur`].forEach((EVENT) => {
ELEMENT.removeEventListener(EVENT, ELEMENT.func)
})
: false;
// Add the new function.
ELEMENT.func = () => {};
switch (ELEMENT.type) {
case `checkbox`:
case `radio`:
ELEMENT.func = () => {
this[`state`][`read/write`] = -1;
this[`state`][`last result`] = global.write(DATA[`target`], ELEMENT.checked);
this[`state`][`read/write`] = 0;
return(this[`state`][`last result`]);
};
ELEMENT.checked = (DATA[`value`]);
break;
default:
if ((typeof DATA[`value`]).includes(`obj`) && !Array.isArray(DATA[`value`])) {
ELEMENT.value = JSON.stringify(DATA[`value`]);
ELEMENT.func = () => {
this[`state`][`read/write`] = -1;
this[`state`][`last result`] = false;
try {
this[`state`][`last result`] = global.write(DATA[`target`], JSON.parse(ELEMENT.value.trim()));
} catch(err) {
// The JSON isn't valid.
logging.error(err.name, texts.localized(`error_msg_notJSON_syntax`), err.stack, false);
};
this[`state`][`read/write`] = 0;
return(this[`state`][`last result`]);
}
} else {
ELEMENT.value = DATA[`value`];
ELEMENT.func = () => {
this[`state`][`read/write`] = -1;
ELEMENT.val = ((ELEMENT.type.includes(`num`) || ELEMENT.type.includes(`range`))
? ((parseFloat(ELEMENT.value.trim()) != parseInt(ELEMENT.value.trim()))
? parseFloat(ELEMENT.value.trim())
: parseInt(ELEMENT.value.trim())
)
: ELEMENT.value.trim());
this[`state`][`last result`] = global.write(DATA[`target`], ELEMENT.val);
this[`state`][`read/write`] = 0;
delete ELEMENT.val;
return (this[`state`][`last result`]);
}
};
};
(ELEMENT.nodeName.toLowerCase().includes(`textarea`))
? ELEMENT.addEventListener(`blur`, ELEMENT.func)
: false;
ELEMENT.addEventListener(`change`, ELEMENT.func);
}
} else {
ELEMENT.innerText = DATA[`value`];
};
})
}
}
})
: false;
});
}
enable();
fill();
}
const log = () => {
(!EMPTY)
? new logging (texts.localized(`search_selected_heading`, false, [item]), ((typeof details).includes(`obj`) && !Array.isArray(details)) ? JSON.stringify(details) : String(details), {"silent": true})
: false;
};
let EMPTY = (item == null) ? true : ((details != null) ? !((typeof details).includes(`obj`) && !Array.isArray(details)) : true)
set();
log();
gui_display();
}
};
export { Search };