@fastkit/scroller 0.16.0-next.0 → 0.16.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.
Files changed (5) hide show
  1. package/dist/scroller.d.ts +820 -0
  2. package/dist/scroller.mjs +1344 -1285
  3. package/dist/scroller.mjs.map +1 -1
  4. package/package.json +8 -9
  5. package/dist/scroller.d.mts +0 -829
package/dist/scroller.mjs CHANGED
@@ -1,1357 +1,1416 @@
1
- import { EV } from "@fastkit/ev";
2
- import { visibilityManager } from "@fastkit/visibility";
3
- import { IN_WINDOW, removeUndef } from "@fastkit/helpers";
4
- import { TinyLogger } from "@fastkit/tiny-logger";
5
- import BezierEasing from "bezier-easing";
1
+ import { EV } from '@fastkit/ev';
2
+ import { visibilityManager } from '@fastkit/visibility';
3
+ import { IN_WINDOW, removeUndef } from '@fastkit/helpers';
4
+ import { TinyLogger } from '@fastkit/tiny-logger';
6
5
 
7
- //#region src/util.ts
6
+ // src/util.ts
8
7
  function isDocumentElement(el) {
9
- return el.constructor === HTMLHtmlElement;
8
+ return el.constructor === HTMLHtmlElement;
10
9
  }
