@wix/interact 1.92.0 → 1.94.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 +334 -0
- package/dist/cjs/__tests__/interact.spec.js.map +1 -1
- package/dist/cjs/__tests__/viewEnter.spec.js +23 -6
- package/dist/cjs/__tests__/viewEnter.spec.js.map +1 -1
- package/dist/cjs/core/add.js +12 -8
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/animationEnd.js +9 -0
- package/dist/cjs/handlers/animationEnd.js.map +1 -1
- package/dist/cjs/handlers/click.js +19 -3
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +19 -3
- package/dist/cjs/handlers/hover.js.map +1 -1
- package/dist/cjs/handlers/viewEnter.js +10 -1
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +24 -8
- 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 +335 -0
- package/dist/esm/__tests__/interact.spec.js.map +1 -1
- package/dist/esm/__tests__/viewEnter.spec.js +23 -6
- package/dist/esm/__tests__/viewEnter.spec.js.map +1 -1
- package/dist/esm/core/add.js +13 -9
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/animationEnd.js +9 -0
- package/dist/esm/handlers/animationEnd.js.map +1 -1
- package/dist/esm/handlers/click.js +19 -3
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +19 -3
- package/dist/esm/handlers/hover.js.map +1 -1
- package/dist/esm/handlers/viewEnter.js +10 -1
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +24 -8
- 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/__tests__/viewEnter.spec.d.ts +7 -0
- package/dist/types/types.d.ts +3 -1
- package/dist/types/utils.d.ts +2 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_add","require","_remove","INTERACT_EFFECT_DATA_ATTR","exports","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty2","default","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","add","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","remove","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","removeListItems","addListItems"],"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","require","_remove","INTERACT_EFFECT_DATA_ATTR","exports","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty2","default","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","add","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","remove","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","removeListItems","addListItems"],"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":[]}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
4
5
|
var _Interact = require("../core/Interact");
|
|
5
6
|
var _add = require("../core/add");
|
|
6
7
|
var _remove = require("../core/remove");
|
|
7
8
|
var _utilities = require("../handlers/utilities");
|
|
8
9
|
var _handlers = _interopRequireDefault(require("../handlers"));
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
9
12
|
// Mock @wix/motion module
|
|
10
13
|
jest.mock('@wix/motion', () => {
|
|
11
14
|
const mock = {
|
|
@@ -310,6 +313,15 @@ describe('interact', () => {
|
|
|
310
313
|
}
|
|
311
314
|
};
|
|
312
315
|
|
|
316
|
+
// Mock PointerEvent (not available in JSDOM)
|
|
317
|
+
window.PointerEvent = class PointerEvent extends MouseEvent {
|
|
318
|
+
constructor(type, params = {}) {
|
|
319
|
+
super(type, params);
|
|
320
|
+
(0, _defineProperty2.default)(this, "pointerType", void 0);
|
|
321
|
+
this.pointerType = params.pointerType || '';
|
|
322
|
+
}
|
|
323
|
+
};
|
|
324
|
+
|
|
313
325
|
// Mock adoptedStyleSheets
|
|
314
326
|
if (!document.adoptedStyleSheets) {
|
|
315
327
|
document.adoptedStyleSheets = [];
|
|
@@ -668,6 +680,176 @@ describe('interact', () => {
|
|
|
668
680
|
});
|
|
669
681
|
});
|
|
670
682
|
});
|
|
683
|
+
describe('null animation handling', () => {
|
|
684
|
+
it('should not add click handler when getAnimation returns null', () => {
|
|
685
|
+
_Interact.Interact.destroy();
|
|
686
|
+
const {
|
|
687
|
+
getWebAnimation
|
|
688
|
+
} = require('@wix/motion');
|
|
689
|
+
_Interact.Interact.create({
|
|
690
|
+
interactions: [{
|
|
691
|
+
trigger: 'click',
|
|
692
|
+
key: 'null-click-test',
|
|
693
|
+
effects: [{
|
|
694
|
+
effectId: 'null-test-effect'
|
|
695
|
+
}]
|
|
696
|
+
}],
|
|
697
|
+
effects: {
|
|
698
|
+
'null-test-effect': {
|
|
699
|
+
namedEffect: {
|
|
700
|
+
type: 'FadeIn'
|
|
701
|
+
},
|
|
702
|
+
duration: 500
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
});
|
|
706
|
+
getWebAnimation.mockReturnValueOnce(null);
|
|
707
|
+
element = document.createElement('interact-element');
|
|
708
|
+
const div = document.createElement('div');
|
|
709
|
+
element.append(div);
|
|
710
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
711
|
+
(0, _add.add)(element, 'null-click-test');
|
|
712
|
+
expect(addEventListenerSpy).not.toHaveBeenCalled();
|
|
713
|
+
});
|
|
714
|
+
it('should not add hover handler when getAnimation returns null', () => {
|
|
715
|
+
_Interact.Interact.destroy();
|
|
716
|
+
const {
|
|
717
|
+
getWebAnimation
|
|
718
|
+
} = require('@wix/motion');
|
|
719
|
+
_Interact.Interact.create({
|
|
720
|
+
interactions: [{
|
|
721
|
+
trigger: 'hover',
|
|
722
|
+
key: 'null-hover-test',
|
|
723
|
+
effects: [{
|
|
724
|
+
effectId: 'null-test-effect'
|
|
725
|
+
}]
|
|
726
|
+
}],
|
|
727
|
+
effects: {
|
|
728
|
+
'null-test-effect': {
|
|
729
|
+
namedEffect: {
|
|
730
|
+
type: 'FadeIn'
|
|
731
|
+
},
|
|
732
|
+
duration: 500
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
});
|
|
736
|
+
getWebAnimation.mockReturnValueOnce(null);
|
|
737
|
+
element = document.createElement('interact-element');
|
|
738
|
+
const div = document.createElement('div');
|
|
739
|
+
element.append(div);
|
|
740
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
741
|
+
(0, _add.add)(element, 'null-hover-test');
|
|
742
|
+
expect(addEventListenerSpy).not.toHaveBeenCalled();
|
|
743
|
+
});
|
|
744
|
+
it('should not add animationEnd handler when getAnimation returns null', () => {
|
|
745
|
+
_Interact.Interact.destroy();
|
|
746
|
+
const {
|
|
747
|
+
getWebAnimation
|
|
748
|
+
} = require('@wix/motion');
|
|
749
|
+
_Interact.Interact.create({
|
|
750
|
+
interactions: [{
|
|
751
|
+
trigger: 'animationEnd',
|
|
752
|
+
key: 'null-animationend-test',
|
|
753
|
+
params: {
|
|
754
|
+
effectId: 'trigger-effect'
|
|
755
|
+
},
|
|
756
|
+
effects: [{
|
|
757
|
+
effectId: 'null-test-effect'
|
|
758
|
+
}]
|
|
759
|
+
}],
|
|
760
|
+
effects: {
|
|
761
|
+
'null-test-effect': {
|
|
762
|
+
namedEffect: {
|
|
763
|
+
type: 'FadeIn'
|
|
764
|
+
},
|
|
765
|
+
duration: 500
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
});
|
|
769
|
+
getWebAnimation.mockReturnValueOnce(null);
|
|
770
|
+
element = document.createElement('interact-element');
|
|
771
|
+
const div = document.createElement('div');
|
|
772
|
+
element.append(div);
|
|
773
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
774
|
+
(0, _add.add)(element, 'null-animationend-test');
|
|
775
|
+
expect(addEventListenerSpy).not.toHaveBeenCalled();
|
|
776
|
+
});
|
|
777
|
+
it('should not add viewProgress handler when getWebAnimation returns null (ViewTimeline)', () => {
|
|
778
|
+
_Interact.Interact.destroy();
|
|
779
|
+
const {
|
|
780
|
+
getWebAnimation
|
|
781
|
+
} = require('@wix/motion');
|
|
782
|
+
_Interact.Interact.create({
|
|
783
|
+
interactions: [{
|
|
784
|
+
trigger: 'viewProgress',
|
|
785
|
+
key: 'null-viewprogress-test',
|
|
786
|
+
effects: [{
|
|
787
|
+
effectId: 'null-scroll-effect'
|
|
788
|
+
}]
|
|
789
|
+
}],
|
|
790
|
+
effects: {
|
|
791
|
+
'null-scroll-effect': {
|
|
792
|
+
namedEffect: {
|
|
793
|
+
type: 'FadeScroll',
|
|
794
|
+
range: 'in',
|
|
795
|
+
opacity: 0
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
});
|
|
800
|
+
getWebAnimation.mockReturnValueOnce(null);
|
|
801
|
+
element = document.createElement('interact-element');
|
|
802
|
+
const div = document.createElement('div');
|
|
803
|
+
element.append(div);
|
|
804
|
+
(0, _add.add)(element, 'null-viewprogress-test');
|
|
805
|
+
|
|
806
|
+
// getWebAnimation should have been called
|
|
807
|
+
expect(getWebAnimation).toHaveBeenCalled();
|
|
808
|
+
});
|
|
809
|
+
it('should not add viewProgress handler when getScrubScene returns null (polyfill)', () => {
|
|
810
|
+
// Remove ViewTimeline support to use polyfill path
|
|
811
|
+
delete window.ViewTimeline;
|
|
812
|
+
_Interact.Interact.destroy();
|
|
813
|
+
const {
|
|
814
|
+
getScrubScene
|
|
815
|
+
} = require('@wix/motion');
|
|
816
|
+
_Interact.Interact.create({
|
|
817
|
+
interactions: [{
|
|
818
|
+
trigger: 'viewProgress',
|
|
819
|
+
key: 'null-viewprogress-polyfill-test',
|
|
820
|
+
effects: [{
|
|
821
|
+
effectId: 'null-scroll-effect'
|
|
822
|
+
}]
|
|
823
|
+
}],
|
|
824
|
+
effects: {
|
|
825
|
+
'null-scroll-effect': {
|
|
826
|
+
namedEffect: {
|
|
827
|
+
type: 'FadeScroll',
|
|
828
|
+
range: 'in',
|
|
829
|
+
opacity: 0
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
});
|
|
834
|
+
getScrubScene.mockReturnValueOnce(null);
|
|
835
|
+
element = document.createElement('interact-element');
|
|
836
|
+
const div = document.createElement('div');
|
|
837
|
+
element.append(div);
|
|
838
|
+
(0, _add.add)(element, 'null-viewprogress-polyfill-test');
|
|
839
|
+
|
|
840
|
+
// getScrubScene should have been called
|
|
841
|
+
expect(getScrubScene).toHaveBeenCalled();
|
|
842
|
+
|
|
843
|
+
// Restore ViewTimeline
|
|
844
|
+
window.ViewTimeline = class ViewTimeline {
|
|
845
|
+
constructor(options) {
|
|
846
|
+
return {
|
|
847
|
+
...options
|
|
848
|
+
};
|
|
849
|
+
}
|
|
850
|
+
};
|
|
851
|
+
});
|
|
852
|
+
});
|
|
671
853
|
describe('pointerMove', () => {
|
|
672
854
|
it('should add handler for pointerMove trigger', () => {
|
|
673
855
|
const {
|
|
@@ -1926,5 +2108,157 @@ describe('interact', () => {
|
|
|
1926
2108
|
});
|
|
1927
2109
|
});
|
|
1928
2110
|
});
|
|
2111
|
+
describe('selector condition type', () => {
|
|
2112
|
+
it('should pass selectorCondition to handler when condition type is selector', async () => {
|
|
2113
|
+
const config = {
|
|
2114
|
+
conditions: {
|
|
2115
|
+
active: {
|
|
2116
|
+
type: 'selector',
|
|
2117
|
+
predicate: '.active'
|
|
2118
|
+
}
|
|
2119
|
+
},
|
|
2120
|
+
interactions: [{
|
|
2121
|
+
trigger: 'click',
|
|
2122
|
+
key: 'selector-test',
|
|
2123
|
+
effects: [{
|
|
2124
|
+
key: 'selector-test',
|
|
2125
|
+
effectId: 'test-effect',
|
|
2126
|
+
conditions: ['active']
|
|
2127
|
+
}]
|
|
2128
|
+
}],
|
|
2129
|
+
effects: {
|
|
2130
|
+
'test-effect': {
|
|
2131
|
+
namedEffect: {
|
|
2132
|
+
type: 'FadeIn',
|
|
2133
|
+
power: 'medium'
|
|
2134
|
+
},
|
|
2135
|
+
duration: 500
|
|
2136
|
+
}
|
|
2137
|
+
}
|
|
2138
|
+
};
|
|
2139
|
+
_Interact.Interact.create(config);
|
|
2140
|
+
const testElement = document.createElement('interact-element');
|
|
2141
|
+
const div = document.createElement('div');
|
|
2142
|
+
testElement.append(div);
|
|
2143
|
+
(0, _add.add)(testElement, 'selector-test');
|
|
2144
|
+
|
|
2145
|
+
// The handler should have received selectorCondition
|
|
2146
|
+
// We verify by checking the animation is created (condition doesn't block setup)
|
|
2147
|
+
const {
|
|
2148
|
+
getWebAnimation
|
|
2149
|
+
} = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
|
|
2150
|
+
expect(getWebAnimation).toHaveBeenCalled();
|
|
2151
|
+
});
|
|
2152
|
+
it('should skip handler execution when element does not match selector condition', async () => {
|
|
2153
|
+
const {
|
|
2154
|
+
getWebAnimation
|
|
2155
|
+
} = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
|
|
2156
|
+
const mockAnimation = {
|
|
2157
|
+
play: jest.fn(),
|
|
2158
|
+
cancel: jest.fn(),
|
|
2159
|
+
onFinish: jest.fn(),
|
|
2160
|
+
reverse: jest.fn(),
|
|
2161
|
+
progress: jest.fn(),
|
|
2162
|
+
playState: 'idle',
|
|
2163
|
+
isCSS: false
|
|
2164
|
+
};
|
|
2165
|
+
getWebAnimation.mockReturnValue(mockAnimation);
|
|
2166
|
+
const config = {
|
|
2167
|
+
conditions: {
|
|
2168
|
+
active: {
|
|
2169
|
+
type: 'selector',
|
|
2170
|
+
predicate: '.active'
|
|
2171
|
+
}
|
|
2172
|
+
},
|
|
2173
|
+
interactions: [{
|
|
2174
|
+
trigger: 'click',
|
|
2175
|
+
key: 'selector-skip-test',
|
|
2176
|
+
effects: [{
|
|
2177
|
+
key: 'selector-skip-test',
|
|
2178
|
+
effectId: 'skip-effect',
|
|
2179
|
+
conditions: ['active']
|
|
2180
|
+
}]
|
|
2181
|
+
}],
|
|
2182
|
+
effects: {
|
|
2183
|
+
'skip-effect': {
|
|
2184
|
+
namedEffect: {
|
|
2185
|
+
type: 'FadeIn',
|
|
2186
|
+
power: 'medium'
|
|
2187
|
+
},
|
|
2188
|
+
duration: 500
|
|
2189
|
+
}
|
|
2190
|
+
}
|
|
2191
|
+
};
|
|
2192
|
+
_Interact.Interact.create(config);
|
|
2193
|
+
const testElement = document.createElement('interact-element');
|
|
2194
|
+
const div = document.createElement('div');
|
|
2195
|
+
// div does NOT have .active class
|
|
2196
|
+
testElement.append(div);
|
|
2197
|
+
(0, _add.add)(testElement, 'selector-skip-test');
|
|
2198
|
+
|
|
2199
|
+
// Simulate click - animation should NOT play because element doesn't match .active
|
|
2200
|
+
// Must use PointerEvent with pointerType because click handler filters by pointerType
|
|
2201
|
+
div.dispatchEvent(new PointerEvent('click', {
|
|
2202
|
+
bubbles: true,
|
|
2203
|
+
pointerType: 'mouse'
|
|
2204
|
+
}));
|
|
2205
|
+
expect(mockAnimation.play).not.toHaveBeenCalled();
|
|
2206
|
+
});
|
|
2207
|
+
it('should execute handler when element matches selector condition', async () => {
|
|
2208
|
+
const {
|
|
2209
|
+
getWebAnimation
|
|
2210
|
+
} = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
|
|
2211
|
+
const mockAnimation = {
|
|
2212
|
+
play: jest.fn(),
|
|
2213
|
+
cancel: jest.fn(),
|
|
2214
|
+
onFinish: jest.fn(),
|
|
2215
|
+
reverse: jest.fn(),
|
|
2216
|
+
progress: jest.fn(),
|
|
2217
|
+
playState: 'idle',
|
|
2218
|
+
isCSS: false
|
|
2219
|
+
};
|
|
2220
|
+
getWebAnimation.mockReturnValue(mockAnimation);
|
|
2221
|
+
const config = {
|
|
2222
|
+
conditions: {
|
|
2223
|
+
active: {
|
|
2224
|
+
type: 'selector',
|
|
2225
|
+
predicate: '.active'
|
|
2226
|
+
}
|
|
2227
|
+
},
|
|
2228
|
+
interactions: [{
|
|
2229
|
+
trigger: 'click',
|
|
2230
|
+
key: 'selector-match-test',
|
|
2231
|
+
effects: [{
|
|
2232
|
+
key: 'selector-match-test',
|
|
2233
|
+
effectId: 'match-effect',
|
|
2234
|
+
conditions: ['active']
|
|
2235
|
+
}]
|
|
2236
|
+
}],
|
|
2237
|
+
effects: {
|
|
2238
|
+
'match-effect': {
|
|
2239
|
+
namedEffect: {
|
|
2240
|
+
type: 'FadeIn',
|
|
2241
|
+
power: 'medium'
|
|
2242
|
+
},
|
|
2243
|
+
duration: 500
|
|
2244
|
+
}
|
|
2245
|
+
}
|
|
2246
|
+
};
|
|
2247
|
+
_Interact.Interact.create(config);
|
|
2248
|
+
const testElement = document.createElement('interact-element');
|
|
2249
|
+
const div = document.createElement('div');
|
|
2250
|
+
div.classList.add('active'); // div HAS .active class
|
|
2251
|
+
testElement.append(div);
|
|
2252
|
+
(0, _add.add)(testElement, 'selector-match-test');
|
|
2253
|
+
|
|
2254
|
+
// Simulate click - animation SHOULD play because element matches .active
|
|
2255
|
+
// Must use PointerEvent with pointerType because click handler filters by pointerType
|
|
2256
|
+
div.dispatchEvent(new PointerEvent('click', {
|
|
2257
|
+
bubbles: true,
|
|
2258
|
+
pointerType: 'mouse'
|
|
2259
|
+
}));
|
|
2260
|
+
expect(mockAnimation.play).toHaveBeenCalled();
|
|
2261
|
+
});
|
|
2262
|
+
});
|
|
1929
2263
|
});
|
|
1930
2264
|
//# sourceMappingURL=interact.spec.js.map
|