@wix/interact 1.91.0 → 1.93.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/InteractElement.js +1 -0
- package/dist/cjs/InteractElement.js.map +1 -1
- package/dist/cjs/__tests__/interact.spec.js +294 -1
- package/dist/cjs/__tests__/interact.spec.js.map +1 -1
- package/dist/cjs/core/Interact.js +4 -0
- package/dist/cjs/core/Interact.js.map +1 -1
- package/dist/cjs/core/add.js +15 -8
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/animationEnd.js +6 -2
- package/dist/cjs/handlers/animationEnd.js.map +1 -1
- package/dist/cjs/handlers/click.js +37 -9
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +41 -10
- package/dist/cjs/handlers/hover.js.map +1 -1
- package/dist/cjs/handlers/index.js +12 -1
- package/dist/cjs/handlers/index.js.map +1 -1
- package/dist/cjs/handlers/pointerMove.js +2 -2
- package/dist/cjs/handlers/pointerMove.js.map +1 -1
- package/dist/cjs/handlers/viewEnter.js +6 -2
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +24 -10
- package/dist/cjs/handlers/viewProgress.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils.js +34 -4
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/InteractElement.js +1 -0
- package/dist/esm/InteractElement.js.map +1 -1
- package/dist/esm/__tests__/interact.spec.js +295 -1
- package/dist/esm/__tests__/interact.spec.js.map +1 -1
- package/dist/esm/core/Interact.js +4 -0
- package/dist/esm/core/Interact.js.map +1 -1
- package/dist/esm/core/add.js +16 -9
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/animationEnd.js +6 -5
- package/dist/esm/handlers/animationEnd.js.map +1 -1
- package/dist/esm/handlers/click.js +37 -15
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +41 -16
- package/dist/esm/handlers/hover.js.map +1 -1
- package/dist/esm/handlers/index.js +12 -1
- package/dist/esm/handlers/index.js.map +1 -1
- package/dist/esm/handlers/pointerMove.js +2 -5
- package/dist/esm/handlers/pointerMove.js.map +1 -1
- package/dist/esm/handlers/viewEnter.js +6 -5
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +24 -13
- package/dist/esm/handlers/viewProgress.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils.js +33 -4
- package/dist/esm/utils.js.map +1 -1
- package/dist/types/core/Interact.d.ts +2 -0
- package/dist/types/handlers/animationEnd.d.ts +2 -2
- package/dist/types/handlers/click.d.ts +2 -2
- package/dist/types/handlers/hover.d.ts +2 -2
- package/dist/types/handlers/pointerMove.d.ts +2 -2
- package/dist/types/handlers/viewEnter.d.ts +2 -2
- package/dist/types/handlers/viewProgress.d.ts +2 -2
- package/dist/types/types.d.ts +11 -3
- package/dist/types/utils.d.ts +2 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_utilities","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","reducedMotion","animation","getAnimation","effectToAnimationOptions","undefined","type","initialPlay","event","play","reverse","playState","progress","isCSS","onFinish","dataset","motionEnter","cancel","pause","createTransitionHandler","effectId","listContainer","listItemSelector","method","isToggle","shouldSetStateOnElement","interactElement","closest","item","method_","toggleEffect","addHoverHandler","source","target","handler","isStateTrigger","once","transition","transitionProperties","cleanup","removeEventListener","handlerObj","addHandlerToMap","addEventListener","passive","addLeave","removeHoverHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/hover.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n reducedMotion: boolean = false,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n reducedMotion,\n ) as AnimationGroup;\n const type = options.type || 'alternate';\n let initialPlay = true;\n\n return (event: MouseEvent) => {\n if (event.type === 'mouseenter') {\n if (type === 'alternate') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n animation.reverse();\n }\n } else if (type === 'state') {\n if (animation.playState !== 'finished') {\n // 'idle' OR 'paused'\n animation.play();\n }\n } else {\n // type === 'repeat'\n // type === 'once'\n animation.progress(0);\n\n if (animation.isCSS) {\n animation.onFinish(() => {\n element.dataset.motionEnter = 'done';\n });\n }\n\n animation.play();\n }\n } else if (event.type === 'mouseleave') {\n if (type === 'alternate') {\n animation.reverse();\n } else if (type === 'repeat') {\n animation.cancel();\n delete element.dataset.motionEnter;\n } else if (type === 'state') {\n if (animation.playState === 'running') {\n animation.pause();\n }\n }\n }\n };\n}\n\nfunction createTransitionHandler(\n element: HTMLElement,\n {\n effectId,\n listContainer,\n listItemSelector,\n }: TransitionEffect & EffectBase & { effectId: string },\n options: StateParams,\n) {\n const method = options.method || 'toggle';\n const isToggle = method === 'toggle';\n const shouldSetStateOnElement = !!listContainer;\n\n return (event: MouseEvent) => {\n const interactElement = element.closest(\n 'interact-element',\n ) as IInteractElement;\n if (!interactElement) {\n return;\n }\n\n let item;\n if (shouldSetStateOnElement) {\n item = element.closest(\n `${listContainer} > ${listItemSelector || ''}:has(:scope)`,\n ) as HTMLElement | null;\n }\n\n if (event.type === 'mouseenter') {\n const method_ = isToggle ? 'add' : method;\n interactElement.toggleEffect(effectId, method_, item);\n } else if (event.type === 'mouseleave' && isToggle) {\n interactElement.toggleEffect(effectId, 'remove', item);\n }\n };\n}\n\nfunction addHoverHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: (TransitionEffect | TimeEffect) & EffectBase,\n options: StateParams | PointerTriggerParams = {},\n reducedMotion: boolean = false,\n) {\n let handler: (event: MouseEvent) => void;\n let isStateTrigger = false;\n let once = false;\n\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n handler = createTransitionHandler(\n target,\n effect as TransitionEffect & EffectBase & { effectId: string },\n options as StateParams,\n );\n isStateTrigger = true;\n } else {\n handler = createTimeEffectHandler(\n target,\n effect as TimeEffect & EffectBase,\n options as PointerTriggerParams,\n reducedMotion,\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('mouseenter', handler);\n source.removeEventListener('mouseleave', handler);\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n source.addEventListener('mouseenter', handler, { passive: true, once });\n\n const addLeave = isStateTrigger\n ? ((options as StateParams).method || 'toggle') === 'toggle'\n : (options as PointerTriggerParams).type !== 'once';\n if (addLeave) {\n source.addEventListener('mouseleave', handler, { passive: true });\n }\n}\n\nfunction removeHoverHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addHoverHandler,\n remove: removeHoverHandler,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_motion","require","_utilities","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","globalOptions","animation","getAnimation","effectToAnimationOptions","undefined","reducedMotion","type","initialPlay","selectorCondition","event","matches","play","reverse","playState","progress","isCSS","onFinish","dataset","motionEnter","cancel","pause","createTransitionHandler","effectId","listContainer","listItemSelector","method","isToggle","shouldSetStateOnElement","interactElement","closest","item","method_","toggleEffect","addHoverHandler","source","target","handler","isStateTrigger","once","transition","transitionProperties","cleanup","removeEventListener","allowA11yTriggers","handlerObj","addHandlerToMap","tabIndex","addEventListener","contains","relatedTarget","passive","addLeave","removeHoverHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/hover.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n globalOptions: InteractionGlobalOptions,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n const type = options.type || 'alternate';\n let initialPlay = true;\n const {selectorCondition} = globalOptions || {};\n return (event: MouseEvent | FocusEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n if (type === 'alternate') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n animation.reverse();\n }\n } else if (type === 'state') {\n if (animation.playState !== 'finished') {\n // 'idle' OR 'paused'\n animation.play();\n }\n } else {\n // type === 'repeat'\n // type === 'once'\n animation.progress(0);\n\n if (animation.isCSS) {\n animation.onFinish(() => {\n element.dataset.motionEnter = 'done';\n });\n }\n\n animation.play();\n }\n } else if (event.type === 'mouseleave' || event.type === 'focusout') {\n if (type === 'alternate') {\n animation.reverse();\n } else if (type === 'repeat') {\n animation.cancel();\n delete element.dataset.motionEnter;\n } else if (type === 'state') {\n if (animation.playState === 'running') {\n animation.pause();\n }\n }\n }\n };\n}\n\nfunction createTransitionHandler(\n element: HTMLElement,\n {\n effectId,\n listContainer,\n listItemSelector,\n }: TransitionEffect & EffectBase & { effectId: string },\n options: StateParams,\n selectorCondition?: string,\n) {\n const method = options.method || 'toggle';\n const isToggle = method === 'toggle';\n const shouldSetStateOnElement = !!listContainer;\n\n return (event: MouseEvent | FocusEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n const interactElement = element.closest(\n 'interact-element',\n ) as IInteractElement;\n if (!interactElement) {\n return;\n }\n\n let item;\n if (shouldSetStateOnElement) {\n item = element.closest(\n `${listContainer} > ${listItemSelector || ''}:has(:scope)`,\n ) as HTMLElement | null;\n }\n\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n const method_ = isToggle ? 'add' : method;\n interactElement.toggleEffect(effectId, method_, item);\n } else if (\n (event.type === 'mouseleave' || event.type === 'focusout') &&\n isToggle\n ) {\n interactElement.toggleEffect(effectId, 'remove', item);\n }\n };\n}\n\nfunction addHoverHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: (TransitionEffect | TimeEffect) & EffectBase,\n options: StateParams | PointerTriggerParams = {},\n globalOptions: InteractionGlobalOptions,\n) {\n let handler: (event: MouseEvent | FocusEvent) => void;\n let isStateTrigger = false;\n let once = false;\n\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n handler = createTransitionHandler(\n target,\n effect as TransitionEffect & EffectBase & { effectId: string },\n options as StateParams,\n globalOptions?.selectorCondition,\n );\n isStateTrigger = true;\n } else {\n handler = createTimeEffectHandler(\n target,\n effect as TimeEffect & EffectBase,\n options as PointerTriggerParams,\n { reducedMotion: globalOptions?.reducedMotion, selectorCondition: globalOptions?.selectorCondition },\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('mouseenter', handler);\n source.removeEventListener('mouseleave', handler);\n if (globalOptions?.allowA11yTriggers) {\n source.removeEventListener('focusin', handler);\n source.removeEventListener('focusout', handler);\n }\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n if (globalOptions?.allowA11yTriggers) {\n source.tabIndex = 0;\n source.addEventListener(\n 'focusin',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n\n source.addEventListener('mouseenter', handler, { passive: true, once });\n\n const addLeave = isStateTrigger\n ? ((options as StateParams).method || 'toggle') === 'toggle'\n : (options as PointerTriggerParams).type !== 'once';\n\n if (addLeave) {\n source.addEventListener('mouseleave', handler, { passive: true });\n\n if (globalOptions?.allowA11yTriggers) {\n source.addEventListener(\n 'focusout',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n }\n}\n\nfunction removeHoverHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addHoverHandler,\n remove: removeHoverHandler,\n};\n"],"mappings":";;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AAWA,IAAAC,UAAA,GAAAD,OAAA;AAMA,MAAME,UAAU,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAEpD,SAASC,uBAAuBA,CAC9BC,OAAoB,EACpBC,MAA+B,EAC/BC,OAA6B,EAC7BC,aAAuC,EACvC;EACA,MAAMC,SAAS,GAAG,IAAAC,oBAAY,EAC5BL,OAAO,EACP,IAAAM,mCAAwB,EAACL,MAAM,CAAC,EAChCM,SAAS,EACTJ,aAAa,oBAAbA,aAAa,CAAEK,aACjB,CAAmB;EACnB,MAAMC,IAAI,GAAGP,OAAO,CAACO,IAAI,IAAI,WAAW;EACxC,IAAIC,WAAW,GAAG,IAAI;EACtB,MAAM;IAACC;EAAiB,CAAC,GAAGR,aAAa,IAAI,CAAC,CAAC;EAC/C,OAAQS,KAA8B,IAAK;IACzC,IAAID,iBAAiB,IAAI,CAACX,OAAO,CAACa,OAAO,CAACF,iBAAiB,CAAC,EAAE;IAC9D,IAAIC,KAAK,CAACH,IAAI,KAAK,YAAY,IAAIG,KAAK,CAACH,IAAI,KAAK,SAAS,EAAE;MAC3D,IAAIA,IAAI,KAAK,WAAW,EAAE;QACxB,IAAIC,WAAW,EAAE;UACfA,WAAW,GAAG,KAAK;UACnBN,SAAS,CAACU,IAAI,CAAC,CAAC;QAClB,CAAC,MAAM;UACLV,SAAS,CAACW,OAAO,CAAC,CAAC;QACrB;MACF,CAAC,MAAM,IAAIN,IAAI,KAAK,OAAO,EAAE;QAC3B,IAAIL,SAAS,CAACY,SAAS,KAAK,UAAU,EAAE;UACtC;UACAZ,SAAS,CAACU,IAAI,CAAC,CAAC;QAClB;MACF,CAAC,MAAM;QACL;QACA;QACAV,SAAS,CAACa,QAAQ,CAAC,CAAC,CAAC;QAErB,IAAIb,SAAS,CAACc,KAAK,EAAE;UACnBd,SAAS,CAACe,QAAQ,CAAC,MAAM;YACvBnB,OAAO,CAACoB,OAAO,CAACC,WAAW,GAAG,MAAM;UACtC,CAAC,CAAC;QACJ;QAEAjB,SAAS,CAACU,IAAI,CAAC,CAAC;MAClB;IACF,CAAC,MAAM,IAAIF,KAAK,CAACH,IAAI,KAAK,YAAY,IAAIG,KAAK,CAACH,IAAI,KAAK,UAAU,EAAE;MACnE,IAAIA,IAAI,KAAK,WAAW,EAAE;QACxBL,SAAS,CAACW,OAAO,CAAC,CAAC;MACrB,CAAC,MAAM,IAAIN,IAAI,KAAK,QAAQ,EAAE;QAC5BL,SAAS,CAACkB,MAAM,CAAC,CAAC;QAClB,OAAOtB,OAAO,CAACoB,OAAO,CAACC,WAAW;MACpC,CAAC,MAAM,IAAIZ,IAAI,KAAK,OAAO,EAAE;QAC3B,IAAIL,SAAS,CAACY,SAAS,KAAK,SAAS,EAAE;UACrCZ,SAAS,CAACmB,KAAK,CAAC,CAAC;QACnB;MACF;IACF;EACF,CAAC;AACH;AAEA,SAASC,uBAAuBA,CAC9BxB,OAAoB,EACpB;EACEyB,QAAQ;EACRC,aAAa;EACbC;AACoD,CAAC,EACvDzB,OAAoB,EACpBS,iBAA0B,EAC1B;EACA,MAAMiB,MAAM,GAAG1B,OAAO,CAAC0B,MAAM,IAAI,QAAQ;EACzC,MAAMC,QAAQ,GAAGD,MAAM,KAAK,QAAQ;EACpC,MAAME,uBAAuB,GAAG,CAAC,CAACJ,aAAa;EAE/C,OAAQd,KAA8B,IAAK;IACzC,IAAID,iBAAiB,IAAI,CAACX,OAAO,CAACa,OAAO,CAACF,iBAAiB,CAAC,EAAE;IAC9D,MAAMoB,eAAe,GAAG/B,OAAO,CAACgC,OAAO,CACrC,kBACF,CAAqB;IACrB,IAAI,CAACD,eAAe,EAAE;MACpB;IACF;IAEA,IAAIE,IAAI;IACR,IAAIH,uBAAuB,EAAE;MAC3BG,IAAI,GAAGjC,OAAO,CAACgC,OAAO,CACpB,GAAGN,aAAa,MAAMC,gBAAgB,IAAI,EAAE,cAC9C,CAAuB;IACzB;IAEA,IAAIf,KAAK,CAACH,IAAI,KAAK,YAAY,IAAIG,KAAK,CAACH,IAAI,KAAK,SAAS,EAAE;MAC3D,MAAMyB,OAAO,GAAGL,QAAQ,GAAG,KAAK,GAAGD,MAAM;MACzCG,eAAe,CAACI,YAAY,CAACV,QAAQ,EAAES,OAAO,EAAED,IAAI,CAAC;IACvD,CAAC,MAAM,IACL,CAACrB,KAAK,CAACH,IAAI,KAAK,YAAY,IAAIG,KAAK,CAACH,IAAI,KAAK,UAAU,KACzDoB,QAAQ,EACR;MACAE,eAAe,CAACI,YAAY,CAACV,QAAQ,EAAE,QAAQ,EAAEQ,IAAI,CAAC;IACxD;EACF,CAAC;AACH;AAEA,SAASG,eAAeA,CACtBC,MAAmB,EACnBC,MAAmB,EACnBrC,MAAoD,EACpDC,OAA2C,GAAG,CAAC,CAAC,EAChDC,aAAuC,EACvC;EACA,IAAIoC,OAAiD;EACrD,IAAIC,cAAc,GAAG,KAAK;EAC1B,IAAIC,IAAI,GAAG,KAAK;EAEhB,IACGxC,MAAM,CAAsByC,UAAU,IACtCzC,MAAM,CAAsB0C,oBAAoB,EACjD;IACAJ,OAAO,GAAGf,uBAAuB,CAC/Bc,MAAM,EACNrC,MAAM,EACNC,OAAO,EACPC,aAAa,oBAAbA,aAAa,CAAEQ,iBACjB,CAAC;IACD6B,cAAc,GAAG,IAAI;EACvB,CAAC,MAAM;IACLD,OAAO,GAAGxC,uBAAuB,CAC/BuC,MAAM,EACNrC,MAAM,EACNC,OAAO,EACP;MAAEM,aAAa,EAAEL,aAAa,oBAAbA,aAAa,CAAEK,aAAa;MAAEG,iBAAiB,EAAER,aAAa,oBAAbA,aAAa,CAAEQ;IAAkB,CACrG,CAAC;IACD8B,IAAI,GAAIvC,OAAO,CAA0BO,IAAI,KAAK,MAAM;EAC1D;EAEA,MAAMmC,OAAO,GAAGA,CAAA,KAAM;IACpBP,MAAM,CAACQ,mBAAmB,CAAC,YAAY,EAAEN,OAAO,CAAC;IACjDF,MAAM,CAACQ,mBAAmB,CAAC,YAAY,EAAEN,OAAO,CAAC;IACjD,IAAIpC,aAAa,YAAbA,aAAa,CAAE2C,iBAAiB,EAAE;MACpCT,MAAM,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,OAAO,CAAC;MAC9CF,MAAM,CAACQ,mBAAmB,CAAC,UAAU,EAAEN,OAAO,CAAC;IACjD;EACF,CAAC;EAED,MAAMQ,UAAU,GAAG;IAAEV,MAAM;IAAEC,MAAM;IAAEM;EAAQ,CAAC;EAE9C,IAAAI,0BAAe,EAACnD,UAAU,EAAEwC,MAAM,EAAEU,UAAU,CAAC;EAC/C,IAAAC,0BAAe,EAACnD,UAAU,EAAEyC,MAAM,EAAES,UAAU,CAAC;EAE/C,IAAI5C,aAAa,YAAbA,aAAa,CAAE2C,iBAAiB,EAAE;IACpCT,MAAM,CAACY,QAAQ,GAAG,CAAC;IACnBZ,MAAM,CAACa,gBAAgB,CACrB,SAAS,EACRtC,KAAK,IAAK;MACT,IAAI,CAACyB,MAAM,CAACc,QAAQ,CAACvC,KAAK,CAACwC,aAA4B,CAAC,EAAE;QACxDb,OAAO,CAAC3B,KAAK,CAAC;MAChB;IACF,CAAC,EACD;MAAE6B;IAAK,CACT,CAAC;EACH;EAEAJ,MAAM,CAACa,gBAAgB,CAAC,YAAY,EAAEX,OAAO,EAAE;IAAEc,OAAO,EAAE,IAAI;IAAEZ;EAAK,CAAC,CAAC;EAEvE,MAAMa,QAAQ,GAAGd,cAAc,GAC3B,CAAEtC,OAAO,CAAiB0B,MAAM,IAAI,QAAQ,MAAM,QAAQ,GACzD1B,OAAO,CAA0BO,IAAI,KAAK,MAAM;EAErD,IAAI6C,QAAQ,EAAE;IACZjB,MAAM,CAACa,gBAAgB,CAAC,YAAY,EAAEX,OAAO,EAAE;MAAEc,OAAO,EAAE;IAAK,CAAC,CAAC;IAEjE,IAAIlD,aAAa,YAAbA,aAAa,CAAE2C,iBAAiB,EAAE;MACpCT,MAAM,CAACa,gBAAgB,CACrB,UAAU,EACTtC,KAAK,IAAK;QACT,IAAI,CAACyB,MAAM,CAACc,QAAQ,CAACvC,KAAK,CAACwC,aAA4B,CAAC,EAAE;UACxDb,OAAO,CAAC3B,KAAK,CAAC;QAChB;MACF,CAAC,EACD;QAAE6B;MAAK,CACT,CAAC;IACH;EACF;AACF;AAEA,SAASc,kBAAkBA,CAACvD,OAAoB,EAAE;EAChD,IAAAwD,sCAA2B,EAAC3D,UAAU,EAAEG,OAAO,CAAC;AAClD;AAAC,IAAAyD,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,GAAG,EAAExB,eAAe;EACpByB,MAAM,EAAEN;AACV,CAAC","ignoreList":[]}
|
|
@@ -9,6 +9,15 @@ var _hover = _interopRequireDefault(require("./hover"));
|
|
|
9
9
|
var _click = _interopRequireDefault(require("./click"));
|
|
10
10
|
var _pointerMove = _interopRequireDefault(require("./pointerMove"));
|
|
11
11
|
var _animationEnd = _interopRequireDefault(require("./animationEnd"));
|
|
12
|
+
function withA11y(handler) {
|
|
13
|
+
return {
|
|
14
|
+
add: (source, target, effect, options, globalOptions) => handler.add(source, target, effect, options, {
|
|
15
|
+
...globalOptions,
|
|
16
|
+
allowA11yTriggers: true
|
|
17
|
+
}),
|
|
18
|
+
remove: handler.remove
|
|
19
|
+
};
|
|
20
|
+
}
|
|
12
21
|
var _default = exports.default = {
|
|
13
22
|
viewEnter: _viewEnter.default,
|
|
14
23
|
hover: _hover.default,
|
|
@@ -16,6 +25,8 @@ var _default = exports.default = {
|
|
|
16
25
|
pageVisible: _viewEnter.default,
|
|
17
26
|
animationEnd: _animationEnd.default,
|
|
18
27
|
viewProgress: _viewProgress.default,
|
|
19
|
-
pointerMove: _pointerMove.default
|
|
28
|
+
pointerMove: _pointerMove.default,
|
|
29
|
+
activate: withA11y(_click.default),
|
|
30
|
+
interest: withA11y(_hover.default)
|
|
20
31
|
};
|
|
21
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_viewEnter","_interopRequireDefault","require","_viewProgress","_hover","_click","_pointerMove","_animationEnd","_default","exports","default","viewEnter","viewEnterHandler","hover","hoverHandler","click","clickHandler","pageVisible","animationEnd","animationEndHandler","viewProgress","viewProgressHandler","pointerMove","pointerMoveHandler"],"sources":["../../../src/handlers/index.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"names":["_viewEnter","_interopRequireDefault","require","_viewProgress","_hover","_click","_pointerMove","_animationEnd","withA11y","handler","add","source","target","effect","options","globalOptions","allowA11yTriggers","remove","_default","exports","default","viewEnter","viewEnterHandler","hover","hoverHandler","click","clickHandler","pageVisible","animationEnd","animationEndHandler","viewProgress","viewProgressHandler","pointerMove","pointerMoveHandler","activate","interest"],"sources":["../../../src/handlers/index.ts"],"sourcesContent":["import type {\n TriggerHandlerMap,\n TriggerType,\n Effect,\n InteractionGlobalOptions,\n StateParams,\n PointerTriggerParams,\n} from '../types';\nimport viewEnterHandler from './viewEnter';\nimport viewProgressHandler from './viewProgress';\nimport hoverHandler from './hover';\nimport clickHandler from './click';\nimport pointerMoveHandler from './pointerMove';\nimport animationEndHandler from './animationEnd';\n\nfunction withA11y<T extends typeof clickHandler | typeof hoverHandler>(\n handler: T,\n): T {\n return {\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: StateParams | PointerTriggerParams,\n globalOptions?: InteractionGlobalOptions,\n ) =>\n handler.add(source, target, effect, options, {\n ...globalOptions,\n allowA11yTriggers: true,\n }),\n remove: handler.remove,\n } as T;\n}\n\nexport default {\n viewEnter: viewEnterHandler,\n hover: hoverHandler,\n click: clickHandler,\n pageVisible: viewEnterHandler,\n animationEnd: animationEndHandler,\n viewProgress: viewProgressHandler,\n pointerMove: pointerMoveHandler,\n activate: withA11y(clickHandler),\n interest: withA11y(hoverHandler),\n} as TriggerHandlerMap<TriggerType>;\n"],"mappings":";;;;;AAQA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,aAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,SAASM,QAAQA,CACfC,OAAU,EACP;EACH,OAAO;IACLC,GAAG,EAAEA,CACHC,MAAmB,EACnBC,MAAmB,EACnBC,MAAc,EACdC,OAA2C,EAC3CC,aAAwC,KAExCN,OAAO,CAACC,GAAG,CAACC,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE;MAC3C,GAAGC,aAAa;MAChBC,iBAAiB,EAAE;IACrB,CAAC,CAAC;IACJC,MAAM,EAAER,OAAO,CAACQ;EAClB,CAAC;AACH;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,SAAS,EAAEC,kBAAgB;EAC3BC,KAAK,EAAEC,cAAY;EACnBC,KAAK,EAAEC,cAAY;EACnBC,WAAW,EAAEL,kBAAgB;EAC7BM,YAAY,EAAEC,qBAAmB;EACjCC,YAAY,EAAEC,qBAAmB;EACjCC,WAAW,EAAEC,oBAAkB;EAC/BC,QAAQ,EAAE1B,QAAQ,CAACkB,cAAY,CAAC;EAChCS,QAAQ,EAAE3B,QAAQ,CAACgB,cAAY;AACjC,CAAC","ignoreList":[]}
|
|
@@ -10,8 +10,8 @@ let pointerOptionsGetter = () => ({});
|
|
|
10
10
|
function registerOptionsGetter(getter) {
|
|
11
11
|
pointerOptionsGetter = getter;
|
|
12
12
|
}
|
|
13
|
-
function addPointerMoveHandler(source, target, effect, options = {},
|
|
14
|
-
if (reducedMotion) {
|
|
13
|
+
function addPointerMoveHandler(source, target, effect, options = {}, globalOptions) {
|
|
14
|
+
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
const triggerParams = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_kuliso","_utilities","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","reducedMotion","triggerParams","trigger","element","scene","getScrubScene","effectToAnimationOptions","pointer","Pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","addHandlerToMap","start","removePointerMoveHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/pointerMove.ts"],"sourcesContent":["import { getScrubScene } from '@wix/motion';\nimport { Pointer, PointerConfig } from 'kuliso';\nimport type {\n PointerMoveParams,\n ScrubEffect,\n HandlerObjectMap,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst pointerManagerMap = new WeakMap() as HandlerObjectMap;\nlet pointerOptionsGetter: () => Partial<PointerConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => Partial<PointerConfig>) {\n pointerOptionsGetter = getter;\n}\n\nfunction addPointerMoveHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n options: PointerMoveParams = {},\n
|
|
1
|
+
{"version":3,"names":["_motion","require","_kuliso","_utilities","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","globalOptions","reducedMotion","triggerParams","trigger","element","scene","getScrubScene","effectToAnimationOptions","pointer","Pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","addHandlerToMap","start","removePointerMoveHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/pointerMove.ts"],"sourcesContent":["import { getScrubScene } from '@wix/motion';\nimport { Pointer, PointerConfig } from 'kuliso';\nimport type {\n PointerMoveParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst pointerManagerMap = new WeakMap() as HandlerObjectMap;\nlet pointerOptionsGetter: () => Partial<PointerConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => Partial<PointerConfig>) {\n pointerOptionsGetter = getter;\n}\n\nfunction addPointerMoveHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n options: PointerMoveParams = {},\n globalOptions: InteractionGlobalOptions,\n) {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'pointer-move' as const,\n element: source,\n };\n\n const scene = getScrubScene(\n target,\n effectToAnimationOptions(effect),\n triggerParams,\n );\n\n if (scene) {\n const pointer = new Pointer({\n root: options.hitArea === 'self' ? source : undefined,\n scenes: Array.isArray(scene) ? scene : [scene],\n ...pointerOptionsGetter(),\n });\n const cleanup = () => {\n pointer.destroy();\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(pointerManagerMap, source, handlerObj);\n addHandlerToMap(pointerManagerMap, target, handlerObj);\n\n pointer.start();\n }\n}\n\nfunction removePointerMoveHandler(element: HTMLElement) {\n removeElementFromHandlerMap(pointerManagerMap, element);\n}\n\nexport default {\n add: addPointerMoveHandler,\n remove: removePointerMoveHandler,\n registerOptionsGetter,\n};\n"],"mappings":";;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAOA,IAAAE,UAAA,GAAAF,OAAA;AAMA,MAAMG,iBAAiB,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAC3D,IAAIC,oBAAkD,GAAGA,CAAA,MAAO,CAAC,CAAC,CAAC;AAEnE,SAASC,qBAAqBA,CAACC,MAAoC,EAAE;EACnEF,oBAAoB,GAAGE,MAAM;AAC/B;AAEA,SAASC,qBAAqBA,CAC5BC,MAAmB,EACnBC,MAAmB,EACnBC,MAAmB,EACnBC,OAA0B,GAAG,CAAC,CAAC,EAC/BC,aAAuC,EACvC;EACA,IAAIA,aAAa,YAAbA,aAAa,CAAEC,aAAa,EAAE;IAChC;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,cAAuB;IAChCC,OAAO,EAAER;EACX,CAAC;EAED,MAAMS,KAAK,GAAG,IAAAC,qBAAa,EACzBT,MAAM,EACN,IAAAU,mCAAwB,EAACT,MAAM,CAAC,EAChCI,aACF,CAAC;EAED,IAAIG,KAAK,EAAE;IACT,MAAMG,OAAO,GAAG,IAAIC,eAAO,CAAC;MAC1BC,IAAI,EAAEX,OAAO,CAACY,OAAO,KAAK,MAAM,GAAGf,MAAM,GAAGgB,SAAS;MACrDC,MAAM,EAAEC,KAAK,CAACC,OAAO,CAACV,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MAC9C,GAAGb,oBAAoB,CAAC;IAC1B,CAAC,CAAC;IACF,MAAMwB,OAAO,GAAGA,CAAA,KAAM;MACpBR,OAAO,CAACS,OAAO,CAAC,CAAC;IACnB,CAAC;IAED,MAAMC,UAAU,GAAG;MAAEtB,MAAM;MAAEC,MAAM;MAAEmB;IAAQ,CAAC;IAE9C,IAAAG,0BAAe,EAAC7B,iBAAiB,EAAEM,MAAM,EAAEsB,UAAU,CAAC;IACtD,IAAAC,0BAAe,EAAC7B,iBAAiB,EAAEO,MAAM,EAAEqB,UAAU,CAAC;IAEtDV,OAAO,CAACY,KAAK,CAAC,CAAC;EACjB;AACF;AAEA,SAASC,wBAAwBA,CAACjB,OAAoB,EAAE;EACtD,IAAAkB,sCAA2B,EAAChC,iBAAiB,EAAEc,OAAO,CAAC;AACzD;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,GAAG,EAAE/B,qBAAqB;EAC1BgC,MAAM,EAAEN,wBAAwB;EAChC5B;AACF,CAAC","ignoreList":[]}
|
|
@@ -80,18 +80,22 @@ function getObserver(options, isSafeMode = false) {
|
|
|
80
80
|
observers[key] = observer;
|
|
81
81
|
return observer;
|
|
82
82
|
}
|
|
83
|
-
function addViewEnterHandler(source, target, effect, options = {},
|
|
83
|
+
function addViewEnterHandler(source, target, effect, options = {}, globalOptions) {
|
|
84
84
|
const observer = getObserver({
|
|
85
85
|
...viewEnterOptions,
|
|
86
86
|
...options
|
|
87
87
|
});
|
|
88
|
-
const animation = (0, _motion.getAnimation)(target, (0, _utilities.effectToAnimationOptions)(effect), undefined, reducedMotion);
|
|
88
|
+
const animation = (0, _motion.getAnimation)(target, (0, _utilities.effectToAnimationOptions)(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
89
89
|
if (animation != null && animation.isCSS && options.type === 'once') {
|
|
90
90
|
animation.onFinish(() => {
|
|
91
91
|
target.dataset.motionEnter = 'done';
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
|
+
const {
|
|
95
|
+
selectorCondition
|
|
96
|
+
} = globalOptions || {};
|
|
94
97
|
const handler = () => {
|
|
98
|
+
if (selectorCondition && !target.matches(selectorCondition)) return;
|
|
95
99
|
animation.play(() => {
|
|
96
100
|
if (!animation.isCSS) {
|
|
97
101
|
target.dataset.motionEnter = 'done';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_utilities","_fastdom","_interopRequireDefault","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","fastdom","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","source","handler","type","delete","addViewEnterHandler","effect","
|
|
1
|
+
{"version":3,"names":["_motion","require","_utilities","_fastdom","_interopRequireDefault","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","fastdom","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","getAnimation","effectToAnimationOptions","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","selectorCondition","matches","play","cleanup","currentObserver","cancel","handlerObj","addHandlerToMap","removeViewEnterHandler","element","removeElementFromHandlerMap","_default","exports","default","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n HandlerObjectMap,\n ViewEnterParams,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\nimport fastdom from 'fastdom';\n\nconst SAFE_OBSERVER_CONFIG: IntersectionObserverInit = {\n root: null,\n rootMargin: '0px 0px -10% 0px',\n threshold: [0],\n};\n\nconst observers: Record<string, IntersectionObserver> = {};\nconst handlerMap = new WeakMap() as HandlerObjectMap;\nconst elementFirstRun = new WeakSet<HTMLElement>();\nconst elementObserverMap = new WeakMap<HTMLElement, IntersectionObserver>();\nlet viewEnterOptions: Partial<ViewEnterParams> = {};\n\nfunction setOptions(options: Partial<ViewEnterParams>) {\n viewEnterOptions = options;\n}\n\nfunction getObserver(options: ViewEnterParams, isSafeMode: boolean = false) {\n const key = JSON.stringify({ ...options, isSafeMode });\n\n if (observers[key]) {\n return observers[key];\n }\n\n const config: IntersectionObserverInit = isSafeMode\n ? SAFE_OBSERVER_CONFIG\n : {\n root: null,\n rootMargin: options.inset\n ? `${options.inset} 0px ${options.inset}`\n : '0px',\n threshold: options.threshold,\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const target = entry.target as HTMLElement;\n const isFirstRun = !elementFirstRun.has(target);\n\n if (isFirstRun) {\n elementFirstRun.add(target);\n\n if (options.useSafeViewEnter && !entry.isIntersecting) {\n fastdom.measure(() => {\n const sourceHeight = entry.boundingClientRect.height;\n const rootHeight = entry.rootBounds?.height;\n\n if (!rootHeight) {\n return;\n }\n\n const threshold = Array.isArray(options.threshold)\n ? Math.min(...options.threshold)\n : options.threshold;\n\n const needsSafeObserver =\n threshold && sourceHeight * threshold > rootHeight;\n\n if (needsSafeObserver) {\n fastdom.mutate(() => {\n observer.unobserve(target);\n const safeObserver = getObserver(options, true);\n elementObserverMap.set(target, safeObserver);\n safeObserver.observe(target);\n });\n }\n });\n return;\n }\n }\n\n if (entry.isIntersecting) {\n const handlers = handlerMap.get(target);\n\n handlers?.forEach(({ source, handler }) => {\n if (source === entry.target) {\n handler!();\n }\n });\n\n if (options.type === 'once') {\n observer.unobserve(entry.target);\n elementFirstRun.delete(target);\n }\n }\n });\n }, config);\n\n observers[key] = observer;\n\n return observer;\n}\n\nfunction addViewEnterHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n options: ViewEnterParams = {},\n globalOptions?: InteractionGlobalOptions,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n\n if (animation?.isCSS && options.type === 'once') {\n animation.onFinish(() => {\n target.dataset.motionEnter = 'done';\n });\n }\n const {selectorCondition} = globalOptions || {};\n const handler = () => {\n if (selectorCondition && !target.matches(selectorCondition)) return;\n animation.play(() => {\n if (!animation.isCSS) {\n target.dataset.motionEnter = 'done';\n }\n });\n };\n const cleanup = () => {\n const currentObserver = elementObserverMap.get(source) || observer;\n currentObserver.unobserve(source);\n animation.cancel();\n elementFirstRun.delete(source);\n elementObserverMap.delete(source);\n };\n const handlerObj = { source, target, handler, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n elementObserverMap.set(source, observer);\n observer.observe(source);\n}\n\nfunction removeViewEnterHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addViewEnterHandler,\n remove: removeViewEnterHandler,\n setOptions,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,8 +10,8 @@ let scrollOptionsGetter = () => ({});
|
|
|
10
10
|
function registerOptionsGetter(getter) {
|
|
11
11
|
scrollOptionsGetter = getter;
|
|
12
12
|
}
|
|
13
|
-
function addViewProgressHandler(source, target, effect, __,
|
|
14
|
-
if (reducedMotion) {
|
|
13
|
+
function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
14
|
+
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
const triggerParams = {
|
|
@@ -19,11 +19,24 @@ function addViewProgressHandler(source, target, effect, __, reducedMotion = fals
|
|
|
19
19
|
element: source
|
|
20
20
|
};
|
|
21
21
|
const effectOptions = (0, _utilities.effectToAnimationOptions)(effect);
|
|
22
|
+
let cleanup;
|
|
22
23
|
if ('ViewTimeline' in window) {
|
|
23
24
|
// Use ViewTimeline for modern browsers
|
|
24
25
|
const animationGroup = (0, _motion.getWebAnimation)(target, effectOptions, triggerParams);
|
|
25
26
|
if (animationGroup) {
|
|
26
27
|
animationGroup.play();
|
|
28
|
+
cleanup = () => {
|
|
29
|
+
animationGroup.ready.then(() => {
|
|
30
|
+
animationGroup.cancel();
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
const handlerObj = {
|
|
34
|
+
source,
|
|
35
|
+
target,
|
|
36
|
+
cleanup
|
|
37
|
+
};
|
|
38
|
+
(0, _utilities.addHandlerToMap)(scrollManagerMap, source, handlerObj);
|
|
39
|
+
(0, _utilities.addHandlerToMap)(scrollManagerMap, target, handlerObj);
|
|
27
40
|
}
|
|
28
41
|
} else {
|
|
29
42
|
const scene = (0, _motion.getScrubScene)(target, effectOptions, triggerParams);
|
|
@@ -38,21 +51,22 @@ function addViewProgressHandler(source, target, effect, __, reducedMotion = fals
|
|
|
38
51
|
root: document.body,
|
|
39
52
|
...scrollOptionsGetter()
|
|
40
53
|
});
|
|
41
|
-
|
|
54
|
+
cleanup = () => {
|
|
42
55
|
scroll.destroy();
|
|
43
56
|
};
|
|
44
|
-
const handlerObj = {
|
|
45
|
-
source,
|
|
46
|
-
target,
|
|
47
|
-
cleanup
|
|
48
|
-
};
|
|
49
|
-
(0, _utilities.addHandlerToMap)(scrollManagerMap, source, handlerObj);
|
|
50
|
-
(0, _utilities.addHandlerToMap)(scrollManagerMap, target, handlerObj);
|
|
51
57
|
Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
|
|
52
58
|
scroll.start();
|
|
53
59
|
});
|
|
54
60
|
}
|
|
55
61
|
}
|
|
62
|
+
if (!cleanup) return;
|
|
63
|
+
const handlerObj = {
|
|
64
|
+
source,
|
|
65
|
+
target,
|
|
66
|
+
cleanup
|
|
67
|
+
};
|
|
68
|
+
(0, _utilities.addHandlerToMap)(scrollManagerMap, source, handlerObj);
|
|
69
|
+
(0, _utilities.addHandlerToMap)(scrollManagerMap, target, handlerObj);
|
|
56
70
|
}
|
|
57
71
|
function removeViewProgressHandler(element) {
|
|
58
72
|
(0, _utilities.removeElementFromHandlerMap)(scrollManagerMap, element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_fizban","_utilities","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","reducedMotion","triggerParams","trigger","element","effectOptions","effectToAnimationOptions","window","animationGroup","getWebAnimation","play","scene","getScrubScene","scenes","Array","isArray","scroll","Scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","
|
|
1
|
+
{"version":3,"names":["_motion","require","_fizban","_utilities","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","effectToAnimationOptions","cleanup","window","animationGroup","getWebAnimation","play","ready","then","cancel","handlerObj","addHandlerToMap","scene","getScrubScene","scenes","Array","isArray","scroll","Scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","destroy","Promise","all","map","s","resolve","start","removeViewProgressHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { AnimationGroup, ScrubScrollScene } from '@wix/motion';\nimport { getWebAnimation, getScrubScene } from '@wix/motion';\nimport { Scroll, scrollConfig } from 'fizban';\nimport type {\n ViewEnterParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst scrollManagerMap = new WeakMap() as HandlerObjectMap;\nlet scrollOptionsGetter: () => Partial<scrollConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => scrollConfig) {\n scrollOptionsGetter = getter;\n}\n\nfunction addViewProgressHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n __: ViewEnterParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'view-progress' as const,\n element: source,\n };\n\n const effectOptions = effectToAnimationOptions(effect);\n let cleanup;\n if ('ViewTimeline' in window) {\n // Use ViewTimeline for modern browsers\n const animationGroup = getWebAnimation(\n target,\n effectOptions,\n triggerParams,\n );\n\n if (animationGroup) {\n animationGroup.play();\n\n cleanup = () => {\n (animationGroup as AnimationGroup).ready.then(() => {\n (animationGroup as AnimationGroup).cancel();\n });\n };\n\n const handlerObj = { source, target, cleanup };\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n }\n } else {\n const scene = getScrubScene(target, effectOptions, triggerParams);\n\n if (scene) {\n const scenes = Array.isArray(scene) ? scene : [scene];\n const scroll = new Scroll({\n viewSource: source,\n scenes,\n observeViewportEntry: false,\n observeViewportResize: false,\n observeSourcesResize: true,\n root: document.body,\n ...scrollOptionsGetter(),\n });\n\n cleanup = () => {\n scroll.destroy();\n };\n\n Promise.all(\n (scenes as ScrubScrollScene[]).map((s) => s.ready || Promise.resolve()),\n ).then(() => {\n scroll.start();\n });\n }\n }\n if (!cleanup) return;\n \n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n}\n\nfunction removeViewProgressHandler(element: HTMLElement): void {\n removeElementFromHandlerMap(scrollManagerMap, element);\n}\n\nexport default {\n add: addViewProgressHandler,\n remove: removeViewProgressHandler,\n registerOptionsGetter,\n};\n"],"mappings":"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","ignoreList":[]}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n NamedEffect,\n RangeOffset,\n ScrubTransitionEasing,\n MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'interact-element': React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > & {\n 'data-interact-key'?: string;\n };\n }\n }\n}\n\nexport type TriggerType =\n | 'hover'\n | 'click'\n | 'viewEnter'\n | 'pageVisible'\n | 'animationEnd'\n | 'viewProgress'\n | 'pointerMove';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n type?: ViewEnterType;\n threshold?: number;\n inset?: string;\n useSafeViewEnter?: boolean;\n};\n\nexport type PointerMoveParams = {\n hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n effectId: string;\n};\n\nexport type TriggerParams =\n | StateParams\n | PointerTriggerParams\n | ViewEnterParams\n | PointerMoveParams\n | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n name: string;\n keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n | {\n keyframeEffect: MotionKeyframeEffect;\n }\n | {\n namedEffect: NamedEffect;\n }\n | {\n customEffect: (element: Element, progress: any) => void;\n };\n\nexport type TimeEffect = {\n duration: number;\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n rangeStart?: RangeOffset;\n rangeEnd?: RangeOffset;\n centeredToTarget?: boolean;\n transitionDuration?: number;\n transitionDelay?: number;\n transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n duration?: number;\n delay?: number;\n easing?: string;\n};\n\nexport type StyleProperty = {\n name: string;\n value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n key?: string;\n effectId?: string;\n} & {\n transition?: TransitionOptions & {\n styleProperties: StyleProperty[];\n };\n transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectBase = {\n key?: string;\n listContainer?: string;\n listItemSelector?: string;\n conditions?: string[];\n selector?: string;\n effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n type: 'media' | 'container';\n predicate?: string;\n};\n\nexport type InteractionTrigger = {\n key: string;\n listContainer?: string;\n listItemSelector?: string;\n trigger: TriggerType;\n params?: TriggerParams;\n conditions?: string[];\n selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n effects: Record<string, Effect>;\n conditions?: Record<string, Condition>;\n interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IInteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n connectedCallback(): void;\n disconnectedCallback(): void;\n connect(path?: string): void;\n disconnect(): void;\n renderStyle(cssRules: string[]): void;\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ): void;\n watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n hover: StateParams | PointerTriggerParams;\n click: StateParams | PointerTriggerParams;\n viewEnter: ViewEnterParams;\n pageVisible: ViewEnterParams;\n animationEnd: AnimationEndParams;\n viewProgress: ViewEnterParams;\n pointerMove: PointerMoveParams;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n registerOptionsGetter?: (getter: () => any) => void;\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n
|
|
1
|
+
{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n NamedEffect,\n RangeOffset,\n ScrubTransitionEasing,\n MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'interact-element': React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > & {\n 'data-interact-key'?: string;\n };\n }\n }\n}\n\nexport type TriggerType =\n | 'hover'\n | 'click'\n | 'viewEnter'\n | 'pageVisible'\n | 'animationEnd'\n | 'viewProgress'\n | 'pointerMove'\n | 'activate'\n | 'interest';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n type?: ViewEnterType;\n threshold?: number;\n inset?: string;\n useSafeViewEnter?: boolean;\n};\n\nexport type PointerMoveParams = {\n hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n effectId: string;\n};\n\nexport type TriggerParams =\n | StateParams\n | PointerTriggerParams\n | ViewEnterParams\n | PointerMoveParams\n | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n name: string;\n keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n | {\n keyframeEffect: MotionKeyframeEffect;\n }\n | {\n namedEffect: NamedEffect;\n }\n | {\n customEffect: (element: Element, progress: any) => void;\n };\n\nexport type TimeEffect = {\n duration: number;\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n rangeStart?: RangeOffset;\n rangeEnd?: RangeOffset;\n centeredToTarget?: boolean;\n transitionDuration?: number;\n transitionDelay?: number;\n transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n duration?: number;\n delay?: number;\n easing?: string;\n};\n\nexport type StyleProperty = {\n name: string;\n value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n key?: string;\n effectId?: string;\n} & {\n transition?: TransitionOptions & {\n styleProperties: StyleProperty[];\n };\n transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectBase = {\n key?: string;\n listContainer?: string;\n listItemSelector?: string;\n conditions?: string[];\n selector?: string;\n effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n type: 'media' | 'container' | 'selector';\n predicate?: string;\n};\n\nexport type InteractionTrigger = {\n key: string;\n listContainer?: string;\n listItemSelector?: string;\n trigger: TriggerType;\n params?: TriggerParams;\n conditions?: string[];\n selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n effects: Record<string, Effect>;\n conditions?: Record<string, Condition>;\n interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IInteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n connectedCallback(): void;\n disconnectedCallback(): void;\n connect(path?: string): void;\n disconnect(): void;\n renderStyle(cssRules: string[]): void;\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ): void;\n watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n hover: StateParams | PointerTriggerParams;\n click: StateParams | PointerTriggerParams;\n viewEnter: ViewEnterParams;\n pageVisible: ViewEnterParams;\n animationEnd: AnimationEndParams;\n viewProgress: ViewEnterParams;\n pointerMove: PointerMoveParams;\n activate: StateParams | PointerTriggerParams;\n interest: StateParams | PointerTriggerParams;\n};\n\nexport type InteractionGlobalOptions = {\n reducedMotion?: boolean;\n allowA11yTriggers?: boolean;\n selectorCondition?: string;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n registerOptionsGetter?: (getter: () => any) => void;\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n globalOptions?: InteractionGlobalOptions,\n ) => void;\n remove: (element: HTMLElement) => void;\n};\n\nexport type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {\n setOptions: (options: Partial<ViewEnterParams>) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n source: HTMLElement;\n target: HTMLElement;\n cleanup: () => void;\n handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n effects: {\n [effectId: string]: Effect;\n };\n conditions: {\n [conditionId: string]: Condition;\n };\n interactions: {\n [path: string]: {\n triggers: Interaction[];\n effects: Record<\n string,\n (InteractionTrigger & { effect: Effect | EffectRef })[]\n >;\n interactionIds: Set<string>;\n selectors: Set<string>;\n };\n };\n};\n\nexport type CreateTransitionCSSParams = {\n key: string;\n effectId: string;\n transition?: TransitionEffect['transition'];\n properties?: TransitionProperty[];\n childSelector?: string;\n selectorCondition?: string;\n};\n"],"mappings":"","ignoreList":[]}
|
package/dist/cjs/utils.js
CHANGED
|
@@ -4,7 +4,19 @@ exports.__esModule = true;
|
|
|
4
4
|
exports.createTransitionCSS = createTransitionCSS;
|
|
5
5
|
exports.generateId = generateId;
|
|
6
6
|
exports.getMediaQuery = getMediaQuery;
|
|
7
|
+
exports.getSelectorCondition = getSelectorCondition;
|
|
7
8
|
var _motion = require("@wix/motion");
|
|
9
|
+
/**
|
|
10
|
+
* Applies a selector condition predicate to a base selector.
|
|
11
|
+
* - If `&` is in the predicate, replace `&` with the base selector
|
|
12
|
+
* - If no `&`, assume `&<predicate>` (append predicate to base selector)
|
|
13
|
+
*/
|
|
14
|
+
function applySelectorCondition(baseSelector, predicate) {
|
|
15
|
+
if (predicate.includes('&')) {
|
|
16
|
+
return predicate.replace(/&/g, baseSelector);
|
|
17
|
+
}
|
|
18
|
+
return `${baseSelector}${predicate}`;
|
|
19
|
+
}
|
|
8
20
|
function generateId() {
|
|
9
21
|
return 'wi-12343210'.replace(/\d/g, c => String.fromCharCode((+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4) + 97) // 97 for "a"
|
|
10
22
|
);
|
|
@@ -14,7 +26,8 @@ function createTransitionCSS({
|
|
|
14
26
|
effectId,
|
|
15
27
|
transition,
|
|
16
28
|
properties,
|
|
17
|
-
childSelector = '> :first-child'
|
|
29
|
+
childSelector = '> :first-child',
|
|
30
|
+
selectorCondition
|
|
18
31
|
}) {
|
|
19
32
|
var _properties2;
|
|
20
33
|
let transitions = [];
|
|
@@ -40,13 +53,21 @@ function createTransitionCSS({
|
|
|
40
53
|
}
|
|
41
54
|
const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
|
|
42
55
|
const escapedKey = key.replace(/"/g, "'");
|
|
43
|
-
|
|
44
|
-
|
|
56
|
+
|
|
57
|
+
// Build selectors, applying condition if present
|
|
58
|
+
const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;
|
|
59
|
+
const dataAttrSelector = `[data-interact-effect~="${effectId}"] ${childSelector}`;
|
|
60
|
+
const finalStateSelector = selectorCondition ? applySelectorCondition(stateSelector, selectorCondition) : stateSelector;
|
|
61
|
+
const finalDataAttrSelector = selectorCondition ? applySelectorCondition(dataAttrSelector, selectorCondition) : dataAttrSelector;
|
|
62
|
+
const result = [`${finalStateSelector},
|
|
63
|
+
${finalDataAttrSelector} {
|
|
45
64
|
${styleProperties.join(`
|
|
46
65
|
`)}
|
|
47
66
|
}`];
|
|
48
67
|
if (transitions.length) {
|
|
49
|
-
|
|
68
|
+
const transitionSelector = `[data-interact-key="${escapedKey}"] ${childSelector}`;
|
|
69
|
+
const finalTransitionSelector = selectorCondition ? applySelectorCondition(transitionSelector, selectorCondition) : transitionSelector;
|
|
70
|
+
result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {
|
|
50
71
|
transition: ${transitions.join(', ')};
|
|
51
72
|
} }`);
|
|
52
73
|
}
|
|
@@ -65,4 +86,13 @@ function getMediaQuery(conditionNames, conditions) {
|
|
|
65
86
|
return mql;
|
|
66
87
|
}
|
|
67
88
|
}
|
|
89
|
+
function getSelectorCondition(conditionNames, conditions) {
|
|
90
|
+
for (const name of conditionNames || []) {
|
|
91
|
+
const condition = conditions[name];
|
|
92
|
+
if ((condition == null ? void 0 : condition.type) === 'selector' && condition.predicate) {
|
|
93
|
+
return condition.predicate;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
68
98
|
//# sourceMappingURL=utils.js.map
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","
|
|
1
|
+
{"version":3,"names":["_motion","require","applySelectorCondition","baseSelector","predicate","includes","replace","generateId","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","key","effectId","transition","properties","childSelector","selectorCondition","_properties2","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","getEasing","map","_properties","filter","property","value","escapedKey","stateSelector","dataAttrSelector","finalStateSelector","finalDataAttrSelector","result","join","length","transitionSelector","finalTransitionSelector","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","condition","mql","window","matchMedia","getSelectorCondition"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\n\n/**\n * Applies a selector condition predicate to a base selector.\n * - If `&` is in the predicate, replace `&` with the base selector\n * - If no `&`, assume `&<predicate>` (append predicate to base selector)\n */\nfunction applySelectorCondition(\n baseSelector: string,\n predicate: string,\n): string {\n if (predicate.includes('&')) {\n return predicate.replace(/&/g, baseSelector);\n }\n return `${baseSelector}${predicate}`;\n}\n\nexport function generateId() {\n return 'wi-12343210'.replace(\n /\\d/g,\n (c) =>\n String.fromCharCode(\n (+c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))) +\n 97,\n ), // 97 for \"a\"\n );\n}\n\nexport function createTransitionCSS({\n key,\n effectId,\n transition,\n properties,\n childSelector = '> :first-child',\n selectorCondition,\n}: CreateTransitionCSSParams): string[] {\n let transitions: string[] = [];\n\n if (transition?.styleProperties) {\n const { duration, easing, delay } = transition;\n\n if (duration) {\n const hasCustomPropertiesTransition = transition.styleProperties.some(\n (styleProperty) => styleProperty.name.startsWith('--'),\n );\n\n if (hasCustomPropertiesTransition) {\n // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation\n transitions = [\n `all ${duration}ms ${getEasing(easing || 'ease')}${\n delay ? ` ${delay}ms` : ''\n }`,\n 'visibility 0s',\n ];\n } else {\n transitions = transition.styleProperties.map(\n (styleProperty) =>\n `${styleProperty.name} ${duration}ms ${getEasing(\n easing || 'ease',\n )}${delay ? ` ${delay}ms` : ''}`,\n );\n }\n }\n\n properties = transition.styleProperties;\n } else {\n transitions =\n properties\n ?.filter((property) => property.duration)\n .map(\n (property) =>\n `${property.name} ${property.duration}ms ${\n getEasing(property.easing) || 'ease'\n }${property.delay ? ` ${property.delay}ms` : ''}`,\n ) || [];\n }\n\n const styleProperties =\n properties?.map((property) => `${property.name}: ${property.value};`) || [];\n const escapedKey = key.replace(/\"/g, \"'\");\n\n // Build selectors, applying condition if present\n const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;\n const dataAttrSelector = `[data-interact-effect~=\"${effectId}\"] ${childSelector}`;\n\n const finalStateSelector = selectorCondition\n ? applySelectorCondition(stateSelector, selectorCondition)\n : stateSelector;\n const finalDataAttrSelector = selectorCondition\n ? applySelectorCondition(dataAttrSelector, selectorCondition)\n : dataAttrSelector;\n\n const result = [\n `${finalStateSelector},\n ${finalDataAttrSelector} {\n ${styleProperties.join(`\n `)}\n }`,\n ];\n\n if (transitions.length) {\n const transitionSelector = `[data-interact-key=\"${escapedKey}\"] ${childSelector}`;\n const finalTransitionSelector = selectorCondition\n ? applySelectorCondition(transitionSelector, selectorCondition)\n : transitionSelector;\n result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {\n transition: ${transitions.join(', ')};\n } }`);\n }\n return result;\n}\n\nexport function getMediaQuery(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n) {\n const conditionContent = (conditionNames || [])\n .filter((conditionName) => {\n return (\n conditions[conditionName]?.type === 'media' &&\n conditions[conditionName].predicate\n );\n })\n .map((conditionName) => {\n return conditions[conditionName].predicate;\n })\n .join(') and (');\n\n const condition = conditionContent && `(${conditionContent})`;\n const mql = condition && window.matchMedia(condition);\n\n if (mql) {\n return mql;\n }\n}\n\nexport function getSelectorCondition(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n): string | undefined {\n for (const name of conditionNames || []) {\n const condition = conditions[name];\n if (condition?.type === 'selector' && condition.predicate) {\n return condition.predicate;\n }\n }\n return;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["add","addListItems","remove","removeListItems","INTERACT_EFFECT_DATA_ATTR","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","item","has","clear","_this$dataset$INTERAC","currentEffects","Set","split","Array","from","getActiveEffects","effects","map","effect","raw","trimmed","trim","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes"],"sources":["../../src/InteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';\n\nexport function getInteractElement() {\n let checkedForLegacyStateSyntax = false;\n let isLegacyStateSyntax = false;\n\n return class InteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n\n constructor() {\n super();\n\n this.connected = false;\n this.sheet = null;\n this._observers = new WeakMap();\n\n if (this.attachInternals) {\n this._internals = this.attachInternals() as ElementInternals & {\n states: Set<string>;\n };\n\n if (!checkedForLegacyStateSyntax) {\n checkedForLegacyStateSyntax = true;\n\n try {\n this._internals.states.add('test');\n this._internals.states.delete('test');\n } catch (e) {\n isLegacyStateSyntax = true;\n }\n }\n } else {\n checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check\n this._internals = null;\n }\n }\n connectedCallback() {\n this.connect();\n }\n\n disconnectedCallback() {\n this.disconnect();\n }\n\n disconnect() {\n const key = this.dataset.interactKey;\n\n if (key) {\n remove(key);\n }\n\n if (this.sheet) {\n const index = document.adoptedStyleSheets.indexOf(this.sheet);\n document.adoptedStyleSheets.splice(index, 1);\n }\n\n this._observers = new WeakMap();\n\n this.connected = false;\n }\n\n connect(key?: string) {\n if (this.connected) {\n return;\n }\n\n key = key || this.dataset.interactKey;\n\n if (!key) {\n console.warn('InteractElement: No key provided');\n return;\n }\n\n this.connected = add(this, key);\n }\n\n renderStyle(cssRules: string[]) {\n if (!this.sheet) {\n this.sheet = new CSSStyleSheet();\n void this.sheet.replace(cssRules.join('\\n'));\n\n document.adoptedStyleSheets.push(this.sheet);\n } else {\n let position = this.sheet.cssRules.length;\n\n for (const cssRule of cssRules) {\n try {\n this.sheet.insertRule(cssRule, position);\n position++;\n } catch (e) {\n console.error(e);\n }\n }\n }\n }\n\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ) {\n if (item === null) {\n return;\n }\n if (isLegacyStateSyntax) {\n effectId = `--${effectId}`;\n }\n\n if (this._internals && !item) {\n if (method === 'toggle') {\n this._internals.states.has(effectId)\n ? this._internals.states.delete(effectId)\n : this._internals.states.add(effectId);\n } else if (method === 'add') {\n this._internals.states.add(effectId);\n } else if (method === 'remove') {\n this._internals.states.delete(effectId);\n } else if (method === 'clear') {\n this._internals.states.clear();\n }\n } else {\n const currentEffects = new Set(\n this.dataset[INTERACT_EFFECT_DATA_ATTR]?.split(' ') || [],\n );\n\n if (method === 'toggle') {\n currentEffects.has(effectId)\n ? currentEffects.delete(effectId)\n : currentEffects.add(effectId);\n } else if (method === 'add') {\n currentEffects.add(effectId);\n } else if (method === 'remove') {\n currentEffects.delete(effectId);\n } else if (method === 'clear') {\n currentEffects.clear();\n }\n\n (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] =\n Array.from(currentEffects).join(' ');\n }\n }\n\n getActiveEffects(): string[] {\n if (this._internals) {\n const effects = Array.from(this._internals.states);\n return isLegacyStateSyntax\n ? effects.map((effect) => effect.replace(/^--/g, ''))\n : effects;\n }\n\n const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';\n const trimmed = raw.trim();\n return trimmed ? trimmed.split(/\\s+/) : [];\n }\n\n watchChildList(listContainer: string): void {\n const list = this.querySelector(listContainer);\n\n if (list) {\n // TODO: we can probably improve this and use less observers, this impl. uses one per container element\n let observer = this._observers.get(list as HTMLElement);\n\n if (!observer) {\n observer = new MutationObserver(\n this._childListChangeHandler.bind(this, listContainer),\n );\n\n this._observers.set(list as HTMLElement, observer);\n\n observer.observe(list as HTMLElement, { childList: true });\n }\n }\n }\n\n _childListChangeHandler(listContainer: string, entries: MutationRecord[]) {\n const key = this.dataset.interactKey;\n const removedElements: HTMLElement[] = [];\n const addedElements: HTMLElement[] = [];\n\n entries.forEach((entry) => {\n entry.removedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n removedElements.push(el);\n }\n });\n\n entry.addedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n addedElements.push(el);\n }\n });\n });\n\n removeListItems(removedElements);\n key && addListItems(this, key, listContainer, addedElements);\n }\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["add","addListItems","remove","removeListItems","INTERACT_EFFECT_DATA_ATTR","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","item","has","clear","_this$dataset$INTERAC","currentEffects","Set","split","Array","from","getActiveEffects","effects","map","effect","raw","trimmed","trim","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes"],"sources":["../../src/InteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';\n\nexport function getInteractElement() {\n let checkedForLegacyStateSyntax = false;\n let isLegacyStateSyntax = false;\n\n return class InteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n\n constructor() {\n super();\n\n this.connected = false;\n this.sheet = null;\n this._observers = new WeakMap();\n\n if (this.attachInternals) {\n this._internals = this.attachInternals() as ElementInternals & {\n states: Set<string>;\n };\n\n if (!checkedForLegacyStateSyntax) {\n checkedForLegacyStateSyntax = true;\n\n try {\n this._internals.states.add('test');\n this._internals.states.delete('test');\n } catch (e) {\n isLegacyStateSyntax = true;\n }\n }\n } else {\n checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check\n this._internals = null;\n }\n }\n connectedCallback() {\n this.connect();\n }\n\n disconnectedCallback() {\n this.disconnect();\n }\n\n disconnect() {\n const key = this.dataset.interactKey;\n\n if (key) {\n remove(key);\n }\n\n if (this.sheet) {\n const index = document.adoptedStyleSheets.indexOf(this.sheet);\n document.adoptedStyleSheets.splice(index, 1);\n }\n\n this._observers = new WeakMap();\n this.sheet = null;\n this.connected = false;\n }\n\n connect(key?: string) {\n if (this.connected) {\n return;\n }\n\n key = key || this.dataset.interactKey;\n\n if (!key) {\n console.warn('InteractElement: No key provided');\n return;\n }\n\n this.connected = add(this, key);\n }\n\n renderStyle(cssRules: string[]) {\n if (!this.sheet) {\n this.sheet = new CSSStyleSheet();\n void this.sheet.replace(cssRules.join('\\n'));\n\n document.adoptedStyleSheets.push(this.sheet);\n } else {\n let position = this.sheet.cssRules.length;\n\n for (const cssRule of cssRules) {\n try {\n this.sheet.insertRule(cssRule, position);\n position++;\n } catch (e) {\n console.error(e);\n }\n }\n }\n }\n\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ) {\n if (item === null) {\n return;\n }\n if (isLegacyStateSyntax) {\n effectId = `--${effectId}`;\n }\n\n if (this._internals && !item) {\n if (method === 'toggle') {\n this._internals.states.has(effectId)\n ? this._internals.states.delete(effectId)\n : this._internals.states.add(effectId);\n } else if (method === 'add') {\n this._internals.states.add(effectId);\n } else if (method === 'remove') {\n this._internals.states.delete(effectId);\n } else if (method === 'clear') {\n this._internals.states.clear();\n }\n } else {\n const currentEffects = new Set(\n this.dataset[INTERACT_EFFECT_DATA_ATTR]?.split(' ') || [],\n );\n\n if (method === 'toggle') {\n currentEffects.has(effectId)\n ? currentEffects.delete(effectId)\n : currentEffects.add(effectId);\n } else if (method === 'add') {\n currentEffects.add(effectId);\n } else if (method === 'remove') {\n currentEffects.delete(effectId);\n } else if (method === 'clear') {\n currentEffects.clear();\n }\n\n (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] =\n Array.from(currentEffects).join(' ');\n }\n }\n\n getActiveEffects(): string[] {\n if (this._internals) {\n const effects = Array.from(this._internals.states);\n return isLegacyStateSyntax\n ? effects.map((effect) => effect.replace(/^--/g, ''))\n : effects;\n }\n\n const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';\n const trimmed = raw.trim();\n return trimmed ? trimmed.split(/\\s+/) : [];\n }\n\n watchChildList(listContainer: string): void {\n const list = this.querySelector(listContainer);\n\n if (list) {\n // TODO: we can probably improve this and use less observers, this impl. uses one per container element\n let observer = this._observers.get(list as HTMLElement);\n\n if (!observer) {\n observer = new MutationObserver(\n this._childListChangeHandler.bind(this, listContainer),\n );\n\n this._observers.set(list as HTMLElement, observer);\n\n observer.observe(list as HTMLElement, { childList: true });\n }\n }\n }\n\n _childListChangeHandler(listContainer: string, entries: MutationRecord[]) {\n const key = this.dataset.interactKey;\n const removedElements: HTMLElement[] = [];\n const addedElements: HTMLElement[] = [];\n\n entries.forEach((entry) => {\n entry.removedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n removedElements.push(el);\n }\n });\n\n entry.addedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n addedElements.push(el);\n }\n });\n });\n\n removeListItems(removedElements);\n key && addListItems(this, key, listContainer, addedElements);\n }\n };\n}\n"],"mappings":"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","ignoreList":[]}
|