coonlink-luxy 26.1.4 → 26.1.7

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.
Files changed (3) hide show
  1. package/dist/index.d.ts.map +1 -1
  2. package/dist/index.js +59 -106
  3. package/package.json +1 -1
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;AAqLD,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAEjF"}
package/dist/index.js CHANGED
@@ -18,7 +18,6 @@ const defaults = {
18
18
  respectReducedMotion: true,
19
19
  respectOpenModalOverlay: true,
20
20
  };
21
- const SETTLE_EPS = 0.12;
22
21
  function hasOpenModalOverlay() {
23
22
  return !!document.querySelector('[data-slot="dialog-overlay"][data-state="open"],' +
24
23
  '[data-slot="alert-dialog-overlay"][data-state="open"],' +
@@ -29,7 +28,7 @@ function extend(base, over) {
29
28
  }
30
29
  function getScrollTop() {
31
30
  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);
31
+ 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;
33
32
  }
34
33
  function readSpeedY(el) {
35
34
  var _a;
@@ -42,69 +41,15 @@ class Engine {
42
41
  this.targets = [];
43
42
  this.wrapperOffset = 0;
44
43
  this.scrollTop = 0;
45
- this.scrollRaf = 0;
46
- this.resizeObserver = null;
44
+ this.rafId = 0;
47
45
  this.pauseForOverlay = false;
48
46
  this.overlayObserver = null;
49
- this.onScrollResume = () => { this.ensureTicking(); };
50
- this.onResize = () => {
51
- if (!this.wrapper)
52
- return;
53
- const h = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
54
- document.body.style.height = `${h}px`;
55
- this.ensureTicking();
56
- };
57
- }
58
- isSettled() {
59
- if (Math.abs(this.scrollTop - this.wrapperOffset) > SETTLE_EPS)
60
- return false;
61
- const ts = this.settings.targetSpeed;
62
- const st = this.scrollTop;
63
- for (let i = 0; i < this.targets.length; i++) {
64
- const t = this.targets[i];
65
- const idealY = st * Number(ts) * Number(t.speedY);
66
- if (Math.abs(idealY - t.top) > SETTLE_EPS)
67
- return false;
68
- if (t.horizontal) {
69
- const idealX = st * Number(ts) * Number(t.speedX);
70
- if (Math.abs(idealX - t.left) > SETTLE_EPS)
71
- return false;
72
- }
73
- }
74
- return true;
75
- }
76
- stopScrollLoop() {
77
- window.removeEventListener('scroll', this.onScrollResume);
78
- if (this.scrollRaf) {
79
- window.cancelAnimationFrame(this.scrollRaf);
80
- this.scrollRaf = 0;
81
- }
82
- }
83
- ensureTicking() {
84
- if (this.pauseForOverlay || !this.wrapper)
85
- return;
86
- window.removeEventListener('scroll', this.onScrollResume);
87
- if (this.scrollRaf !== 0)
88
- return;
89
- const tick = () => {
90
- if (this.pauseForOverlay || !this.wrapper) {
91
- this.scrollRaf = 0;
92
- return;
93
- }
94
- this.scrollTop = getScrollTop();
95
- this.wrapperUpdate();
96
- for (let i = 0; i < this.targets.length; i++)
97
- this.targetsUpdate(this.targets[i]);
98
- if (this.isSettled()) {
99
- this.wrapperOffset = this.scrollTop;
100
- this.wrapperUpdate();
101
- this.scrollRaf = 0;
102
- window.addEventListener('scroll', this.onScrollResume, { passive: true });
103
- return;
104
- }
105
- this.scrollRaf = window.requestAnimationFrame(tick);
47
+ this.onWindowResize = () => {
48
+ cancelAnimationFrame(this.rafId);
49
+ this.rafId = 0;
50
+ setTimeout(() => { if (this.wrapper)
51
+ this.startLoop(); }, 200);
106
52
  };
107
- this.scrollRaf = window.requestAnimationFrame(tick);
108
53
  }
109
54
  syncOverlayPause() {
110
55
  if (!this.settings.respectOpenModalOverlay) {
@@ -115,23 +60,13 @@ class Engine {
115
60
  if (blocked === this.pauseForOverlay)
116
61
  return;
117
62
  this.pauseForOverlay = blocked;
118
- if (blocked) {
119
- this.stopScrollLoop();
120
- }
121
- else {
122
- this.onResize();
123
- }
124
63
  }
125
64
  attachOverlayWatcher() {
126
65
  this.detachOverlayWatcher();
127
66
  if (!this.settings.respectOpenModalOverlay)
128
67
  return;
129
68
  this.pauseForOverlay = hasOpenModalOverlay();
130
- this.overlayObserver = new MutationObserver(() => {
131
- this.syncOverlayPause();
132
- if (!this.pauseForOverlay)
133
- this.ensureTicking();
134
- });
69
+ this.overlayObserver = new MutationObserver(() => this.syncOverlayPause());
135
70
  this.overlayObserver.observe(document.body, {
136
71
  childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'],
137
72
  });
@@ -142,6 +77,52 @@ class Engine {
142
77
  this.overlayObserver = null;
143
78
  this.pauseForOverlay = false;
144
79
  }
80
+ startLoop() {
81
+ if (this.rafId !== 0 || !this.wrapper)
82
+ return;
83
+ const loop = () => {
84
+ if (!this.wrapper) {
85
+ this.rafId = 0;
86
+ return;
87
+ }
88
+ // Keep body height in sync with wrapper content height
89
+ const h = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
90
+ if (parseInt(document.body.style.height) !== h) {
91
+ document.body.style.height = `${h}px`;
92
+ }
93
+ if (!this.pauseForOverlay) {
94
+ this.scrollTop = getScrollTop();
95
+ this.wrapperUpdate(h);
96
+ for (let i = 0; i < this.targets.length; i++)
97
+ this.targetsUpdate(this.targets[i]);
98
+ }
99
+ this.rafId = window.requestAnimationFrame(loop);
100
+ };
101
+ this.rafId = window.requestAnimationFrame(loop);
102
+ }
103
+ wrapperUpdate(contentHeight) {
104
+ if (!this.wrapper)
105
+ return;
106
+ this.wrapperOffset += (this.scrollTop - this.wrapperOffset) * this.settings.wrapperSpeed;
107
+ const maxOffset = Math.max(0, contentHeight - window.innerHeight);
108
+ this.wrapperOffset = Math.max(0, Math.min(this.wrapperOffset, maxOffset));
109
+ const y = Math.round(-this.wrapperOffset * 100) / 100;
110
+ this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
111
+ }
112
+ targetsUpdate(target) {
113
+ const ts = this.settings.targetSpeed;
114
+ const tp = this.settings.targetPercentage;
115
+ target.top += (this.scrollTop * Number(ts) * Number(target.speedY) - target.top) * tp;
116
+ target.left += (this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
117
+ const targetOffsetTop = parseInt(String(target.percentage), 10) - target.top - parseInt(String(target.offset), 10);
118
+ let offsetY = Math.round(targetOffsetTop * -100) / 100;
119
+ let offsetX = 0;
120
+ if (target.horizontal) {
121
+ const targetOffsetLeft = parseInt(String(target.percentage), 10) - target.left - parseInt(String(target.offset), 10);
122
+ offsetX = Math.round(targetOffsetLeft * -100) / 100;
123
+ }
124
+ target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
125
+ }
145
126
  init(options) {
146
127
  var _a;
147
128
  this.destroy();
@@ -180,44 +161,16 @@ class Engine {
180
161
  percentage: percentage ? parseInt(percentage, 10) || 0 : 0,
181
162
  });
182
163
  }
183
- this.resizeObserver = new ResizeObserver(this.onResize);
184
- this.resizeObserver.observe(this.wrapper);
185
- window.addEventListener('resize', this.onResize);
164
+ window.addEventListener('resize', this.onWindowResize);
186
165
  this.attachOverlayWatcher();
187
- if (!this.pauseForOverlay)
188
- this.ensureTicking();
166
+ this.startLoop();
189
167
  return true;
190
168
  }
191
- wrapperUpdate() {
192
- if (!this.wrapper)
193
- return;
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));
197
- const y = Math.round(-this.wrapperOffset * 100) / 100;
198
- this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
199
- }
200
- targetsUpdate(target) {
201
- const ts = this.settings.targetSpeed;
202
- const tp = this.settings.targetPercentage;
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);
206
- let offsetY = Math.round(targetOffsetTop * -100) / 100;
207
- let offsetX = 0;
208
- if (target.horizontal) {
209
- const targetOffsetLeft = parseInt(String(target.percentage), 10) - target.left - parseInt(String(target.offset), 10);
210
- offsetX = Math.round(targetOffsetLeft * -100) / 100;
211
- }
212
- target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
213
- }
214
169
  destroy() {
215
- var _a;
216
170
  this.detachOverlayWatcher();
217
- this.stopScrollLoop();
218
- window.removeEventListener('resize', this.onResize);
219
- (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
220
- this.resizeObserver = null;
171
+ cancelAnimationFrame(this.rafId);
172
+ this.rafId = 0;
173
+ window.removeEventListener('resize', this.onWindowResize);
221
174
  document.body.style.height = '';
222
175
  if (this.wrapper) {
223
176
  this.wrapper.removeAttribute('style');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "coonlink-luxy",
3
- "version": "26.1.4",
3
+ "version": "26.1.7",
4
4
  "description": "Inertia scroll and parallax (luxy-style) with fixes for modern browsers, React/Next, and prefers-reduced-motion.",
5
5
  "homepage": "https://dev.coonlink.com",
6
6
  "keywords": [