vevet 3.7.1 → 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 +42 -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 +39 -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 +53 -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,15 +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
|
-
var
|
|
183
|
+
var _b;
|
|
184
|
+
var endValue = _a.value, _c = _a.duration, durationProp = _c === void 0 ? 500 : _c, onProgress = _a.onProgress, onEnd = _a.onEnd;
|
|
185
|
+
(_b = this._timelineTo) === null || _b === void 0 ? void 0 : _b.destroy();
|
|
157
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;
|
|
158
190
|
var timeline = new Timeline_1.Timeline({ duration: duration });
|
|
159
191
|
this._timelineTo = timeline;
|
|
160
192
|
timeline.addCallback('progress', function (data) {
|
|
161
|
-
_this._progressLerp.target = (0, math_1.lerp)(startValue,
|
|
193
|
+
_this._progressLerp.target = (0, math_1.lerp)(startValue, endValue, data.easing);
|
|
162
194
|
_this._updateCurrentProgress(1);
|
|
163
195
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
164
196
|
});
|
|
@@ -178,6 +210,10 @@ var SlideProgress = /** @class */ (function (_super) {
|
|
|
178
210
|
this._animationFrame.destroy();
|
|
179
211
|
this._dragger.destroy();
|
|
180
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
|
+
}
|
|
181
217
|
};
|
|
182
218
|
return SlideProgress;
|
|
183
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,13 +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, }) {
|
|
133
|
+
var _a;
|
|
134
|
+
(_a = this._timelineTo) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
108
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;
|
|
109
139
|
const timeline = new Timeline({ duration });
|
|
110
140
|
this._timelineTo = timeline;
|
|
111
141
|
timeline.addCallback('progress', (data) => {
|
|
112
|
-
this._progressLerp.target = lerp(startValue,
|
|
142
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing);
|
|
113
143
|
this._updateCurrentProgress(1);
|
|
114
144
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(data);
|
|
115
145
|
});
|
|
@@ -129,6 +159,10 @@ export class SlideProgress extends ComponentClass {
|
|
|
129
159
|
this._animationFrame.destroy();
|
|
130
160
|
this._dragger.destroy();
|
|
131
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
|
+
}
|
|
132
166
|
}
|
|
133
167
|
}
|
|
134
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,20 +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) {
|
|
227
|
+
this._timelineTo?.destroy();
|
|
228
|
+
|
|
193
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;
|
|
194
234
|
|
|
195
235
|
const timeline = new Timeline({ duration });
|
|
196
236
|
this._timelineTo = timeline;
|
|
197
237
|
|
|
198
238
|
timeline.addCallback('progress', (data) => {
|
|
199
|
-
this._progressLerp.target = lerp(startValue,
|
|
239
|
+
this._progressLerp.target = lerp(startValue, endValue, data.easing);
|
|
200
240
|
this._updateCurrentProgress(1);
|
|
201
241
|
|
|
202
242
|
onProgress?.(data);
|
|
@@ -222,5 +262,10 @@ export class SlideProgress<
|
|
|
222
262
|
this._dragger.destroy();
|
|
223
263
|
|
|
224
264
|
this._timelineTo?.destroy();
|
|
265
|
+
|
|
266
|
+
if (this._stickyEndTimeout) {
|
|
267
|
+
clearTimeout(this._stickyEndTimeout);
|
|
268
|
+
this._stickyEndTimeout = undefined;
|
|
269
|
+
}
|
|
225
270
|
}
|
|
226
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;
|