lisn.js
Version:
Simply handle user gestures and actions. Includes widgets.
1 lines • 11.9 kB
Source Map (JSON)
{"version":3,"file":"auto-hide.cjs","names":["MC","_interopRequireWildcard","require","MH","_cssAlter","_domAlter","_domEvents","_validation","_domWatcher","_widget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AutoHide","Widget","element","id","instance","isInstanceOf","register","name","remove","WIDGET_NAME_HIDE","WIDGET_NAME_REMOVE","registerWidget","config","newConfigValidator","supportsMultiple","constructor","selector","watcher","DOMWatcher","create","root","subtree","watcherOptions","categories","S_ADDED","S_ATTRIBUTE","S_SKIP_INITIAL","hideOrRemoveEl","hideAndRemoveElement","hideElement","hideRelevant","isDisabled","targetElements","querySelectorAll","elem","_config$delay","delay","DEFAULT_DELAY","addWatcher","onMutation","removeWatcher","offMutation","waitForPageReady","then","isDestroyed","onDisable","onEnable","exports","autoRemove","validateString","validateNumber"],"sources":["../../../src/ts/widgets/auto-hide.ts"],"sourcesContent":["/**\n * @module Widgets\n */\n\nimport * as MC from \"@lisn/globals/minification-constants\";\nimport * as MH from \"@lisn/globals/minification-helpers\";\n\nimport { hideElement } from \"@lisn/utils/css-alter\";\nimport { hideAndRemoveElement } from \"@lisn/utils/dom-alter\";\nimport { waitForPageReady } from \"@lisn/utils/dom-events\";\nimport { validateString, validateNumber } from \"@lisn/utils/validation\";\n\nimport { DOMWatcher, OnMutationOptions } from \"@lisn/watchers/dom-watcher\";\n\nimport {\n Widget,\n WidgetConfigValidatorObject,\n registerWidget,\n} from \"@lisn/widgets/widget\";\n\n/**\n * Configures the given element as an {@link AutoHide} widget.\n *\n * The AutoHide widget automatically hides (and optionally removes) the given\n * element, or children of it that match a given selector, after a certain\n * delay.\n *\n * It executes these actions every time the matching element(s) have a change\n * of attribute or appear (are inserted) into the DOM.\n *\n * To use with auto-widgets (HTML API) (see\n * {@link Settings.settings.autoWidgets | settings.autoWidgets}), the following\n * CSS classes or data attributes are recognized:\n * - `lisn-auto-hide` class or `data-lisn-auto-hide` attribute\n * - `lisn-auto-remove` class or `data-lisn-auto-remove` attribute (enables\n * {@link AutoHideConfig.remove})\n *\n * **NOTE:** This widget supports multiple instances per element, you can\n * specify multiple widget configurations, separated with \";\".\n *\n * See below examples for what values you can use set for the data attributes\n * in order to modify the configuration of the automatically created widget.\n *\n * @example\n * This will automatically hide (with class `lisn-hide`) the element 3 seconds\n * (default delay) after it is inserted into the DOM or after it gets any\n * attributes changed on it (for example that might show it again).\n *\n * ```html\n * <div class=\"lisn-auto-hide\">\n * Automatically hidden in 3s.\n * </div>\n * ```\n *\n * @example\n * This will automatically hide and then remove the element 3 seconds (default\n * delay) after it is inserted into the DOM.\n *\n * ```html\n * <div class=\"lisn-auto-remove\">\n * Automatically hidden and removed in 3s.\n * </div>\n * ```\n *\n * @example\n * This will automatically\n * - hide `p` elements with class `message` 2 seconds after they are inserted\n * or changed\n * - hide `p` elements with class `warning` 5 seconds after they are inserted\n * or changed; and it will save that particular {@link AutoHide} widget with\n * ID `myID` so that it can be looked up using {@link AutoHide.get}\n * - remove `p` elements with class `disposable` 3 seconds (default delay)\n * after they are inserted or changed\n *\n * ```html\n * <div data-lisn-auto-hide=\"selector=p.message delay=2000 ;\n * selector=p.warning delay=5000 id=myID\"\n * data-lisn-auto-remove=\"selector=p.disposable\">\n * <p>Some text, this will stay.</p>\n * <p class=\"message\">\n * Automatically hidden in 2s.\n * </p>\n * <p class=\"warning\">\n * Automatically hidden in 5s.\n * </p>\n * <p class=\"disposable\">\n * Automatically hidden and removed in 3s.\n * </p>\n * </div>\n * ```\n */\nexport class AutoHide extends Widget {\n static get(element: Element, id: string): AutoHide | null {\n const instance = super.get(element, id);\n if (MH.isInstanceOf(instance, AutoHide)) {\n return instance;\n }\n return null;\n }\n\n static register() {\n for (const [name, remove] of [\n [WIDGET_NAME_HIDE, false],\n [WIDGET_NAME_REMOVE, true],\n ] as const) {\n registerWidget(\n name,\n (element, config) => {\n return new AutoHide(element, config);\n },\n newConfigValidator(remove),\n { supportsMultiple: true },\n );\n }\n }\n\n constructor(element: Element, config?: AutoHideConfig) {\n super(element, config);\n\n const selector = config?.selector;\n\n const watcher = DOMWatcher.create({\n root: element,\n subtree: selector ? true : false,\n });\n\n // Watch for attribute change on this element, and for relevant children\n // being added/changed\n const watcherOptions: OnMutationOptions = selector\n ? {\n selector: selector,\n categories: [MC.S_ADDED, MC.S_ATTRIBUTE],\n [MC.S_SKIP_INITIAL]: true,\n }\n : {\n categories: [MC.S_ATTRIBUTE],\n [MC.S_SKIP_INITIAL]: true,\n };\n\n const hideOrRemoveEl = config?.remove ? hideAndRemoveElement : hideElement;\n\n const hideRelevant = () => {\n if (this.isDisabled()) {\n return;\n }\n\n const targetElements = selector\n ? MH.querySelectorAll(element, selector)\n : [element];\n\n for (const elem of targetElements) {\n hideOrRemoveEl(elem, config?.delay ?? DEFAULT_DELAY);\n }\n };\n\n const addWatcher = () => watcher.onMutation(hideRelevant, watcherOptions);\n\n const removeWatcher = () => watcher.offMutation(hideRelevant);\n\n // ------------------------------\n\n // Don't hide/remove before the page is loaded\n waitForPageReady().then(() => {\n // Hide initially\n if (this.isDestroyed()) {\n return;\n }\n\n hideRelevant();\n addWatcher();\n });\n\n this.onDisable(removeWatcher);\n this.onEnable(() => {\n hideRelevant();\n addWatcher();\n });\n }\n}\n\n/**\n * @interface\n */\nexport type AutoHideConfig = {\n /**\n * An ID for the widget so that it can be looked up by element and ID using\n * {@link AutoHide.get}. It has to be unique for each element, but you can\n * use the same ID on different elements.\n *\n * @defaultValue undefined\n */\n id?: string;\n\n /**\n * If true, the matched elements are removed from the DOM instead of just\n * hidden.\n *\n * @defaultValue false\n */\n remove?: boolean;\n\n /**\n * If given, then the elements to be hidden/removed are selected using the\n * given `selector` starting at the container element. If not given, then\n * the container element itself is the target to be hidden/removed.\n *\n * E.g. if `selector` is `p.message`, then any newly added/changed `<p>`\n * elements with class `message` nested under the container element will be\n * auto-hidden/removed.\n *\n * @defaultValue undefined\n */\n selector?: string;\n\n /**\n * How long to wait before hiding or removing the matched elements.\n *\n * @defaultValue 3000\n */\n delay?: number;\n};\n\n// ------------------------------\n\nconst WIDGET_NAME_HIDE = \"auto-hide\";\nconst WIDGET_NAME_REMOVE = \"auto-remove\";\n\nconst DEFAULT_DELAY = 3000;\n\nconst newConfigValidator = (\n autoRemove: boolean,\n): WidgetConfigValidatorObject<AutoHideConfig> => {\n return {\n id: validateString,\n remove: () => autoRemove,\n selector: validateString,\n delay: validateNumber,\n };\n};\n"],"mappings":"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","ignoreList":[]}