11
- function isBodyElement$1(el) {
12
- return el.constructor === HTMLBodyElement;
10
+ function isBodyElement(el) {
11
+ return el.constructor === HTMLBodyElement;
13
12
  }
13
+ var logger = new TinyLogger("scroller");
14
14
 
15
- //#endregion
16
- //#region src/logger.ts
17
- const logger = new TinyLogger("scroller");
18
-
19
- //#endregion
20
- //#region src/prevent-scroll.ts
21
- const SCROLLABLE_KEY_CODES = [
22
- 32,
23
- 33,
24
- 34,
25
- 35,
26
- 36,
27
- 37,
28
- 38,
29
- 39,
30
- 40
31
- ];
32
- const eventListenerOptions = { passive: false };
33
- const handleWheel = (e) => {
34
- e.preventDefault();
15
+ // src/prevent-scroll.ts
16
+ var SCROLLABLE_KEY_CODES = [32, 33, 34, 35, 36, 37, 38, 39, 40];
17
+ var eventListenerOptions = {
18
+ passive: false
35
19
  };
36
- const handleScroll = (e) => {
37
- const el = e.target;
38
- if (el && el.__ps_ctx__) el.scrollTo(el.__ps_ctx__.lockPosition.x, el.__ps_ctx__.lockPosition.y);
20
+ var handleWheel = (e) => {
21
+ e.preventDefault();
39
22
  };
40
- const handleKeydown = (e) => {
41
- if (e.target && ["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
42
- if (SCROLLABLE_KEY_CODES.includes(e.which)) e.preventDefault();
23
+ var handleScroll = (e) => {
24
+ const el = e.target;
25
+ if (el && el.__ps_ctx__) {
26
+ el.scrollTo(el.__ps_ctx__.lockPosition.x, el.__ps_ctx__.lockPosition.y);
27
+ }
28
+ };
29
+ var handleKeydown = (e) => {
30
+ if (e.target && ["INPUT", "TEXTAREA"].includes(e.target.tagName)) {
31
+ return;
32
+ }
33
+ if (SCROLLABLE_KEY_CODES.includes(e.which)) {
34
+ e.preventDefault();
35
+ }
43
36
  };
44
37
  function enableScroll(el) {
45
- const _el = el;
46
- if (!_el.__ps_ctx__) return;
47
- const { options } = _el.__ps_ctx__;
48
- _el.removeEventListener("wheel", handleWheel, eventListenerOptions);
49
- _el.removeEventListener("scroll", handleScroll, eventListenerOptions);
50
- _el.removeEventListener("keydown", handleKeydown);
51
- if (options.hideScrollbar) _el.style.overflow = _el.__ps_ctx__.overflowOrigin;
52
- delete _el.__ps_ctx__;
38
+ const _el = el;
39
+ if (!_el.__ps_ctx__) return;
40
+ const { options } = _el.__ps_ctx__;
41
+ _el.removeEventListener("wheel", handleWheel, eventListenerOptions);
42
+ _el.removeEventListener("scroll", handleScroll, eventListenerOptions);
43
+ _el.removeEventListener("keydown", handleKeydown);
44
+ if (options.hideScrollbar) {
45
+ _el.style.overflow = _el.__ps_ctx__.overflowOrigin;
46
+ }
47
+ delete _el.__ps_ctx__;
53
48
  }
54
49
  function disableScroll(el, opts = {}) {
55
- const { hideScrollbar = false } = opts;
56
- const _el = el;
57
- if (_el.__ps_ctx__) return;
58
- const options = { hideScrollbar };
59
- _el.__ps_ctx__ = {
60
- options,
61
- el: _el,
62
- overflowOrigin: _el.style.overflow,
63
- lockPosition: {
64
- x: _el.scrollLeft || _el.scrollX,
65
- y: _el.scrollTop || _el.scrollY
66
- }
67
- };
68
- if (options.hideScrollbar) _el.style.overflow = "hidden";
69
- _el.addEventListener("wheel", handleWheel, eventListenerOptions);
70
- _el.addEventListener("scroll", handleScroll, eventListenerOptions);
71
- _el.addEventListener("keydown", handleKeydown);
50
+ const { hideScrollbar = false } = opts;
51
+ const _el = el;
52
+ if (_el.__ps_ctx__) return;
53
+ const options = {
54
+ hideScrollbar
55
+ };
56
+ _el.__ps_ctx__ = {
57
+ options,
58
+ el: _el,
59
+ overflowOrigin: _el.style.overflow,
60
+ lockPosition: {
61
+ x: _el.scrollLeft || _el.scrollX,
62
+ y: _el.scrollTop || _el.scrollY
63
+ }
64
+ };
65
+ if (options.hideScrollbar) {
66
+ _el.style.overflow = "hidden";
67
+ }
68
+ _el.addEventListener("wheel", handleWheel, eventListenerOptions);
69
+ _el.addEventListener("scroll", handleScroll, eventListenerOptions);
70
+ _el.addEventListener("keydown", handleKeydown);
72
71
  }
73
72
 
74
- //#endregion
75
- //#region src/scroll/schemes.ts
76
- const defaultBaseSettings = {
77
- duration: 500,
78
- easing: "ease",
79
- cancelable: true
73
+ // src/scroll/schemes.ts
74
+ var defaultBaseSettings = {
75
+ duration: 500,
76
+ easing: "ease",
77
+ cancelable: true
80
78
  };
81
- const defaultSettings = {
82
- get container() {
83
- return document.scrollingElement;
84
- },
85
- ...defaultBaseSettings
79
+ var defaultSettings = {
80
+ get container() {
81
+ return document.scrollingElement;
82
+ },
83
+ ...defaultBaseSettings
86
84
  };
87
85
 
88
- //#endregion
89
- //#region src/scroll/easings.ts
90
- const easings = {
91
- ease: [
92
- .25,
93
- .1,
94
- .25,
95
- 1
96
- ],
97
- linear: [
98
- 0,
99
- 0,
100
- 1,
101
- 1
102
- ],
103
- "ease-in": [
104
- .42,
105
- 0,
106
- 1,
107
- 1
108
- ],
109
- "ease-out": [
110
- 0,
111
- 0,
112
- .58,
113
- 1
114
- ],
115
- "ease-in-out": [
116
- .42,
117
- 0,
118
- .58,
119
- 1
120
- ]
86
+ // src/bezier-easing.ts
87
+ function LinearEasing(x) {
88
+ return x;
89
+ }
90
+ var { cbrt, sqrt, PI: \u03C0 } = Math;
91
+ var x2t = (x, a, b, c, d) => {
92
+ const q = a + b * x;
93
+ const s = q ** 2 + c;
94
+ if (s > 0) {
95
+ const root = sqrt(s);
96
+ return cbrt(q + root) + cbrt(q - root) - d;
97
+ }
98
+ const l = cbrt(sqrt(q * q - s));
99
+ const angle = q ? Math.atan(sqrt(-s) / q) : -\u03C0 / 2;
100
+ let \u03C6;
101
+ if (b < 0) {
102
+ \u03C6 = (q > 0 ? 2 * \u03C0 : \u03C0) - angle;
103
+ } else if (d < 0) {
104
+ \u03C6 = (q > 0 ? 2 * \u03C0 : -3 * \u03C0) + angle;
105
+ } else {
106
+ \u03C6 = (q > 0 ? 0 : \u03C0) + angle;
107
+ }
108
+ return 2 * l * Math.cos(\u03C6 / 3) - d;
109
+ };
110
+ var Y = (t, ay, by, cy) => ((ay * t + 3 * by) * t + cy) * t;
111
+ function bezier(mX1, mY1, mX2, mY2) {
112
+ if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
113
+ throw new Error("bezier x values must be in [0, 1] range");
114
+ }
115
+ if (mX1 === mY1 && mX2 === mY2) {
116
+ return LinearEasing;
117
+ }
118
+ const a = 6 * (3 * mX1 - 3 * mX2 + 1);
119
+ const b = 6 * (mX2 - 2 * mX1);
120
+ const c = 3 * mX1;
121
+ const a2 = a * a;
122
+ const b2 = b * b;
123
+ const d = b / a;
124
+ const e = 3 * b * c / a2 - b2 * b / (a2 * a);
125
+ const w1 = 2 * c / a - b2 / a2;
126
+ const w = w1 * w1 * w1;
127
+ const o = 3 / a;
128
+ const ay = 3 * mY1 - 3 * mY2 + 1;
129
+ const by = mY2 - 2 * mY1;
130
+ const cy = 3 * mY1;
131
+ const X2T = a ? x2t : LinearEasing;
132
+ return function BezierEasing(x) {
133
+ if (x === 0 || x === 1) {
134
+ return x;
135
+ }
136
+ return Y(X2T(x, e, o, w, d), ay, by, cy);
137
+ };
138
+ }
139
+
140
+ // src/scroll/easings.ts
141
+ var easings = {
142
+ ease: [0.25, 0.1, 0.25, 1],
143
+ linear: [0, 0, 1, 1],
144
+ "ease-in": [0.42, 0, 1, 1],
145
+ "ease-out": [0, 0, 0.58, 1],
146
+ "ease-in-out": [0.42, 0, 0.58, 1]
121
147
  };
122
148
  var easings_default = easings;
123
149
 
124
- //#endregion
125
- //#region src/scroll/util.ts
126
- function isBodyElement(el) {
127
- return el.tagName.toLowerCase() === "body";
150
+ // src/scroll/util.ts
151
+ function isBodyElement2(el) {
152
+ return el.tagName.toLowerCase() === "body";
128
153
  }
129
154
  function getContainerDimension(el) {
130
- if (isBodyElement(el)) {
131
- const documentElement = document.documentElement;
132
- return {
133
- width: documentElement.clientWidth,
134
- height: documentElement.clientWidth
135
- };
136
- }
137
- return {
138
- width: el.clientWidth,
139
- height: el.clientHeight
140
- };
155
+ if (isBodyElement2(el)) {
156
+ const documentElement = document.documentElement;
157
+ return {
158
+ // width: window.innerWidth,
159
+ // height: window.innerHeight,
160
+ width: documentElement.clientWidth,
161
+ height: documentElement.clientWidth
162
+ };
163
+ }
164
+ return {
165
+ width: el.clientWidth,
166
+ height: el.clientHeight
167
+ };
141
168
  }
142
169
  function $(selectorOrElement) {
143
- if (typeof selectorOrElement !== "string") return selectorOrElement;
144
- return document.querySelector(selectorOrElement);
170
+ if (typeof selectorOrElement !== "string")
171
+ return selectorOrElement;
172
+ return document.querySelector(selectorOrElement);
145
173
  }
146
174
  function cumulativeOffset(element) {
147
- let top = 0;
148
- let left = 0;
149
- let el = element;
150
- while (el) {
151
- top += el.offsetTop || 0;
152
- left += el.offsetLeft || 0;
153
- el = el.offsetParent;
154
- }
155
- return {
156
- top,
157
- left
158
- };
175
+ let top = 0;
176
+ let left = 0;
177
+ let el = element;
178
+ while (el) {
179
+ top += el.offsetTop || 0;
180
+ left += el.offsetLeft || 0;
181
+ el = el.offsetParent;
182
+ }
183
+ return {
184
+ top,
185
+ left
186
+ };
159
187
  }
160
188
  function on(element, events, handler, opts = { passive: false }) {
161
- if (!Array.isArray(events)) events = [events];
162
- for (let i = 0; i < events.length; i++) element.addEventListener(events[i], handler, opts);
189
+ if (!Array.isArray(events)) events = [events];
190
+ for (let i = 0; i < events.length; i++) {
191
+ element.addEventListener(events[i], handler, opts);
192
+ }
163
193
  }
164
194
  function off(element, events, handler) {
165
- if (!Array.isArray(events)) events = [events];
166
- for (let i = 0; i < events.length; i++) element.removeEventListener(events[i], handler);
195
+ if (!Array.isArray(events)) events = [events];
196
+ for (let i = 0; i < events.length; i++) {
197
+ element.removeEventListener(events[i], handler);
198
+ }
167
199
  }
168
200
  function error(message) {
169
- return /* @__PURE__ */ new Error(`[scroll] ${message}`);
201
+ return new Error(`[scroll] ${message}`);
170
202
  }
171
203
 
172
- //#endregion
173
- //#region src/scroll/scroll-by-internal.ts
174
- const abortEvents = [
175
- "mousedown",
176
- "wheel",
177
- "DOMMouseScroll",
178
- "mousewheel",
179
- "keyup",
180
- "touchmove"
204
+ // src/scroll/scroll-by-internal.ts
205
+ var abortEvents = [
206
+ "mousedown",
207
+ "wheel",
208
+ "DOMMouseScroll",
209
+ "mousewheel",
210
+ "keyup",
211
+ "touchmove"
181
212
  ];
182
213
  function scroll(diffX, diffY, options = {}, _computedValues) {
183
- let $container;
184
- let initialX;
185
- let initialY;
186
- let targetX;
187
- let targetY;
188
- const _options = {
189
- ...defaultSettings,
190
- ...removeUndef(options)
191
- };
192
- const { container, duration, easing, cancelable, onProgress, onCancel, onDone } = _options;
193
- const x = diffX !== 0;
194
- const y = diffY !== 0;
195
- if (_computedValues) {
196
- $container = _computedValues.$container;
197
- initialX = _computedValues.initialX;
198
- initialY = _computedValues.initialY;
199
- targetX = _computedValues.targetX;
200
- targetY = _computedValues.targetY;
201
- } else {
202
- $container = $(container);
203
- if (!$container) throw error(`missing container ${container}`);
204
- initialX = $container.scrollLeft;
205
- initialY = $container.scrollTop;
206
- targetX = initialX + diffX;
207
- targetY = initialY + diffY;
208
- }
209
- const { scrollWidth, scrollHeight } = $container;
210
- const { width, height } = getContainerDimension($container);
211
- const overflowX = targetX + width - scrollWidth;
212
- const overflowY = targetY + height - scrollHeight;
213
- if (overflowX > 0) {
214
- diffX -= overflowX;
215
- targetX -= overflowX;
216
- }
217
- if (overflowY > 0) {
218
- diffY -= overflowY;
219
- targetY -= overflowY;
220
- }
221
- let doneResolver;
222
- let timeStart = 0;
223
- let timeElapsed;
224
- const callbackValues = {
225
- container: $container,
226
- progress: 0,
227
- aborted: false,
228
- abortEventSource: null
229
- };
230
- const result = {
231
- cancel: canceller,
232
- promise: new Promise((resolve) => {
233
- doneResolver = resolve;
234
- }),
235
- plans: {
236
- x: diffX,
237
- y: diffY
238
- }
239
- };
240
- if (diffY === 0 && diffX === 0 || !!$container.__ps_ctx__) return initialAbort();
241
- let easingValues;
242
- if (!easing) easingValues = easings_default.ease;
243
- else if (typeof easing === "string") easingValues = easings_default[_options.easing];
244
- else easingValues = easing;
245
- const easingFn = BezierEasing.apply(BezierEasing, easingValues);
246
- on($container, abortEvents, abortFn, { passive: true });
247
- window.requestAnimationFrame(step);
248
- return result;
249
- function doneResolve() {
250
- doneResolver();
251
- }
252
- function canceller(e = null, checkCancelable = false) {
253
- if (checkCancelable && !cancelable) return;
254
- off($container, abortEvents, abortFn);
255
- callbackValues.abortEventSource = e;
256
- callbackValues.aborted = true;
257
- onCancel && onCancel(callbackValues);
258
- }
259
- function abortFn(e) {
260
- canceller(e, true);
261
- }
262
- function initialAbort(e = null) {
263
- canceller(e);
264
- doneResolve();
265
- return result;
266
- }
267
- function step(timestamp) {
268
- if (callbackValues.aborted) return done();
269
- if (!timeStart) timeStart = timestamp;
270
- timeElapsed = timestamp - timeStart;
271
- let progress = Math.min(timeElapsed / duration, 1);
272
- progress = easingFn(progress);
273
- callbackValues.progress = progress;
274
- topLeft(initialY + diffY * progress, initialX + diffX * progress);
275
- onProgress && onProgress(callbackValues);
276
- timeElapsed < duration ? window.requestAnimationFrame(step) : done();
277
- }
278
- function topLeft(top, left) {
279
- if (y) $container.scrollTop = top;
280
- if (x) $container.scrollLeft = left;
281
- }
282
- function done() {
283
- if (!callbackValues.aborted) topLeft(targetY, targetX);
284
- timeStart = 0;
285
- off($container, abortEvents, abortFn);
286
- callbackValues.progress = 1;
287
- doneResolve();
288
- if (!callbackValues.aborted && onDone) onDone(callbackValues);
289
- }
214
+ let $container;
215
+ let initialX;
216
+ let initialY;
217
+ let targetX;
218
+ let targetY;
219
+ const _options = { ...defaultSettings, ...removeUndef(options) };
220
+ const {
221
+ container,
222
+ duration,
223
+ easing,
224
+ cancelable,
225
+ onProgress,
226
+ onCancel,
227
+ onDone
228
+ } = _options;
229
+ const x = diffX !== 0;
230
+ const y = diffY !== 0;
231
+ if (_computedValues) {
232
+ $container = _computedValues.$container;
233
+ initialX = _computedValues.initialX;
234
+ initialY = _computedValues.initialY;
235
+ targetX = _computedValues.targetX;
236
+ targetY = _computedValues.targetY;
237
+ } else {
238
+ $container = $(container);
239
+ if (!$container) throw error(`missing container ${container}`);
240
+ initialX = $container.scrollLeft;
241
+ initialY = $container.scrollTop;
242
+ targetX = initialX + diffX;
243
+ targetY = initialY + diffY;
244
+ }
245
+ const { scrollWidth, scrollHeight } = $container;
246
+ const { width, height } = getContainerDimension($container);
247
+ const overflowX = targetX + width - scrollWidth;
248
+ const overflowY = targetY + height - scrollHeight;
249
+ if (overflowX > 0) {
250
+ diffX -= overflowX;
251
+ targetX -= overflowX;
252
+ }
253
+ if (overflowY > 0) {
254
+ diffY -= overflowY;
255
+ targetY -= overflowY;
256
+ }
257
+ let doneResolver;
258
+ let timeStart = 0;
259
+ let timeElapsed;
260
+ const callbackValues = {
261
+ container: $container,
262
+ progress: 0,
263
+ aborted: false,
264
+ abortEventSource: null
265
+ };
266
+ const result = {
267
+ cancel: canceller,
268
+ promise: new Promise((resolve) => {
269
+ doneResolver = resolve;
270
+ }),
271
+ plans: {
272
+ x: diffX,
273
+ y: diffY
274
+ }
275
+ };
276
+ if (diffY === 0 && diffX === 0 || !!$container.__ps_ctx__)
277
+ return initialAbort();
278
+ let easingValues;
279
+ if (!easing) {
280
+ easingValues = easings_default.ease;
281
+ } else if (typeof easing === "string") {
282
+ easingValues = easings_default[_options.easing];
283
+ } else {
284
+ easingValues = easing;
285
+ }
286
+ const easingFn = bezier.apply(
287
+ bezier,
288
+ easingValues
289
+ );
290
+ on($container, abortEvents, abortFn, { passive: true });
291
+ window.requestAnimationFrame(step);
292
+ return result;
293
+ function doneResolve() {
294
+ doneResolver();
295
+ }
296
+ function canceller(e = null, checkCancelable = false) {
297
+ if (checkCancelable && !cancelable) return;
298
+ off($container, abortEvents, abortFn);
299
+ callbackValues.abortEventSource = e;
300
+ callbackValues.aborted = true;
301
+ onCancel && onCancel(callbackValues);
302
+ }
303
+ function abortFn(e) {
304
+ canceller(e, true);
305
+ }
306
+ function initialAbort(e = null) {
307
+ canceller(e);
308
+ doneResolve();
309
+ return result;
310
+ }
311
+ function step(timestamp) {
312
+ if (callbackValues.aborted) return done();
313
+ if (!timeStart) timeStart = timestamp;
314
+ timeElapsed = timestamp - timeStart;
315
+ let progress = Math.min(timeElapsed / duration, 1);
316
+ progress = easingFn(progress);
317
+ callbackValues.progress = progress;
318
+ topLeft(initialY + diffY * progress, initialX + diffX * progress);
319
+ onProgress && onProgress(callbackValues);
320
+ timeElapsed < duration ? window.requestAnimationFrame(step) : done();
321
+ }
322
+ function topLeft(top, left) {
323
+ if (y) $container.scrollTop = top;
324
+ if (x) $container.scrollLeft = left;
325
+ }
326
+ function done() {
327
+ if (!callbackValues.aborted) topLeft(targetY, targetX);
328
+ timeStart = 0;
329
+ off($container, abortEvents, abortFn);
330
+ callbackValues.progress = 1;
331
+ doneResolve();
332
+ if (!callbackValues.aborted && onDone) onDone(callbackValues);
333
+ }
290
334
  }
291
335
 
292
- //#endregion
293
- //#region src/scroll/scroll-by.ts
294
- /**
295
- * 指定の差分だけコンテナをスクロールします。
296
- * @param diffX - 横軸の移動量（px）です。デフォルトは0です。
297
- * @param diffY - 縦軸の移動量（px）です。デフォルトは0です。
298
- * @param options - スクロールオプション
299
- */
336
+ // src/scroll/scroll-by.ts
300
337
  function scrollBy(diffX, diffY, options) {
301
- return scroll(diffX, diffY, options);
338
+ return scroll(diffX, diffY, options);
302
339
  }
303
340
 
304
- //#endregion
305
- //#region src/scroll/scroll-to.ts
306
- /**
307
- * 任意の位置（px）へコンテナをスクロールします。
308
- * @param scrollPosition - スクロール先を指定します。x, y 共にオプショナルなるです。未指定の軸は現在のスクロール値のまま保持されます。
309
- * @param options - スクロールオプション
310
- */
341
+ // src/scroll/scroll-to.ts
311
342
  function scrollTo(scrollPosition, options = {}) {
312
- let { x, y } = scrollPosition;
313
- const container = options.container || defaultSettings.container;
314
- const $container = $(container);
315
- if (!$container) throw error(`missing container ${container}`);
316
- const initialY = $container.scrollTop;
317
- const initialX = $container.scrollLeft;
318
- if (x === void 0) x = initialX;
319
- if (y === void 0) y = initialY;
320
- return scroll(x - initialX, y - initialY, options, {
321
- $container,
322
- initialX,
323
- initialY,
324
- targetX: x,
325
- targetY: y
326
- });
343
+ let { x, y } = scrollPosition;
344
+ const container = options.container || defaultSettings.container;
345
+ const $container = $(container);
346
+ if (!$container) throw error(`missing container ${container}`);
347
+ const initialY = $container.scrollTop;
348
+ const initialX = $container.scrollLeft;
349
+ if (x === void 0) x = initialX;
350
+ if (y === void 0) y = initialY;
351
+ const diffX = x - initialX;
352
+ const diffY = y - initialY;
353
+ return scroll(diffX, diffY, options, {
354
+ $container,
355
+ initialX,
356
+ initialY,
357
+ targetX: x,
358
+ targetY: y
359
+ });
327
360
  }
328
361
 
329
- //#endregion
330
- //#region src/scroll/scroll-to-element.ts
331
- /**
332
- * 要素スクロール利用事のデフォルト設定です。
333
- * {@link ScrollToElementSettings}
334
- */
335
- const scrollToElementSettingsDefaults = {
336
- offset: 0,
337
- x: false,
338
- y: true
362
+ // src/scroll/scroll-to-element.ts
363
+ var scrollToElementSettingsDefaults = {
364
+ offset: 0,
365
+ x: false,
366
+ y: true
339
367
  };
340
- /**
341
- * 任意の要素の位置へスクロールします。
342
- * @param target - スクロール先の要素
343
- * @param options - スクロールオプション
344
- */
345
368
  function scrollToElement(target, options = {}) {
346
- const _options = {
347
- ...scrollToElementSettingsDefaults,
348
- ...options
349
- };
350
- const { x, y } = _options;
351
- const offsetSource = _options.offset;
352
- const offset = typeof offsetSource === "number" ? {
353
- x: offsetSource,
354
- y: offsetSource
355
- } : offsetSource;
356
- const $target = $(target);
357
- if (!$target) throw error(`missing element ${target}`);
358
- const container = _options.container || defaultSettings.container;
359
- const $container = $(container);
360
- if (!$container) throw error(`missing container ${container}`);
361
- const cumulativeOffsetContainer = cumulativeOffset($container);
362
- const cumulativeOffsetTarget = cumulativeOffset($target);
363
- const initialY = $container.scrollTop;
364
- const initialX = $container.scrollLeft;
365
- const targetY = cumulativeOffsetTarget.top - cumulativeOffsetContainer.top + (offset.y || 0);
366
- const targetX = cumulativeOffsetTarget.left - cumulativeOffsetContainer.left + (offset.x || 0);
367
- return scroll(x ? targetX - initialX : 0, y ? targetY - initialY : 0, _options, {
368
- $container,
369
- initialX,
370
- initialY,
371
- targetX,
372
- targetY
373
- });
369
+ const _options = { ...scrollToElementSettingsDefaults, ...options };
370
+ const { x, y } = _options;
371
+ const offsetSource = _options.offset;
372
+ const offset = typeof offsetSource === "number" ? { x: offsetSource, y: offsetSource } : offsetSource;
373
+ const $target = $(target);
374
+ if (!$target) throw error(`missing element ${target}`);
375
+ const container = _options.container || defaultSettings.container;
376
+ const $container = $(container);
377
+ if (!$container) throw error(`missing container ${container}`);
378
+ const cumulativeOffsetContainer = cumulativeOffset($container);
379
+ const cumulativeOffsetTarget = cumulativeOffset($target);
380
+ const initialY = $container.scrollTop;
381
+ const initialX = $container.scrollLeft;
382
+ const targetY = cumulativeOffsetTarget.top - cumulativeOffsetContainer.top + (offset.y || 0);
383
+ const targetX = cumulativeOffsetTarget.left - cumulativeOffsetContainer.left + (offset.x || 0);
384
+ const diffX = x ? targetX - initialX : 0;
385
+ const diffY = y ? targetY - initialY : 0;
386
+ return scroll(diffX, diffY, _options, {
387
+ $container,
388
+ initialX,
389
+ initialY,
390
+ targetX,
391
+ targetY
392
+ });
374
393
  }
375
394
 
376
- //#endregion
377
- //#region src/scroll/scroll-to-side.ts
378
- /**
379
- * コンテナをいずれかの辺までスクロールします。
380
- * @param targets - 辺を指定します。シングルの文字列、及び配列に対応しています。
381
- * @param options - スクロールオプション
382
- */
395
+ // src/scroll/scroll-to-side.ts
383
396
  function scrollToSide(targets, options) {
384
- const sides = typeof targets === "string" ? [targets] : targets;
385
- const position = {};
386
- const hasRight = sides.includes("right");
387
- const hasBottom = sides.includes("bottom");
388
- if (sides.includes("top")) position.y = 0;
389
- if (sides.includes("left")) position.x = 0;
390
- if (hasRight || hasBottom) {
391
- const container = options && options.container || defaultSettings.container;
392
- const $container = $(container);
393
- if (!$container) throw error(`missing container ${container}`);
394
- if (hasRight) position.x = $container.scrollWidth;
395
- if (hasBottom) position.y = $container.scrollHeight;
396
- }
397
- return scrollTo(position, options);
397
+ const sides = typeof targets === "string" ? [targets] : targets;
398
+ const position = {};
399
+ const hasRight = sides.includes("right");
400
+ const hasBottom = sides.includes("bottom");
401
+ if (sides.includes("top")) {
402
+ position.y = 0;
403
+ }
404
+ if (sides.includes("left")) {
405
+ position.x = 0;
406
+ }
407
+ if (hasRight || hasBottom) {
408
+ const container = options && options.container || defaultSettings.container;
409
+ const $container = $(container);
410
+ if (!$container) throw error(`missing container ${container}`);
411
+ if (hasRight) position.x = $container.scrollWidth;
412
+ if (hasBottom) position.y = $container.scrollHeight;
413
+ }
414
+ return scrollTo(position, options);
398
415
  }
399
- /**
400
- * コンテナを上辺までスクロールします。
401
- * @param options - スクロールオプション
402
- */
403
416
  function scrollToTop(options) {
404
- return scrollToSide("top", options);
417
+ return scrollToSide("top", options);
405
418
  }
406
- /**
407
- * コンテナを右辺までスクロールします。
408
- * @param options - スクロールオプション
409
- */
410
419
  function scrollToRight(options) {
411
- return scrollToSide("right", options);
420
+ return scrollToSide("right", options);
412
421
  }
413
- /**
414
- * コンテナを下辺までスクロールします。
415
- * @param options - スクロールオプション
416
- */
417
422
  function scrollToBottom(options) {
418
- return scrollToSide("bottom", options);
423
+ return scrollToSide("bottom", options);
419
424
  }
420
- /**
421
- * コンテナを左辺までスクロールします。
422
- * @param options - スクロールオプション
423
- */
424
425
  function scrollToLeft(options) {
425
- return scrollToSide("left", options);
426
+ return scrollToSide("left", options);
426
427
  }
427
- /**
428
- * コンテナを左上コーナーまでスクロールします。
429
- * @param options - スクロールオプション
430
- */
431
428
  function scrollToLeftTop(options) {
432
- return scrollToSide(["left", "top"], options);
429
+ return scrollToSide(["left", "top"], options);
433
430
  }
434
- /**
435
- * コンテナを左下コーナーまでスクロールします。
436
- * @param options - スクロールオプション
437
- */
438
431
  function scrollToLeftBottom(options) {
439
- return scrollToSide(["left", "bottom"], options);
432
+ return scrollToSide(["left", "bottom"], options);
440
433
  }
441
- /**
442
- * コンテナを右上コーナーまでスクロールします。
443
- * @param options - スクロールオプション
444
- */
445
434
  function scrollToRightTop(options) {
446
- return scrollToSide(["right", "top"], options);
435
+ return scrollToSide(["right", "top"], options);
447
436
  }
448
- /**
449
- * コンテナを右下コーナーまでスクロールします。
450
- * @param options - スクロールオプション
451
- */
452
437
  function scrollToRightBottom(options) {
453
- return scrollToSide(["right", "bottom"], options);
438
+ return scrollToSide(["right", "bottom"], options);
454
439
  }
455
440
 
456
- //#endregion
457
- //#region src/scroller.ts
458
- /**
459
- * Scrollerの状態を示します。
460
- */
461
- let ScrollerState = /* @__PURE__ */ function(ScrollerState) {
462
- /**
463
- * Scrollerが初期化されていない（Elementが設定されていない）状態を示します。
464
- */
465
- ScrollerState["Pending"] = "pending";
466
- /**
467
- * Scrollerが初期化されているが、[[Scroller.el]]のリサイズやスクロールのイベント監視が動作していない状態を示します。
468
- */
469
- ScrollerState["Ready"] = "ready";
470
- /**
471
- * Scrollerが初期化されていて、[[Scroller.el]]のリサイズやスクロールのイベント監視が動作している状態を示します。
472
- */
473
- ScrollerState["Running"] = "running";
474
- /**
475
- * [[Scroller.destroy]]が実行され、Scrollerが利用不可である状態を示します。
476
- */
477
- ScrollerState["Destroyed"] = "destroyed";
478
- return ScrollerState;
479
- }({});
480
- const scrollerObservableKeys = [
481
- "state",
482
- "isPending",
483
- "isReady",
484
- "isRunning",
485
- "isDestroyed",
486
- "scrollEnabled",
487
- "containerWidth",
488
- "containerHeight",
489
- "scrollWidth",
490
- "scrollHeight",
491
- "scrollableX",
492
- "scrollableY",
493
- "scrollTop",
494
- "scrollLeft",
495
- "scrollRight",
496
- "scrollBottom",
497
- "lastAxis",
498
- "lastDirection",
499
- "lastYDirection",
500
- "lastXDirection",
501
- "nowScrolling"
441
+ // src/scroller.ts
442
+ var ScrollerState = /* @__PURE__ */ ((ScrollerState2) => {
443
+ ScrollerState2["Pending"] = "pending";
444
+ ScrollerState2["Ready"] = "ready";
445
+ ScrollerState2["Running"] = "running";
446
+ ScrollerState2["Destroyed"] = "destroyed";
447
+ return ScrollerState2;
448
+ })(ScrollerState || {});
449
+ var scrollerObservableKeys = [
450
+ "state",
451
+ "isPending",
452
+ "isReady",
453
+ "isRunning",
454
+ "isDestroyed",
455
+ "scrollEnabled",
456
+ "containerWidth",
457
+ "containerHeight",
458
+ "scrollWidth",
459
+ "scrollHeight",
460
+ "scrollableX",
461
+ "scrollableY",
462
+ "scrollTop",
463
+ "scrollLeft",
464
+ "scrollRight",
465
+ "scrollBottom",
466
+ "lastAxis",
467
+ "lastDirection",
468
+ "lastYDirection",
469
+ "lastXDirection",
470
+ "nowScrolling"
502
471
  ];
503
- /**
504
- * 任意のElement（or HTML Document）のスクロールやサイズ変更を監視し、その情報を通知するクラスです。<br>
505
- * <a href="https://dadajam4.github.io/dadajam4/ev/classes/_ev_.ev.html" target="_blank">EV</a>を継承しており、イベントの購読[[Scroller.on]]等のインターフェースを利用するか、
506
- * [[Scroller.observe]]メソッドを利用します。<br>
507
- * [[Scroller.on]]、[[Scroller.once]]で購読可能なイベントについては[[ScrollerEventMap]]を参照してください。
508
- */
509
472
  var Scroller = class extends EV {
510
- /**
511
- * Scrollerクラスの状態を監視＆同期するオブジェクトが
512
- * 保有すべきプロパティ一のキーの配列です。
513
- */
514
- static scrollerObservableKeys = scrollerObservableKeys;
515
- /**
516
- * Scrollerの状態を示すenum値です。
517
- * {@link ScrollerState}
518
- */
519
- static States = ScrollerState;
520
- /**
521
- * スクロールを検知してから、移動がなくなった際に、何ms後にスクロール終了と判定するかのインターバル値を示します。
522
- * デフォルトは500です。
523
- */
524
- scrollingJudgeInterval = 500;
525
- /**
526
- * 縦、横のどちらのスクロールを基準とするかを示します。
527
- * デフォルトはyです。<br>
528
- * この設定は[[Scroller.toElement]]のデフォルト値にも影響します。
529
- */
530
- baseAxis = "y";
531
- /**
532
- * スクロール系メソッド[[Scroller.to]]等を利用する際のデフォルトの設定を示します。
533
- */
534
- scrollSettingsDefaults = { ...defaultBaseSettings };
535
- /**
536
- * [[Scroller.toElement]]のデフォルトオプションの設定を示します。
537
- */
538
- scrollToElementSettingsDefaults = { ...scrollToElementSettingsDefaults };
539
- scrollSizeObserver;
540
- /**
541
- * 設定されたElement要素です。
542
- * 初期化が完了していない時には本getterはundefinedを返却する事に注意してください。
543
- */
544
- get el() {
545
- return this._el;
546
- }
547
- /**
548
- * 現在の状態です。<br>
549
- * {@link ScrollerState}
550
- */
551
- get state() {
552
- return this._state;
553
- }
554
- /**
555
- * 未初期化である場合trueを示します。
556
- */
557
- get isPending() {
558
- return this._state === ScrollerState.Pending;
559
- }
560
- /**
561
- * 初期化済み＆停止状態である場合trueを示します。
562
- */
563
- get isReady() {
564
- return this._state === ScrollerState.Ready;
565
- }
566
- /**
567
- * 初期化済み＆動作中である場合trueを示します。
568
- */
569
- get isRunning() {
570
- return this._state === ScrollerState.Running;
571
- }
572
- /**
573
- * インスタンスが破棄済みである場合trueを示します。
574
- */
575
- get isDestroyed() {
576
- return this._state === ScrollerState.Destroyed;
577
- }
578
- /**
579
- * スクロールの有効状態を取得します
580
- */
581
- get scrollEnabled() {
582
- return this._scrollStoppers.length === 0;
583
- }
584
- /**
585
- * スクロール要素の幅を示します。
586
- */
587
- get containerWidth() {
588
- return this._containerWidth;
589
- }
590
- /**
591
- * スクロール要素の高さを示します。
592
- */
593
- get containerHeight() {
594
- return this._containerHeight;
595
- }
596
- /**
597
- * スクロール要素内のコンテンツの幅を示します。
598
- */
599
- get scrollWidth() {
600
- return this._scrollWidth;
601
- }
602
- /**
603
- * スクロール要素内のコンテンツの高さを示します。
604
- */
605
- get scrollHeight() {
606
- return this._scrollHeight;
607
- }
608
- /**
609
- * x軸にスクロール可能な場合trueを示します
610
- */
611
- get scrollableX() {
612
- return this._scrollWidth > this._containerWidth;
613
- }
614
- /**
615
- * y軸にスクロール可能な場合trueを示します
616
- */
617
- get scrollableY() {
618
- return this._scrollHeight > this._containerHeight;
619
- }
620
- /**
621
- * 現在の上辺からのスクロール量を示します。
622
- */
623
- get scrollTop() {
624
- return this._scrollTop;
625
- }
626
- set scrollTop(scrollTop) {
627
- if (!this.el) return;
628
- this.el.scrollTop = scrollTop;
629
- }
630
- /**
631
- * 現在の右辺からのスクロール量を示します。
632
- */
633
- get scrollRight() {
634
- return this._scrollRight;
635
- }
636
- set scrollRight(scrollRight) {
637
- if (!this.el) return;
638
- this.el.scrollLeft = this._scrollWidth - this._containerWidth - scrollRight;
639
- }
640
- /**
641
- * 現在の下辺からのスクロール量を示します。
642
- */
643
- get scrollBottom() {
644
- return this._scrollBottom;
645
- }
646
- set scrollBottom(scrollBottom) {
647
- if (!this.el) return;
648
- this.el.scrollTop = this._scrollHeight - this._containerHeight - scrollBottom;
649
- }
650
- /**
651
- * 現在の左辺からのスクロール量を示します。
652
- */
653
- get scrollLeft() {
654
- return this._scrollLeft;
655
- }
656
- set scrollLeft(scrollLeft) {
657
- if (!this.el) return;
658
- this.el.scrollLeft = scrollLeft;
659
- }
660
- /**
661
- * 現在スクロール中である場合trueを示します。
662
- */
663
- get nowScrolling() {
664
- return this._nowScrolling;
665
- }
666
- /**
667
- * 最後に検知したスクロールの軸を示します。
668
- */
669
- get lastAxis() {
670
- return this._lastAxis;
671
- }
672
- /**
673
- * 最後に検知したスクロールの方向を示します。
674
- */
675
- get lastDirection() {
676
- return this._lastDirection;
677
- }
678
- /**
679
- * 最後に検知したスクロールの垂直方向を示します。
680
- */
681
- get lastYDirection() {
682
- return this._lastYDirection;
683
- }
684
- /**
685
- * 最後に検知したスクロールの水平方向を示します。
686
- */
687
- get lastXDirection() {
688
- return this._lastXDirection;
689
- }
690
- /**
691
- * 最後に検知したスクロールにより通知した情報を示します。
692
- */
693
- get lastPayload() {
694
- return {
695
- top: this._scrollTop,
696
- left: this._scrollLeft,
697
- bottom: this._scrollBottom,
698
- right: this._scrollRight,
699
- axis: this._lastAxis,
700
- direction: this._lastDirection,
701
- directionX: this._lastXDirection,
702
- directionY: this._lastYDirection,
703
- tickedX: this._tickedX,
704
- tickedY: this._tickedY,
705
- totalX: this._lastTotalX,
706
- totalY: this._lastTotalY
707
- };
708
- }
709
- _el;
710
- _eventTarget;
711
- _isDocumentElement = false;
712
- _isBodyElement = false;
713
- _isRootElement = false;
714
- _state = ScrollerState.Pending;
715
- _containerWidth = 0;
716
- _containerHeight = 0;
717
- _scrollWidth = 0;
718
- _scrollHeight = 0;
719
- _scrollTop = 0;
720
- _scrollRight = 0;
721
- _scrollBottom = 0;
722
- _scrollLeft = 0;
723
- _lastAxis;
724
- _lastDirection;
725
- _lastYDirection = "top";
726
- _lastXDirection = "left";
727
- _nowScrolling = false;
728
- _readyResolvers = [];
729
- _scrollingJudgeTimerId = null;
730
- _startX = 0;
731
- _startY = 0;
732
- _tickedX = 0;
733
- _tickedY = 0;
734
- _lastTotalX = 0;
735
- _lastTotalY = 0;
736
- _scrollListener;
737
- _resizeListener;
738
- _resizeObserver;
739
- _scrollToResult = null;
740
- _observers = [];
741
- _scrollStoppers = [];
742
- _scrollSizeObserverPollingId = null;
743
- _scrollSizeObserverSuspended = false;
744
- _visibilityListener;
745
- /**
746
- * Scrollerインスタンスを作成します。
747
- * コンテキストとなるElementをこの時点で指定するか否かは任意です。
748
- *
749
- * @param settingOrElementOrQueryString - 任意です。{@link ScrollerSetting}か Element（or cssクエリセレクタ文字列）を直接指定します。この時点でElementを指定しない場合は、[[setElement]]を実行するまでインスタンスは動作しません。
750
- */
751
- constructor(settingOrElementOrQueryString = {}) {
752
- super();
753
- const convertedSetting = typeof settingOrElementOrQueryString === "string" || settingOrElementOrQueryString === null || IN_WINDOW && settingOrElementOrQueryString instanceof Element ? settingOrElementOrQueryString = { el: settingOrElementOrQueryString } : settingOrElementOrQueryString;
754
- if (convertedSetting.scrollingJudgeInterval !== void 0) this.scrollingJudgeInterval = convertedSetting.scrollingJudgeInterval;
755
- if (convertedSetting.baseAxis) this.baseAxis = convertedSetting.baseAxis;
756
- this._lastAxis = this.baseAxis;
757
- const { scrollSizeObserver } = convertedSetting;
758
- if (scrollSizeObserver) this.scrollSizeObserver = {
759
- interval: 500,
760
- width: true,
761
- height: true,
762
- ...scrollSizeObserver
763
- };
764
- this._visibilityListener = () => {
765
- if (visibilityManager.isVisible) {
766
- this.update();
767
- if (this._scrollSizeObserverSuspended) {
768
- this._scrollSizeObserverSuspended = false;
769
- this._startScrollSizeObserver();
770
- }
771
- } else {
772
- this._scrollSizeObserverSuspended = this._scrollSizeObserverPollingId !== null;
773
- this._stopScrollSizeObserver();
774
- }
775
- };
776
- this._lastDirection = this._lastAxis === "y" ? "top" : "left";
777
- if (!IN_WINDOW) return;
778
- visibilityManager.change(this._visibilityListener);
779
- this.setElement(convertedSetting.el);
780
- }
781
- /**
782
- * インスタンスにElementを設定します。特別な理由（SSRの利用等）によりコンストラクタでElementを指定できない場合、
783
- * 本メソッドを利用しブラウザコンテキスト配下で本メソッドを実行してください。
784
- * @param el - Element、もしくはCSSクエリセレクタ文字列を指定します。
785
- */
786
- setElement(el) {
787
- if (el === null) return;
788
- if (!IN_WINDOW) logger.error("Element can be set only when it is under DOM context.");
789
- this.stop();
790
- let _el;
791
- if (typeof el === "string") _el = document.querySelector(el);
792
- else _el = el || document.scrollingElement;
793
- if (!_el) {
794
- const message = "missing scrolling element";
795
- logger.error(message, el);
796
- throw new Error(message);
797
- }
798
- this._el = _el;
799
- this._isDocumentElement = isDocumentElement(_el);
800
- this._isBodyElement = isBodyElement$1(_el);
801
- this._isRootElement = this._isDocumentElement || this._isBodyElement;
802
- this._eventTarget = this._isDocumentElement || this._isBodyElement ? window : this._el;
803
- this._setup();
804
- }
805
- _scrollToElementAdditionalOffset;
806
- setScrollToElementAdditionalOffset(offset) {
807
- this._scrollToElementAdditionalOffset = offset;
808
- }
809
- deleteScrollToElementAdditionalOffset() {
810
- delete this._scrollToElementAdditionalOffset;
811
- }
812
- /**
813
- * インスタンスが実行可能になった際にresolveされるPromiseインスタンスを返却します。
814
- */
815
- ready() {
816
- this._checkDestroyed();
817
- if (!this.isPending) return Promise.resolve();
818
- return new Promise((resolve) => this._readyResolvers.push(resolve));
819
- }
820
- /**
821
- * インスタンスの動作を開始します。本インスタンスはElementが設定され初期化された際に自動で動作を開始しますが、
822
- * [[Scroller.stop]]メソッドを利用し動作を停止した後に再開する場合に本メソッドを利用します。
823
- */
824
- async start() {
825
- this._checkDestroyed();
826
- if (this.isRunning) return;
827
- await this.ready();
828
- this._startListeners();
829
- this._setState(ScrollerState.Running);
830
- }
831
- /**
832
- * インスタンスの動作（スクロール、リサイズイベントの検知等）を停止します。
833
- * 何らかの理由で動作を停止させたい場合に利用してください。
834
- * 本メソッドを実行後もインスタンス内の状態は保持されたままです。
835
- * 完全にインスタンスを破棄するためには[[Scroller.destroy]]を利用してください。
836
- */
837
- stop() {
838
- this._checkDestroyed();
839
- if (!this.isRunning) return;
840
- this._stopListeners();
841
- this._setState(ScrollerState.Ready);
842
- }
843
- /**
844
- * インスタンスの動作を停止し、内部情報を完全に破棄します。
845
- * これに伴い、スクロール中であった場合にはキャンセルされ、以後イベント通知は完全に行われません。
846
- * また[[Scroller.start]]メソッドでの再利用も不可となります。
847
- * 本インスタンスの利用を完全に停止する場合に必ず実行し、利用側のオブジェクト等において本インスタンスへの参照を完全に削除してください。
848
- * 本メソッドはSPA等でのサービスにおいては意識的に実行する事を強く推奨します。
849
- */
850
- destroy() {
851
- if (this.isDestroyed) return;
852
- this.stop();
853
- this.cancel();
854
- this._readyResolvers = [];
855
- this._scrollStoppers = [];
856
- this._scrollEnable();
857
- this._observers = [];
858
- visibilityManager.remove(this._visibilityListener);
859
- delete this._el;
860
- delete this._eventTarget;
861
- delete this._scrollListener;
862
- delete this._resizeListener;
863
- delete this._resizeObserver;
864
- delete this._scrollToResult;
865
- delete this._visibilityListener;
866
- this.deleteScrollToElementAdditionalOffset();
867
- this._setState(ScrollerState.Destroyed);
868
- this.offAll();
869
- }
870
- /**
871
- * インスタンス内部のスクロール量や、Elementのサイズを強制的に更新します。
872
- * 基本的に利用が必要なケースはありませんが、何らかの理由で更新をトリガーしたい場合に利用します。
873
- */
874
- update() {
875
- this._update();
876
- }
877
- /**
878
- * インスタンス内の情報をjsonオブジェクトとして返却します。
879
- * 情報の詳細は[[ScrollerObserver]]を参照してください。
880
- */
881
- toJSON() {
882
- const json = {};
883
- for (const key of scrollerObservableKeys) json[key] = this[key];
884
- return json;
885
- }
886
- /**
887
- * [[Scroller.toJSON]]の情報を文字列として返却します。
888
- */
889
- toString() {
890
- return JSON.stringify(this.toJSON());
891
- }
892
- /**
893
- * 本インスタンスの情報を購読するためのオブジェクトを設定する事で、
894
- * インスタンスの内部情報が変更される度にパラメータが同期されます。
895
- * 設定するオブジェクトは[[ScrollerObserver]]のインターフェースを満たしていれば内容は問いません。
896
- * 本機能により同期される方法は単純にオブジェクトプロパティへの変数代入です。
897
- * 従って対象となるプロパティをgetterとして実装（Ex: Vue computed等、、）しておく事により、
898
- * 同期を受け取るオブジェクト側でパラメータ変更後の動作をリアクティブに実装可能です。
899
- * @param observer - 同期させたいオブジェクト
900
- * @returns 同期を停止するためのメソッド
901
- */
902
- observe(observer) {
903
- if (!this._observers.includes(observer)) this._observers.push(observer);
904
- this._syncToObserver(observer);
905
- const unobserve = () => {
906
- this.unobserve(observer);
907
- };
908
- return unobserve;
909
- }
910
- /**
911
- * [[Scroller.observe]]でパラメータ同期中のオブジェクトを停止します。
912
- * [[Scroller.destroy]]実行時にも、同期中のオブジェクトは全停止されますが、destroy前に任意のタイミングで停止したい場合
913
- * 本メソッドを利用します。
914
- * @param observer - 同期中のオブジェクト
915
- */
916
- unobserve(observer) {
917
- const index = this._observers.indexOf(observer);
918
- if (index !== -1) this._observers.splice(index, 1);
919
- }
920
- /**
921
- * スクロール中であった場合、スクロールをキャンセルします。
922
- */
923
- cancel() {
924
- if (!this._scrollToResult) return;
925
- this._scrollToResult.cancel();
926
- this._clearScrollToResult();
927
- }
928
- /**
929
- * x, yの差分pxを指定しスクロールします。
930
- * メソッド、パラメータの詳細は[[scrollBy]]を参照してください。
931
- * @param diffX - 横移動量
932
- * @param diffY - 縦移動量
933
- * @param options - スクロールオプション
934
- */
935
- by(diffX, diffY, options) {
936
- return this._setScrollToResult(scrollBy(diffX, diffY, this._createMergedScrollOptions(options)));
937
- }
938
- /**
939
- * 指定の座標へスクロールします。
940
- * メソッド、パラメータの詳細は[[scrollTo]]を参照してください。
941
- * @param scrollPosition - 座標
942
- * @param options - スクロールオプション
943
- */
944
- to(scrollPosition, options) {
945
- return this._setScrollToResult(scrollTo(scrollPosition, this._createMergedScrollOptions(options)));
946
- }
947
- /**
948
- * 指定の要素の位置へスクロールします。
949
- * メソッド、パラメータの詳細は[[scrollToElement]]を参照してください。
950
- * オプションのx, yが未設定であった場合、[[Scroller.baseAxis]]により自動設定されます。
951
- * @param target - スクロール先の要素
952
- * @param options - スクロールオプション
953
- */
954
- toElement(target, options) {
955
- const merged = this._createMergedScrollToElementOptions(options);
956
- if (merged.x === void 0) merged.x = this.baseAxis === "x";
957
- if (merged.y === void 0) merged.y = this.baseAxis === "y";
958
- return this._setScrollToResult(scrollToElement(target, merged));
959
- }
960
- /**
961
- * 指定の辺へスクロールします。
962
- * メソッド、パラメータの詳細は[[scrollToSide]]を参照してください。
963
- * @param targets - スクロール先
964
- * @param options - スクロールオプション
965
- */
966
- toSide(targets, options) {
967
- return this._setScrollToResult(scrollToSide(targets, this._createMergedScrollOptions(options)));
968
- }
969
- /**
970
- * 上辺へスクロールします。
971
- * メソッド、パラメータの詳細は[[scrollToTop]]を参照してください。
972
- * @param options - スクロールオプション
973
- */
974
- toTop(options) {
975
- return this._setScrollToResult(scrollToTop(this._createMergedScrollOptions(options)));
976
- }
977
- /**
978
- * 右辺へスクロールします。
979
- * メソッド、パラメータの詳細は[[scrollToRight]]を参照してください。
980
- * @param options - スクロールオプション
981
- */
982
- toRight(options) {
983
- return this._setScrollToResult(scrollToRight(this._createMergedScrollOptions(options)));
984
- }
985
- /**
986
- * 下辺へスクロールします。
987
- * メソッド、パラメータの詳細は[[scrollToBottom]]を参照してください。
988
- * @param options - スクロールオプション
989
- */
990
- toBottom(options) {
991
- return this._setScrollToResult(scrollToBottom(this._createMergedScrollOptions(options)));
992
- }
993
- /**
994
- * 左辺へスクロールします。
995
- * メソッド、パラメータの詳細は[[scrollToLeft]]を参照してください。
996
- * @param options - スクロールオプション
997
- */
998
- toLeft(options) {
999
- return this._setScrollToResult(scrollToLeft(this._createMergedScrollOptions(options)));
1000
- }
1001
- /**
1002
- * 左上コーナーへスクロールします。
1003
- * メソッド、パラメータの詳細は[[scrollToLeftTop]]を参照してください。
1004
- * @param options - スクロールオプション
1005
- */
1006
- toLeftTop(options) {
1007
- return this._setScrollToResult(scrollToLeftTop(this._createMergedScrollOptions(options)));
1008
- }
1009
- /**
1010
- * 左下コーナーへスクロールします。
1011
- * メソッド、パラメータの詳細は[[scrollToLeftBottom]]を参照してください。
1012
- * @param options - スクロールオプション
1013
- */
1014
- toLeftBottom(options) {
1015
- return this._setScrollToResult(scrollToLeftBottom(this._createMergedScrollOptions(options)));
1016
- }
1017
- /**
1018
- * 右上コーナーへスクロールします。
1019
- * メソッド、パラメータの詳細は[[scrollToRightTop]]を参照してください。
1020
- * @param options - スクロールオプション
1021
- */
1022
- toRightTop(options) {
1023
- return this._setScrollToResult(scrollToRightTop(this._createMergedScrollOptions(options)));
1024
- }
1025
- /**
1026
- * 右下コーナーへスクロールします。
1027
- * メソッド、パラメータの詳細は[[scrollToRightBottom]]を参照してください。
1028
- * @param options - スクロールオプション
1029
- */
1030
- toRightBottom(options) {
1031
- return this._setScrollToResult(scrollToRightBottom(this._createMergedScrollOptions(options)));
1032
- }
1033
- /**
1034
- * スクロールの停止を要求します。
1035
- * @param stopper - 停止要求ソース
1036
- */
1037
- pushScrollStopper(stopper) {
1038
- if (!this._scrollStoppers.includes(stopper)) {
1039
- this._scrollStoppers.push(stopper);
1040
- if (this._scrollStoppers.length === 1) {
1041
- this._updateScrollable();
1042
- this._syncToObservers(["scrollEnabled"]);
1043
- }
1044
- }
1045
- return () => {
1046
- this.removeScrollStopper(stopper);
1047
- };
1048
- }
1049
- /**
1050
- * スクロールの停止要求を解除します。<br>
1051
- * 別のプロセスにより異なる[[ScrollStopper]]が登録されている場合、
1052
- * スクロールは再開されない事に注意してください。
1053
- * @param stopper - 停止要求ソース
1054
- */
1055
- removeScrollStopper(stopper) {
1056
- const index = this._scrollStoppers.indexOf(stopper);
1057
- if (index !== -1) {
1058
- this._scrollStoppers.splice(index, 1);
1059
- if (this._scrollStoppers.length === 0) {
1060
- this._updateScrollable();
1061
- this._syncToObservers(["scrollEnabled"]);
1062
- }
1063
- }
1064
- }
1065
- async _setup() {
1066
- this._updateScrollable();
1067
- this._update();
1068
- this._setState(ScrollerState.Ready);
1069
- this.start();
1070
- this.emit("ready", void 0);
1071
- this._readyResolvers.forEach((resolve) => resolve());
1072
- this._readyResolvers = [];
1073
- }
1074
- _setState(state) {
1075
- if (this._state !== state) {
1076
- this._state = state;
1077
- this._syncToObservers([
1078
- "state",
1079
- "isPending",
1080
- "isReady",
1081
- "isRunning",
1082
- "isDestroyed"
1083
- ]);
1084
- this.emit("changeState", state);
1085
- }
1086
- }
1087
- _checkDestroyed() {
1088
- if (this.isDestroyed) {
1089
- const message = "already destroyed.";
1090
- logger.error(message);
1091
- throw new Error(message);
1092
- }
1093
- }
1094
- _update(width, height) {
1095
- this._updateContainerSize(width, height);
1096
- this._updateScrollSize();
1097
- this._updateScrollPositions();
1098
- }
1099
- _updateContainerSize(width, height) {
1100
- const { el, _isBodyElement } = this;
1101
- if (width === void 0) {
1102
- if (!el) return;
1103
- width = _isBodyElement ? document.documentElement.clientWidth : el.clientWidth;
1104
- }
1105
- if (height === void 0) {
1106
- if (!el) return;
1107
- height = _isBodyElement ? document.documentElement.clientHeight : el.clientHeight;
1108
- }
1109
- const { _containerWidth, _containerHeight } = this;
1110
- this._containerWidth = width;
1111
- this._containerHeight = height;
1112
- if (width !== _containerWidth || height !== _containerHeight) {
1113
- this._syncToObservers([
1114
- "containerWidth",
1115
- "containerHeight",
1116
- "scrollableX",
1117
- "scrollableY"
1118
- ]);
1119
- this.emit("resize", {
1120
- width,
1121
- height
1122
- });
1123
- }
1124
- }
1125
- _updateScrollSize() {
1126
- const { el, _scrollWidth, _scrollHeight } = this;
1127
- if (!el) return;
1128
- this._scrollWidth = el.scrollWidth;
1129
- this._scrollHeight = el.scrollHeight;
1130
- if (_scrollWidth !== this._scrollWidth || _scrollHeight !== this._scrollHeight) this._syncToObservers([
1131
- "scrollWidth",
1132
- "scrollHeight",
1133
- "scrollableX",
1134
- "scrollableY"
1135
- ]);
1136
- }
1137
- _startScrollSizeObserver() {
1138
- if (!IN_WINDOW) return;
1139
- this._stopScrollSizeObserver();
1140
- if (this.scrollSizeObserver) this._scrollSizeObserverPollingId = window.setInterval(() => {
1141
- if (!this.scrollSizeObserver || this.isDestroyed) {
1142
- this._stopScrollSizeObserver();
1143
- return;
1144
- }
1145
- this._updateScrollSize();
1146
- }, this.scrollSizeObserver.interval);
1147
- }
1148
- _stopScrollSizeObserver() {
1149
- if (this._scrollSizeObserverPollingId !== null) {
1150
- clearInterval(this._scrollSizeObserverPollingId);
1151
- this._scrollSizeObserverPollingId = null;
1152
- }
1153
- }
1154
- _updateScrollPositions() {
1155
- if (!this.el) return;
1156
- this._scrollTop = this.el.scrollTop;
1157
- this._scrollLeft = this.el.scrollLeft;
1158
- this._scrollBottom = this._scrollHeight - this._scrollTop - this._containerHeight;
1159
- this._scrollRight = this._scrollWidth - this._scrollLeft - this._containerWidth;
1160
- this._syncToObservers([
1161
- "scrollTop",
1162
- "scrollRight",
1163
- "scrollBottom",
1164
- "scrollLeft"
1165
- ]);
1166
- }
1167
- _startListeners() {
1168
- this._stopListeners();
1169
- this._scrollListener = () => {
1170
- this._onScroll();
1171
- };
1172
- this._eventTarget.addEventListener("scroll", this._scrollListener, false);
1173
- if (this._isRootElement) {
1174
- this._resizeListener = () => {
1175
- this._onResize();
1176
- };
1177
- window.addEventListener("resize", this._resizeListener, false);
1178
- } else {
1179
- this._resizeObserver = new ResizeObserver((entries) => {
1180
- for (const entry of entries) {
1181
- const { width, height } = entry.contentRect;
1182
- this._onResize(width, height);
1183
- }
1184
- });
1185
- this._el && this._resizeObserver.observe(this._el);
1186
- }
1187
- if (visibilityManager.isVisible) {
1188
- this._scrollSizeObserverSuspended = false;
1189
- this._startScrollSizeObserver();
1190
- } else this._scrollSizeObserverSuspended = true;
1191
- }
1192
- _stopListeners() {
1193
- if (this._scrollListener) {
1194
- this._eventTarget.removeEventListener("scroll", this._scrollListener, false);
1195
- delete this._scrollListener;
1196
- }
1197
- if (this._resizeListener) {
1198
- if (this._isDocumentElement) {
1199
- window.removeEventListener("resize", this._resizeListener, false);
1200
- delete this._resizeListener;
1201
- }
1202
- }
1203
- if (this._resizeObserver && this._el) {
1204
- this._resizeObserver.unobserve(this._el);
1205
- this._resizeObserver.disconnect();
1206
- delete this._resizeObserver;
1207
- }
1208
- }
1209
- _clearScrollingJudgeTimer() {
1210
- if (this._scrollingJudgeTimerId !== null) {
1211
- clearTimeout(this._scrollingJudgeTimerId);
1212
- this._scrollingJudgeTimerId = null;
1213
- }
1214
- }
1215
- _onResize(width, height) {
1216
- this._update(width, height);
1217
- }
1218
- _triggerScrollTick(event) {
1219
- const { _nowScrolling } = this;
1220
- if (event === "scrollStart") {
1221
- this._startX = this._scrollLeft;
1222
- this._startY = this._scrollTop;
1223
- this._lastTotalX = 0;
1224
- this._lastTotalY = 0;
1225
- this._nowScrolling = true;
1226
- } else if (event === "scrollEnd") this._nowScrolling = false;
1227
- if (_nowScrolling !== this._nowScrolling) this._syncToObservers("nowScrolling");
1228
- this.emit(event, this.lastPayload);
1229
- }
1230
- _onScroll() {
1231
- if (!this.scrollEnabled && this._el) {
1232
- this._el.scrollLeft = this._scrollLeft;
1233
- this._el.scrollTop = this._scrollTop;
1234
- return;
1235
- }
1236
- const { _scrollTop, _scrollLeft, _lastAxis, _lastDirection, _lastXDirection, _lastYDirection } = this;
1237
- this._updateScrollPositions();
1238
- const tickedX = this._scrollLeft - _scrollLeft;
1239
- const tickedY = this._scrollTop - _scrollTop;
1240
- this._tickedX = tickedX;
1241
- this._tickedY = tickedY;
1242
- if (tickedX === tickedY) this._lastAxis = this.baseAxis;
1243
- else this._lastAxis = Math.abs(tickedX) > Math.abs(tickedY) ? "x" : "y";
1244
- if (_scrollTop < this._scrollTop) this._lastYDirection = "bottom";
1245
- else if (_scrollTop > this._scrollTop) this._lastYDirection = "top";
1246
- if (_scrollLeft < this._scrollLeft) this._lastXDirection = "right";
1247
- else if (_scrollLeft > this._scrollLeft) this._lastXDirection = "left";
1248
- this._lastDirection = this._lastAxis === "y" ? this._lastYDirection : this._lastXDirection;
1249
- const axisIsChanged = this._lastAxis !== _lastAxis;
1250
- const lastXDirectionIsChanged = this._lastXDirection !== _lastXDirection;
1251
- const lastYDirectionIsChanged = this._lastYDirection !== _lastYDirection;
1252
- const lastDirectionIsChanged = this._lastDirection !== _lastDirection;
1253
- if (axisIsChanged) this.emit("changeAxis", this._lastAxis);
1254
- if (lastXDirectionIsChanged) this.emit("changeLastXDirection", this._lastXDirection);
1255
- if (lastYDirectionIsChanged) this.emit("changeLastYDirection", this._lastYDirection);
1256
- if (lastDirectionIsChanged) this.emit("changeLastDirection", this._lastDirection);
1257
- if (axisIsChanged || lastXDirectionIsChanged || lastYDirectionIsChanged || lastDirectionIsChanged) this._syncToObservers([
1258
- "lastAxis",
1259
- "lastDirection",
1260
- "lastYDirection",
1261
- "lastXDirection"
1262
- ]);
1263
- if (this._nowScrolling) if (axisIsChanged || _lastAxis === "y" && lastYDirectionIsChanged || _lastAxis === "x" && lastXDirectionIsChanged) this._triggerScrollTick("scrollEnd");
1264
- else {
1265
- this._lastTotalX = this._scrollLeft - this._startX;
1266
- this._lastTotalY = this._scrollTop - this._startY;
1267
- this._triggerScrollTick("scroll");
1268
- }
1269
- if (!this._nowScrolling) {
1270
- this._updateScrollSize();
1271
- this._triggerScrollTick("scrollStart");
1272
- }
1273
- this._clearScrollingJudgeTimer();
1274
- this._scrollingJudgeTimerId = window.setTimeout(() => {
1275
- this._triggerScrollTick("scrollEnd");
1276
- }, this.scrollingJudgeInterval);
1277
- }
1278
- _syncToObserver(observer, keys = scrollerObservableKeys) {
1279
- for (const key of keys) observer[key] = this[key];
1280
- }
1281
- _syncToObservers(keys) {
1282
- if (this._observers.length === 0) return;
1283
- keys = typeof keys === "string" ? [keys] : keys;
1284
- for (const observer of this._observers) this._syncToObserver(observer, keys);
1285
- }
1286
- _checkElement() {
1287
- const { _el } = this;
1288
- if (!_el) {
1289
- const message = "missing element";
1290
- logger.error(message);
1291
- throw new Error(message);
1292
- }
1293
- return _el;
1294
- }
1295
- _createMergedScrollOptions(source) {
1296
- return {
1297
- container: this._checkElement(),
1298
- ...this.scrollSettingsDefaults,
1299
- ...source
1300
- };
1301
- }
1302
- _createMergedScrollToElementOptions(source) {
1303
- const merged = {
1304
- container: this._checkElement(),
1305
- ...this.scrollToElementSettingsDefaults,
1306
- ...source
1307
- };
1308
- let { _scrollToElementAdditionalOffset: additionalOffset } = this;
1309
- if (!additionalOffset) return merged;
1310
- if (typeof additionalOffset === "function") additionalOffset = additionalOffset(this);
1311
- if (!additionalOffset) return merged;
1312
- if (typeof additionalOffset === "number") additionalOffset = {
1313
- x: additionalOffset,
1314
- y: additionalOffset
1315
- };
1316
- let { offset } = merged;
1317
- if (!offset) {
1318
- merged.offset = additionalOffset;
1319
- return merged;
1320
- }
1321
- if (typeof offset === "number") offset = {
1322
- x: offset,
1323
- y: offset
1324
- };
1325
- offset.x = (offset.x || 0) + (additionalOffset.x || 0);
1326
- offset.y = (offset.y || 0) + (additionalOffset.y || 0);
1327
- merged.offset = offset;
1328
- return merged;
1329
- }
1330
- _clearScrollToResult() {
1331
- if (!this._scrollToResult) return;
1332
- this._scrollToResult = null;
1333
- }
1334
- _setScrollToResult(result) {
1335
- this._scrollToResult = result;
1336
- result.promise.then(() => {
1337
- this._clearScrollToResult();
1338
- });
1339
- return result;
1340
- }
1341
- _updateScrollable() {
1342
- if (this.scrollEnabled) this._scrollEnable();
1343
- else this._scrollDisable();
1344
- }
1345
- _scrollEnable() {
1346
- enableScroll(this._checkElement());
1347
- }
1348
- _scrollDisable() {
1349
- const el = this._checkElement();
1350
- this.cancel();
1351
- disableScroll(el);
1352
- }
473
+ /**
474
+ * Scrollerクラスの状態を監視＆同期するオブジェクトが
475
+ * 保有すべきプロパティ一のキーの配列です。
476
+ */
477
+ static scrollerObservableKeys = scrollerObservableKeys;
478
+ /**
479
+ * Scrollerの状態を示すenum値です。
480
+ * {@link ScrollerState}
481
+ */
482
+ static States = ScrollerState;
483
+ /**
484
+ * スクロールを検知してから、移動がなくなった際に、何ms後にスクロール終了と判定するかのインターバル値を示します。
485
+ * デフォルトは500です。
486
+ */
487
+ scrollingJudgeInterval = 500;
488
+ /**
489
+ * 縦、横のどちらのスクロールを基準とするかを示します。
490
+ * デフォルトはyです。<br>
491
+ * この設定は[[Scroller.toElement]]のデフォルト値にも影響します。
492
+ */
493
+ baseAxis = "y";
494
+ /**
495
+ * スクロール系メソッド[[Scroller.to]]等を利用する際のデフォルトの設定を示します。
496
+ */
497
+ scrollSettingsDefaults = { ...defaultBaseSettings };
498
+ /**
499
+ * [[Scroller.toElement]]のデフォルトオプションの設定を示します。
500
+ */
501
+ scrollToElementSettingsDefaults = {
502
+ ...scrollToElementSettingsDefaults
503
+ };
504
+ scrollSizeObserver;
505
+ /**
506
+ * 設定されたElement要素です。
507
+ * 初期化が完了していない時には本getterはundefinedを返却する事に注意してください。
508
+ */
509
+ get el() {
510
+ return this._el;
511
+ }
512
+ /**
513
+ * 現在の状態です。<br>
514
+ * {@link ScrollerState}
515
+ */
516
+ get state() {
517
+ return this._state;
518
+ }
519
+ /**
520
+ * 未初期化である場合trueを示します。
521
+ */
522
+ get isPending() {
523
+ return this._state === "pending" /* Pending */;
524
+ }
525
+ /**
526
+ * 初期化済み＆停止状態である場合trueを示します。
527
+ */
528
+ get isReady() {
529
+ return this._state === "ready" /* Ready */;
530
+ }
531
+ /**
532
+ * 初期化済み＆動作中である場合trueを示します。
533
+ */
534
+ get isRunning() {
535
+ return this._state === "running" /* Running */;
536
+ }
537
+ /**
538
+ * インスタンスが破棄済みである場合trueを示します。
539
+ */
540
+ get isDestroyed() {
541
+ return this._state === "destroyed" /* Destroyed */;
542
+ }
543
+ /**
544
+ * スクロールの有効状態を取得します
545
+ */
546
+ get scrollEnabled() {
547
+ return this._scrollStoppers.length === 0;
548
+ }
549
+ /**
550
+ * スクロール要素の幅を示します。
551
+ */
552
+ get containerWidth() {
553
+ return this._containerWidth;
554
+ }
555
+ /**
556
+ * スクロール要素の高さを示します。
557
+ */
558
+ get containerHeight() {
559
+ return this._containerHeight;
560
+ }
561
+ /**
562
+ * スクロール要素内のコンテンツの幅を示します。
563
+ */
564
+ get scrollWidth() {
565
+ return this._scrollWidth;
566
+ }
567
+ /**
568
+ * スクロール要素内のコンテンツの高さを示します。
569
+ */
570
+ get scrollHeight() {
571
+ return this._scrollHeight;
572
+ }
573
+ /**
574
+ * x軸にスクロール可能な場合trueを示します
575
+ */
576
+ get scrollableX() {
577
+ return this._scrollWidth > this._containerWidth;
578
+ }
579
+ /**
580
+ * y軸にスクロール可能な場合trueを示します
581
+ */
582
+ get scrollableY() {
583
+ return this._scrollHeight > this._containerHeight;
584
+ }
585
+ /**
586
+ * 現在の上辺からのスクロール量を示します。
587
+ */
588
+ get scrollTop() {
589
+ return this._scrollTop;
590
+ }
591
+ set scrollTop(scrollTop) {
592
+ if (!this.el) return;
593
+ this.el.scrollTop = scrollTop;
594
+ }
595
+ /**
596
+ * 現在の右辺からのスクロール量を示します。
597
+ */
598
+ get scrollRight() {
599
+ return this._scrollRight;
600
+ }
601
+ set scrollRight(scrollRight) {
602
+ if (!this.el) return;
603
+ this.el.scrollLeft = this._scrollWidth - this._containerWidth - scrollRight;
604
+ }
605
+ /**
606
+ * 現在の下辺からのスクロール量を示します。
607
+ */
608
+ get scrollBottom() {
609
+ return this._scrollBottom;
610
+ }
611
+ set scrollBottom(scrollBottom) {
612
+ if (!this.el) return;
613
+ this.el.scrollTop = this._scrollHeight - this._containerHeight - scrollBottom;
614
+ }
615
+ /**
616
+ * 現在の左辺からのスクロール量を示します。
617
+ */
618
+ get scrollLeft() {
619
+ return this._scrollLeft;
620
+ }
621
+ set scrollLeft(scrollLeft) {
622
+ if (!this.el) return;
623
+ this.el.scrollLeft = scrollLeft;
624
+ }
625
+ /**
626
+ * 現在スクロール中である場合trueを示します。
627
+ */
628
+ get nowScrolling() {
629
+ return this._nowScrolling;
630
+ }
631
+ /**
632
+ * 最後に検知したスクロールの軸を示します。
633
+ */
634
+ get lastAxis() {
635
+ return this._lastAxis;
636
+ }
637
+ /**
638
+ * 最後に検知したスクロールの方向を示します。
639
+ */
640
+ get lastDirection() {
641
+ return this._lastDirection;
642
+ }
643
+ /**
644
+ * 最後に検知したスクロールの垂直方向を示します。
645
+ */
646
+ get lastYDirection() {
647
+ return this._lastYDirection;
648
+ }
649
+ /**
650
+ * 最後に検知したスクロールの水平方向を示します。
651
+ */
652
+ get lastXDirection() {
653
+ return this._lastXDirection;
654
+ }
655
+ /**
656
+ * 最後に検知したスクロールにより通知した情報を示します。
657
+ */
658
+ get lastPayload() {
659
+ return {
660
+ top: this._scrollTop,
661
+ left: this._scrollLeft,
662
+ bottom: this._scrollBottom,
663
+ right: this._scrollRight,
664
+ axis: this._lastAxis,
665
+ direction: this._lastDirection,
666
+ directionX: this._lastXDirection,
667
+ directionY: this._lastYDirection,
668
+ tickedX: this._tickedX,
669
+ tickedY: this._tickedY,
670
+ totalX: this._lastTotalX,
671
+ totalY: this._lastTotalY
672
+ };
673
+ }
674
+ _el;
675
+ _eventTarget;
676
+ _isDocumentElement = false;
677
+ _isBodyElement = false;
678
+ _isRootElement = false;
679
+ _state = "pending" /* Pending */;
680
+ _containerWidth = 0;
681
+ _containerHeight = 0;
682
+ _scrollWidth = 0;
683
+ _scrollHeight = 0;
684
+ _scrollTop = 0;
685
+ _scrollRight = 0;
686
+ _scrollBottom = 0;
687
+ _scrollLeft = 0;
688
+ _lastAxis;
689
+ _lastDirection;
690
+ _lastYDirection = "top";
691
+ _lastXDirection = "left";
692
+ _nowScrolling = false;
693
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
694
+ _readyResolvers = [];
695
+ _scrollingJudgeTimerId = null;
696
+ _startX = 0;
697
+ _startY = 0;
698
+ _tickedX = 0;
699
+ _tickedY = 0;
700
+ _lastTotalX = 0;
701
+ _lastTotalY = 0;
702
+ _scrollListener;
703
+ _resizeListener;
704
+ _resizeObserver;
705
+ _scrollToResult = null;
706
+ _observers = [];
707
+ _scrollStoppers = [];
708
+ _scrollSizeObserverPollingId = null;
709
+ _scrollSizeObserverSuspended = false;
710
+ _visibilityListener;
711
+ /**
712
+ * Scrollerインスタンスを作成します。
713
+ * コンテキストとなるElementをこの時点で指定するか否かは任意です。
714
+ *
715
+ * @param settingOrElementOrQueryString - 任意です。{@link ScrollerSetting}か Element（or cssクエリセレクタ文字列）を直接指定します。この時点でElementを指定しない場合は、[[setElement]]を実行するまでインスタンスは動作しません。
716
+ */
717
+ constructor(settingOrElementOrQueryString = {}) {
718
+ super();
719
+ const convertedSetting = typeof settingOrElementOrQueryString === "string" || settingOrElementOrQueryString === null || IN_WINDOW && settingOrElementOrQueryString instanceof Element ? settingOrElementOrQueryString = {
720
+ el: settingOrElementOrQueryString
721
+ } : settingOrElementOrQueryString;
722
+ if (convertedSetting.scrollingJudgeInterval !== void 0)
723
+ this.scrollingJudgeInterval = convertedSetting.scrollingJudgeInterval;
724
+ if (convertedSetting.baseAxis) this.baseAxis = convertedSetting.baseAxis;
725
+ this._lastAxis = this.baseAxis;
726
+ const { scrollSizeObserver } = convertedSetting;
727
+ if (scrollSizeObserver) {
728
+ this.scrollSizeObserver = {
729
+ interval: 500,
730
+ width: true,
731
+ height: true,
732
+ ...scrollSizeObserver
733
+ };
734
+ }
735
+ this._visibilityListener = () => {
736
+ if (visibilityManager.isVisible) {
737
+ this.update();
738
+ if (this._scrollSizeObserverSuspended) {
739
+ this._scrollSizeObserverSuspended = false;
740
+ this._startScrollSizeObserver();
741
+ }
742
+ } else {
743
+ this._scrollSizeObserverSuspended = this._scrollSizeObserverPollingId !== null;
744
+ this._stopScrollSizeObserver();
745
+ }
746
+ };
747
+ this._lastDirection = this._lastAxis === "y" ? "top" : "left";
748
+ if (!IN_WINDOW) return;
749
+ visibilityManager.change(this._visibilityListener);
750
+ this.setElement(convertedSetting.el);
751
+ }
752
+ /**
753
+ * インスタンスにElementを設定します。特別な理由（SSRの利用等）によりコンストラクタでElementを指定できない場合、
754
+ * 本メソッドを利用しブラウザコンテキスト配下で本メソッドを実行してください。
755
+ * @param el - Element、もしくはCSSクエリセレクタ文字列を指定します。
756
+ */
757
+ setElement(el) {
758
+ if (el === null) return;
759
+ if (!IN_WINDOW)
760
+ logger.error("Element can be set only when it is under DOM context.");
761
+ this.stop();
762
+ let _el;
763
+ if (typeof el === "string") {
764
+ _el = document.querySelector(el);
765
+ } else {
766
+ _el = el || document.scrollingElement;
767
+ }
768
+ if (!_el) {
769
+ const message = "missing scrolling element";
770
+ logger.error(message, el);
771
+ throw new Error(message);
772
+ }
773
+ this._el = _el;
774
+ this._isDocumentElement = isDocumentElement(_el);
775
+ this._isBodyElement = isBodyElement(_el);
776
+ this._isRootElement = this._isDocumentElement || this._isBodyElement;
777
+ this._eventTarget = this._isDocumentElement || this._isBodyElement ? window : this._el;
778
+ this._setup();
779
+ }
780
+ _scrollToElementAdditionalOffset;
781
+ setScrollToElementAdditionalOffset(offset) {
782
+ this._scrollToElementAdditionalOffset = offset;
783
+ }
784
+ deleteScrollToElementAdditionalOffset() {
785
+ delete this._scrollToElementAdditionalOffset;
786
+ }
787
+ /**
788
+ * インスタンスが実行可能になった際にresolveされるPromiseインスタンスを返却します。
789
+ */
790
+ ready() {
791
+ this._checkDestroyed();
792
+ if (!this.isPending) return Promise.resolve();
793
+ return new Promise((resolve) => this._readyResolvers.push(resolve));
794
+ }
795
+ /**
796
+ * インスタンスの動作を開始します。本インスタンスはElementが設定され初期化された際に自動で動作を開始しますが、
797
+ * [[Scroller.stop]]メソッドを利用し動作を停止した後に再開する場合に本メソッドを利用します。
798
+ */
799
+ async start() {
800
+ this._checkDestroyed();
801
+ if (this.isRunning) return;
802
+ await this.ready();
803
+ this._startListeners();
804
+ this._setState("running" /* Running */);
805
+ }
806
+ /**
807
+ * インスタンスの動作（スクロール、リサイズイベントの検知等）を停止します。
808
+ * 何らかの理由で動作を停止させたい場合に利用してください。
809
+ * 本メソッドを実行後もインスタンス内の状態は保持されたままです。
810
+ * 完全にインスタンスを破棄するためには[[Scroller.destroy]]を利用してください。
811
+ */
812
+ stop() {
813
+ this._checkDestroyed();
814
+ if (!this.isRunning) return;
815
+ this._stopListeners();
816
+ this._setState("ready" /* Ready */);
817
+ }
818
+ /**
819
+ * インスタンスの動作を停止し、内部情報を完全に破棄します。
820
+ * これに伴い、スクロール中であった場合にはキャンセルされ、以後イベント通知は完全に行われません。
821
+ * また[[Scroller.start]]メソッドでの再利用も不可となります。
822
+ * 本インスタンスの利用を完全に停止する場合に必ず実行し、利用側のオブジェクト等において本インスタンスへの参照を完全に削除してください。
823
+ * 本メソッドはSPA等でのサービスにおいては意識的に実行する事を強く推奨します。
824
+ */
825
+ destroy() {
826
+ if (this.isDestroyed) return;
827
+ this.stop();
828
+ this.cancel();
829
+ this._readyResolvers = [];
830
+ this._scrollStoppers = [];
831
+ this._scrollEnable();
832
+ this._observers = [];
833
+ visibilityManager.remove(this._visibilityListener);
834
+ delete this._el;
835
+ delete this._eventTarget;
836
+ delete this._scrollListener;
837
+ delete this._resizeListener;
838
+ delete this._resizeObserver;
839
+ delete this._scrollToResult;
840
+ delete this._visibilityListener;
841
+ this.deleteScrollToElementAdditionalOffset();
842
+ this._setState("destroyed" /* Destroyed */);
843
+ this.offAll();
844
+ }
845
+ /**
846
+ * インスタンス内部のスクロール量や、Elementのサイズを強制的に更新します。
847
+ * 基本的に利用が必要なケースはありませんが、何らかの理由で更新をトリガーしたい場合に利用します。
848
+ */
849
+ update() {
850
+ this._update();
851
+ }
852
+ /**
853
+ * インスタンス内の情報をjsonオブジェクトとして返却します。
854
+ * 情報の詳細は[[ScrollerObserver]]を参照してください。
855
+ */
856
+ toJSON() {
857
+ const json = {};
858
+ for (const key of scrollerObservableKeys) {
859
+ json[key] = this[key];
860
+ }
861
+ return json;
862
+ }
863
+ /**
864
+ * [[Scroller.toJSON]]の情報を文字列として返却します。
865
+ */
866
+ toString() {
867
+ return JSON.stringify(this.toJSON());
868
+ }
869
+ /**
870
+ * 本インスタンスの情報を購読するためのオブジェクトを設定する事で、
871
+ * インスタンスの内部情報が変更される度にパラメータが同期されます。
872
+ * 設定するオブジェクトは[[ScrollerObserver]]のインターフェースを満たしていれば内容は問いません。
873
+ * 本機能により同期される方法は単純にオブジェクトプロパティへの変数代入です。
874
+ * 従って対象となるプロパティをgetterとして実装（Ex: Vue computed等、、）しておく事により、
875
+ * 同期を受け取るオブジェクト側でパラメータ変更後の動作をリアクティブに実装可能です。
876
+ * @param observer - 同期させたいオブジェクト
877
+ * @returns 同期を停止するためのメソッド
878
+ */
879
+ observe(observer) {
880
+ if (!this._observers.includes(observer)) {
881
+ this._observers.push(observer);
882
+ }
883
+ this._syncToObserver(observer);
884
+ const unobserve = () => {
885
+ this.unobserve(observer);
886
+ };
887
+ return unobserve;
888
+ }
889
+ /**
890
+ * [[Scroller.observe]]でパラメータ同期中のオブジェクトを停止します。
891
+ * [[Scroller.destroy]]実行時にも、同期中のオブジェクトは全停止されますが、destroy前に任意のタイミングで停止したい場合
892
+ * 本メソッドを利用します。
893
+ * @param observer - 同期中のオブジェクト
894
+ */
895
+ unobserve(observer) {
896
+ const index = this._observers.indexOf(observer);
897
+ if (index !== -1) {
898
+ this._observers.splice(index, 1);
899
+ }
900
+ }
901
+ /**
902
+ * スクロール中であった場合、スクロールをキャンセルします。
903
+ */
904
+ cancel() {
905
+ if (!this._scrollToResult) return;
906
+ this._scrollToResult.cancel();
907
+ this._clearScrollToResult();
908
+ }
909
+ /**
910
+ * x, yの差分pxを指定しスクロールします。
911
+ * メソッド、パラメータの詳細は[[scrollBy]]を参照してください。
912
+ * @param diffX - 横移動量
913
+ * @param diffY - 縦移動量
914
+ * @param options - スクロールオプション
915
+ */
916
+ by(diffX, diffY, options) {
917
+ return this._setScrollToResult(
918
+ scrollBy(diffX, diffY, this._createMergedScrollOptions(options))
919
+ );
920
+ }
921
+ /**
922
+ * 指定の座標へスクロールします。
923
+ * メソッド、パラメータの詳細は[[scrollTo]]を参照してください。
924
+ * @param scrollPosition - 座標
925
+ * @param options - スクロールオプション
926
+ */
927
+ to(scrollPosition, options) {
928
+ return this._setScrollToResult(
929
+ scrollTo(scrollPosition, this._createMergedScrollOptions(options))
930
+ );
931
+ }
932
+ /**
933
+ * 指定の要素の位置へスクロールします。
934
+ * メソッド、パラメータの詳細は[[scrollToElement]]を参照してください。
935
+ * オプションのx, yが未設定であった場合、[[Scroller.baseAxis]]により自動設定されます。
936
+ * @param target - スクロール先の要素
937
+ * @param options - スクロールオプション
938
+ */
939
+ toElement(target, options) {
940
+ const merged = this._createMergedScrollToElementOptions(options);
941
+ if (merged.x === void 0) merged.x = this.baseAxis === "x";
942
+ if (merged.y === void 0) merged.y = this.baseAxis === "y";
943
+ return this._setScrollToResult(scrollToElement(target, merged));
944
+ }
945
+ /**
946
+ * 指定の辺へスクロールします。
947
+ * メソッド、パラメータの詳細は[[scrollToSide]]を参照してください。
948
+ * @param targets - スクロール先
949
+ * @param options - スクロールオプション
950
+ */
951
+ toSide(targets, options) {
952
+ return this._setScrollToResult(
953
+ scrollToSide(targets, this._createMergedScrollOptions(options))
954
+ );
955
+ }
956
+ /**
957
+ * 上辺へスクロールします。
958
+ * メソッド、パラメータの詳細は[[scrollToTop]]を参照してください。
959
+ * @param options - スクロールオプション
960
+ */
961
+ toTop(options) {
962
+ return this._setScrollToResult(
963
+ scrollToTop(this._createMergedScrollOptions(options))
964
+ );
965
+ }
966
+ /**
967
+ * 右辺へスクロールします。
968
+ * メソッド、パラメータの詳細は[[scrollToRight]]を参照してください。
969
+ * @param options - スクロールオプション
970
+ */
971
+ toRight(options) {
972
+ return this._setScrollToResult(
973
+ scrollToRight(this._createMergedScrollOptions(options))
974
+ );
975
+ }
976
+ /**
977
+ * 下辺へスクロールします。
978
+ * メソッド、パラメータの詳細は[[scrollToBottom]]を参照してください。
979
+ * @param options - スクロールオプション
980
+ */
981
+ toBottom(options) {
982
+ return this._setScrollToResult(
983
+ scrollToBottom(this._createMergedScrollOptions(options))
984
+ );
985
+ }
986
+ /**
987
+ * 左辺へスクロールします。
988
+ * メソッド、パラメータの詳細は[[scrollToLeft]]を参照してください。
989
+ * @param options - スクロールオプション
990
+ */
991
+ toLeft(options) {
992
+ return this._setScrollToResult(
993
+ scrollToLeft(this._createMergedScrollOptions(options))
994
+ );
995
+ }
996
+ /**
997
+ * 左上コーナーへスクロールします。
998
+ * メソッド、パラメータの詳細は[[scrollToLeftTop]]を参照してください。
999
+ * @param options - スクロールオプション
1000
+ */
1001
+ toLeftTop(options) {
1002
+ return this._setScrollToResult(
1003
+ scrollToLeftTop(this._createMergedScrollOptions(options))
1004
+ );
1005
+ }
1006
+ /**
1007
+ * 左下コーナーへスクロールします。
1008
+ * メソッド、パラメータの詳細は[[scrollToLeftBottom]]を参照してください。
1009
+ * @param options - スクロールオプション
1010
+ */
1011
+ toLeftBottom(options) {
1012
+ return this._setScrollToResult(
1013
+ scrollToLeftBottom(this._createMergedScrollOptions(options))
1014
+ );
1015
+ }
1016
+ /**
1017
+ * 右上コーナーへスクロールします。
1018
+ * メソッド、パラメータの詳細は[[scrollToRightTop]]を参照してください。
1019
+ * @param options - スクロールオプション
1020
+ */
1021
+ toRightTop(options) {
1022
+ return this._setScrollToResult(
1023
+ scrollToRightTop(this._createMergedScrollOptions(options))
1024
+ );
1025
+ }
1026
+ /**
1027
+ * 右下コーナーへスクロールします。
1028
+ * メソッド、パラメータの詳細は[[scrollToRightBottom]]を参照してください。
1029
+ * @param options - スクロールオプション
1030
+ */
1031
+ toRightBottom(options) {
1032
+ return this._setScrollToResult(
1033
+ scrollToRightBottom(this._createMergedScrollOptions(options))
1034
+ );
1035
+ }
1036
+ /**
1037
+ * スクロールの停止を要求します。
1038
+ * @param stopper - 停止要求ソース
1039
+ */
1040
+ pushScrollStopper(stopper) {
1041
+ if (!this._scrollStoppers.includes(stopper)) {
1042
+ this._scrollStoppers.push(stopper);
1043
+ if (this._scrollStoppers.length === 1) {
1044
+ this._updateScrollable();
1045
+ this._syncToObservers(["scrollEnabled"]);
1046
+ }
1047
+ }
1048
+ return () => {
1049
+ this.removeScrollStopper(stopper);
1050
+ };
1051
+ }
1052
+ /**
1053
+ * スクロールの停止要求を解除します。<br>
1054
+ * 別のプロセスにより異なる[[ScrollStopper]]が登録されている場合、
1055
+ * スクロールは再開されない事に注意してください。
1056
+ * @param stopper - 停止要求ソース
1057
+ */
1058
+ removeScrollStopper(stopper) {
1059
+ const index = this._scrollStoppers.indexOf(stopper);
1060
+ if (index !== -1) {
1061
+ this._scrollStoppers.splice(index, 1);
1062
+ if (this._scrollStoppers.length === 0) {
1063
+ this._updateScrollable();
1064
+ this._syncToObservers(["scrollEnabled"]);
1065
+ }
1066
+ }
1067
+ }
1068
+ async _setup() {
1069
+ this._updateScrollable();
1070
+ this._update();
1071
+ this._setState("ready" /* Ready */);
1072
+ this.start();
1073
+ this.emit("ready", void 0);
1074
+ this._readyResolvers.forEach((resolve) => resolve());
1075
+ this._readyResolvers = [];
1076
+ }
1077
+ _setState(state) {
1078
+ if (this._state !== state) {
1079
+ this._state = state;
1080
+ this._syncToObservers([
1081
+ "state",
1082
+ "isPending",
1083
+ "isReady",
1084
+ "isRunning",
1085
+ "isDestroyed"
1086
+ ]);
1087
+ this.emit("changeState", state);
1088
+ }
1089
+ }
1090
+ _checkDestroyed() {
1091
+ if (this.isDestroyed) {
1092
+ const message = "already destroyed.";
1093
+ logger.error(message);
1094
+ throw new Error(message);
1095
+ }
1096
+ }
1097
+ _update(width, height) {
1098
+ this._updateContainerSize(width, height);
1099
+ this._updateScrollSize();
1100
+ this._updateScrollPositions();
1101
+ }
1102
+ _updateContainerSize(width, height) {
1103
+ const { el, _isBodyElement } = this;
1104
+ if (width === void 0) {
1105
+ if (!el) return;
1106
+ width = _isBodyElement ? document.documentElement.clientWidth : el.clientWidth;
1107
+ }
1108
+ if (height === void 0) {
1109
+ if (!el) return;
1110
+ height = _isBodyElement ? document.documentElement.clientHeight : el.clientHeight;
1111
+ }
1112
+ const { _containerWidth, _containerHeight } = this;
1113
+ this._containerWidth = width;
1114
+ this._containerHeight = height;
1115
+ if (width !== _containerWidth || height !== _containerHeight) {
1116
+ this._syncToObservers([
1117
+ "containerWidth",
1118
+ "containerHeight",
1119
+ "scrollableX",
1120
+ "scrollableY"
1121
+ ]);
1122
+ this.emit("resize", { width, height });
1123
+ }
1124
+ }
1125
+ _updateScrollSize() {
1126
+ const { el, _scrollWidth, _scrollHeight } = this;
1127
+ if (!el) return;
1128
+ this._scrollWidth = el.scrollWidth;
1129
+ this._scrollHeight = el.scrollHeight;
1130
+ if (_scrollWidth !== this._scrollWidth || _scrollHeight !== this._scrollHeight) {
1131
+ this._syncToObservers([
1132
+ "scrollWidth",
1133
+ "scrollHeight",
1134
+ "scrollableX",
1135
+ "scrollableY"
1136
+ ]);
1137
+ }
1138
+ }
1139
+ _startScrollSizeObserver() {
1140
+ if (!IN_WINDOW) return;
1141
+ this._stopScrollSizeObserver();
1142
+ if (this.scrollSizeObserver) {
1143
+ this._scrollSizeObserverPollingId = window.setInterval(() => {
1144
+ if (!this.scrollSizeObserver || this.isDestroyed) {
1145
+ this._stopScrollSizeObserver();
1146
+ return;
1147
+ }
1148
+ this._updateScrollSize();
1149
+ }, this.scrollSizeObserver.interval);
1150
+ }
1151
+ }
1152
+ _stopScrollSizeObserver() {
1153
+ if (this._scrollSizeObserverPollingId !== null) {
1154
+ clearInterval(this._scrollSizeObserverPollingId);
1155
+ this._scrollSizeObserverPollingId = null;
1156
+ }
1157
+ }
1158
+ _updateScrollPositions() {
1159
+ if (!this.el) return;
1160
+ this._scrollTop = this.el.scrollTop;
1161
+ this._scrollLeft = this.el.scrollLeft;
1162
+ this._scrollBottom = this._scrollHeight - this._scrollTop - this._containerHeight;
1163
+ this._scrollRight = this._scrollWidth - this._scrollLeft - this._containerWidth;
1164
+ this._syncToObservers([
1165
+ "scrollTop",
1166
+ "scrollRight",
1167
+ "scrollBottom",
1168
+ "scrollLeft"
1169
+ ]);
1170
+ }
1171
+ _startListeners() {
1172
+ this._stopListeners();
1173
+ this._scrollListener = () => {
1174
+ this._onScroll();
1175
+ };
1176
+ this._eventTarget.addEventListener("scroll", this._scrollListener, false);
1177
+ if (this._isRootElement) {
1178
+ this._resizeListener = () => {
1179
+ this._onResize();
1180
+ };
1181
+ window.addEventListener("resize", this._resizeListener, false);
1182
+ } else {
1183
+ this._resizeObserver = new ResizeObserver((entries) => {
1184
+ for (const entry of entries) {
1185
+ const { width, height } = entry.contentRect;
1186
+ this._onResize(width, height);
1187
+ }
1188
+ });
1189
+ this._el && this._resizeObserver.observe(this._el);
1190
+ }
1191
+ if (visibilityManager.isVisible) {
1192
+ this._scrollSizeObserverSuspended = false;
1193
+ this._startScrollSizeObserver();
1194
+ } else {
1195
+ this._scrollSizeObserverSuspended = true;
1196
+ }
1197
+ }
1198
+ _stopListeners() {
1199
+ if (this._scrollListener) {
1200
+ this._eventTarget.removeEventListener(
1201
+ "scroll",
1202
+ this._scrollListener,
1203
+ false
1204
+ );
1205
+ delete this._scrollListener;
1206
+ }
1207
+ if (this._resizeListener) {
1208
+ if (this._isDocumentElement) {
1209
+ window.removeEventListener("resize", this._resizeListener, false);
1210
+ delete this._resizeListener;
1211
+ }
1212
+ }
1213
+ if (this._resizeObserver && this._el) {
1214
+ this._resizeObserver.unobserve(this._el);
1215
+ this._resizeObserver.disconnect();
1216
+ delete this._resizeObserver;
1217
+ }
1218
+ }
1219
+ _clearScrollingJudgeTimer() {
1220
+ if (this._scrollingJudgeTimerId !== null) {
1221
+ clearTimeout(this._scrollingJudgeTimerId);
1222
+ this._scrollingJudgeTimerId = null;
1223
+ }
1224
+ }
1225
+ _onResize(width, height) {
1226
+ this._update(width, height);
1227
+ }
1228
+ _triggerScrollTick(event) {
1229
+ const { _nowScrolling } = this;
1230
+ if (event === "scrollStart") {
1231
+ this._startX = this._scrollLeft;
1232
+ this._startY = this._scrollTop;
1233
+ this._lastTotalX = 0;
1234
+ this._lastTotalY = 0;
1235
+ this._nowScrolling = true;
1236
+ } else if (event === "scrollEnd") {
1237
+ this._nowScrolling = false;
1238
+ }
1239
+ if (_nowScrolling !== this._nowScrolling) {
1240
+ this._syncToObservers("nowScrolling");
1241
+ }
1242
+ this.emit(event, this.lastPayload);
1243
+ }
1244
+ _onScroll() {
1245
+ if (!this.scrollEnabled && this._el) {
1246
+ this._el.scrollLeft = this._scrollLeft;
1247
+ this._el.scrollTop = this._scrollTop;
1248
+ return;
1249
+ }
1250
+ const {
1251
+ _scrollTop,
1252
+ _scrollLeft,
1253
+ _lastAxis,
1254
+ _lastDirection,
1255
+ _lastXDirection,
1256
+ _lastYDirection
1257
+ } = this;
1258
+ this._updateScrollPositions();
1259
+ const tickedX = this._scrollLeft - _scrollLeft;
1260
+ const tickedY = this._scrollTop - _scrollTop;
1261
+ this._tickedX = tickedX;
1262
+ this._tickedY = tickedY;
1263
+ if (tickedX === tickedY) {
1264
+ this._lastAxis = this.baseAxis;
1265
+ } else {
1266
+ this._lastAxis = Math.abs(tickedX) > Math.abs(tickedY) ? "x" : "y";
1267
+ }
1268
+ if (_scrollTop < this._scrollTop) {
1269
+ this._lastYDirection = "bottom";
1270
+ } else if (_scrollTop > this._scrollTop) {
1271
+ this._lastYDirection = "top";
1272
+ }
1273
+ if (_scrollLeft < this._scrollLeft) {
1274
+ this._lastXDirection = "right";
1275
+ } else if (_scrollLeft > this._scrollLeft) {
1276
+ this._lastXDirection = "left";
1277
+ }
1278
+ this._lastDirection = this._lastAxis === "y" ? this._lastYDirection : this._lastXDirection;
1279
+ const axisIsChanged = this._lastAxis !== _lastAxis;
1280
+ const lastXDirectionIsChanged = this._lastXDirection !== _lastXDirection;
1281
+ const lastYDirectionIsChanged = this._lastYDirection !== _lastYDirection;
1282
+ const lastDirectionIsChanged = this._lastDirection !== _lastDirection;
1283
+ if (axisIsChanged) {
1284
+ this.emit("changeAxis", this._lastAxis);
1285
+ }
1286
+ if (lastXDirectionIsChanged) {
1287
+ this.emit("changeLastXDirection", this._lastXDirection);
1288
+ }
1289
+ if (lastYDirectionIsChanged) {
1290
+ this.emit("changeLastYDirection", this._lastYDirection);
1291
+ }
1292
+ if (lastDirectionIsChanged) {
1293
+ this.emit("changeLastDirection", this._lastDirection);
1294
+ }
1295
+ if (axisIsChanged || lastXDirectionIsChanged || lastYDirectionIsChanged || lastDirectionIsChanged) {
1296
+ this._syncToObservers([
1297
+ "lastAxis",
1298
+ "lastDirection",
1299
+ "lastYDirection",
1300
+ "lastXDirection"
1301
+ ]);
1302
+ }
1303
+ if (this._nowScrolling) {
1304
+ if (axisIsChanged || _lastAxis === "y" && lastYDirectionIsChanged || _lastAxis === "x" && lastXDirectionIsChanged) {
1305
+ this._triggerScrollTick("scrollEnd");
1306
+ } else {
1307
+ this._lastTotalX = this._scrollLeft - this._startX;
1308
+ this._lastTotalY = this._scrollTop - this._startY;
1309
+ this._triggerScrollTick("scroll");
1310
+ }
1311
+ }
1312
+ if (!this._nowScrolling) {
1313
+ this._updateScrollSize();
1314
+ this._triggerScrollTick("scrollStart");
1315
+ }
1316
+ this._clearScrollingJudgeTimer();
1317
+ this._scrollingJudgeTimerId = window.setTimeout(() => {
1318
+ this._triggerScrollTick("scrollEnd");
1319
+ }, this.scrollingJudgeInterval);
1320
+ }
1321
+ _syncToObserver(observer, keys = scrollerObservableKeys) {
1322
+ for (const key of keys) {
1323
+ observer[key] = this[key];
1324
+ }
1325
+ }
1326
+ _syncToObservers(keys) {
1327
+ if (this._observers.length === 0) return;
1328
+ keys = typeof keys === "string" ? [keys] : keys;
1329
+ for (const observer of this._observers) {
1330
+ this._syncToObserver(observer, keys);
1331
+ }
1332
+ }
1333
+ _checkElement() {
1334
+ const { _el } = this;
1335
+ if (!_el) {
1336
+ const message = "missing element";
1337
+ logger.error(message);
1338
+ throw new Error(message);
1339
+ }
1340
+ return _el;
1341
+ }
1342
+ _createMergedScrollOptions(source) {
1343
+ const el = this._checkElement();
1344
+ const merged = {
1345
+ container: el,
1346
+ ...this.scrollSettingsDefaults,
1347
+ ...source
1348
+ };
1349
+ return merged;
1350
+ }
1351
+ _createMergedScrollToElementOptions(source) {
1352
+ const el = this._checkElement();
1353
+ const merged = {
1354
+ container: el,
1355
+ ...this.scrollToElementSettingsDefaults,
1356
+ ...source
1357
+ };
1358
+ let { _scrollToElementAdditionalOffset: additionalOffset } = this;
1359
+ if (!additionalOffset) return merged;
1360
+ if (typeof additionalOffset === "function") {
1361
+ additionalOffset = additionalOffset(this);
1362
+ }
1363
+ if (!additionalOffset) return merged;
1364
+ if (typeof additionalOffset === "number") {
1365
+ additionalOffset = {
1366
+ x: additionalOffset,
1367
+ y: additionalOffset
1368
+ };
1369
+ }
1370
+ let { offset } = merged;
1371
+ if (!offset) {
1372
+ merged.offset = additionalOffset;
1373
+ return merged;
1374
+ }
1375
+ if (typeof offset === "number") {
1376
+ offset = {
1377
+ x: offset,
1378
+ y: offset
1379
+ };
1380
+ }
1381
+ offset.x = (offset.x || 0) + (additionalOffset.x || 0);
1382
+ offset.y = (offset.y || 0) + (additionalOffset.y || 0);
1383
+ merged.offset = offset;
1384
+ return merged;
1385
+ }
1386
+ _clearScrollToResult() {
1387
+ if (!this._scrollToResult) return;
1388
+ this._scrollToResult = null;
1389
+ }
1390
+ _setScrollToResult(result) {
1391
+ this._scrollToResult = result;
1392
+ result.promise.then(() => {
1393
+ this._clearScrollToResult();
1394
+ });
1395
+ return result;
1396
+ }
1397
+ _updateScrollable() {
1398
+ if (this.scrollEnabled) {
1399
+ this._scrollEnable();
1400
+ } else {
1401
+ this._scrollDisable();
1402
+ }
1403
+ }
1404
+ _scrollEnable() {
1405
+ enableScroll(this._checkElement());
1406
+ }
1407
+ _scrollDisable() {
1408
+ const el = this._checkElement();
1409
+ this.cancel();
1410
+ disableScroll(el);
1411
+ }
1353
1412
  };
1354
1413
 
1355
- //#endregion
1356
1414
  export { SCROLLABLE_KEY_CODES, Scroller, ScrollerState, defaultBaseSettings, defaultSettings, disableScroll, enableScroll, scrollBy, scrollTo, scrollToBottom, scrollToElement, scrollToElementSettingsDefaults, scrollToLeft, scrollToLeftBottom, scrollToLeftTop, scrollToRight, scrollToRightBottom, scrollToRightTop, scrollToSide, scrollToTop };
1415
+ //# sourceMappingURL=scroller.mjs.map
1357
1416
  //# sourceMappingURL=scroller.mjs.map