@rdlabo/ionic-theme-ios26 1.3.2 → 2.0.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.
Files changed (45) hide show
  1. package/README.md +35 -55
  2. package/dist/css/components/ion-button.css +1 -1
  3. package/dist/css/components/ion-toolbar.css +1 -1
  4. package/dist/css/ionic-theme-ios26.css +1 -1
  5. package/dist/focus-controller /index.d.ts +6 -0
  6. package/dist/focus-controller /index.d.ts.map +1 -0
  7. package/dist/focus-controller /index.js +62 -0
  8. package/dist/popover/animations/ios.enter.js +1 -1
  9. package/dist/popover/utils.d.ts.map +1 -1
  10. package/dist/popover/utils.js +6 -0
  11. package/dist/sheets-of-glass/index.d.ts.map +1 -1
  12. package/dist/sheets-of-glass/index.js +6 -0
  13. package/dist/transition/index.d.ts +19 -0
  14. package/dist/transition/index.d.ts.map +1 -0
  15. package/dist/transition/index.js +219 -0
  16. package/dist/transition/ios.transition.d.ts +5 -0
  17. package/dist/transition/ios.transition.d.ts.map +1 -0
  18. package/dist/transition/ios.transition.js +496 -0
  19. package/dist/utils.d.ts +10 -0
  20. package/dist/utils.d.ts.map +1 -1
  21. package/dist/utils.js +30 -0
  22. package/package.json +1 -1
  23. package/src/focus-controller /index.ts +123 -0
  24. package/src/popover/animations/ios.enter.ts +1 -1
  25. package/src/popover/utils.ts +6 -0
  26. package/src/sheets-of-glass/index.ts +8 -2
  27. package/src/styles/components/ion-button.scss +0 -4
  28. package/src/transition/index.ts +369 -0
  29. package/src/transition/ios.transition.ts +834 -0
  30. package/src/utils.ts +36 -0
  31. package/dist/gestures/animations.d.ts +0 -8
  32. package/dist/gestures/animations.d.ts.map +0 -1
  33. package/dist/gestures/animations.js +0 -97
  34. package/dist/gestures/gestures.d.ts +0 -3
  35. package/dist/gestures/gestures.d.ts.map +0 -1
  36. package/dist/gestures/gestures.js +0 -240
  37. package/dist/gestures/index.d.ts +0 -3
  38. package/dist/gestures/index.d.ts.map +0 -1
  39. package/dist/gestures/index.js +0 -160
  40. package/dist/gestures/interfaces.d.ts +0 -16
  41. package/dist/gestures/interfaces.d.ts.map +0 -1
  42. package/dist/gestures/interfaces.js +0 -1
  43. package/dist/gestures/utils.d.ts +0 -5
  44. package/dist/gestures/utils.d.ts.map +0 -1
  45. package/dist/gestures/utils.js +0 -27
package/src/utils.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { AnimationPosition } from './sheets-of-glass/interfaces';
2
+ import { IonicConfig } from '@ionic/core';
2
3
 
3
4
  declare const __zone_symbol__requestAnimationFrame: any;
4
5
  declare const requestAnimationFrame: any;
@@ -53,3 +54,38 @@ export const changeSelectedElement = (
53
54
  });
54
55
  selectedElement.classList.add('ion-activated');
55
56
  };
