coonlink-luxy 26.1.2 → 26.1.4
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/README.md +1 -1
- package/dist/index.d.ts +1 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +41 -44
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -11,8 +11,6 @@ export interface CoonlinkLuxyInstance {
|
|
|
11
11
|
init(options?: CoonlinkLuxyOptions): boolean;
|
|
12
12
|
destroy(): void;
|
|
13
13
|
}
|
|
14
|
-
declare const defaults: Required<CoonlinkLuxyOptions>;
|
|
15
14
|
export declare function createCoonlinkLuxy(): CoonlinkLuxyInstance;
|
|
16
|
-
export declare function getCoonlinkLuxyDefaults(): Readonly<
|
|
17
|
-
export {};
|
|
15
|
+
export declare function getCoonlinkLuxyDefaults(): Readonly<Required<CoonlinkLuxyOptions>>;
|
|
18
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,OAAO,IAAI,IAAI,CAAC;CACjB;AA8ND,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAEjF"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/*
|
|
2
|
+
✨ CoonDev • https://dev.coonlink.com/
|
|
3
|
+
|
|
4
|
+
▄█▄ ████▄ ████▄ ▄ ██▄ ▄███▄ ▄
|
|
5
|
+
█▀ ▀▄ █ █ █ █ █ █ █ █▀ ▀ █
|
|
6
|
+
█ ▀ █ █ █ █ ██ █ █ █ ██▄▄ █ █
|
|
7
|
+
█▄ ▄▀ ▀████ ▀████ █ █ █ █ █ █▄ ▄▀ █ █
|
|
8
|
+
▀███▀ █ █ █ ███▀ ▀███▀ █ █
|
|
9
|
+
█ ██ █▐
|
|
10
|
+
▐
|
|
11
|
+
*/
|
|
1
12
|
const defaults = {
|
|
2
13
|
wrapper: '#luxy',
|
|
3
14
|
targets: '.luxy-el',
|
|
@@ -14,16 +25,15 @@ function hasOpenModalOverlay() {
|
|
|
14
25
|
'[data-slot="sheet-overlay"][data-state="open"]');
|
|
15
26
|
}
|
|
16
27
|
function extend(base, over) {
|
|
17
|
-
return { ...base, ...(over
|
|
28
|
+
return { ...base, ...(over !== null && over !== void 0 ? over : {}) };
|
|
18
29
|
}
|
|
19
30
|
function getScrollTop() {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
document.body.scrollTop ??
|
|
23
|
-
0);
|
|
31
|
+
var _a, _b, _c;
|
|
32
|
+
return ((_c = (_b = (_a = window.scrollY) !== null && _a !== void 0 ? _a : document.documentElement.scrollTop) !== null && _b !== void 0 ? _b : document.body.scrollTop) !== null && _c !== void 0 ? _c : 0);
|
|
24
33
|
}
|
|
25
34
|
function readSpeedY(el) {
|
|
26
|
-
|
|
35
|
+
var _a;
|
|
36
|
+
return (_a = el.getAttribute('data-speed-y')) !== null && _a !== void 0 ? _a : el.getAttribute('data-speed-Y');
|
|
27
37
|
}
|
|
28
38
|
class Engine {
|
|
29
39
|
constructor() {
|
|
@@ -36,9 +46,7 @@ class Engine {
|
|
|
36
46
|
this.resizeObserver = null;
|
|
37
47
|
this.pauseForOverlay = false;
|
|
38
48
|
this.overlayObserver = null;
|
|
39
|
-
this.onScrollResume = () => {
|
|
40
|
-
this.ensureTicking();
|
|
41
|
-
};
|
|
49
|
+
this.onScrollResume = () => { this.ensureTicking(); };
|
|
42
50
|
this.onResize = () => {
|
|
43
51
|
if (!this.wrapper)
|
|
44
52
|
return;
|
|
@@ -48,9 +56,8 @@ class Engine {
|
|
|
48
56
|
};
|
|
49
57
|
}
|
|
50
58
|
isSettled() {
|
|
51
|
-
if (Math.abs(this.scrollTop - this.wrapperOffset) > SETTLE_EPS)
|
|
59
|
+
if (Math.abs(this.scrollTop - this.wrapperOffset) > SETTLE_EPS)
|
|
52
60
|
return false;
|
|
53
|
-
}
|
|
54
61
|
const ts = this.settings.targetSpeed;
|
|
55
62
|
const st = this.scrollTop;
|
|
56
63
|
for (let i = 0; i < this.targets.length; i++) {
|
|
@@ -86,14 +93,13 @@ class Engine {
|
|
|
86
93
|
}
|
|
87
94
|
this.scrollTop = getScrollTop();
|
|
88
95
|
this.wrapperUpdate();
|
|
89
|
-
for (let i = 0; i < this.targets.length; i++)
|
|
96
|
+
for (let i = 0; i < this.targets.length; i++)
|
|
90
97
|
this.targetsUpdate(this.targets[i]);
|
|
91
|
-
}
|
|
92
98
|
if (this.isSettled()) {
|
|
99
|
+
this.wrapperOffset = this.scrollTop;
|
|
100
|
+
this.wrapperUpdate();
|
|
93
101
|
this.scrollRaf = 0;
|
|
94
|
-
window.addEventListener('scroll', this.onScrollResume, {
|
|
95
|
-
passive: true,
|
|
96
|
-
});
|
|
102
|
+
window.addEventListener('scroll', this.onScrollResume, { passive: true });
|
|
97
103
|
return;
|
|
98
104
|
}
|
|
99
105
|
this.scrollRaf = window.requestAnimationFrame(tick);
|
|
@@ -127,29 +133,27 @@ class Engine {
|
|
|
127
133
|
this.ensureTicking();
|
|
128
134
|
});
|
|
129
135
|
this.overlayObserver.observe(document.body, {
|
|
130
|
-
childList: true,
|
|
131
|
-
subtree: true,
|
|
132
|
-
attributes: true,
|
|
133
|
-
attributeFilter: ['data-state'],
|
|
136
|
+
childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'],
|
|
134
137
|
});
|
|
135
138
|
}
|
|
136
139
|
detachOverlayWatcher() {
|
|
137
|
-
|
|
140
|
+
var _a;
|
|
141
|
+
(_a = this.overlayObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
138
142
|
this.overlayObserver = null;
|
|
139
143
|
this.pauseForOverlay = false;
|
|
140
144
|
}
|
|
141
145
|
init(options) {
|
|
146
|
+
var _a;
|
|
142
147
|
this.destroy();
|
|
143
148
|
this.settings = extend(defaults, options);
|
|
144
149
|
if (this.settings.respectReducedMotion) {
|
|
145
|
-
const mq = window.matchMedia
|
|
146
|
-
if (mq
|
|
150
|
+
const mq = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)');
|
|
151
|
+
if (mq === null || mq === void 0 ? void 0 : mq.matches)
|
|
147
152
|
return false;
|
|
148
153
|
}
|
|
149
154
|
const el = document.querySelector(this.settings.wrapper);
|
|
150
|
-
if (!el || !(el instanceof HTMLElement))
|
|
155
|
+
if (!el || !(el instanceof HTMLElement))
|
|
151
156
|
return false;
|
|
152
|
-
}
|
|
153
157
|
this.wrapper = el;
|
|
154
158
|
const nodeList = document.querySelectorAll(this.settings.targets);
|
|
155
159
|
const scrollHeight = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
|
|
@@ -170,8 +174,7 @@ class Engine {
|
|
|
170
174
|
elm: node,
|
|
171
175
|
offset: offset ? parseInt(offset, 10) || 0 : 0,
|
|
172
176
|
horizontal: horizontal ? 1 : 0,
|
|
173
|
-
top: 0,
|
|
174
|
-
left: 0,
|
|
177
|
+
top: 0, left: 0,
|
|
175
178
|
speedX: speedX ? Number(speedX) || 1 : 1,
|
|
176
179
|
speedY: speedY ? Number(speedY) || 1 : 1,
|
|
177
180
|
percentage: percentage ? parseInt(percentage, 10) || 0 : 0,
|
|
@@ -181,53 +184,47 @@ class Engine {
|
|
|
181
184
|
this.resizeObserver.observe(this.wrapper);
|
|
182
185
|
window.addEventListener('resize', this.onResize);
|
|
183
186
|
this.attachOverlayWatcher();
|
|
184
|
-
if (!this.pauseForOverlay)
|
|
187
|
+
if (!this.pauseForOverlay)
|
|
185
188
|
this.ensureTicking();
|
|
186
|
-
}
|
|
187
189
|
return true;
|
|
188
190
|
}
|
|
189
191
|
wrapperUpdate() {
|
|
190
192
|
if (!this.wrapper)
|
|
191
193
|
return;
|
|
192
|
-
this.wrapperOffset +=
|
|
193
|
-
|
|
194
|
+
this.wrapperOffset += (this.scrollTop - this.wrapperOffset) * this.settings.wrapperSpeed;
|
|
195
|
+
const maxOffset = Math.max(0, document.body.scrollHeight - window.innerHeight);
|
|
196
|
+
this.wrapperOffset = Math.max(0, Math.min(this.wrapperOffset, maxOffset));
|
|
194
197
|
const y = Math.round(-this.wrapperOffset * 100) / 100;
|
|
195
198
|
this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
|
|
196
199
|
}
|
|
197
200
|
targetsUpdate(target) {
|
|
198
201
|
const ts = this.settings.targetSpeed;
|
|
199
202
|
const tp = this.settings.targetPercentage;
|
|
200
|
-
target.top +=
|
|
201
|
-
|
|
202
|
-
target.
|
|
203
|
-
(this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
|
|
204
|
-
const targetOffsetTop = parseInt(String(target.percentage), 10) -
|
|
205
|
-
target.top -
|
|
206
|
-
parseInt(String(target.offset), 10);
|
|
203
|
+
target.top += (this.scrollTop * Number(ts) * Number(target.speedY) - target.top) * tp;
|
|
204
|
+
target.left += (this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
|
|
205
|
+
const targetOffsetTop = parseInt(String(target.percentage), 10) - target.top - parseInt(String(target.offset), 10);
|
|
207
206
|
let offsetY = Math.round(targetOffsetTop * -100) / 100;
|
|
208
207
|
let offsetX = 0;
|
|
209
208
|
if (target.horizontal) {
|
|
210
|
-
const targetOffsetLeft = parseInt(String(target.percentage), 10) -
|
|
211
|
-
target.left -
|
|
212
|
-
parseInt(String(target.offset), 10);
|
|
209
|
+
const targetOffsetLeft = parseInt(String(target.percentage), 10) - target.left - parseInt(String(target.offset), 10);
|
|
213
210
|
offsetX = Math.round(targetOffsetLeft * -100) / 100;
|
|
214
211
|
}
|
|
215
212
|
target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
|
|
216
213
|
}
|
|
217
214
|
destroy() {
|
|
215
|
+
var _a;
|
|
218
216
|
this.detachOverlayWatcher();
|
|
219
217
|
this.stopScrollLoop();
|
|
220
218
|
window.removeEventListener('resize', this.onResize);
|
|
221
|
-
this.resizeObserver
|
|
219
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
222
220
|
this.resizeObserver = null;
|
|
223
221
|
document.body.style.height = '';
|
|
224
222
|
if (this.wrapper) {
|
|
225
223
|
this.wrapper.removeAttribute('style');
|
|
226
224
|
this.wrapper = null;
|
|
227
225
|
}
|
|
228
|
-
for (let i = 0; i < this.targets.length; i++)
|
|
226
|
+
for (let i = 0; i < this.targets.length; i++)
|
|
229
227
|
this.targets[i].elm.removeAttribute('style');
|
|
230
|
-
}
|
|
231
228
|
this.targets = [];
|
|
232
229
|
this.wrapperOffset = 0;
|
|
233
230
|
}
|
package/package.json
CHANGED