lisn.js
Version:
Simply handle user gestures and actions. Includes widgets.
1 lines • 12.8 kB
Source Map (JSON)
{"version":3,"file":"layout-trigger.cjs","names":["MH","_interopRequireWildcard","require","_domSearch","_layout","_validation","_layoutWatcher","_trigger","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_defineProperty","_toPropertyKey","value","enumerable","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","LayoutTrigger","Trigger","register","registerTrigger","element","args","actions","config","_args$","assign","layout","validateStringRequired","strReplace","isValidDeviceList","isValidAspectRatioList","newConfigValidator","constructor","_config$layout","usageError","getConfig","copyObject","lengthOf","devices","aspectRatios","otherDevices","otherAspectRatios","getOtherDevices","getOtherAspectRatios","root","watcher","LayoutWatcher","reuse","onLayout","run","reverse","exports","key","isLiteralString","waitForReferenceElement","undefined","isHTMLElement"],"sources":["../../../src/ts/triggers/layout-trigger.ts"],"sourcesContent":["/**\n * @module Triggers\n *\n * @categoryDescription Layout\n * {@link LayoutTrigger} allows you to run actions when the viewport or a\n * target element's width or aspect ratio matches a given specification, and\n * undo those actions when the target's width or aspect ratio no longer\n * matches.\n */\n\nimport * as MH from \"@lisn/globals/minification-helpers\";\n\nimport {\n DeviceSpec,\n Device,\n AspectRatioSpec,\n AspectRatio,\n} from \"@lisn/globals/types\";\n\nimport { waitForReferenceElement } from \"@lisn/utils/dom-search\";\nimport {\n isValidDeviceList,\n isValidAspectRatioList,\n getOtherDevices,\n getOtherAspectRatios,\n} from \"@lisn/utils/layout\";\nimport { validateStringRequired } from \"@lisn/utils/validation\";\n\nimport { Action } from \"@lisn/actions/action\";\n\nimport { LayoutWatcher } from \"@lisn/watchers/layout-watcher\";\n\nimport {\n registerTrigger,\n Trigger,\n TriggerConfig,\n} from \"@lisn/triggers/trigger\";\n\nimport { WidgetConfigValidatorFunc } from \"@lisn/widgets/widget\";\n\n/**\n * {@link LayoutTrigger} allows you to run actions when the viewport or a\n * target element's width or aspect ratio matches a given specification, and\n * undo those actions when the target's width or aspect ratio no longer\n * matches.\n *\n * -------\n *\n * To use with auto-widgets (HTML API), see {@link registerTrigger} for the\n * specification.\n *\n * - Arguments (required): A single {@link DeviceSpec} or\n * {@link AspectRatioSpec}. In this case you can use a dash (\"-\") instead of\n * space if needed (for example if using CSS classes instead of data\n * attributes), e.g. \"min-tablet\" instead of \"min tablet\".\n *\n * - Additional trigger options:\n * - `root`: A string element specification. See\n * {@link Utils.getReferenceElement | getReferenceElement}.\n *\n * @example\n * Show the element when the window width matches \"tablet\" breakpoint, hide\n * otherwise:\n *\n * ```html\n * <div data-lisn-on-layout=\"tablet @show\"></div>\n * ```\n *\n * @example\n * As above, but using a CSS class instead of data attribute:\n *\n * ```html\n * <div class=\"lisn-on-layout--tablet@show\"></div>\n * ```\n *\n * @example\n * Show the element 1000ms after the window width matches \"tablet\" breakpoint,\n * hide otherwise:\n *\n * ```html\n * <div data-lisn-on-layout=\"tablet @show +delay=1000\"></div>\n * ```\n *\n * @example\n * Add class `tablet` when the window width is at least \"tablet\", hide\n * otherwise:\n *\n * ```html\n * <div data-lisn-on-layout=\"min tablet @add-class=tablet\"></div>\n * ```\n *\n * @example\n * Add class `mobile` when the window width is \"mobile\" or mobile-wide, add\n * class `tablet`, when it's \"tablet\" and so on; undo that otherwise:\n *\n * ```html\n * <div data-lisn-on-layout=\"max mobile-wide @add-class=mobile ;\n * tablet @add-class=tablet ;\n * desktop @add-class=desktop\"\n * ></div>\n * ```\n *\n * @example\n * Show the element when window width is at least \"mobile-wide\" and at most\n * \"tablet\", hide otherwise:\n *\n * ```html\n * <div data-lisn-on-layout=\"mobile-wide to tablet @show\"></div>\n * ```\n *\n * @example\n * When the aspect ratio of the next element with class `box` is square, then\n * add classes `c1` and `c2` to the element (that the trigger is defined on) and\n * enable trigger `my-trigger` defined on this same element; undo all of that\n * otherwise (on other aspect ratios of the reference root):\n *\n * ```html\n * <div data-lisn-on-layout=\"square @add-class=c1,c2 @enable=my-trigger +root=next.box\"\n * data-lisn-on-run=\"@show +id=my-trigger\"\n * ></div>\n * <div class=\"box\"></div>\n * ```\n *\n * @example\n * As above, but using `data-lisn-ref` attribute instead of class selector.\n *\n * ```html\n * <div data-lisn-on-layout=\"square @add-class=c1,c2 @enable=my-trigger +root=next-box\"\n * data-lisn-on-run=\"@show +id=my-trigger\"\n * ></div>\n * <div data-lisn-ref=\"box\"></div>\n *\n * @category Layout\n */\nexport class LayoutTrigger extends Trigger {\n readonly getConfig: () => LayoutTriggerConfig;\n\n static register() {\n registerTrigger(\n \"layout\",\n (element, args, actions, config) => {\n return new LayoutTrigger(\n element,\n actions,\n MH.assign(config, {\n layout: validateStringRequired(\n \"layout\",\n MH.strReplace(\n MH.strReplace(args[0] ?? \"\", /(min|max)-/g, \"$1 \"),\n /-to-/g,\n \" to \",\n ),\n (value) =>\n isValidDeviceList(value) || isValidAspectRatioList(value),\n ),\n }),\n );\n },\n newConfigValidator,\n );\n }\n\n /**\n * If no actions are supplied, nothing is done.\n *\n * @throws {@link Errors.LisnUsageError | LisnUsageError}\n * If the config is invalid.\n */\n constructor(\n element: Element,\n actions: Action[],\n config: LayoutTriggerConfig,\n ) {\n const layout = config?.layout ?? \"\";\n if (!layout) {\n throw MH.usageError(\"'layout' is required\");\n }\n\n super(element, actions, config);\n this.getConfig = () => MH.copyObject(config);\n\n if (!MH.lengthOf(actions)) {\n return;\n }\n\n let devices: DeviceSpec | Device[] = [];\n let aspectRatios: AspectRatioSpec | AspectRatio[] = [];\n let otherDevices: Device[] = [];\n let otherAspectRatios: AspectRatio[] = [];\n\n if (isValidDeviceList(layout)) {\n devices = layout;\n otherDevices = getOtherDevices(layout);\n } else {\n aspectRatios = layout;\n otherAspectRatios = getOtherAspectRatios(layout);\n }\n\n const root = config.root;\n const watcher = LayoutWatcher.reuse({ root });\n\n watcher.onLayout(this.run, { devices, aspectRatios });\n\n if (MH.lengthOf(otherDevices) || MH.lengthOf(otherAspectRatios)) {\n watcher.onLayout(this.reverse, {\n devices: otherDevices,\n aspectRatios: otherAspectRatios,\n });\n }\n }\n}\n\n/**\n * @category Layout\n * @interface\n */\nexport type LayoutTriggerConfig = TriggerConfig & {\n /**\n * The {@link DeviceSpec} or {@link AspectRatioSpec} to use. Required.\n * See {@link Watchers/LayoutWatcher.OnLayoutOptions | OnLayoutOptions} for\n * accepted formats.\n *\n * Actions will be \"done\" when the layout of the root matches the given spec\n * and \"undone\" otherwise.\n */\n layout: DeviceSpec | Device[] | AspectRatioSpec | AspectRatio[];\n\n /**\n * The root to use for the {@link LayoutWatcher}.\n * See {@link Watchers/LayoutWatcher.LayoutWatcherConfig | LayoutWatcherConfig}\n *\n * @defaultValue {@link LayoutWatcher} default, the viewport\n */\n root?: HTMLElement | null;\n};\n\n// --------------------\n\nconst newConfigValidator: WidgetConfigValidatorFunc<\n Omit<LayoutTriggerConfig, \"layout\">\n> = (element) => {\n return {\n root: async (key, value) => {\n const root = MH.isLiteralString(value)\n ? await waitForReferenceElement(value, element)\n : undefined;\n if (root && !MH.isHTMLElement(root)) {\n throw MH.usageError(\"root must be HTMLElement\");\n }\n return root;\n },\n };\n};\n"],"mappings":";;;;;;AAUA,IAAAA,EAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAMA,IAAAG,WAAA,GAAAH,OAAA;AAIA,IAAAI,cAAA,GAAAJ,OAAA;AAEA,IAAAK,QAAA,GAAAL,OAAA;AAIgC,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAkB,gBAAAnB,CAAA,EAAAG,CAAA,EAAAF,CAAA,YAAAE,CAAA,GAAAiB,cAAA,CAAAjB,CAAA,MAAAH,CAAA,GAAAgB,MAAA,CAAAC,cAAA,CAAAjB,CAAA,EAAAG,CAAA,IAAAkB,KAAA,EAAApB,CAAA,EAAAqB,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAxB,CAAA,CAAAG,CAAA,IAAAF,CAAA,EAAAD,CAAA;AAAA,SAAAoB,eAAAnB,CAAA,QAAAM,CAAA,GAAAkB,YAAA,CAAAxB,CAAA,uCAAAM,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAkB,aAAAxB,CAAA,EAAAE,CAAA,2BAAAF,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAD,CAAA,GAAAC,CAAA,CAAAyB,MAAA,CAAAC,WAAA,kBAAA3B,CAAA,QAAAO,CAAA,GAAAP,CAAA,CAAAe,IAAA,CAAAd,CAAA,EAAAE,CAAA,uCAAAI,CAAA,SAAAA,CAAA,YAAAqB,SAAA,yEAAAzB,CAAA,GAAA0B,MAAA,GAAAC,MAAA,EAAA7B,CAAA,KApChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM8B,aAAa,SAASC,gBAAO,CAAC;EAGzC,OAAOC,QAAQA,CAAA,EAAG;IAChB,IAAAC,wBAAe,EACb,QAAQ,EACR,CAACC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,KAAK;MAAA,IAAAC,MAAA;MAClC,OAAO,IAAIR,aAAa,CACtBI,OAAO,EACPE,OAAO,EACP7C,EAAE,CAACgD,MAAM,CAACF,MAAM,EAAE;QAChBG,MAAM,EAAE,IAAAC,kCAAsB,EAC5B,QAAQ,EACRlD,EAAE,CAACmD,UAAU,CACXnD,EAAE,CAACmD,UAAU,EAAAJ,MAAA,GAACH,IAAI,CAAC,CAAC,CAAC,cAAAG,MAAA,cAAAA,MAAA,GAAI,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAClD,OAAO,EACP,MACF,CAAC,EACAlB,KAAK,IACJ,IAAAuB,yBAAiB,EAACvB,KAAK,CAAC,IAAI,IAAAwB,8BAAsB,EAACxB,KAAK,CAC5D;MACF,CAAC,CACH,CAAC;IACH,CAAC,EACDyB,kBACF,CAAC;EACH;;EAEA;AACF;AACA;AACA;AACA;AACA;EACEC,WAAWA,CACTZ,OAAgB,EAChBE,OAAiB,EACjBC,MAA2B,EAC3B;IAAA,IAAAU,cAAA;IACA,MAAMP,MAAM,IAAAO,cAAA,GAAGV,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEG,MAAM,cAAAO,cAAA,cAAAA,cAAA,GAAI,EAAE;IACnC,IAAI,CAACP,MAAM,EAAE;MACX,MAAMjD,EAAE,CAACyD,UAAU,CAAC,sBAAsB,CAAC;IAC7C;IAEA,KAAK,CAACd,OAAO,EAAEE,OAAO,EAAEC,MAAM,CAAC;IAACnB,eAAA;IAChC,IAAI,CAAC+B,SAAS,GAAG,MAAM1D,EAAE,CAAC2D,UAAU,CAACb,MAAM,CAAC;IAE5C,IAAI,CAAC9C,EAAE,CAAC4D,QAAQ,CAACf,OAAO,CAAC,EAAE;MACzB;IACF;IAEA,IAAIgB,OAA8B,GAAG,EAAE;IACvC,IAAIC,YAA6C,GAAG,EAAE;IACtD,IAAIC,YAAsB,GAAG,EAAE;IAC/B,IAAIC,iBAAgC,GAAG,EAAE;IAEzC,IAAI,IAAAZ,yBAAiB,EAACH,MAAM,CAAC,EAAE;MAC7BY,OAAO,GAAGZ,MAAM;MAChBc,YAAY,GAAG,IAAAE,uBAAe,EAAChB,MAAM,CAAC;IACxC,CAAC,MAAM;MACLa,YAAY,GAAGb,MAAM;MACrBe,iBAAiB,GAAG,IAAAE,4BAAoB,EAACjB,MAAM,CAAC;IAClD;IAEA,MAAMkB,IAAI,GAAGrB,MAAM,CAACqB,IAAI;IACxB,MAAMC,OAAO,GAAGC,4BAAa,CAACC,KAAK,CAAC;MAAEH;IAAK,CAAC,CAAC;IAE7CC,OAAO,CAACG,QAAQ,CAAC,IAAI,CAACC,GAAG,EAAE;MAAEX,OAAO;MAAEC;IAAa,CAAC,CAAC;IAErD,IAAI9D,EAAE,CAAC4D,QAAQ,CAACG,YAAY,CAAC,IAAI/D,EAAE,CAAC4D,QAAQ,CAACI,iBAAiB,CAAC,EAAE;MAC/DI,OAAO,CAACG,QAAQ,CAAC,IAAI,CAACE,OAAO,EAAE;QAC7BZ,OAAO,EAAEE,YAAY;QACrBD,YAAY,EAAEE;MAChB,CAAC,CAAC;IACJ;EACF;AACF;;AAEA;AACA;AACA;AACA;AAHAU,OAAA,CAAAnC,aAAA,GAAAA,aAAA;AAwBA;;AAEA,MAAMe,kBAEL,GAAIX,OAAO,IAAK;EACf,OAAO;IACLwB,IAAI,EAAE,MAAAA,CAAOQ,GAAG,EAAE9C,KAAK,KAAK;MAC1B,MAAMsC,IAAI,GAAGnE,EAAE,CAAC4E,eAAe,CAAC/C,KAAK,CAAC,GAClC,MAAM,IAAAgD,kCAAuB,EAAChD,KAAK,EAAEc,OAAO,CAAC,GAC7CmC,SAAS;MACb,IAAIX,IAAI,IAAI,CAACnE,EAAE,CAAC+E,aAAa,CAACZ,IAAI,CAAC,EAAE;QACnC,MAAMnE,EAAE,CAACyD,UAAU,CAAC,0BAA0B,CAAC;MACjD;MACA,OAAOU,IAAI;IACb;EACF,CAAC;AACH,CAAC","ignoreList":[]}