57
+
58
+ export class Config {
59
+ private m = new Map<keyof IonicConfig, any>();
60
+
61
+ reset(configObj: IonicConfig) {
62
+ this.m = new Map<keyof IonicConfig, any>(Object.entries(configObj) as any);
63
+ }
64
+
65
+ get(key: keyof IonicConfig, fallback?: any): any {
66
+ const value = this.m.get(key);
67
+ return value !== undefined ? value : fallback;
68
+ }
69
+
70
+ getBoolean(key: keyof IonicConfig, fallback = false): boolean {
71
+ const val = this.m.get(key);
72
+ if (val === undefined) {
73
+ return fallback;
74
+ }
75
+ if (typeof val === 'string') {
76
+ return val === 'true';
77
+ }
78
+ return !!val;
79
+ }
80
+
81
+ getNumber(key: keyof IonicConfig, fallback?: number): number {
82
+ const val = parseFloat(this.m.get(key));
83
+ return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
84
+ }
85
+
86
+ set(key: keyof IonicConfig, value: any) {
87
+ this.m.set(key, value);
88
+ }
89
+ }
90
+
91
+ export const config = /*@__PURE__*/ new Config();
@@ -1,8 +0,0 @@
1
- import { Animation, AnimationKeyFrames } from '@ionic/core/dist/types/utils/animation/animation-interface';
2
- import { AnimationPosition, EffectScales } from './interfaces';
3
- import { GestureDetail } from '@ionic/core';
4
- export declare const getScaleAnimation: (effectElement: Element) => Animation;
5
- export declare const createPreMoveAnimation: (effectElement: Element, tabSelectedElement: Element, currentTouchedElement: Element, animationPosition: AnimationPosition) => Animation;
6
- export declare const createMoveAnimation: (effectElement: Element, detail: GestureDetail, tabSelectedElement: Element, animationPosition: AnimationPosition) => Animation;
7
- export declare const getMoveAnimationKeyframe: (type: "moveRight" | "moveLeft" | "slowly", scales: EffectScales) => AnimationKeyFrames;
8
- //# sourceMappingURL=animations.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/gestures/animations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAmB,aAAa,EAAE,MAAM,aAAa,CAAC;AAG7D,eAAO,MAAM,iBAAiB,GAAI,eAAe,OAAO,KAAG,SAE1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,eAAe,OAAO,EACtB,oBAAoB,OAAO,EAC3B,uBAAuB,OAAO,EAC9B,mBAAmB,iBAAiB,KACnC,SA0BF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,eAAe,OAAO,EACtB,QAAQ,aAAa,EACrB,oBAAoB,OAAO,EAC3B,mBAAmB,iBAAiB,KACnC,SAiBF,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,WAAW,GAAG,UAAU,GAAG,QAAQ,EAAE,QAAQ,YAAY,KAAG,kBAqD1G,CAAC"}
@@ -1,97 +0,0 @@
1
- import { createAnimation } from '@ionic/core';
2
- import { getStep } from './utils';
3
- export const getScaleAnimation = (effectElement) => {
4
- return createAnimation().addElement(effectElement.shadowRoot.querySelector('[part="native"]')).easing('ease-out');
5
- };
6
- export const createPreMoveAnimation = (effectElement, tabSelectedElement, currentTouchedElement, animationPosition) => {
7
- const diff = Math.max(Math.abs(tabSelectedElement.getBoundingClientRect().left - currentTouchedElement.getBoundingClientRect().left), 120);
8
- return createAnimation()
9
- .duration(diff * 1.8)
10
- .easing('ease-out')
11
- .addElement(effectElement)
12
- .beforeStyles({
13
- width: `${tabSelectedElement.clientWidth}px`,
14
- height: `${tabSelectedElement.clientHeight}px`,
15
- display: 'block',
16
- opacity: '1',
17
- transform: 'none',
18
- })
19
- .keyframes([
20
- {
21
- offset: 0,
22
- transform: `translate3d(${tabSelectedElement.getBoundingClientRect().left}px, ${animationPosition.positionY}px, 0)`,
23
- },
24
- {
25
- offset: 1,
26
- transform: `translate3d(${currentTouchedElement.getBoundingClientRect().left}px, ${animationPosition.positionY}px, 0)`,
27
- },
28
- ]);
29
- };
30
- export const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition) => {
31
- return createAnimation()
32
- .duration(500)
33
- .addElement(effectElement)
34
- .beforeStyles({
35
- width: `${tabSelectedElement.clientWidth}px`,
36
- height: `${tabSelectedElement.clientHeight}px`,
37
- display: 'block',
38
- opacity: '1',
39
- transform: 'none',
40
- })
41
- .fromTo('transform', `translate3d(${animationPosition.minPositionX}px, ${animationPosition.positionY}px, 0)`, `translate3d(${animationPosition.maxPositionX}px, ${animationPosition.positionY}px, 0)`)
42
- .progressStep(getStep(detail.currentX, animationPosition));
43
- };
44
- export const getMoveAnimationKeyframe = (type, scales) => {
45
- return {
46
- moveRight: [
47
- {
48
- offset: 0,
49
- transform: scales.large,
50
- },
51
- {
52
- offset: 0.4,
53
- transform: scales.small,
54
- },
55
- {
56
- offset: 0.75,
57
- transform: scales.xlarge,
58
- },
59
- {
60
- offset: 1,
61
- transform: scales.large,
62
- },
63
- ],
64
- moveLeft: [
65
- {
66
- offset: 0,
67
- transform: scales.large,
68
- },
69
- {
70
- offset: 0.1,
71
- transform: scales.xlarge,
72
- },
73
- {
74
- offset: 0.6,
75
- transform: scales.small,
76
- },
77
- {
78
- offset: 1,
79
- transform: scales.large,
80
- },
81
- ],
82
- slowly: [
83
- {
84
- offset: 0,
85
- transform: scales.large,
86
- },
87
- {
88
- offset: 0.4,
89
- transform: scales.medium,
90
- },
91
- {
92
- offset: 1,
93
- transform: scales.large,
94
- },
95
- ],
96
- }[type];
97
- };
@@ -1,3 +0,0 @@
1
- import { EffectScales, registeredEffect } from './interfaces';
2
- export declare const registerEffect: (targetElement: HTMLElement, effectTagName: string, selectedClassName: string, scales: EffectScales) => registeredEffect | undefined;
3
- //# sourceMappingURL=gestures.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"gestures.d.ts","sourceRoot":"","sources":["../../src/gestures/gestures.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAS5D,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAmRrB,CAAC"}
@@ -1,240 +0,0 @@
1
- import { createGesture, createAnimation } from '@ionic/core';
2
- import { cloneElement, getTransform } from './utils';
3
- const GESTURE_NAME = 'ios26-enable-gesture';
4
- const ANIMATED_NAME = 'ios26-animated';
5
- export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
6
- if (!targetElement.classList.contains('ios')) {
7
- return undefined;
8
- }
9
- let gesture;
10
- let moveAnimation;
11
- let currentTouchedElement;
12
- let animationLatestX;
13
- let effectElementPositionY;
14
- let enterAnimationPromise;
15
- let moveAnimationPromise;
16
- let clearActivatedTimer;
17
- const effectElement = cloneElement(effectTagName);
18
- const onPointerDown = () => {
19
- clearActivated();
20
- currentTouchedElement?.classList.remove('ion-activated');
21
- gesture.destroy();
22
- createAnimationGesture();
23
- };
24
- const onPointerUp = (event) => {
25
- clearActivatedTimer = setTimeout(() => {
26
- onEndGesture();
27
- currentTouchedElement?.classList.remove('ion-activated');
28
- gesture.destroy();
29
- createAnimationGesture();
30
- });
31
- };
32
- targetElement.addEventListener('pointerdown', onPointerDown);
33
- targetElement.addEventListener('pointerup', onPointerUp);
34
- const createAnimationGesture = () => {
35
- targetElement.classList.add(GESTURE_NAME);
36
- gesture = createGesture({
37
- el: targetElement,
38
- threshold: 0,
39
- gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
40
- onStart: (event) => onStartGesture(event),
41
- onMove: (event) => onMoveGesture(event),
42
- onEnd: (event) => onEndGesture(),
43
- });
44
- gesture.enable(true);
45
- };
46
- createAnimationGesture();
47
- const clearActivated = () => {
48
- if (!currentTouchedElement) {
49
- return;
50
- }
51
- requestAnimationFrame(() => {
52
- effectElement.style.display = 'none';
53
- effectElement.innerHTML = '';
54
- effectElement.style.transform = 'none';
55
- });
56
- targetElement.classList.remove(ANIMATED_NAME);
57
- currentTouchedElement = undefined;
58
- moveAnimation = undefined;
59
- moveAnimationPromise = undefined;
60
- enterAnimationPromise = undefined;
61
- };
62
- const onStartGesture = (detail) => {
63
- enterAnimationPromise = undefined;
64
- currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
65
- const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
66
- if (currentTouchedElement === undefined || tabSelectedElement === null) {
67
- return false;
68
- }
69
- effectElementPositionY = tabSelectedElement.getBoundingClientRect().top;
70
- const startTransform = getTransform(tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2, effectElementPositionY, tabSelectedElement);
71
- const middleTransform = getTransform((tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2 + detail.currentX) / 2, effectElementPositionY, currentTouchedElement);
72
- const endTransform = getTransform(detail.currentX, effectElementPositionY, currentTouchedElement);
73
- const enterAnimation = createAnimation();
74
- enterAnimation
75
- .addElement(effectElement)
76
- .delay(70)
77
- .beforeStyles({
78
- width: `${tabSelectedElement.clientWidth}px`,
79
- height: `${tabSelectedElement.clientHeight}px`,
80
- display: 'block',
81
- })
82
- .beforeAddWrite(() => {
83
- tabSelectedElement.childNodes.forEach((node) => {
84
- effectElement.appendChild(node.cloneNode(true));
85
- });
86
- targetElement.classList.add(ANIMATED_NAME);
87
- currentTouchedElement.classList.add('ion-activated');
88
- currentTouchedElement.click();
89
- });
90
- if (currentTouchedElement === tabSelectedElement) {
91
- enterAnimation
92
- .keyframes([
93
- {
94
- transform: `${startTransform} ${scales.small}`,
95
- opacity: 1,
96
- offset: 0,
97
- },
98
- {
99
- transform: `${middleTransform} ${scales.large}`,
100
- opacity: 1,
101
- offset: 0.6,
102
- },
103
- {
104
- transform: `${endTransform} ${scales.medium}`,
105
- opacity: 1,
106
- offset: 1,
107
- },
108
- ])
109
- .duration(160);
110
- }
111
- else {
112
- enterAnimation
113
- .keyframes([
114
- {
115
- transform: `${startTransform} ${scales.small}`,
116
- opacity: 1,
117
- offset: 0,
118
- },
119
- {
120
- transform: `${middleTransform} ${scales.large}`,
121
- opacity: 1,
122
- offset: 0.65,
123
- },
124
- {
125
- transform: `${endTransform} ${scales.medium}`,
126
- opacity: 1,
127
- offset: 1,
128
- },
129
- ])
130
- .duration(280);
131
- }
132
- animationLatestX = detail.currentX;
133
- enterAnimationPromise = enterAnimation.play().then(() => {
134
- enterAnimationPromise = undefined;
135
- });
136
- return true;
137
- };
138
- const onMoveGesture = (detail) => {
139
- if (currentTouchedElement === undefined || enterAnimationPromise || moveAnimationPromise) {
140
- return true;
141
- }
142
- const startTransform = getTransform(animationLatestX, effectElementPositionY, currentTouchedElement);
143
- const endTransform = getTransform(detail.currentX, effectElementPositionY, currentTouchedElement);
144
- if (!moveAnimation) {
145
- moveAnimation = createAnimation();
146
- moveAnimation
147
- .addElement(effectElement)
148
- .duration(800)
149
- .easing('ease-in-out')
150
- .keyframes([
151
- {
152
- transform: `${startTransform} ${scales.medium}`,
153
- opacity: 1,
154
- offset: 0,
155
- },
156
- {
157
- transform: `${startTransform} ${scales.xlarge}`,
158
- opacity: 1,
159
- offset: 0.2,
160
- },
161
- {
162
- transform: `${endTransform} ${scales.medium}`,
163
- opacity: 1,
164
- offset: 1,
165
- },
166
- ]);
167
- }
168
- else {
169
- moveAnimation.duration(0).keyframes([
170
- {
171
- transform: `${endTransform} ${scales.medium}`,
172
- opacity: 1,
173
- offset: 1,
174
- },
175
- {
176
- transform: `${endTransform} ${scales.medium}`,
177
- opacity: 1,
178
- offset: 1,
179
- },
180
- ]);
181
- }
182
- animationLatestX = detail.currentX;
183
- moveAnimationPromise = moveAnimation.play().then(() => {
184
- moveAnimationPromise = undefined;
185
- });
186
- return true;
187
- };
188
- const onEndGesture = () => {
189
- if (clearActivatedTimer !== undefined) {
190
- clearTimeout(clearActivatedTimer);
191
- clearActivatedTimer = undefined;
192
- }
193
- if (currentTouchedElement === undefined) {
194
- return false;
195
- }
196
- const transform = getTransform(animationLatestX, effectElementPositionY, currentTouchedElement);
197
- const leaveAnimation = createAnimation();
198
- leaveAnimation.addElement(effectElement);
199
- leaveAnimation
200
- .onFinish(() => clearActivated())
201
- .easing('ease-in')
202
- .duration(80)
203
- .keyframes([
204
- {
205
- transform: `${transform} ${scales.medium}`,
206
- opacity: 1,
207
- },
208
- {
209
- transform: `${transform} ${scales.small}`,
210
- opacity: 0,
211
- },
212
- ]);
213
- (async () => {
214
- if (enterAnimationPromise) {
215
- setTimeout(() => currentTouchedElement.classList.remove('ion-activated'), 50);
216
- await enterAnimationPromise;
217
- }
218
- else {
219
- currentTouchedElement.classList.remove('ion-activated');
220
- }
221
- leaveAnimation.play();
222
- })();
223
- return true;
224
- };
225
- return {
226
- destroy: () => {
227
- targetElement.removeEventListener('pointerdown', onPointerDown);
228
- targetElement.removeEventListener('pointerup', onPointerUp);
229
- if (clearActivatedTimer !== undefined) {
230
- clearTimeout(clearActivatedTimer);
231
- clearActivatedTimer = undefined;
232
- }
233
- clearActivated();
234
- if (gesture) {
235
- gesture.destroy();
236
- }
237
- targetElement.classList.remove(GESTURE_NAME);
238
- },
239
- };
240
- };
@@ -1,3 +0,0 @@
1
- import { EffectScales, registeredEffect } from './interfaces';
2
- export declare const registerEffect: (targetElement: HTMLElement, effectTagName: string, selectedClassName: string, scales: EffectScales) => registeredEffect | undefined;
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/gestures/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAUjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAyLrB,CAAC"}
@@ -1,160 +0,0 @@
1
- import { createGesture } from '@ionic/core';
2
- import { changeSelectedElement, cloneElement, getStep } from './utils';
3
- import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
4
- const GESTURE_NAME = 'ios26-enable-gesture';
5
- const ANIMATED_NAME = 'ios26-animated';
6
- export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
7
- if (!targetElement.classList.contains('ios')) {
8
- return undefined;
9
- }
10
- let gesture;
11
- let moveAnimation;
12
- let currentTouchedElement;
13
- let clearActivatedTimer;
14
- let animationPosition = undefined;
15
- let scaleAnimationPromise;
16
- let startAnimationPromise;
17
- let maxVelocity = 0;
18
- const effectElement = cloneElement(effectTagName);
19
- const onPointerDown = () => {
20
- clearActivated();
21
- gesture.destroy();
22
- createAnimationGesture();
23
- };
24
- const onPointerUp = (event) => {
25
- clearActivatedTimer = setTimeout(async () => {
26
- await onEndGesture();
27
- gesture.destroy();
28
- createAnimationGesture();
29
- });
30
- };
31
- targetElement.addEventListener('pointerdown', onPointerDown);
32
- targetElement.addEventListener('pointerup', onPointerUp);
33
- const createAnimationGesture = () => {
34
- targetElement.classList.add(GESTURE_NAME);
35
- gesture = createGesture({
36
- el: targetElement,
37
- threshold: 0,
38
- gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
39
- onStart: (event) => onStartGesture(event),
40
- onMove: (event) => onMoveGesture(event),
41
- onEnd: () => {
42
- onEndGesture().then();
43
- },
44
- });
45
- gesture.enable(true);
46
- };
47
- createAnimationGesture();
48
- const clearActivated = () => {
49
- if (!currentTouchedElement) {
50
- return;
51
- }
52
- currentTouchedElement.click();
53
- currentTouchedElement?.classList.remove('ion-activated');
54
- currentTouchedElement = undefined;
55
- effectElement.style.display = 'none';
56
- maxVelocity = 0;
57
- targetElement.classList.remove(ANIMATED_NAME);
58
- };
59
- const onStartGesture = (detail) => {
60
- currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
61
- const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
62
- if (currentTouchedElement === undefined || tabSelectedElement === null) {
63
- return false;
64
- }
65
- animationPosition = {
66
- minPositionX: targetElement.getBoundingClientRect().left,
67
- maxPositionX: targetElement.getBoundingClientRect().right - tabSelectedElement.clientWidth,
68
- width: tabSelectedElement.clientWidth,
69
- positionY: tabSelectedElement.getBoundingClientRect().top,
70
- };
71
- targetElement.classList.add(ANIMATED_NAME);
72
- changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
73
- startAnimationPromise = (() => {
74
- if (tabSelectedElement === currentTouchedElement) {
75
- return new Promise((resolve) => resolve());
76
- }
77
- else {
78
- const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition);
79
- return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
80
- }
81
- })();
82
- startAnimationPromise.then(() => {
83
- moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
84
- moveAnimation.progressStart(true, getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition));
85
- });
86
- getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
87
- return true;
88
- };
89
- const onMoveGesture = (detail) => {
90
- if (currentTouchedElement === undefined || !moveAnimation) {
91
- return false;
92
- }
93
- if (scaleAnimationPromise === undefined) {
94
- if (Math.abs(detail.velocityX) > maxVelocity) {
95
- maxVelocity = Math.abs(detail.velocityX);
96
- }
97
- if (Math.abs(detail.velocityX) > 0.2) {
98
- scaleAnimationPromise = getScaleAnimation(effectElement)
99
- .duration(720)
100
- .keyframes(getMoveAnimationKeyframe('slowly', scales))
101
- .play()
102
- .finally(() => (scaleAnimationPromise = undefined));
103
- }
104
- if (maxVelocity > 0.2 && Math.abs(detail.velocityX) < 0.15 && Math.abs(detail.startX - detail.currentX) > 100) {
105
- scaleAnimationPromise = getScaleAnimation(effectElement)
106
- .duration(720)
107
- .keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? 'moveRight' : 'moveLeft', scales))
108
- .play()
109
- .finally(() => (scaleAnimationPromise = undefined));
110
- maxVelocity = 0;
111
- }
112
- }
113
- const currentX = detail.currentX;
114
- const previousY = targetElement.getBoundingClientRect().top + targetElement.getBoundingClientRect().height / 2;
115
- const nextEl = targetElement.getRootNode().elementFromPoint(currentX, previousY);
116
- const latestTouchedElement = nextEl?.closest(effectTagName) || undefined;
117
- if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
118
- currentTouchedElement = latestTouchedElement;
119
- changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
120
- }
121
- moveAnimation.progressStep(getStep(detail.currentX, animationPosition));
122
- return true;
123
- };
124
- const onEndGesture = async () => {
125
- if (clearActivatedTimer !== undefined) {
126
- clearTimeout(clearActivatedTimer);
127
- clearActivatedTimer = undefined;
128
- }
129
- if (startAnimationPromise) {
130
- await startAnimationPromise;
131
- }
132
- if (currentTouchedElement === undefined || !moveAnimation) {
133
- return false;
134
- }
135
- setTimeout(() => {
136
- const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
137
- const step = getStep(targetX, animationPosition);
138
- moveAnimation.progressStep(step);
139
- });
140
- await getScaleAnimation(effectElement).duration(120).to('transform', `scale(1, 0.92)`).play();
141
- moveAnimation.destroy();
142
- clearActivated();
143
- return true;
144
- };
145
- return {
146
- destroy: () => {
147
- targetElement.removeEventListener('pointerdown', onPointerDown);
148
- targetElement.removeEventListener('pointerup', onPointerUp);
149
- if (clearActivatedTimer !== undefined) {
150
- clearTimeout(clearActivatedTimer);
151
- clearActivatedTimer = undefined;
152
- }
153
- clearActivated();
154
- if (gesture) {
155
- gesture.destroy();
156
- }
157
- targetElement.classList.remove(GESTURE_NAME);
158
- },
159
- };
160
- };
@@ -1,16 +0,0 @@
1
- export interface EffectScales {
2
- small: string;
3
- medium: string;
4
- large: string;
5
- xlarge: string;
6
- }
7
- export interface registeredEffect {
8
- destroy: () => void;
9
- }
10
- export interface AnimationPosition {
11
- minPositionX: number;
12
- maxPositionX: number;
13
- width: number;
14
- positionY: number;
15
- }
16
- //# sourceMappingURL=interfaces.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/gestures/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB"}
@@ -1 +0,0 @@
1
- export {};
@@ -1,5 +0,0 @@
1
- import { AnimationPosition } from './interfaces';
2
- export declare const cloneElement: (tagName: string) => HTMLElement;
3
- export declare const getStep: (targetX: number, animationPosition: AnimationPosition) => number;
4
- export declare const changeSelectedElement: (targetElement: HTMLElement, selectedElement: HTMLElement, effectTagName: string, selectedClassName: string) => void;
5
- //# sourceMappingURL=utils.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/gestures/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,WAY9C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,mBAAmB,iBAAiB,WAQ5E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,eAAe,WAAW,EAC1B,iBAAiB,WAAW,EAC5B,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,IAMF,CAAC"}
@@ -1,27 +0,0 @@
1
- export const cloneElement = (tagName) => {
2
- const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
3
- if (getCachedEl !== null) {
4
- return getCachedEl;
5
- }
6
- const clonedEl = document.createElement(tagName);
7
- clonedEl.classList.add('ion-cloned-element');
8
- clonedEl.style.setProperty('display', 'none');
9
- document.body.appendChild(clonedEl);
10
- return clonedEl;
11
- };
12
- export const getStep = (targetX, animationPosition) => {
13
- if (animationPosition === undefined) {
14
- return 0;
15
- }
16
- const currentX = targetX - animationPosition.width / 2;
17
- let progress = (currentX - animationPosition.minPositionX) / (animationPosition.maxPositionX - animationPosition.minPositionX);
18
- progress = Math.max(0, Math.min(1, progress));
19
- return progress;
20
- };
21
- export const changeSelectedElement = (targetElement, selectedElement, effectTagName, selectedClassName) => {
22
- targetElement.querySelectorAll(effectTagName).forEach((element) => {
23
- element.classList.remove(selectedClassName);
24
- element.classList.remove('ion-activated');
25
- });
26
- selectedElement.classList.add(selectedClassName, 'ion-activated');
27
- };