vevet 3.7.2 → 3.8.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 +40 -6
- package/lib/cjs/components/SlideProgress/index.js.map +1 -1
- package/lib/cjs/version.js +1 -1
- package/lib/esm/components/SlideProgress/index.js +37 -5
- 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 +5 -0
- 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 +51 -8
- package/src/components/SlideProgress/types.ts +5 -0
- 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
|
};
|
|
@@ -150,17 +164,33 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
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 durationMultiplier = diff / this.props.step / 0.5;
|
|
189
|
+
var duration = durationProp * durationMultiplier;
|
|
160
190
|
var timeline = new Timeline_1.Timeline({ duration: duration });
|
|
161
191
|
this._timelineTo = timeline;
|
|
162
192
|
timeline.addCallback('progress', function (data) {
|
|
163
|
-
_this._progressLerp.target = (0, math_1.lerp)(startValue,
|
|
193
|
+
_this._progressLerp.target = (0, math_1.lerp)(startValue, endValue, data.easing);
|
|
164
194
|
_this._updateCurrentProgress(1);
|
|
165
195
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
166
196
|
});
|
|
@@ -180,6 +210,10 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
180
210
|
this._animationFrame.destroy();
|
|
181
211
|
this._dragger.destroy();
|
|
182
212
|
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
213
|
+
if (this._stickyEndTimeout) {
|
|
214
|
+
clearTimeout(this._stickyEndTimeout);
|
|
215
|
+
this._stickyEndTimeout = undefined;
|
|
216
|
+
}
|
|
183
217
|
};
|
|
184
218
|
return SlideProgress;
|
|
185
219
|
}(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
|
}
|
|
@@ -103,15 +115,31 @@ export class SlideProgress extends ComponentClass {
|
|
|
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 durationMultiplier = diff / this.props.step / 0.5;
|
|
138
|
+
const duration = durationProp * durationMultiplier;
|
|
111
139
|
const timeline = new Timeline({ duration });
|
|
112
140
|
this._timelineTo = timeline;
|
|
113
141
|
timeline.addCallback('progress', (data) => {
|
|
114
|
-
this._progressLerp.target = lerp(startValue,
|
|
142
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing);
|
|
115
143
|
this._updateCurrentProgress(1);
|
|
116
144
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
117
145
|
});
|
|
@@ -131,6 +159,10 @@ export class SlideProgress extends ComponentClass {
|
|
|
131
159
|
this._animationFrame.destroy();
|
|
132
160
|
this._dragger.destroy();
|
|
133
161
|
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
162
|
+
if (this._stickyEndTimeout) {
|
|
163
|
+
clearTimeout(this._stickyEndTimeout);
|
|
164
|
+
this._stickyEndTimeout = undefined;
|
|
165
|
+
}
|
|
134
166
|
}
|
|
135
167
|
}
|
|
136
168
|
//# 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;IA2B/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;IA+B1B,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 zero, the animation is disabled.
|
|
52
|
+
* @default 500
|
|
53
|
+
*/
|
|
54
|
+
stickyEndDuration?: number;
|
|
50
55
|
}
|
|
51
56
|
interface ICallbacksTypes extends NComponent.ICallbacksTypes {
|
|
52
57
|
render: undefined;
|
|
@@ -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,MAAM,CAAC;KAC5B;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,UAAiB,QAAQ;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,mBAAmB;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,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();
|
|
@@ -183,22 +199,44 @@ export class SlideProgress<
|
|
|
183
199
|
}
|
|
184
200
|
}
|
|
185
201
|
|
|
202
|
+
/** Sticky to the nearest step */
|
|
203
|
+
protected _goStickyEnd() {
|
|
204
|
+
const { stickyEndDuration } = this.props;
|
|
205
|
+
|
|
206
|
+
if (!stickyEndDuration) {
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
const startValue = this._progressLerp.current;
|
|
211
|
+
const endValue = this._getNearestStep(startValue);
|
|
212
|
+
|
|
213
|
+
if (startValue === endValue) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
this.to({ value: endValue, duration: stickyEndDuration });
|
|
218
|
+
}
|
|
219
|
+
|
|
186
220
|
/** Animate progress to a certain value */
|
|
187
221
|
public to({
|
|
188
|
-
value,
|
|
189
|
-
duration = 500,
|
|
222
|
+
value: endValue,
|
|
223
|
+
duration: durationProp = 500,
|
|
190
224
|
onProgress,
|
|
191
225
|
onEnd,
|
|
192
226
|
}: NSlideProgress.IToProps) {
|
|
193
227
|
this._timelineTo?.destroy();
|
|
194
228
|
|
|
195
229
|
const startValue = this._progressLerp.current;
|
|
230
|
+
const diff = Math.abs(startValue - endValue);
|
|
231
|
+
|
|
232
|
+
const durationMultiplier = diff / this.props.step / 0.5;
|
|
233
|
+
const duration = durationProp * durationMultiplier;
|
|
196
234
|
|
|
197
235
|
const timeline = new Timeline({ duration });
|
|
198
236
|
this._timelineTo = timeline;
|
|
199
237
|
|
|
200
238
|
timeline.addCallback('progress', (data) => {
|
|
201
|
-
this._progressLerp.target = lerp(startValue,
|
|
239
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing);
|
|
202
240
|
this._updateCurrentProgress(1);
|
|
203
241
|
|
|
204
242
|
onProgress?.(data);
|
|
@@ -224,5 +262,10 @@ export class SlideProgress<
|
|
|
224
262
|
this._dragger.destroy();
|
|
225
263
|
|
|
226
264
|
this._timelineTo?.destroy();
|
|
265
|
+
|
|
266
|
+
if (this._stickyEndTimeout) {
|
|
267
|
+
clearTimeout(this._stickyEndTimeout);
|
|
268
|
+
this._stickyEndTimeout = undefined;
|
|
269
|
+
}
|
|
227
270
|
}
|
|
228
271
|
}
|
|
@@ -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 zero, the animation is disabled.
|
|
54
|
+
* @default 500
|
|
55
|
+
*/
|
|
56
|
+
stickyEndDuration?: number;
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
|
package/src/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const version = '3.
|
|
1
|
+
const version = '3.8.0';
|
|
2
2
|
export default version;
|