vevet 3.7.2 → 3.9.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/lib/cjs/components/SlideProgress/index.js +44 -8
- package/lib/cjs/components/SlideProgress/index.js.map +1 -1
- package/lib/cjs/version.js +1 -1
- package/lib/esm/components/SlideProgress/index.js +41 -7
- package/lib/esm/components/SlideProgress/index.js.map +1 -1
- package/lib/esm/version.js +1 -1
- package/lib/types/components/SlideProgress/index.d.ts +7 -1
- package/lib/types/components/SlideProgress/index.d.ts.map +1 -1
- package/lib/types/components/SlideProgress/types.d.ts +7 -1
- package/lib/types/components/SlideProgress/types.d.ts.map +1 -1
- package/lib/types/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/SlideProgress/index.ts +56 -9
- package/src/components/SlideProgress/types.ts +8 -1
- package/src/version.ts +1 -1
|
@@ -52,9 +52,11 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
52
52
|
// create dragger
|
|
53
53
|
_this._dragger = new DraggerMove_1.DraggerMove({ container: container });
|
|
54
54
|
_this._dragger.addCallback('move', function (event) { return _this._handleDrag(event); });
|
|
55
|
-
_this._dragger.addCallback('start', function (
|
|
56
|
-
|
|
55
|
+
_this._dragger.addCallback('start', function (_a) {
|
|
56
|
+
var event = _a.event;
|
|
57
|
+
return event.stopPropagation();
|
|
57
58
|
});
|
|
59
|
+
_this._dragger.addCallback('end', function () { return _this._goStickyEnd(); });
|
|
58
60
|
// add wheel event
|
|
59
61
|
_this.addEventListener(container, 'wheel', function (event) {
|
|
60
62
|
return _this._handleWheel(event);
|
|
@@ -66,7 +68,7 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
66
68
|
return _this;
|
|
67
69
|
}
|
|
68
70
|
SlideProgress.prototype._getDefaultProps = function () {
|
|
69
|
-
return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { min: 0, max: 3, step: 1, ease: 0.1, friction: 0.5, hasDrag: true, dragSpeed: 1, dragDirection: 'y', hasWheel: true, wheelSpeed: 1 });
|
|
71
|
+
return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { min: 0, max: 3, step: 1, ease: 0.1, friction: 0.5, hasDrag: true, dragSpeed: 1, dragDirection: 'y', hasWheel: true, wheelSpeed: 1, stickyEndDuration: 500 });
|
|
70
72
|
};
|
|
71
73
|
Object.defineProperty(SlideProgress.prototype, "progress", {
|
|
72
74
|
/** Progress */
|
|
@@ -90,15 +92,26 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
90
92
|
};
|
|
91
93
|
/** Handle wheel event */
|
|
92
94
|
SlideProgress.prototype._handleWheel = function (event) {
|
|
95
|
+
var _this = this;
|
|
93
96
|
if (this._timelineTo || !this.props.hasWheel) {
|
|
94
97
|
return;
|
|
95
98
|
}
|
|
99
|
+
// clear sticky timeout
|
|
100
|
+
if (this._stickyEndTimeout) {
|
|
101
|
+
clearTimeout(this._stickyEndTimeout);
|
|
102
|
+
this._stickyEndTimeout = undefined;
|
|
103
|
+
}
|
|
104
|
+
// vars
|
|
96
105
|
var progress = this._progressLerp;
|
|
97
106
|
var _a = this.props, container = _a.container, min = _a.min, max = _a.max, wheelSpeed = _a.wheelSpeed;
|
|
107
|
+
// normalize wheel
|
|
98
108
|
var wheel = (0, normalizeWheel_1.normalizeWheel)(event);
|
|
99
109
|
var y = (wheel.pixelY / container.clientHeight) * wheelSpeed;
|
|
110
|
+
// update target
|
|
100
111
|
progress.target = (0, math_1.clamp)(progress.target + y, [min, max]);
|
|
101
112
|
this._animationFrame.play();
|
|
113
|
+
// go sticky
|
|
114
|
+
this._stickyEndTimeout = setTimeout(function () { return _this._goStickyEnd(); }, 100);
|
|
102
115
|
};
|
|
103
116
|
/** Handler drag move event */
|
|
104
117
|
SlideProgress.prototype._handleDrag = function (_a) {
|
|
@@ -112,7 +125,8 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
112
125
|
return;
|
|
113
126
|
}
|
|
114
127
|
var defaultIterator = dragDirection === 'y' ? step.y : step.x;
|
|
115
|
-
var
|
|
128
|
+
var iteratorDivider = dragDirection === 'y' ? container.clientHeight : container.clientWidth;
|
|
129
|
+
var iterator = (defaultIterator * dragSpeed) / iteratorDivider;
|
|
116
130
|
progress.target = (0, math_1.clamp)(progress.target - iterator, [min, max]);
|
|
117
131
|
this._animationFrame.play();
|
|
118
132
|
};
|
|
@@ -127,7 +141,7 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
127
141
|
var easeMultiplier = this._animationFrame.easeMultiplier;
|
|
128
142
|
var nearestSteppedProgress = this._getNearestStep(progress.target);
|
|
129
143
|
if (!this._timelineTo) {
|
|
130
|
-
progress.target = (0, math_1.lerp)(progress.target, nearestSteppedProgress, friction * ease * easeMultiplier);
|
|
144
|
+
progress.target = (0, math_1.lerp)(progress.target, nearestSteppedProgress, friction * ease * easeMultiplier, 0);
|
|
131
145
|
this._updateCurrentProgress(ease * easeMultiplier);
|
|
132
146
|
if (progress.current === progress.target &&
|
|
133
147
|
progress.current % step === 0) {
|
|
@@ -144,23 +158,41 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
144
158
|
SlideProgress.prototype._updateCurrentProgress = function (ease) {
|
|
145
159
|
var progress = this._progressLerp;
|
|
146
160
|
var prevSteppedProgress = this._getNearestStep(progress.current);
|
|
147
|
-
progress.current = (0, math_1.lerp)(progress.current, progress.target, ease);
|
|
161
|
+
progress.current = (0, math_1.lerp)(progress.current, progress.target, ease, 0);
|
|
148
162
|
var nextSteppedProgress = this._getNearestStep(progress.current);
|
|
149
163
|
if (prevSteppedProgress !== nextSteppedProgress) {
|
|
150
164
|
this.callbacks.tbt('step', undefined);
|
|
151
165
|
}
|
|
152
166
|
};
|
|
167
|
+
/** Sticky to the nearest step */
|
|
168
|
+
SlideProgress.prototype._goStickyEnd = function () {
|
|
169
|
+
var stickyEndDuration = this.props.stickyEndDuration;
|
|
170
|
+
if (!stickyEndDuration) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
var startValue = this._progressLerp.current;
|
|
174
|
+
var endValue = this._getNearestStep(startValue);
|
|
175
|
+
if (startValue === endValue) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
this.to({ value: endValue, duration: stickyEndDuration });
|
|
179
|
+
};
|
|
153
180
|
/** Animate progress to a certain value */
|
|
154
181
|
SlideProgress.prototype.to = function (_a) {
|
|
155
182
|
var _this = this;
|
|
156
183
|
var _b;
|
|
157
|
-
var
|
|
184
|
+
var endValue = _a.value, _c = _a.duration, durationProp = _c === void 0 ? 500 : _c, onProgress = _a.onProgress, onEnd = _a.onEnd;
|
|
158
185
|
(_b = this._timelineTo) === null || _b === void 0 ? void 0 : _b.destroy();
|
|
159
186
|
var startValue = this._progressLerp.current;
|
|
187
|
+
var diff = Math.abs(startValue - endValue);
|
|
188
|
+
var multiplier = diff / this.props.step;
|
|
189
|
+
var duration = typeof durationProp === 'number'
|
|
190
|
+
? durationProp * multiplier
|
|
191
|
+
: durationProp(multiplier);
|
|
160
192
|
var timeline = new Timeline_1.Timeline({ duration: duration });
|
|
161
193
|
this._timelineTo = timeline;
|
|
162
194
|
timeline.addCallback('progress', function (data) {
|
|
163
|
-
_this._progressLerp.target = (0, math_1.lerp)(startValue,
|
|
195
|
+
_this._progressLerp.target = (0, math_1.lerp)(startValue, endValue, data.easing, 0);
|
|
164
196
|
_this._updateCurrentProgress(1);
|
|
165
197
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
166
198
|
});
|
|
@@ -180,6 +212,10 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
180
212
|
this._animationFrame.destroy();
|
|
181
213
|
this._dragger.destroy();
|
|
182
214
|
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
215
|
+
if (this._stickyEndTimeout) {
|
|
216
|
+
clearTimeout(this._stickyEndTimeout);
|
|
217
|
+
this._stickyEndTimeout = undefined;
|
|
218
|
+
}
|
|
183
219
|
};
|
|
184
220
|
return SlideProgress;
|
|
185
221
|
}(Component_1.Component));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8CAA+D;AAE/D,qCAA2C;AAC3C,gEAA+D;AAC/D,oDAAmD;AACnD,8CAA2D;AAC3D,wCAAuC;AAIvC;;GAEG;AACH;IAMU,iCAA4D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":"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"}
|
package/lib/cjs/version.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Timeline } from '../Timeline';
|
|
|
9
9
|
*/
|
|
10
10
|
export class SlideProgress extends ComponentClass {
|
|
11
11
|
_getDefaultProps() {
|
|
12
|
-
return Object.assign(Object.assign({}, super._getDefaultProps()), { min: 0, max: 3, step: 1, ease: 0.1, friction: 0.5, hasDrag: true, dragSpeed: 1, dragDirection: 'y', hasWheel: true, wheelSpeed: 1 });
|
|
12
|
+
return Object.assign(Object.assign({}, super._getDefaultProps()), { min: 0, max: 3, step: 1, ease: 0.1, friction: 0.5, hasDrag: true, dragSpeed: 1, dragDirection: 'y', hasWheel: true, wheelSpeed: 1, stickyEndDuration: 500 });
|
|
13
13
|
}
|
|
14
14
|
/** Progress */
|
|
15
15
|
get progress() {
|
|
@@ -30,7 +30,8 @@ export class SlideProgress extends ComponentClass {
|
|
|
30
30
|
// create dragger
|
|
31
31
|
this._dragger = new DraggerMove({ container });
|
|
32
32
|
this._dragger.addCallback('move', (event) => this._handleDrag(event));
|
|
33
|
-
this._dragger.addCallback('start', (event) => event.
|
|
33
|
+
this._dragger.addCallback('start', ({ event }) => event.stopPropagation());
|
|
34
|
+
this._dragger.addCallback('end', () => this._goStickyEnd());
|
|
34
35
|
// add wheel event
|
|
35
36
|
this.addEventListener(container, 'wheel', (event) => this._handleWheel(event));
|
|
36
37
|
// initialize the class
|
|
@@ -47,12 +48,22 @@ export class SlideProgress extends ComponentClass {
|
|
|
47
48
|
if (this._timelineTo || !this.props.hasWheel) {
|
|
48
49
|
return;
|
|
49
50
|
}
|
|
51
|
+
// clear sticky timeout
|
|
52
|
+
if (this._stickyEndTimeout) {
|
|
53
|
+
clearTimeout(this._stickyEndTimeout);
|
|
54
|
+
this._stickyEndTimeout = undefined;
|
|
55
|
+
}
|
|
56
|
+
// vars
|
|
50
57
|
const { _progressLerp: progress } = this;
|
|
51
58
|
const { container, min, max, wheelSpeed } = this.props;
|
|
59
|
+
// normalize wheel
|
|
52
60
|
const wheel = normalizeWheel(event);
|
|
53
61
|
const y = (wheel.pixelY / container.clientHeight) * wheelSpeed;
|
|
62
|
+
// update target
|
|
54
63
|
progress.target = clamp(progress.target + y, [min, max]);
|
|
55
64
|
this._animationFrame.play();
|
|
65
|
+
// go sticky
|
|
66
|
+
this._stickyEndTimeout = setTimeout(() => this._goStickyEnd(), 100);
|
|
56
67
|
}
|
|
57
68
|
/** Handler drag move event */
|
|
58
69
|
_handleDrag({ step }) {
|
|
@@ -65,7 +76,8 @@ export class SlideProgress extends ComponentClass {
|
|
|
65
76
|
return;
|
|
66
77
|
}
|
|
67
78
|
const defaultIterator = dragDirection === 'y' ? step.y : step.x;
|
|
68
|
-
const
|
|
79
|
+
const iteratorDivider = dragDirection === 'y' ? container.clientHeight : container.clientWidth;
|
|
80
|
+
const iterator = (defaultIterator * dragSpeed) / iteratorDivider;
|
|
69
81
|
progress.target = clamp(progress.target - iterator, [min, max]);
|
|
70
82
|
this._animationFrame.play();
|
|
71
83
|
}
|
|
@@ -80,7 +92,7 @@ export class SlideProgress extends ComponentClass {
|
|
|
80
92
|
const { easeMultiplier } = this._animationFrame;
|
|
81
93
|
const nearestSteppedProgress = this._getNearestStep(progress.target);
|
|
82
94
|
if (!this._timelineTo) {
|
|
83
|
-
progress.target = lerp(progress.target, nearestSteppedProgress, friction * ease * easeMultiplier);
|
|
95
|
+
progress.target = lerp(progress.target, nearestSteppedProgress, friction * ease * easeMultiplier, 0);
|
|
84
96
|
this._updateCurrentProgress(ease * easeMultiplier);
|
|
85
97
|
if (progress.current === progress.target &&
|
|
86
98
|
progress.current % step === 0) {
|
|
@@ -97,21 +109,39 @@ export class SlideProgress extends ComponentClass {
|
|
|
97
109
|
_updateCurrentProgress(ease) {
|
|
98
110
|
const progress = this._progressLerp;
|
|
99
111
|
const prevSteppedProgress = this._getNearestStep(progress.current);
|
|
100
|
-
progress.current = lerp(progress.current, progress.target, ease);
|
|
112
|
+
progress.current = lerp(progress.current, progress.target, ease, 0);
|
|
101
113
|
const nextSteppedProgress = this._getNearestStep(progress.current);
|
|
102
114
|
if (prevSteppedProgress !== nextSteppedProgress) {
|
|
103
115
|
this.callbacks.tbt('step', undefined);
|
|
104
116
|
}
|
|
105
117
|
}
|
|
118
|
+
/** Sticky to the nearest step */
|
|
119
|
+
_goStickyEnd() {
|
|
120
|
+
const { stickyEndDuration } = this.props;
|
|
121
|
+
if (!stickyEndDuration) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
const startValue = this._progressLerp.current;
|
|
125
|
+
const endValue = this._getNearestStep(startValue);
|
|
126
|
+
if (startValue === endValue) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
this.to({ value: endValue, duration: stickyEndDuration });
|
|
130
|
+
}
|
|
106
131
|
/** Animate progress to a certain value */
|
|
107
|
-
to({ value, duration = 500, onProgress, onEnd, }) {
|
|
132
|
+
to({ value: endValue, duration: durationProp = 500, onProgress, onEnd, }) {
|
|
108
133
|
var _a;
|
|
109
134
|
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
110
135
|
const startValue = this._progressLerp.current;
|
|
136
|
+
const diff = Math.abs(startValue - endValue);
|
|
137
|
+
const multiplier = diff / this.props.step;
|
|
138
|
+
const duration = typeof durationProp === 'number'
|
|
139
|
+
? durationProp * multiplier
|
|
140
|
+
: durationProp(multiplier);
|
|
111
141
|
const timeline = new Timeline({ duration });
|
|
112
142
|
this._timelineTo = timeline;
|
|
113
143
|
timeline.addCallback('progress', (data) => {
|
|
114
|
-
this._progressLerp.target = lerp(startValue,
|
|
144
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing, 0);
|
|
115
145
|
this._updateCurrentProgress(1);
|
|
116
146
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
117
147
|
});
|
|
@@ -131,6 +161,10 @@ export class SlideProgress extends ComponentClass {
|
|
|
131
161
|
this._animationFrame.destroy();
|
|
132
162
|
this._dragger.destroy();
|
|
133
163
|
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
164
|
+
if (this._stickyEndTimeout) {
|
|
165
|
+
clearTimeout(this._stickyEndTimeout);
|
|
166
|
+
this._stickyEndTimeout = undefined;
|
|
167
|
+
}
|
|
134
168
|
}
|
|
135
169
|
}
|
|
136
170
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC;;GAEG;AACH,MAAM,OAAO,aAMX,SAAQ,cAA4D;IAC1D,gBAAgB;QACxB,uCACK,KAAK,CAAC,gBAAgB,EAAE,KAC3B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,CAAC,EACZ,aAAa,EAAE,GAAG,EAClB,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":"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"}
|
package/lib/esm/version.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
1
2
|
import { Component as ComponentClass } from '../../base/Component';
|
|
2
3
|
import { NSlideProgress } from './types';
|
|
3
4
|
import { AnimationFrame } from '../AnimationFrame';
|
|
@@ -19,6 +20,7 @@ export declare class SlideProgress<StaticProps extends NSlideProgress.IStaticPro
|
|
|
19
20
|
dragDirection: string;
|
|
20
21
|
hasWheel: boolean;
|
|
21
22
|
wheelSpeed: number;
|
|
23
|
+
stickyEndDuration: number;
|
|
22
24
|
};
|
|
23
25
|
/** Animation frame */
|
|
24
26
|
protected _animationFrame: AnimationFrame;
|
|
@@ -32,6 +34,8 @@ export declare class SlideProgress<StaticProps extends NSlideProgress.IStaticPro
|
|
|
32
34
|
get steppedProgress(): number;
|
|
33
35
|
/** Progress timeline */
|
|
34
36
|
protected _timelineTo?: Timeline;
|
|
37
|
+
/** Sticky timeout */
|
|
38
|
+
protected _stickyEndTimeout?: NodeJS.Timeout;
|
|
35
39
|
constructor(initialProps?: StaticProps & ChangeableProps, canInit?: boolean);
|
|
36
40
|
protected _onPropsMutate(): void;
|
|
37
41
|
/** Handle wheel event */
|
|
@@ -46,8 +50,10 @@ export declare class SlideProgress<StaticProps extends NSlideProgress.IStaticPro
|
|
|
46
50
|
render(): void;
|
|
47
51
|
/** Interpolate current progress & launch callbacks if needed */
|
|
48
52
|
protected _updateCurrentProgress(ease: number): void;
|
|
53
|
+
/** Sticky to the nearest step */
|
|
54
|
+
protected _goStickyEnd(): void;
|
|
49
55
|
/** Animate progress to a certain value */
|
|
50
|
-
to({ value, duration, onProgress, onEnd, }: NSlideProgress.IToProps): void;
|
|
56
|
+
to({ value: endValue, duration: durationProp, onProgress, onEnd, }: NSlideProgress.IToProps): void;
|
|
51
57
|
/** Destroy the module */
|
|
52
58
|
protected _destroy(): void;
|
|
53
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;GAEG;AACH,qBAAa,aAAa,CACxB,WAAW,SAAS,cAAc,CAAC,YAAY,GAAG,cAAc,CAAC,YAAY,EAC7E,eAAe,SACb,cAAc,CAAC,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,EACnE,cAAc,SACZ,cAAc,CAAC,eAAe,GAAG,cAAc,CAAC,eAAe,CACjE,SAAQ,cAAc,CAAC,WAAW,EAAE,eAAe,EAAE,cAAc,CAAC;IACpE,SAAS,CAAC,gBAAgB
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SlideProgress/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;GAEG;AACH,qBAAa,aAAa,CACxB,WAAW,SAAS,cAAc,CAAC,YAAY,GAAG,cAAc,CAAC,YAAY,EAC7E,eAAe,SACb,cAAc,CAAC,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,EACnE,cAAc,SACZ,cAAc,CAAC,eAAe,GAAG,cAAc,CAAC,eAAe,CACjE,SAAQ,cAAc,CAAC,WAAW,EAAE,eAAe,EAAE,cAAc,CAAC;IACpE,SAAS,CAAC,gBAAgB;;;;;;;;;;;;;IAiB1B,sBAAsB;IACtB,SAAS,CAAC,eAAe,EAAE,cAAc,CAAC;IAE1C,qBAAqB;IACrB,SAAS,CAAC,QAAQ,EAAE,WAAW,CAAC;IAEhC,oCAAoC;IACpC,SAAS,CAAC,aAAa,EAAE,cAAc,CAAC,SAAS,CAA6B;IAE9E,eAAe;IACf,IAAI,QAAQ,WAEX;IAED,uBAAuB;IACvB,IAAI,eAAe,WAElB;IAED,wBAAwB;IACxB,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC;IAEjC,qBAAqB;IACrB,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;gBAEjC,YAAY,CAAC,EAAE,WAAW,GAAG,eAAe,EAAE,OAAO,UAAO;IA4BxE,SAAS,CAAC,cAAc;IAMxB,yBAAyB;IACzB,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IA2BxC,8BAA8B;IAC9B,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,cAAc;IAuB3D,kDAAkD;IAClD,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM;IAIvC,kCAAkC;IAClC,SAAS,CAAC,qBAAqB;IA4B/B,mBAAmB;IACZ,MAAM;IAIb,gEAAgE;IAChE,SAAS,CAAC,sBAAsB,CAAC,IAAI,EAAE,MAAM;IAc7C,iCAAiC;IACjC,SAAS,CAAC,YAAY;IAiBtB,0CAA0C;IACnC,EAAE,CAAC,EACR,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,YAAkB,EAC5B,UAAU,EACV,KAAK,GACN,EAAE,cAAc,CAAC,QAAQ;IAkC1B,yBAAyB;IACzB,SAAS,CAAC,QAAQ;CAanB"}
|
|
@@ -47,6 +47,11 @@ export declare namespace NSlideProgress {
|
|
|
47
47
|
* @default 1
|
|
48
48
|
*/
|
|
49
49
|
wheelSpeed?: number;
|
|
50
|
+
/**
|
|
51
|
+
* Duration of sticky animation to the nearest step. If nullable, the animation is disabled.
|
|
52
|
+
* @default 500
|
|
53
|
+
*/
|
|
54
|
+
stickyEndDuration?: TDuration | null;
|
|
50
55
|
}
|
|
51
56
|
interface ICallbacksTypes extends NComponent.ICallbacksTypes {
|
|
52
57
|
render: undefined;
|
|
@@ -56,10 +61,11 @@ export declare namespace NSlideProgress {
|
|
|
56
61
|
current: number;
|
|
57
62
|
target: number;
|
|
58
63
|
}
|
|
64
|
+
type TDuration = number | ((multiplier: number) => number);
|
|
59
65
|
interface IToProps {
|
|
60
66
|
value: number;
|
|
61
67
|
/** @default 500 */
|
|
62
|
-
duration?:
|
|
68
|
+
duration?: TDuration;
|
|
63
69
|
onProgress?: (props: NTimeline.ICallbacksTypes['progress']) => void;
|
|
64
70
|
onEnd?: () => void;
|
|
65
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/SlideProgress/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,YAAa,SAAQ,UAAU,CAAC,YAAY;QAC3D,qBAAqB;QACrB,SAAS,EAAE,WAAW,CAAC;KACxB;IAED,UAAiB,gBAAiB,SAAQ,UAAU,CAAC,gBAAgB;QACnE,6BAA6B;QAC7B,GAAG,EAAE,MAAM,CAAC;QACZ,6BAA6B;QAC7B,GAAG,EAAE,MAAM,CAAC;QACZ,oBAAoB;QACpB,IAAI,EAAE,MAAM,CAAC;QACb;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;;WAGG;QACH,aAAa,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;QAC1B;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;WAGG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/SlideProgress/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,YAAa,SAAQ,UAAU,CAAC,YAAY;QAC3D,qBAAqB;QACrB,SAAS,EAAE,WAAW,CAAC;KACxB;IAED,UAAiB,gBAAiB,SAAQ,UAAU,CAAC,gBAAgB;QACnE,6BAA6B;QAC7B,GAAG,EAAE,MAAM,CAAC;QACZ,6BAA6B;QAC7B,GAAG,EAAE,MAAM,CAAC;QACZ,oBAAoB;QACpB,IAAI,EAAE,MAAM,CAAC;QACb;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;;WAGG;QACH,aAAa,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;QAC1B;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;WAGG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;;WAGG;QACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;KACtC;IAED,UAAiB,eAAgB,SAAQ,UAAU,CAAC,eAAe;QACjE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE,SAAS,CAAC;KACjB;IAED,UAAiB,SAAS;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,KAAY,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAElE,UAAiB,QAAQ;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,mBAAmB;QACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;QACpE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;KACpB;CACF"}
|
package/lib/types/version.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -31,6 +31,7 @@ export class SlideProgress<
|
|
|
31
31
|
dragDirection: 'y',
|
|
32
32
|
hasWheel: true,
|
|
33
33
|
wheelSpeed: 1,
|
|
34
|
+
stickyEndDuration: 500,
|
|
34
35
|
};
|
|
35
36
|
}
|
|
36
37
|
|
|
@@ -56,6 +57,9 @@ export class SlideProgress<
|
|
|
56
57
|
/** Progress timeline */
|
|
57
58
|
protected _timelineTo?: Timeline;
|
|
58
59
|
|
|
60
|
+
/** Sticky timeout */
|
|
61
|
+
protected _stickyEndTimeout?: NodeJS.Timeout;
|
|
62
|
+
|
|
59
63
|
constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
|
|
60
64
|
super(initialProps, false);
|
|
61
65
|
|
|
@@ -70,9 +74,8 @@ export class SlideProgress<
|
|
|
70
74
|
// create dragger
|
|
71
75
|
this._dragger = new DraggerMove({ container });
|
|
72
76
|
this._dragger.addCallback('move', (event) => this._handleDrag(event));
|
|
73
|
-
this._dragger.addCallback('start', (event) =>
|
|
74
|
-
|
|
75
|
-
);
|
|
77
|
+
this._dragger.addCallback('start', ({ event }) => event.stopPropagation());
|
|
78
|
+
this._dragger.addCallback('end', () => this._goStickyEnd());
|
|
76
79
|
|
|
77
80
|
// add wheel event
|
|
78
81
|
this.addEventListener(container, 'wheel', (event) =>
|
|
@@ -97,15 +100,26 @@ export class SlideProgress<
|
|
|
97
100
|
return;
|
|
98
101
|
}
|
|
99
102
|
|
|
103
|
+
// clear sticky timeout
|
|
104
|
+
if (this._stickyEndTimeout) {
|
|
105
|
+
clearTimeout(this._stickyEndTimeout);
|
|
106
|
+
this._stickyEndTimeout = undefined;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// vars
|
|
100
110
|
const { _progressLerp: progress } = this;
|
|
101
111
|
const { container, min, max, wheelSpeed } = this.props;
|
|
102
112
|
|
|
113
|
+
// normalize wheel
|
|
103
114
|
const wheel = normalizeWheel(event);
|
|
104
115
|
const y = (wheel.pixelY / container.clientHeight) * wheelSpeed;
|
|
105
116
|
|
|
117
|
+
// update target
|
|
106
118
|
progress.target = clamp(progress.target + y, [min, max]);
|
|
107
|
-
|
|
108
119
|
this._animationFrame.play();
|
|
120
|
+
|
|
121
|
+
// go sticky
|
|
122
|
+
this._stickyEndTimeout = setTimeout(() => this._goStickyEnd(), 100);
|
|
109
123
|
}
|
|
110
124
|
|
|
111
125
|
/** Handler drag move event */
|
|
@@ -123,8 +137,10 @@ export class SlideProgress<
|
|
|
123
137
|
}
|
|
124
138
|
|
|
125
139
|
const defaultIterator = dragDirection === 'y' ? step.y : step.x;
|
|
126
|
-
const
|
|
140
|
+
const iteratorDivider =
|
|
141
|
+
dragDirection === 'y' ? container.clientHeight : container.clientWidth;
|
|
127
142
|
|
|
143
|
+
const iterator = (defaultIterator * dragSpeed) / iteratorDivider;
|
|
128
144
|
progress.target = clamp(progress.target - iterator, [min, max]);
|
|
129
145
|
|
|
130
146
|
this._animationFrame.play();
|
|
@@ -148,6 +164,7 @@ export class SlideProgress<
|
|
|
148
164
|
progress.target,
|
|
149
165
|
nearestSteppedProgress,
|
|
150
166
|
friction * ease * easeMultiplier,
|
|
167
|
+
0,
|
|
151
168
|
);
|
|
152
169
|
|
|
153
170
|
this._updateCurrentProgress(ease * easeMultiplier);
|
|
@@ -174,7 +191,7 @@ export class SlideProgress<
|
|
|
174
191
|
|
|
175
192
|
const prevSteppedProgress = this._getNearestStep(progress.current);
|
|
176
193
|
|
|
177
|
-
progress.current = lerp(progress.current, progress.target, ease);
|
|
194
|
+
progress.current = lerp(progress.current, progress.target, ease, 0);
|
|
178
195
|
|
|
179
196
|
const nextSteppedProgress = this._getNearestStep(progress.current);
|
|
180
197
|
|
|
@@ -183,22 +200,47 @@ export class SlideProgress<
|
|
|
183
200
|
}
|
|
184
201
|
}
|
|
185
202
|
|
|
203
|
+
/** Sticky to the nearest step */
|
|
204
|
+
protected _goStickyEnd() {
|
|
205
|
+
const { stickyEndDuration } = this.props;
|
|
206
|
+
|
|
207
|
+
if (!stickyEndDuration) {
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
const startValue = this._progressLerp.current;
|
|
212
|
+
const endValue = this._getNearestStep(startValue);
|
|
213
|
+
|
|
214
|
+
if (startValue === endValue) {
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
this.to({ value: endValue, duration: stickyEndDuration });
|
|
219
|
+
}
|
|
220
|
+
|
|
186
221
|
/** Animate progress to a certain value */
|
|
187
222
|
public to({
|
|
188
|
-
value,
|
|
189
|
-
duration = 500,
|
|
223
|
+
value: endValue,
|
|
224
|
+
duration: durationProp = 500,
|
|
190
225
|
onProgress,
|
|
191
226
|
onEnd,
|
|
192
227
|
}: NSlideProgress.IToProps) {
|
|
193
228
|
this._timelineTo?.destroy();
|
|
194
229
|
|
|
195
230
|
const startValue = this._progressLerp.current;
|
|
231
|
+
const diff = Math.abs(startValue - endValue);
|
|
232
|
+
const multiplier = diff / this.props.step;
|
|
233
|
+
|
|
234
|
+
const duration =
|
|
235
|
+
typeof durationProp === 'number'
|
|
236
|
+
? durationProp * multiplier
|
|
237
|
+
: durationProp(multiplier);
|
|
196
238
|
|
|
197
239
|
const timeline = new Timeline({ duration });
|
|
198
240
|
this._timelineTo = timeline;
|
|
199
241
|
|
|
200
242
|
timeline.addCallback('progress', (data) => {
|
|
201
|
-
this._progressLerp.target = lerp(startValue,
|
|
243
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing, 0);
|
|
202
244
|
this._updateCurrentProgress(1);
|
|
203
245
|
|
|
204
246
|
onProgress?.(data);
|
|
@@ -224,5 +266,10 @@ export class SlideProgress<
|
|
|
224
266
|
this._dragger.destroy();
|
|
225
267
|
|
|
226
268
|
this._timelineTo?.destroy();
|
|
269
|
+
|
|
270
|
+
if (this._stickyEndTimeout) {
|
|
271
|
+
clearTimeout(this._stickyEndTimeout);
|
|
272
|
+
this._stickyEndTimeout = undefined;
|
|
273
|
+
}
|
|
227
274
|
}
|
|
228
275
|
}
|
|
@@ -49,6 +49,11 @@ export namespace NSlideProgress {
|
|
|
49
49
|
* @default 1
|
|
50
50
|
*/
|
|
51
51
|
wheelSpeed?: number;
|
|
52
|
+
/**
|
|
53
|
+
* Duration of sticky animation to the nearest step. If nullable, the animation is disabled.
|
|
54
|
+
* @default 500
|
|
55
|
+
*/
|
|
56
|
+
stickyEndDuration?: TDuration | null;
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
|
|
@@ -61,10 +66,12 @@ export namespace NSlideProgress {
|
|
|
61
66
|
target: number;
|
|
62
67
|
}
|
|
63
68
|
|
|
69
|
+
export type TDuration = number | ((multiplier: number) => number);
|
|
70
|
+
|
|
64
71
|
export interface IToProps {
|
|
65
72
|
value: number;
|
|
66
73
|
/** @default 500 */
|
|
67
|
-
duration?:
|
|
74
|
+
duration?: TDuration;
|
|
68
75
|
onProgress?: (props: NTimeline.ICallbacksTypes['progress']) => void;
|
|
69
76
|
onEnd?: () => void;
|
|
70
77
|
}
|
package/src/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const version = '3.
|
|
1
|
+
const version = '3.9.0';
|
|
2
2
|
export default version;
|