lisn.js
Version:
Simply handle user gestures and actions. Includes widgets.
1 lines • 8.67 kB
Source Map (JSON)
{"version":3,"file":"track-view.cjs","names":["MH","_interopRequireWildcard","require","_domSearch","_validation","_viewWatcher","_widget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TrackView","Widget","element","instance","DUMMY_ID","isInstanceOf","register","registerWidget","WIDGET_NAME","config","newConfigValidator","constructor","_config$rootMargin","id","watcher","ViewWatcher","reuse","root","rootMargin","replace","threshold","trackView","onDestroy","noTrackView","exports","key","value","_ref","isLiteralString","waitForReferenceElement","undefined","validateString","validateNumList","debounceWindow","validateNumber","resizeThreshold","scrollThreshold"],"sources":["../../../src/ts/widgets/track-view.ts"],"sourcesContent":["/**\n * @module Widgets\n */\n\nimport * as MH from \"@lisn/globals/minification-helpers\";\n\nimport { waitForReferenceElement } from \"@lisn/utils/dom-search\";\nimport {\n validateNumber,\n validateString,\n validateNumList,\n} from \"@lisn/utils/validation\";\n\nimport { ViewWatcher } from \"@lisn/watchers/view-watcher\";\n\nimport {\n Widget,\n WidgetConfigValidatorFunc,\n registerWidget,\n} from \"@lisn/widgets/widget\";\n\n/**\n * This is a simple wrapper around the {@link ViewWatcher}. If you are using\n * the JavaScript API, you should use the {@link ViewWatcher} directly. The\n * purpose of this widget is to expose the watcher's ability to track an\n * element's position across the viewport (or a given root element) and set\n * relevant CSS properties via the HTML API. See {@link ViewWatcher.trackView}.\n *\n * -----\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-track-view` class or `data-lisn-track-view` attribute set on\n * the element that constitutes the widget.\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 * Note that the root margin value can either be comma-separated or\n * space-separated.\n *\n * @example\n * This will track the element across the viewport and set the relevant CSS\n * properties.\n *\n * ```html\n * <div class=\"lisn-track-view\"></div>\n * ```\n *\n * @example\n * As above but with custom settings.\n *\n * ```html\n * <div id=\"myRoot\"></div>\n * <div data-lisn-track-view=\"root=#myRoot\n * | root-margin=100px,50px\n * | threshold=0,0.5\n * | debounce-window=0\n * | resize-threshold=0\n * | scroll-threshold=0\"\n * ></div>\n * ```\n */\nexport class TrackView extends Widget {\n static get(element: Element): TrackView | null {\n const instance = super.get(element, DUMMY_ID);\n if (MH.isInstanceOf(instance, TrackView)) {\n return instance;\n }\n return null;\n }\n\n static register() {\n registerWidget(\n WIDGET_NAME,\n (element, config) => {\n if (!TrackView.get(element)) {\n return new TrackView(element, config);\n }\n return null;\n },\n newConfigValidator,\n );\n }\n\n constructor(element: Element, config?: TrackViewConfig) {\n super(element, { id: DUMMY_ID });\n\n const watcher = ViewWatcher.reuse({\n root: config?.root,\n rootMargin: config?.rootMargin?.replace(/,/g, \" \"),\n threshold: config?.threshold,\n });\n\n watcher.trackView(element, null, config);\n\n this.onDestroy(() => watcher.noTrackView(element));\n }\n}\n\n/**\n * @interface\n */\nexport type TrackViewConfig = {\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.ViewWatcherConfig.root | ViewWatcherConfig.root}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n root?: Element | null;\n\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.ViewWatcherConfig.rootMargin | ViewWatcherConfig.rootMargin}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n rootMargin?: string;\n\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.ViewWatcherConfig.threshold | ViewWatcherConfig.threshold}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n threshold?: number | number[];\n\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.TrackViewOptions.debounceWindow | TrackViewOptions.debounceWindow}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n debounceWindow?: number;\n\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.TrackViewOptions.resizeThreshold | TrackViewOptions.resizeThreshold}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n resizeThreshold?: number;\n\n /**\n * Corresponds to\n * {@link Watchers/ViewWatcher.TrackViewOptions.scrollThreshold | TrackViewOptions.scrollThreshold}.\n *\n * @defaultValue undefined // ViewWatcher default\n */\n scrollThreshold?: number;\n};\n\n// --------------------\n\nconst WIDGET_NAME = \"track-view\";\n// Only one TrackView widget per element is allowed, but Widget requires a\n// non-blank ID.\nconst DUMMY_ID = WIDGET_NAME;\n\nconst newConfigValidator: WidgetConfigValidatorFunc<TrackViewConfig> = (\n element: Element,\n) => {\n return {\n root: (key, value) =>\n (MH.isLiteralString(value)\n ? waitForReferenceElement(value, element)\n : null) ?? undefined,\n rootMargin: validateString,\n threshold: (key, value) => validateNumList(key, value),\n debounceWindow: validateNumber,\n resizeThreshold: validateNumber,\n scrollThreshold: validateNumber,\n };\n};\n"],"mappings":"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","ignoreList":[]}