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