UNPKG

lisn.js

Version:

Simply handle user gestures and actions. Includes widgets.

1 lines 11.2 kB
{"version":3,"file":"set-attribute.cjs","names":["MC","_interopRequireWildcard","require","MH","_domOptimize","_text","_validation","_action","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","SetAttribute","register","registerAction","element","args","config","configValidator","constructor","attributes","usageError","isOn","setAttrs","on","waitForMutateTime","attr","attrName","camelToKebabCase","isNullish","delAttr","setAttr","do","undo","S_TOGGLE","exports","validateString","off"],"sources":["../../../src/ts/actions/set-attribute.ts"],"sourcesContent":["/**\n * @module Actions\n *\n * @categoryDescription Setting/deleting attributes\n * {@link SetAttribute} sets or deletes an attribute on the given element.\n */\n\nimport * as MC from \"@lisn/globals/minification-constants\";\nimport * as MH from \"@lisn/globals/minification-helpers\";\n\nimport { waitForMutateTime } from \"@lisn/utils/dom-optimize\";\nimport { camelToKebabCase } from \"@lisn/utils/text\";\nimport { validateString } from \"@lisn/utils/validation\";\n\nimport { Action, registerAction } from \"@lisn/actions/action\";\n\nimport { WidgetConfigValidatorObject } from \"@lisn/widgets/widget\";\n\n/**\n * Either sets or deletes an attribute, or toggles between two values of an\n * attribute, on the given element.\n *\n * **IMPORTANT:** When constructed, it sets all given attributes on the\n * element to their _OFF_ (undone) state as a form of initialization.\n *\n * -------\n *\n * To use with auto-widgets (HTML API) as part of a trigger specification:\n * - Action name: \"set-attribute\".\n * - Arguments (required): name of attribute\n * - Options (at least one required):\n * - `on`: A string value for the attribute. Can be blank. Omit this option\n * in order to have the attribute deleted when the action is done.\n * - `off`: A string value for the attribute. Can be blank. Omit this option\n * in order to have the attribute deleted when the action is undone.\n *\n * Note that with the HTML API you can only specify one attribute per action.\n * But of course you can add the same action multiple times per trigger. See\n * examples below.\n *\n * @example\n * This is an overview of the various combinations that you can use to set an\n * attribute to a non-empty value, a blank value or delete the attribute when\n * the action is either done or undone:\n *\n * | Specification | Value when done | Value when undone |\n * | ------------------------------------- | --------------- | ----------------- |\n * | @set-attr: attr, on=onVal, off=offVal | \"onVal\" | \"offVal\" |\n * | @set-attr: attr, on=value | \"value\" | _deleted_ |\n * | @set-attr: attr, off=value | _deleted_ | \"value\" |\n * | @set-attr: attr, on= | \"\" | _deleted_ |\n * | @set-attr: attr, off= | _deleted_ | \"\" |\n * | @set-attr: attr, on=value, off= | \"value\" | \"\" |\n * | @set-attr: attr, on= , off=value | \"\" | \"value\" |\n *\n * @example\n * This will set attribute `attrA` to `valueA-ON` and `attrB` to `valueB-ON`\n * when the element enters the viewport and set `attrA` to `valueA-OFF` and\n * `attrB` to `valueB-OFF` when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attrA, on=valueA-ON, off=valueA-OFF\n * @set-attribute: attrB, on=valueB-ON, off=valueB-OFF\"\n * ></div>\n * ```\n *\n * @example\n * This will set attribute `attr` to `value` when the element enters the\n * viewport and _delete_ the attribute when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, on=value\"></div>\n * ```\n *\n * @example\n * This will _delete_ attribute `attr` when the element enters the viewport and\n * set it to `value` when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, off=value\"></div>\n * ```\n *\n * @example\n * This will set attribute `attr` to a blank value when the element enters the\n * viewport and _delete_ the attribute when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, on=\"></div>\n * ```\n *\n * @example\n * This will _delete_ attribute `attr` when the element enters the viewport and\n * set it to a blank value when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, off=\"></div>\n * ```\n *\n * @example\n * This will set attribute `attr` to `value` when the element enters the\n * viewport and set it to a blank value when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, on=value, off=\"></div>\n * ```\n *\n * @example\n * This will set attribute `attr` to a blank value when the element enters the\n * viewport and set it to `value` when it leaves the viewport.\n *\n * ```html\n * <div data-lisn-on-view=\"@set-attribute: attr, on=, off=value\"></div>\n * ```\n *\n * @category Setting/deleting attributes\n */\nexport class SetAttribute implements Action {\n /**\n * Sets the attribute to its \"ON\" value, or deletes it if that value is null.\n */\n readonly do: () => Promise<void>;\n\n /**\n * Sets the attribute to its \"OFF\" value, or deletes it if that value is null.\n */\n readonly undo: () => Promise<void>;\n\n /**\n * Toggles the attribute from its \"ON\" to \"OFF\" value or vice versa.\n */\n readonly toggle: () => Promise<void>;\n\n static register() {\n registerAction(\n \"set-attribute\",\n (element, args, config) => {\n return new SetAttribute(element, { [args[0]]: config ?? {} });\n },\n configValidator,\n );\n }\n\n constructor(element: Element, attributes: Attributes) {\n if (!attributes) {\n throw MH.usageError(\"Attributes are required\");\n }\n\n let isOn = false;\n\n const setAttrs = async (on: boolean) => {\n isOn = on;\n\n await waitForMutateTime();\n\n for (const attr in attributes) {\n const value = attributes[attr][on ? \"on\" : \"off\"];\n const attrName = camelToKebabCase(attr);\n\n if (MH.isNullish(value)) {\n MH.delAttr(element, attrName);\n } else {\n MH.setAttr(element, attrName, value);\n }\n }\n };\n\n this.do = () => setAttrs(true);\n\n this.undo = () => setAttrs(false);\n\n this[MC.S_TOGGLE] = () => setAttrs(!isOn);\n\n this.undo(); // initial state\n }\n}\n\n/**\n * Each key in the object is an attribute name. The `on` value is set when the\n * action is done and the `off` value is set when the action is undone. To set\n * the attribute to an empty value, use an empty string. To _delete_ the\n * attribute, use `null` as the value or simply omit the relevant `on` or `off`\n * key.\n *\n * **IMPORTANT:** Attribute names in camelCase are converted to kebab-case.\n * E.g. `dataFooBar` will translate to `data-foo-bar`.\n *\n * @category Setting/deleting attributes\n */\nexport type Attributes = Record<\n string,\n { on?: string | null; off?: string | null }\n>;\n\n// --------------------\n\nconst configValidator: WidgetConfigValidatorObject<Attributes[string]> = {\n on: validateString,\n off: validateString,\n};\n"],"mappings":";;;;;;AAOA,IAAAA,EAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,EAAA,GAAAF,uBAAA,CAAAC,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAEA,IAAAK,OAAA,GAAAL,OAAA;AAA8D,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,KAd9D;AACA;AACA;AACA;AACA;AACA;AAaA;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;AACA;AACA;AACA;AACA;AACO,MAAM8B,YAAY,CAAmB;EAgB1C,OAAOC,QAAQA,CAAA,EAAG;IAChB,IAAAC,sBAAc,EACZ,eAAe,EACf,CAACC,OAAO,EAAEC,IAAI,EAAEC,MAAM,KAAK;MACzB,OAAO,IAAIL,YAAY,CAACG,OAAO,EAAE;QAAE,CAACC,IAAI,CAAC,CAAC,CAAC,GAAGC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC;MAAE,CAAC,CAAC;IAC/D,CAAC,EACDC,eACF,CAAC;EACH;EAEAC,WAAWA,CAACJ,OAAgB,EAAEK,UAAsB,EAAE;IAzBtD;AACF;AACA;IAFEpB,eAAA;IAKA;AACF;AACA;IAFEA,eAAA;IAKA;AACF;AACA;IAFEA,eAAA;IAgBE,IAAI,CAACoB,UAAU,EAAE;MACf,MAAM5C,EAAE,CAAC6C,UAAU,CAAC,yBAAyB,CAAC;IAChD;IAEA,IAAIC,IAAI,GAAG,KAAK;IAEhB,MAAMC,QAAQ,GAAG,MAAOC,EAAW,IAAK;MACtCF,IAAI,GAAGE,EAAE;MAET,MAAM,IAAAC,8BAAiB,EAAC,CAAC;MAEzB,KAAK,MAAMC,IAAI,IAAIN,UAAU,EAAE;QAC7B,MAAMlB,KAAK,GAAGkB,UAAU,CAACM,IAAI,CAAC,CAACF,EAAE,GAAG,IAAI,GAAG,KAAK,CAAC;QACjD,MAAMG,QAAQ,GAAG,IAAAC,sBAAgB,EAACF,IAAI,CAAC;QAEvC,IAAIlD,EAAE,CAACqD,SAAS,CAAC3B,KAAK,CAAC,EAAE;UACvB1B,EAAE,CAACsD,OAAO,CAACf,OAAO,EAAEY,QAAQ,CAAC;QAC/B,CAAC,MAAM;UACLnD,EAAE,CAACuD,OAAO,CAAChB,OAAO,EAAEY,QAAQ,EAAEzB,KAAK,CAAC;QACtC;MACF;IACF,CAAC;IAED,IAAI,CAAC8B,EAAE,GAAG,MAAMT,QAAQ,CAAC,IAAI,CAAC;IAE9B,IAAI,CAACU,IAAI,GAAG,MAAMV,QAAQ,CAAC,KAAK,CAAC;IAEjC,IAAI,CAAClD,EAAE,CAAC6D,QAAQ,CAAC,GAAG,MAAMX,QAAQ,CAAC,CAACD,IAAI,CAAC;IAEzC,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC,CAAC;EACf;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAXAE,OAAA,CAAAvB,YAAA,GAAAA,YAAA;AAiBA;;AAEA,MAAMM,eAAgE,GAAG;EACvEM,EAAE,EAAEY,0BAAc;EAClBC,GAAG,EAAED;AACP,CAAC","ignoreList":[]}