☰

$Config

Allows end users to configure scripts.

目前为 2024-06-27 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/446506/1401503/%24Config.js 

  1. // ==UserScript==
  2. // @name        $Config
  3. // @author      Callum Latham <callumtylerlatham@gmail.com> (https://github.com/esc-ism/tree-frame)
  4. // @exclude     *
  5. // @description Allows end users to configure scripts.
  6. // ==/UserScript==
  7.  
  8. /**
  9.  * A node's value.
  10.  * @typedef {boolean | number | string} NodeValue
  11.  */
  12.  
  13. /**
  14.  * A child node.
  15.  * @typedef {object} ChildNode
  16.  * @property {string} [label] The node's purpose.
  17.  * @property {boolean | number | string} [value] The node's data.
  18.  * @property {Array<NodeValue> | function(NodeValue): boolean | string} [predicate] A data validator.
  19.  * @property {"color" | "date" | "datetime-local" | "email" | "month" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"} [input] The desired input type.
  20.  */
  21.  
  22. /**
  23.  * A parent node.
  24.  * @typedef {object} ParentNode
  25.  * @property {Array<ChildNode | (ChildNode & ParentNode)>} children The node's children.
  26.  * @property {ChildNode | (ChildNode & ParentNode)} [seed] - A node that may be added to children.
  27.  * @property {function(Array<ChildNode>): boolean | string} [childPredicate] A child validator.
  28.  * @property {function(Array<ChildNode>): boolean | string} [descendantPredicate] A descendant validator.
  29.  * @property {number} [poolId] Children may be moved between nodes with poolId values that match their parent's.
  30.  */
  31.  
  32. /**
  33.  * A style to pass to the config-editor iFrame.
  34.  * @typedef {object} InnerStyle
  35.  * @property {number} [fontSize] The base font size for the whole frame.
  36.  * @property {string} [borderTooltip] The colour of tooltip borders.
  37.  * @property {string} [borderModal] The colour of the modal's border.
  38.  * @property {string} [headBase] The base colour of the modal's header.
  39.  * @property {'Black / White' | 'Invert'} [headContrast] The method of generating a contrast colour for the modal's header.
  40.  * @property {string} [headButtonExit] The colour of the modal header's exit button.
  41.  * @property {string} [headButtonLabel] The colour of the modal header's exit button.
  42.  * @property {string} [headButtonStyle] The colour of the modal header's style button.
  43.  * @property {string} [headButtonHide] The colour of the modal header's node-hider button.
  44.  * @property {string} [headButtonAlt] The colour of the modal header's alt button.
  45.  * @property {Array<string>} [nodeBase] Base colours for nodes, depending on their depth.
  46.  * @property {'Black / White' | 'Invert'} [nodeContrast] The method of generating a contrast colour for nodes.
  47.  * @property {string} [nodeButtonCreate] The colour of nodes' add-child buttons.
  48.  * @property {string} [nodeButtonDuplicate] The colour of nodes' duplicate buttons.
  49.  * @property {string} [nodeButtonMove] The colour of nodes' move buttons.
  50.  * @property {string} [nodeButtonDisable] The colour of nodes' toggle-active buttons.
  51.  * @property {string} [nodeButtonDelete] The colour of nodes' delete buttons.
  52.  * @property {string} [validBackground] The colour used to show that a node's value is valid.
  53.  * @property {string} [invalidBackground] The colour used to show that a node's value is invalid.
  54.  */
  55.  
  56. // eslint-disable-next-line no-unused-vars
  57. class $Config {
  58. 	/**
  59. 	 * @param {string} KEY_TREE The identifier used to store and retrieve the user's config.
  60. 	 * @param {ParentNode} TREE_DEFAULT_RAW The tree to use as a starting point for the user's config.
  61. 	 * @param {function(Array<ChildNode | (ChildNode & ParentNode)>): *} _getConfig Takes a root node's children and returns the data structure expected by your script.
  62. 	 * @param {string} TITLE The heading to use in the config-editor iFrame.
  63. 	 * @param {InnerStyle} [STYLE_INNER] A custom style to use as the default
  64. 	 * @param {object} [_STYLE_OUTER] CSS to assign to the frame element. e.g. {zIndex: 9999}.
  65. 	 */
  66. 	constructor(KEY_TREE, TREE_DEFAULT_RAW, _getConfig, TITLE, STYLE_INNER = {}, _STYLE_OUTER = {}) {
  67. 		// PRIVATE FUNCTIONS
  68. 		
  69. 		const getStrippedForest = (children) => {
  70. 			const stripped = [];
  71. 			
  72. 			for (const child of children) {
  73. 				if (child.isActive === false) {
  74. 					continue;
  75. 				}
  76. 				
  77. 				const data = {};
  78. 				
  79. 				if ('value' in child) {
  80. 					data.value = child.value;
  81. 				}
  82. 				
  83. 				if ('label' in child) {
  84. 					data.label = child.label;
  85. 				}
  86. 				
  87. 				if ('children' in child) {
  88. 					data.children = getStrippedForest(child.children);
  89. 				}
  90. 				
  91. 				stripped.push(data);
  92. 			}
  93. 			
  94. 			return stripped;
  95. 		};
  96. 		
  97. 		const getConfig = ({children}) => _getConfig(getStrippedForest(children));
  98. 		
  99. 		const getError = (message, error) => {
  100. 			if (error) {
  101. 				console.error(error);
  102. 			}
  103. 			
  104. 			return new Error(message.includes('\n') ? `[${TITLE}]\n\n${message}` : `[${TITLE}] ${message}`);
  105. 		};
  106. 		
  107. 		// PRIVATE CONSTS
  108. 		
  109. 		const URL = {
  110. 			SCHEME: 'https',
  111. 			HOST: 's3.eu-west-2.amazonaws.com',
  112. 			PATH: 'callumlatham.com/tree-frame-4/index.html',
  113. 			PARAMS: `?id=${KEY_TREE}`,
  114. 		};
  115. 		
  116. 		const KEY_STYLES = 'TREE_FRAME_USER_STYLES';
  117. 		
  118. 		const STYLE_OUTER = {
  119. 			position: 'fixed',
  120. 			height: '100vh',
  121. 			width: '100vw',
  122. 			..._STYLE_OUTER,
  123. 		};
  124. 		
  125. 		// CORE PERMISSION CHECKS
  126. 		
  127. 		if (typeof GM.getValue !== 'function') {
  128. 			throw getError('Missing GM.getValue permission.');
  129. 		}
  130. 		
  131. 		if (typeof GM.setValue !== 'function') {
  132. 			throw getError('Missing GM.setValue permission.');
  133. 		}
  134. 		
  135. 		if (typeof KEY_TREE !== 'string' || KEY_TREE === '') {
  136. 			throw getError(`'${KEY_TREE}' is not a valid storage key.`);
  137. 		}
  138. 		
  139. 		// PRIVATE STATE
  140. 		
  141. 		let isOpen = false;
  142. 		
  143. 		// PUBLIC FUNCTIONS
  144. 		
  145. 		const setConfig = (tree) => {
  146. 			const config = getConfig(tree);
  147. 			
  148. 			this.get = () => config;
  149. 		};
  150. 		
  151. 		this.ready = (async () => {
  152. 			// Remove functions from tree to enable postMessage transmission
  153. 			
  154. 			const [DATA_INIT, PREDICATES] = (() => {
  155. 				const getNumberedPredicates = (node, predicateCount) => {
  156. 					const predicates = [];
  157. 					const replacements = {};
  158. 					
  159. 					for (const property of ['predicate', 'childPredicate', 'descendantPredicate']) {
  160. 						switch (typeof node[property]) {
  161. 							case 'number':
  162. 								throw getError('numbers aren\'t valid predicates');
  163. 							
  164. 							case 'function':
  165. 								replacements[property] = predicateCount++;
  166. 								
  167. 								predicates.push(node[property]);
  168. 						}
  169. 					}
  170. 					
  171. 					if (Array.isArray(node.children)) {
  172. 						replacements.children = [];
  173. 						
  174. 						for (const child of node.children) {
  175. 							const [replacement, childPredicates] = getNumberedPredicates(child, predicateCount);
  176. 							
  177. 							predicateCount += childPredicates.length;
  178. 							
  179. 							predicates.push(...childPredicates);
  180. 							
  181. 							replacements.children.push(replacement);
  182. 						}
  183. 					}
  184. 					
  185. 					if ('seed' in node) {
  186. 						const [replacement, seedPredicates] = getNumberedPredicates(node.seed, predicateCount);
  187. 						
  188. 						predicates.push(...seedPredicates);
  189. 						
  190. 						replacements.seed = replacement;
  191. 					}
  192. 					
  193. 					return [{...node, ...replacements}, predicates];
  194. 				};
  195. 				
  196. 				const [TREE_DEFAULT_PROCESSED, PREDICATES] = getNumberedPredicates(TREE_DEFAULT_RAW, 0);
  197. 				
  198. 				return [
  199. 					{
  200. 						defaultTree: TREE_DEFAULT_PROCESSED,
  201. 						title: TITLE,
  202. 						defaultStyle: STYLE_INNER,
  203. 					}, PREDICATES,
  204. 				];
  205. 			})();
  206. 			
  207. 			// Setup frame
  208. 			
  209. 			const [targetWindow, frame] = (() => {
  210. 				const frame = document.createElement('iframe');
  211. 				
  212. 				frame.src = `${URL.SCHEME}://${URL.HOST}/${URL.PATH}${URL.PARAMS}`;
  213. 				
  214. 				for (const [property, value] of Object.entries(STYLE_OUTER)) {
  215. 					frame.style[property] = value;
  216. 				}
  217. 				
  218. 				frame.style.display = 'none';
  219. 				
  220. 				let targetWindow = window;
  221. 				
  222. 				while (targetWindow !== targetWindow.parent) {
  223. 					targetWindow = targetWindow.parent;
  224. 				}
  225. 				
  226. 				targetWindow.document.body.appendChild(frame);
  227. 				
  228. 				return [targetWindow, frame];
  229. 			})();
  230. 			
  231. 			// Retrieve data & await frame load
  232. 			
  233. 			const communicate = async (callback = () => false) => {
  234. 				const getShouldContinue = async ({origin, data}) => {
  235. 					if (origin === `${URL.SCHEME}://${URL.HOST}` && data.id === KEY_TREE) {
  236. 						return await callback(data);
  237. 					}
  238. 					
  239. 					return true;
  240. 				};
  241. 				
  242. 				return await new Promise((resolve, reject) => {
  243. 					const listener = (message) => getShouldContinue(message)
  244. 						.then((shouldContinue) => {
  245. 							if (!shouldContinue) {
  246. 								resolve(message.data);
  247. 								
  248. 								targetWindow.removeEventListener('message', listener);
  249. 							}
  250. 						})
  251. 						.catch((error) => {
  252. 							targetWindow.removeEventListener('message', listener);
  253. 							
  254. 							reject(getError(error.message, error));
  255. 						});
  256. 					
  257. 					targetWindow.addEventListener('message', listener);
  258. 				});
  259. 			};
  260. 			
  261. 			const [userTree, userStyles, {'events': EVENTS, password}] = await Promise.all([
  262. 				GM.getValue(KEY_TREE),
  263. 				GM.getValue(KEY_STYLES, []),
  264. 				communicate(),
  265. 			]);
  266. 			
  267. 			// Listen for post-init communication
  268. 			
  269. 			const sendMessage = (message) => {
  270. 				frame.contentWindow.postMessage({...message, id: KEY_TREE}, `${URL.SCHEME}://${URL.HOST}`);
  271. 			};
  272. 			
  273. 			const openFrame = (doOpen = true) => new Promise((resolve) => {
  274. 				isOpen = doOpen;
  275. 				
  276. 				frame.style.display = doOpen ? (STYLE_OUTER.display ?? 'initial') : 'none';
  277. 				
  278. 				// Delay script execution until visual update
  279. 				setTimeout(resolve, 0);
  280. 			});
  281. 			
  282. 			const disconnectFrame = () => new Promise((resolve) => {
  283. 				isOpen = false;
  284. 				
  285. 				frame.remove();
  286. 				
  287. 				// Delay script execution until visual update
  288. 				setTimeout(resolve, 0);
  289. 			});
  290. 			
  291. 			/**
  292. 			 * @name $Config#reset
  293. 			 * @description Deletes the user's data.
  294. 			 * @returns {Promise<void>} Resolves upon completing the deletion.
  295. 			 */
  296. 			this.reset = async () => {
  297. 				if (isOpen) {
  298. 					throw getError('Cannot reset while a frame is open.');
  299. 				}
  300. 				
  301. 				if (typeof GM.deleteValue !== 'function') {
  302. 					throw getError('Missing GM.deleteValue permission.');
  303. 				}
  304. 				
  305. 				try {
  306. 					setConfig(TREE_DEFAULT_RAW);
  307. 				} catch (error) {
  308. 					throw getError('Unable to parse default config.', error);
  309. 				}
  310. 				
  311. 				sendMessage({
  312. 					password,
  313. 					event: EVENTS.RESET,
  314. 				});
  315. 				
  316. 				await GM.deleteValue(KEY_TREE);
  317. 				
  318. 				this.ready = Promise.resolve();
  319. 			};
  320. 			
  321. 			const sendPredicateResponse = (data) => sendMessage({
  322. 				password,
  323. 				event: EVENTS.PREDICATE,
  324. 				messageId: data.messageId,
  325. 				predicateResponse: PREDICATES[data.predicateId](
  326. 					Array.isArray(data.arg) ? getStrippedForest(data.arg) : data.arg,
  327. 				),
  328. 			});
  329. 			
  330. 			/**
  331. 			 * @name $Config#edit
  332. 			 * @description Allows the user to edit the active config.
  333. 			 * @returns {Promise<void>} Resolves when the user closes the config editor.
  334. 			 */
  335. 			this.edit = async () => {
  336. 				if (isOpen) {
  337. 					throw getError('A config editor is already open.');
  338. 				}
  339. 				
  340. 				openFrame();
  341. 				
  342. 				await communicate((data) => {
  343. 					switch (data.event) {
  344. 						case EVENTS.STOP:
  345. 							openFrame(false);
  346. 							
  347. 							return false;
  348. 						
  349. 						case EVENTS.PREDICATE:
  350. 							sendPredicateResponse(data);
  351. 							
  352. 							return true;
  353. 					}
  354. 					
  355. 					console.warn(getError(`Message observed from tree-frame site with unrecognised 'event' value: ${data.event}`, data));
  356. 					
  357. 					return true;
  358. 				});
  359. 			};
  360. 			
  361. 			// Pass data
  362. 			
  363. 			sendMessage({
  364. 				password,
  365. 				event: EVENTS.START,
  366. 				userStyles,
  367. 				...(userTree ? {userTree} : {}),
  368. 				...DATA_INIT,
  369. 			});
  370. 			
  371. 			await communicate(async (data) => {
  372. 				switch (data.event) {
  373. 					case EVENTS.PREDICATE:
  374. 						sendPredicateResponse(data);
  375. 						
  376. 						return true;
  377. 					
  378. 					case EVENTS.ERROR:
  379. 						// Flags that removing userTree won't help
  380. 						delete this.reset;
  381. 						
  382. 						await disconnectFrame();
  383. 						
  384. 						throw getError(
  385. 							'Your config is invalid.'
  386. 							+ '\nThis could be due to a script update or your data being corrupted.'
  387. 							+ `\n\nError Message:\n${data.reason.replaceAll(/\n+/g, '\n')}`,
  388. 						);
  389. 					
  390. 					case EVENTS.RESET:
  391. 						throw getError(
  392. 							'Your config is invalid.'
  393. 							+ '\nThis could be due to a script update or your data being corrupted.'
  394. 							+ `\n\nError Message:\n${data.reason.replaceAll(/\n+/g, '\n')}`,
  395. 						);
  396. 					
  397. 					case EVENTS.START:
  398. 						setConfig(data.tree);
  399. 						
  400. 						return false;
  401. 				}
  402. 				
  403. 				console.warn(getError(`Message observed from tree-frame site with unrecognised 'event' value: ${data.event}`, data));
  404. 				
  405. 				return true;
  406. 			});
  407. 		})();
  408. 	}
  409. }