vevet 2.11.0 → 2.14.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/build/cdn/index.js +1 -1
- package/build/cjs/app/Application.js +9 -1
- package/build/cjs/components/cursor/CustomCursor.js +139 -40
- package/build/cjs/version.js +4 -0
- package/build/es/app/Application.js +5 -1
- package/build/es/components/cursor/CustomCursor.js +128 -41
- package/build/es/version.js +2 -0
- package/build/types/app/Application.d.ts +1 -0
- package/build/types/app/Application.d.ts.map +1 -1
- package/build/types/components/cursor/CustomCursor.d.ts +93 -14
- package/build/types/components/cursor/CustomCursor.d.ts.map +1 -1
- package/build/types/version.d.ts +3 -0
- package/build/types/version.d.ts.map +1 -0
- package/package.json +3 -2
- package/src/sass/components/cursor/_custom-cursor.scss +10 -10
- package/src/ts/app/Application.ts +6 -1
- package/src/ts/components/cursor/CustomCursor.ts +199 -50
- package/src/ts/version.ts +2 -0
|
@@ -20,6 +20,7 @@ var detect_browser_1 = require("detect-browser");
|
|
|
20
20
|
var p_cancelable_1 = __importDefault(require("p-cancelable"));
|
|
21
21
|
var Viewport_1 = require("./events/Viewport");
|
|
22
22
|
var PageLoad_1 = require("./events/PageLoad");
|
|
23
|
+
var version_1 = __importDefault(require("../version"));
|
|
23
24
|
/**
|
|
24
25
|
* Vevet Application
|
|
25
26
|
*/
|
|
@@ -102,6 +103,13 @@ var Application = /** @class */ (function () {
|
|
|
102
103
|
this._supportsWebp = false;
|
|
103
104
|
}
|
|
104
105
|
}
|
|
106
|
+
Object.defineProperty(Application.prototype, "version", {
|
|
107
|
+
get: function () {
|
|
108
|
+
return version_1.default;
|
|
109
|
+
},
|
|
110
|
+
enumerable: false,
|
|
111
|
+
configurable: true
|
|
112
|
+
});
|
|
105
113
|
Object.defineProperty(Application.prototype, "prop", {
|
|
106
114
|
/**
|
|
107
115
|
* Application properties.
|
|
@@ -309,7 +317,7 @@ var Application = /** @class */ (function () {
|
|
|
309
317
|
if (!this.prop.sayHi) {
|
|
310
318
|
return;
|
|
311
319
|
}
|
|
312
|
-
var msg =
|
|
320
|
+
var msg = "Vevet ".concat(this.version);
|
|
313
321
|
var style = [
|
|
314
322
|
'padding: 1rem 1.5rem;',
|
|
315
323
|
'background: #5F2580;',
|
|
@@ -34,6 +34,7 @@ var vevet_dom_1 = require("vevet-dom");
|
|
|
34
34
|
var AnimationFrame_1 = require("../animation-frame/AnimationFrame");
|
|
35
35
|
var Component_1 = require("../../base/Component");
|
|
36
36
|
var lerp_1 = __importDefault(require("../../utils/math/lerp"));
|
|
37
|
+
var common_1 = require("../../utils/common");
|
|
37
38
|
/**
|
|
38
39
|
* Creates a smooth custom cursor
|
|
39
40
|
*/
|
|
@@ -52,10 +53,12 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
52
53
|
}
|
|
53
54
|
_this._containerIsWindow = container instanceof Window;
|
|
54
55
|
// set default vars
|
|
55
|
-
_this.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
_this.
|
|
56
|
+
_this._coords = {
|
|
57
|
+
x: 0, y: 0, w: 0, h: 0,
|
|
58
|
+
};
|
|
59
|
+
_this._targetCoords = {
|
|
60
|
+
x: 0, y: 0, w: 0, h: 0,
|
|
61
|
+
};
|
|
59
62
|
_this._currentFPS = 60;
|
|
60
63
|
_this._canPlay = _this.prop.run;
|
|
61
64
|
// initialize the class
|
|
@@ -65,10 +68,16 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
65
68
|
return _this;
|
|
66
69
|
}
|
|
67
70
|
CustomCursor.prototype._getDefaultProp = function () {
|
|
68
|
-
return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, run: true, hideNativeCursor: false,
|
|
71
|
+
return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, run: true, hideNativeCursor: false, size: {
|
|
72
|
+
width: 50,
|
|
73
|
+
height: 50,
|
|
74
|
+
}, render: {
|
|
69
75
|
lerp: 0.2,
|
|
70
76
|
lerpToFixed: 2,
|
|
71
77
|
normalizeLerp: false,
|
|
78
|
+
}, hover: {
|
|
79
|
+
sticky: false,
|
|
80
|
+
autoSize: false,
|
|
72
81
|
}, autoStop: true });
|
|
73
82
|
};
|
|
74
83
|
Object.defineProperty(CustomCursor.prototype, "prefix", {
|
|
@@ -131,22 +140,53 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
131
140
|
enumerable: false,
|
|
132
141
|
configurable: true
|
|
133
142
|
});
|
|
134
|
-
Object.defineProperty(CustomCursor.prototype, "
|
|
135
|
-
/**
|
|
136
|
-
* Current X coordinate relative to Window
|
|
137
|
-
*/
|
|
143
|
+
Object.defineProperty(CustomCursor.prototype, "hoveredEl", {
|
|
138
144
|
get: function () {
|
|
139
|
-
return this.
|
|
145
|
+
return this._hoveredEl;
|
|
146
|
+
},
|
|
147
|
+
set: function (val) {
|
|
148
|
+
this._hoveredEl = val;
|
|
140
149
|
},
|
|
141
150
|
enumerable: false,
|
|
142
151
|
configurable: true
|
|
143
152
|
});
|
|
144
|
-
Object.defineProperty(CustomCursor.prototype, "
|
|
145
|
-
/**
|
|
146
|
-
* Current Y coordinate relative to Window
|
|
147
|
-
*/
|
|
153
|
+
Object.defineProperty(CustomCursor.prototype, "coords", {
|
|
148
154
|
get: function () {
|
|
149
|
-
return this.
|
|
155
|
+
return this._coords;
|
|
156
|
+
},
|
|
157
|
+
enumerable: false,
|
|
158
|
+
configurable: true
|
|
159
|
+
});
|
|
160
|
+
Object.defineProperty(CustomCursor.prototype, "targetCoords", {
|
|
161
|
+
get: function () {
|
|
162
|
+
var _a, _b, _c;
|
|
163
|
+
var _d = this, hoveredEl = _d.hoveredEl, prop = _d.prop;
|
|
164
|
+
var sizes = prop.size;
|
|
165
|
+
var x = this._targetCoords.x;
|
|
166
|
+
var y = this._targetCoords.y;
|
|
167
|
+
var w = sizes.width;
|
|
168
|
+
var h = sizes.height;
|
|
169
|
+
var padding = 0;
|
|
170
|
+
if (hoveredEl) {
|
|
171
|
+
var bounding = hoveredEl.el.getBoundingClientRect();
|
|
172
|
+
if (prop.hover.sticky) {
|
|
173
|
+
x = bounding.left + bounding.width / 2;
|
|
174
|
+
y = bounding.top + bounding.height / 2;
|
|
175
|
+
}
|
|
176
|
+
if (prop.hover.autoSize) {
|
|
177
|
+
w = ((_a = this.hoveredEl) === null || _a === void 0 ? void 0 : _a.width) || bounding.width;
|
|
178
|
+
h = ((_b = this.hoveredEl) === null || _b === void 0 ? void 0 : _b.height) || bounding.height;
|
|
179
|
+
padding = ((_c = this.hoveredEl) === null || _c === void 0 ? void 0 : _c.padding) || 0;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
w += padding * 2;
|
|
183
|
+
h += padding * 2;
|
|
184
|
+
return {
|
|
185
|
+
x: x,
|
|
186
|
+
y: y,
|
|
187
|
+
w: w,
|
|
188
|
+
h: h,
|
|
189
|
+
};
|
|
150
190
|
},
|
|
151
191
|
enumerable: false,
|
|
152
192
|
configurable: true
|
|
@@ -180,6 +220,37 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
180
220
|
this.addEventListeners(domContainer, 'mouseup', this._handleMouseUp.bind(this));
|
|
181
221
|
this.addEventListeners(window, 'blur', this._handleWindowBlur.bind(this));
|
|
182
222
|
};
|
|
223
|
+
/**
|
|
224
|
+
* Set hover events on an element
|
|
225
|
+
*/
|
|
226
|
+
CustomCursor.prototype.addHoverEl = function (settings, enterTimeout) {
|
|
227
|
+
var _this = this;
|
|
228
|
+
if (enterTimeout === void 0) { enterTimeout = 100; }
|
|
229
|
+
var el = settings.el;
|
|
230
|
+
var timeout;
|
|
231
|
+
var mouseEnter = (0, vevet_dom_1.addEventListener)(el, 'mouseenter', function () {
|
|
232
|
+
timeout = (0, common_1.timeoutCallback)(function () {
|
|
233
|
+
_this.hoveredEl = __assign({}, settings);
|
|
234
|
+
}, enterTimeout);
|
|
235
|
+
});
|
|
236
|
+
var mouseLeave = (0, vevet_dom_1.addEventListener)(el, 'mouseleave', function () {
|
|
237
|
+
_this.hoveredEl = undefined;
|
|
238
|
+
if (timeout) {
|
|
239
|
+
timeout.clear();
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
return {
|
|
243
|
+
remove: function () {
|
|
244
|
+
var _a;
|
|
245
|
+
if (((_a = _this.hoveredEl) === null || _a === void 0 ? void 0 : _a.el) === el) {
|
|
246
|
+
_this.hoveredEl = undefined;
|
|
247
|
+
}
|
|
248
|
+
mouseEnter.remove();
|
|
249
|
+
mouseLeave.remove();
|
|
250
|
+
timeout === null || timeout === void 0 ? void 0 : timeout.clear();
|
|
251
|
+
},
|
|
252
|
+
};
|
|
253
|
+
};
|
|
183
254
|
/**
|
|
184
255
|
* Create custom cursor
|
|
185
256
|
*/
|
|
@@ -223,10 +294,10 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
223
294
|
*/
|
|
224
295
|
CustomCursor.prototype._handleMouseEnter = function (evt) {
|
|
225
296
|
// update coordinates
|
|
226
|
-
this.
|
|
227
|
-
this.
|
|
228
|
-
this.
|
|
229
|
-
this.
|
|
297
|
+
this._coords.x = evt.clientX;
|
|
298
|
+
this._coords.y = evt.clientY;
|
|
299
|
+
this._targetCoords.x = evt.clientX;
|
|
300
|
+
this._targetCoords.y = evt.clientY;
|
|
230
301
|
// set classes
|
|
231
302
|
this.outerCursor.classList.add('in-action');
|
|
232
303
|
};
|
|
@@ -240,8 +311,8 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
240
311
|
* Event on mouse move
|
|
241
312
|
*/
|
|
242
313
|
CustomCursor.prototype._handleMouseMove = function (evt) {
|
|
243
|
-
this.
|
|
244
|
-
this.
|
|
314
|
+
this._targetCoords.x = evt.clientX;
|
|
315
|
+
this._targetCoords.y = evt.clientY;
|
|
245
316
|
// set classes
|
|
246
317
|
this.outerCursor.classList.add('in-action');
|
|
247
318
|
// launch animation
|
|
@@ -276,36 +347,64 @@ var CustomCursor = /** @class */ (function (_super) {
|
|
|
276
347
|
*/
|
|
277
348
|
CustomCursor.prototype.render = function () {
|
|
278
349
|
// props
|
|
279
|
-
var prop =
|
|
280
|
-
|
|
281
|
-
var
|
|
350
|
+
var _a = this, prop = _a.prop, targetCoords = _a.targetCoords;
|
|
351
|
+
this._calcCoords();
|
|
352
|
+
var realCoords = this._renderElements();
|
|
353
|
+
// auto stop
|
|
354
|
+
if (prop.autoStop
|
|
355
|
+
&& this.coords.x === targetCoords.x && this.coords.y === targetCoords.y
|
|
356
|
+
&& this.coords.w === targetCoords.w && this.coords.h === targetCoords.h) {
|
|
357
|
+
this._animationFrame.pause();
|
|
358
|
+
}
|
|
359
|
+
// launch render events
|
|
360
|
+
this._callbacks.tbt('render', realCoords);
|
|
361
|
+
};
|
|
362
|
+
/**
|
|
363
|
+
* Recalculate current coordinates
|
|
364
|
+
*/
|
|
365
|
+
CustomCursor.prototype._calcCoords = function () {
|
|
366
|
+
this._coords.x = this._lerp(this._coords.x, this.targetCoords.x);
|
|
367
|
+
this._coords.y = this._lerp(this._coords.y, this.targetCoords.y);
|
|
368
|
+
this._coords.w = this._lerp(this._coords.w, this.targetCoords.w);
|
|
369
|
+
this._coords.h = this._lerp(this._coords.h, this.targetCoords.h);
|
|
370
|
+
};
|
|
371
|
+
/**
|
|
372
|
+
* Linear interpolation
|
|
373
|
+
*/
|
|
374
|
+
CustomCursor.prototype._lerp = function (current, target) {
|
|
375
|
+
var _a = this.prop.render, normalizeLerp = _a.normalizeLerp, ease = _a.lerp, lerpToFixed = _a.lerpToFixed;
|
|
282
376
|
var fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
|
|
283
|
-
|
|
284
|
-
this._x = (0, lerp_1.default)(this._x, this._xTarget, ease * fpsMultiplier, 0.02);
|
|
285
|
-
this._y = (0, lerp_1.default)(this._y, this._yTarget, ease * fpsMultiplier, 0.02);
|
|
377
|
+
var val = (0, lerp_1.default)(current, target, ease * fpsMultiplier, 0.02);
|
|
286
378
|
// round the values
|
|
287
379
|
if (typeof lerpToFixed === 'number') {
|
|
288
380
|
var fixed = Math.round(Math.abs(lerpToFixed));
|
|
289
|
-
|
|
290
|
-
this._y = parseFloat(this._y.toFixed(fixed));
|
|
381
|
+
val = parseFloat(val.toFixed(fixed));
|
|
291
382
|
}
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
383
|
+
return val;
|
|
384
|
+
};
|
|
385
|
+
/**
|
|
386
|
+
* Render cursor elements
|
|
387
|
+
*/
|
|
388
|
+
CustomCursor.prototype._renderElements = function () {
|
|
389
|
+
var _a = this, domContainer = _a.domContainer, outerCursor = _a.outerCursor;
|
|
390
|
+
// calculate real coordinates
|
|
391
|
+
var _b = this.coords, x = _b.x, y = _b.y;
|
|
392
|
+
var _c = this.coords, w = _c.w, h = _c.h;
|
|
295
393
|
if (!this._containerIsWindow) {
|
|
296
394
|
var bounding = domContainer.getBoundingClientRect();
|
|
297
395
|
x -= bounding.left;
|
|
298
396
|
y -= bounding.top;
|
|
299
397
|
}
|
|
300
398
|
// update dom coordinates
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
399
|
+
outerCursor.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
|
|
400
|
+
outerCursor.style.setProperty('--cursor-w', "".concat(w, "px"));
|
|
401
|
+
outerCursor.style.setProperty('--cursor-h', "".concat(h, "px"));
|
|
402
|
+
return {
|
|
403
|
+
x: x,
|
|
404
|
+
y: y,
|
|
405
|
+
w: w,
|
|
406
|
+
h: h,
|
|
407
|
+
};
|
|
309
408
|
};
|
|
310
409
|
/**
|
|
311
410
|
* Enable cursor
|
|
@@ -3,6 +3,7 @@ import { detect } from 'detect-browser';
|
|
|
3
3
|
import PCancelable from 'p-cancelable';
|
|
4
4
|
import { Viewport } from './events/Viewport';
|
|
5
5
|
import { PageLoad } from './events/PageLoad';
|
|
6
|
+
import version from '../version';
|
|
6
7
|
/**
|
|
7
8
|
* Vevet Application
|
|
8
9
|
*/
|
|
@@ -83,6 +84,9 @@ export class Application {
|
|
|
83
84
|
this._supportsWebp = false;
|
|
84
85
|
}
|
|
85
86
|
}
|
|
87
|
+
get version() {
|
|
88
|
+
return version;
|
|
89
|
+
}
|
|
86
90
|
/**
|
|
87
91
|
* Application properties.
|
|
88
92
|
*/
|
|
@@ -219,7 +223,7 @@ export class Application {
|
|
|
219
223
|
if (!this.prop.sayHi) {
|
|
220
224
|
return;
|
|
221
225
|
}
|
|
222
|
-
const msg =
|
|
226
|
+
const msg = `Vevet ${this.version}`;
|
|
223
227
|
const style = [
|
|
224
228
|
'padding: 1rem 1.5rem;',
|
|
225
229
|
'background: #5F2580;',
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { createElement, selectOne } from 'vevet-dom';
|
|
1
|
+
import { addEventListener, createElement, selectOne } from 'vevet-dom';
|
|
2
2
|
import { AnimationFrame } from '../animation-frame/AnimationFrame';
|
|
3
3
|
import { Component } from '../../base/Component';
|
|
4
4
|
import lerp from '../../utils/math/lerp';
|
|
5
|
+
import { timeoutCallback } from '../../utils/common';
|
|
5
6
|
/**
|
|
6
7
|
* Creates a smooth custom cursor
|
|
7
8
|
*/
|
|
@@ -18,10 +19,12 @@ export class CustomCursor extends Component {
|
|
|
18
19
|
}
|
|
19
20
|
this._containerIsWindow = container instanceof Window;
|
|
20
21
|
// set default vars
|
|
21
|
-
this.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
this.
|
|
22
|
+
this._coords = {
|
|
23
|
+
x: 0, y: 0, w: 0, h: 0,
|
|
24
|
+
};
|
|
25
|
+
this._targetCoords = {
|
|
26
|
+
x: 0, y: 0, w: 0, h: 0,
|
|
27
|
+
};
|
|
25
28
|
this._currentFPS = 60;
|
|
26
29
|
this._canPlay = this.prop.run;
|
|
27
30
|
// initialize the class
|
|
@@ -30,10 +33,16 @@ export class CustomCursor extends Component {
|
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
35
|
_getDefaultProp() {
|
|
33
|
-
return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, run: true, hideNativeCursor: false,
|
|
36
|
+
return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, run: true, hideNativeCursor: false, size: {
|
|
37
|
+
width: 50,
|
|
38
|
+
height: 50,
|
|
39
|
+
}, render: {
|
|
34
40
|
lerp: 0.2,
|
|
35
41
|
lerpToFixed: 2,
|
|
36
42
|
normalizeLerp: false,
|
|
43
|
+
}, hover: {
|
|
44
|
+
sticky: false,
|
|
45
|
+
autoSize: false,
|
|
37
46
|
}, autoStop: true });
|
|
38
47
|
}
|
|
39
48
|
get prefix() {
|
|
@@ -72,17 +81,41 @@ export class CustomCursor extends Component {
|
|
|
72
81
|
get innerCursor() {
|
|
73
82
|
return this._innerCursor;
|
|
74
83
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
*/
|
|
78
|
-
get x() {
|
|
79
|
-
return this._x;
|
|
84
|
+
get hoveredEl() {
|
|
85
|
+
return this._hoveredEl;
|
|
80
86
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
get
|
|
85
|
-
return this.
|
|
87
|
+
set hoveredEl(val) {
|
|
88
|
+
this._hoveredEl = val;
|
|
89
|
+
}
|
|
90
|
+
get coords() {
|
|
91
|
+
return this._coords;
|
|
92
|
+
}
|
|
93
|
+
get targetCoords() {
|
|
94
|
+
var _a, _b, _c;
|
|
95
|
+
const { hoveredEl, prop } = this;
|
|
96
|
+
const sizes = prop.size;
|
|
97
|
+
let { x } = this._targetCoords;
|
|
98
|
+
let { y } = this._targetCoords;
|
|
99
|
+
let w = sizes.width;
|
|
100
|
+
let h = sizes.height;
|
|
101
|
+
let padding = 0;
|
|
102
|
+
if (hoveredEl) {
|
|
103
|
+
const bounding = hoveredEl.el.getBoundingClientRect();
|
|
104
|
+
if (prop.hover.sticky) {
|
|
105
|
+
x = bounding.left + bounding.width / 2;
|
|
106
|
+
y = bounding.top + bounding.height / 2;
|
|
107
|
+
}
|
|
108
|
+
if (prop.hover.autoSize) {
|
|
109
|
+
w = ((_a = this.hoveredEl) === null || _a === void 0 ? void 0 : _a.width) || bounding.width;
|
|
110
|
+
h = ((_b = this.hoveredEl) === null || _b === void 0 ? void 0 : _b.height) || bounding.height;
|
|
111
|
+
padding = ((_c = this.hoveredEl) === null || _c === void 0 ? void 0 : _c.padding) || 0;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
w += padding * 2;
|
|
115
|
+
h += padding * 2;
|
|
116
|
+
return {
|
|
117
|
+
x, y, w, h,
|
|
118
|
+
};
|
|
86
119
|
}
|
|
87
120
|
// Extra constructor
|
|
88
121
|
_constructor() {
|
|
@@ -112,6 +145,35 @@ export class CustomCursor extends Component {
|
|
|
112
145
|
this.addEventListeners(domContainer, 'mouseup', this._handleMouseUp.bind(this));
|
|
113
146
|
this.addEventListeners(window, 'blur', this._handleWindowBlur.bind(this));
|
|
114
147
|
}
|
|
148
|
+
/**
|
|
149
|
+
* Set hover events on an element
|
|
150
|
+
*/
|
|
151
|
+
addHoverEl(settings, enterTimeout = 100) {
|
|
152
|
+
const { el } = settings;
|
|
153
|
+
let timeout;
|
|
154
|
+
const mouseEnter = addEventListener(el, 'mouseenter', () => {
|
|
155
|
+
timeout = timeoutCallback(() => {
|
|
156
|
+
this.hoveredEl = Object.assign({}, settings);
|
|
157
|
+
}, enterTimeout);
|
|
158
|
+
});
|
|
159
|
+
const mouseLeave = addEventListener(el, 'mouseleave', () => {
|
|
160
|
+
this.hoveredEl = undefined;
|
|
161
|
+
if (timeout) {
|
|
162
|
+
timeout.clear();
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
return {
|
|
166
|
+
remove: () => {
|
|
167
|
+
var _a;
|
|
168
|
+
if (((_a = this.hoveredEl) === null || _a === void 0 ? void 0 : _a.el) === el) {
|
|
169
|
+
this.hoveredEl = undefined;
|
|
170
|
+
}
|
|
171
|
+
mouseEnter.remove();
|
|
172
|
+
mouseLeave.remove();
|
|
173
|
+
timeout === null || timeout === void 0 ? void 0 : timeout.clear();
|
|
174
|
+
},
|
|
175
|
+
};
|
|
176
|
+
}
|
|
115
177
|
/**
|
|
116
178
|
* Create custom cursor
|
|
117
179
|
*/
|
|
@@ -155,10 +217,10 @@ export class CustomCursor extends Component {
|
|
|
155
217
|
*/
|
|
156
218
|
_handleMouseEnter(evt) {
|
|
157
219
|
// update coordinates
|
|
158
|
-
this.
|
|
159
|
-
this.
|
|
160
|
-
this.
|
|
161
|
-
this.
|
|
220
|
+
this._coords.x = evt.clientX;
|
|
221
|
+
this._coords.y = evt.clientY;
|
|
222
|
+
this._targetCoords.x = evt.clientX;
|
|
223
|
+
this._targetCoords.y = evt.clientY;
|
|
162
224
|
// set classes
|
|
163
225
|
this.outerCursor.classList.add('in-action');
|
|
164
226
|
}
|
|
@@ -172,8 +234,8 @@ export class CustomCursor extends Component {
|
|
|
172
234
|
* Event on mouse move
|
|
173
235
|
*/
|
|
174
236
|
_handleMouseMove(evt) {
|
|
175
|
-
this.
|
|
176
|
-
this.
|
|
237
|
+
this._targetCoords.x = evt.clientX;
|
|
238
|
+
this._targetCoords.y = evt.clientY;
|
|
177
239
|
// set classes
|
|
178
240
|
this.outerCursor.classList.add('in-action');
|
|
179
241
|
// launch animation
|
|
@@ -208,36 +270,61 @@ export class CustomCursor extends Component {
|
|
|
208
270
|
*/
|
|
209
271
|
render() {
|
|
210
272
|
// props
|
|
211
|
-
const { prop } = this;
|
|
212
|
-
|
|
213
|
-
const
|
|
273
|
+
const { prop, targetCoords } = this;
|
|
274
|
+
this._calcCoords();
|
|
275
|
+
const realCoords = this._renderElements();
|
|
276
|
+
// auto stop
|
|
277
|
+
if (prop.autoStop
|
|
278
|
+
&& this.coords.x === targetCoords.x && this.coords.y === targetCoords.y
|
|
279
|
+
&& this.coords.w === targetCoords.w && this.coords.h === targetCoords.h) {
|
|
280
|
+
this._animationFrame.pause();
|
|
281
|
+
}
|
|
282
|
+
// launch render events
|
|
283
|
+
this._callbacks.tbt('render', realCoords);
|
|
284
|
+
}
|
|
285
|
+
/**
|
|
286
|
+
* Recalculate current coordinates
|
|
287
|
+
*/
|
|
288
|
+
_calcCoords() {
|
|
289
|
+
this._coords.x = this._lerp(this._coords.x, this.targetCoords.x);
|
|
290
|
+
this._coords.y = this._lerp(this._coords.y, this.targetCoords.y);
|
|
291
|
+
this._coords.w = this._lerp(this._coords.w, this.targetCoords.w);
|
|
292
|
+
this._coords.h = this._lerp(this._coords.h, this.targetCoords.h);
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Linear interpolation
|
|
296
|
+
*/
|
|
297
|
+
_lerp(current, target) {
|
|
298
|
+
const { normalizeLerp, lerp: ease, lerpToFixed } = this.prop.render;
|
|
214
299
|
const fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
|
|
215
|
-
|
|
216
|
-
this._x = lerp(this._x, this._xTarget, ease * fpsMultiplier, 0.02);
|
|
217
|
-
this._y = lerp(this._y, this._yTarget, ease * fpsMultiplier, 0.02);
|
|
300
|
+
let val = lerp(current, target, ease * fpsMultiplier, 0.02);
|
|
218
301
|
// round the values
|
|
219
302
|
if (typeof lerpToFixed === 'number') {
|
|
220
303
|
const fixed = Math.round(Math.abs(lerpToFixed));
|
|
221
|
-
|
|
222
|
-
this._y = parseFloat(this._y.toFixed(fixed));
|
|
304
|
+
val = parseFloat(val.toFixed(fixed));
|
|
223
305
|
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
306
|
+
return val;
|
|
307
|
+
}
|
|
308
|
+
/**
|
|
309
|
+
* Render cursor elements
|
|
310
|
+
*/
|
|
311
|
+
_renderElements() {
|
|
312
|
+
const { domContainer, outerCursor } = this;
|
|
313
|
+
// calculate real coordinates
|
|
314
|
+
let { x, y, } = this.coords;
|
|
315
|
+
const { w, h } = this.coords;
|
|
227
316
|
if (!this._containerIsWindow) {
|
|
228
317
|
const bounding = domContainer.getBoundingClientRect();
|
|
229
318
|
x -= bounding.left;
|
|
230
319
|
y -= bounding.top;
|
|
231
320
|
}
|
|
232
321
|
// update dom coordinates
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
// launch render events
|
|
240
|
-
this._callbacks.tbt('render', { x, y });
|
|
322
|
+
outerCursor.style.transform = `translate(${x}px, ${y}px)`;
|
|
323
|
+
outerCursor.style.setProperty('--cursor-w', `${w}px`);
|
|
324
|
+
outerCursor.style.setProperty('--cursor-h', `${h}px`);
|
|
325
|
+
return {
|
|
326
|
+
x, y, w, h,
|
|
327
|
+
};
|
|
241
328
|
}
|
|
242
329
|
/**
|
|
243
330
|
* Enable cursor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Application.d.ts","sourceRoot":"","sources":["../../../src/ts/app/Application.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Application.d.ts","sourceRoot":"","sources":["../../../src/ts/app/Application.ts"],"names":[],"mappings":"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"}
|