@inizioevoke/astro-core 1.3.6 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -38,7 +38,7 @@ if (innerWidth) {
|
|
|
38
38
|
contentAttrs.style = `width:${typeof innerWidth == 'number' || /^\d+$/.test(innerWidth) ? `${innerWidth}px` : innerWidth};`
|
|
39
39
|
}
|
|
40
40
|
---
|
|
41
|
-
<
|
|
41
|
+
<evo-scroll-container class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
|
|
42
42
|
<div class="evo-scroll-content" {...contentAttrs}>
|
|
43
43
|
<slot />
|
|
44
44
|
</div>
|
|
@@ -48,7 +48,7 @@ if (innerWidth) {
|
|
|
48
48
|
{horizontal && <div class="evo-scroll-track evo-scroll-track-x">
|
|
49
49
|
<div class="evo-scroll-thumb"></div>
|
|
50
50
|
</div>}
|
|
51
|
-
</
|
|
51
|
+
</evo-scroll-container>
|
|
52
52
|
|
|
53
53
|
<script>
|
|
54
54
|
import './ScrollContainer';
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
const intersectionObserver = new IntersectionObserver((entries) => {
|
|
4
|
+
entries.forEach((entry) => {
|
|
5
|
+
if (entry.isIntersecting) {
|
|
6
|
+
const sc = getScrollContainer(entry.target as HTMLElement);
|
|
7
|
+
if (sc) {
|
|
8
|
+
sc.refresh();
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
},
|
|
13
|
+
{ threshold: 0.1 }
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
17
|
+
const containers = new Set<IScrollContainer>();
|
|
18
|
+
mutations.forEach((mutation) => {
|
|
19
|
+
const sc = getScrollContainer(mutation.target as HTMLElement);
|
|
20
|
+
if (sc) {
|
|
21
|
+
containers.add(sc);
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
[...containers].forEach((container) => {
|
|
25
|
+
container.refresh();
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
|
|
1
29
|
export interface IScrollContainer {
|
|
2
30
|
scroll(args?: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' }): void;
|
|
3
31
|
getScroll(): { left: number, top: number }
|
|
@@ -5,72 +33,127 @@ export interface IScrollContainer {
|
|
|
5
33
|
refresh(): void;
|
|
6
34
|
}
|
|
7
35
|
|
|
8
|
-
interface ScrollbarSettings {
|
|
9
|
-
trackVisible?: boolean;
|
|
10
|
-
thumbHeight?: number;
|
|
11
|
-
}
|
|
12
36
|
|
|
13
|
-
class ScrollContainer implements IScrollContainer {
|
|
14
|
-
#container: HTMLElement & { evoScrollContainer: ScrollContainer };
|
|
15
|
-
#content
|
|
16
|
-
#track
|
|
17
|
-
#thumb
|
|
18
|
-
#isDragging: boolean;
|
|
19
|
-
#startY: number;
|
|
20
|
-
#startScrollTop: number;
|
|
37
|
+
export class ScrollContainer extends HTMLElement implements IScrollContainer {
|
|
38
|
+
// #container: HTMLElement & { evoScrollContainer: ScrollContainer };
|
|
39
|
+
#content!: HTMLElement;
|
|
40
|
+
#track!: HTMLElement;
|
|
41
|
+
#thumb!: HTMLElement;
|
|
42
|
+
#isDragging: boolean = false;
|
|
43
|
+
#startY: number = 0;
|
|
44
|
+
#startScrollTop: number = 0;
|
|
21
45
|
|
|
22
46
|
#scrollbarSettings: ScrollbarSettings = {};
|
|
23
47
|
#mouseupHandler: any = undefined;
|
|
24
48
|
#mousemoveHandler: any = undefined;
|
|
25
49
|
|
|
26
|
-
constructor(
|
|
50
|
+
constructor() {
|
|
51
|
+
super();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
connectedCallback() {
|
|
27
55
|
// const _this = this;
|
|
28
|
-
this.#container = container as HTMLElement & { evoScrollContainer: ScrollContainer };
|
|
29
|
-
this.#container.evoScrollContainer = this;
|
|
30
|
-
this.#content =
|
|
31
|
-
this.#track =
|
|
32
|
-
this.#thumb =
|
|
56
|
+
// this.#container = container as HTMLElement & { evoScrollContainer: ScrollContainer };
|
|
57
|
+
// this.#container.evoScrollContainer = this;
|
|
58
|
+
this.#content = this.querySelector('.evo-scroll-content') as HTMLElement;
|
|
59
|
+
this.#track = this.querySelector('.evo-scroll-track') as HTMLElement;
|
|
60
|
+
this.#thumb = this.querySelector('.evo-scroll-thumb') as HTMLElement;
|
|
33
61
|
this.#isDragging = false;
|
|
34
62
|
this.#startY = 0;
|
|
35
63
|
this.#startScrollTop = 0;
|
|
36
64
|
|
|
37
65
|
this.#thumb.addEventListener('mousedown', this.#thumbMouseDown.bind(this), { passive: true });
|
|
38
66
|
this.#content.addEventListener('scroll', this.#scrollContent.bind(this), { passive: true });
|
|
67
|
+
|
|
68
|
+
intersectionObserver.observe(this);
|
|
69
|
+
mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
|
|
70
|
+
|
|
71
|
+
window.addEventListener('resize', this.refresh.bind(this), { passive: true });
|
|
39
72
|
}
|
|
40
73
|
|
|
41
|
-
scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
74
|
+
// scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
|
|
75
|
+
// const current = this.getScroll();
|
|
76
|
+
// if (typeof left == 'string') {
|
|
77
|
+
// if (/^[\+\-]=?\d+/.test(left)) {
|
|
78
|
+
// left = current.left + parseInt(left.replace(/=/,''), 10);
|
|
79
|
+
// } else {
|
|
80
|
+
// left = parseInt(left, 10);
|
|
81
|
+
// }
|
|
82
|
+
// if (isNaN(left)) {
|
|
83
|
+
// left = undefined;
|
|
84
|
+
// }
|
|
85
|
+
// }
|
|
86
|
+
// if (typeof top == 'string') {
|
|
87
|
+
// if (/^[\+\-]=?\d+/.test(top)) {
|
|
88
|
+
// top = current.top + parseInt(top.replace(/=/,''), 10);
|
|
89
|
+
// } else {
|
|
90
|
+
// top = parseInt(top, 10);
|
|
91
|
+
// }
|
|
92
|
+
// if (isNaN(top)) {
|
|
93
|
+
// top = undefined;
|
|
94
|
+
// }
|
|
95
|
+
// }
|
|
96
|
+
// left = left ?? current.left;
|
|
97
|
+
// top = top ?? current.top;
|
|
98
|
+
// if (left < 0) {
|
|
99
|
+
// left = 0;
|
|
100
|
+
// }
|
|
101
|
+
// if (top < 0) {
|
|
102
|
+
// top = 0;
|
|
103
|
+
// }
|
|
104
|
+
// this.#content.scroll({ left: left, top: top, behavior });
|
|
105
|
+
// }
|
|
106
|
+
|
|
107
|
+
scroll(opts?: ScrollToOptions): void;
|
|
108
|
+
scroll(x: number, y: number): void;
|
|
109
|
+
scroll(...args: any[]) {
|
|
110
|
+
this.#content.scroll(...args);
|
|
72
111
|
}
|
|
73
112
|
|
|
113
|
+
scrollTo(opts?: ScrollToOptions): void;
|
|
114
|
+
scrollTo(x: number, y: number): void;
|
|
115
|
+
scrollTo(...args: any[]) {
|
|
116
|
+
this.scroll(...args);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
scrollBy(opts?: ScrollToOptions): void;
|
|
120
|
+
scrollBy(x: number, y: number): void;
|
|
121
|
+
scrollBy(...args: any[]) {
|
|
122
|
+
this.#content.scrollBy(...args);
|
|
123
|
+
// let opts: ScrollToOptions = {};
|
|
124
|
+
// if (args.length === 1) {
|
|
125
|
+
// opts = args[0] as ScrollToOptions;
|
|
126
|
+
// } else if (args.length == 2) {
|
|
127
|
+
// opts.left = args[0];
|
|
128
|
+
// opts.top = args[1];
|
|
129
|
+
// }
|
|
130
|
+
// const current = this.getScroll();
|
|
131
|
+
// opts.left = current.left + (opts.left ?? 0);
|
|
132
|
+
// opts.top = current.top + (opts.top ?? 0);
|
|
133
|
+
// this.scroll(opts);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
get scrollLeft() {
|
|
137
|
+
return this.#content.scrollLeft;
|
|
138
|
+
}
|
|
139
|
+
set scrollLeft(value: number) {
|
|
140
|
+
this.scroll({ left: value });
|
|
141
|
+
}
|
|
142
|
+
get scrollTop() {
|
|
143
|
+
return this.#content.scrollTop;
|
|
144
|
+
}
|
|
145
|
+
set scrollTop(value: number) {
|
|
146
|
+
this.scroll({ top: value });
|
|
147
|
+
}
|
|
148
|
+
get scrollWidth() {
|
|
149
|
+
return this.#content.scrollWidth;
|
|
150
|
+
}
|
|
151
|
+
get scrollHeight() {
|
|
152
|
+
return this.#content.scrollHeight;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
74
157
|
getScroll() {
|
|
75
158
|
return {
|
|
76
159
|
left: this.#content.scrollLeft,
|
|
@@ -80,7 +163,7 @@ class ScrollContainer implements IScrollContainer {
|
|
|
80
163
|
|
|
81
164
|
resize({ height }: { height?: number }) {
|
|
82
165
|
if (typeof height == 'number') {
|
|
83
|
-
this
|
|
166
|
+
this.style.height = `${height}px`;
|
|
84
167
|
refresh();
|
|
85
168
|
}
|
|
86
169
|
}
|
|
@@ -98,7 +181,7 @@ class ScrollContainer implements IScrollContainer {
|
|
|
98
181
|
|
|
99
182
|
#updateThumbSize() {
|
|
100
183
|
const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
|
|
101
|
-
const containerHeight = this
|
|
184
|
+
const containerHeight = this.clientHeight - getPaddingY(this);
|
|
102
185
|
const visibleRatio = containerHeight / scrollHeight;
|
|
103
186
|
const thumbHeight = visibleRatio * containerHeight;
|
|
104
187
|
if (this.#scrollbarSettings.thumbHeight != undefined) {
|
|
@@ -131,8 +214,8 @@ class ScrollContainer implements IScrollContainer {
|
|
|
131
214
|
if (this.#isDragging) {
|
|
132
215
|
const deltaY = e.clientY - this.#startY;
|
|
133
216
|
const scrollRatio =
|
|
134
|
-
(this.#content.scrollHeight - this
|
|
135
|
-
(this
|
|
217
|
+
(this.#content.scrollHeight - this.clientHeight) /
|
|
218
|
+
(this.clientHeight - this.#thumb.clientHeight);
|
|
136
219
|
this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
|
|
137
220
|
} else {
|
|
138
221
|
this.#mouseDetach();
|
|
@@ -149,12 +232,15 @@ class ScrollContainer implements IScrollContainer {
|
|
|
149
232
|
|
|
150
233
|
#scrollContent() {
|
|
151
234
|
const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
|
|
152
|
-
const containerHeight = this
|
|
235
|
+
const containerHeight = this.clientHeight - getPaddingY(this);
|
|
153
236
|
const scrollRatio = this.#content.scrollTop / (scrollHeight - containerHeight);
|
|
154
237
|
const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
|
|
155
238
|
this.#thumb.style.top = `${top}px`;
|
|
156
239
|
}
|
|
157
240
|
}
|
|
241
|
+
if (!customElements.get('evo-scroll-container')) {
|
|
242
|
+
customElements.define('evo-scroll-container', ScrollContainer);
|
|
243
|
+
}
|
|
158
244
|
|
|
159
245
|
export function resize(selector: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
|
|
160
246
|
if (typeof height == 'number') {
|
|
@@ -199,23 +285,30 @@ export function getScrollContainer(selector: string | HTMLElement | ScrollContai
|
|
|
199
285
|
if (selector instanceof ScrollContainer) {
|
|
200
286
|
return selector;
|
|
201
287
|
}
|
|
202
|
-
const
|
|
203
|
-
return
|
|
288
|
+
const scrollContainer = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
|
|
289
|
+
return scrollContainer instanceof ScrollContainer ? scrollContainer as IScrollContainer : undefined;
|
|
290
|
+
// const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
|
|
291
|
+
// return key ? scrollContainers.get(key) : undefined;
|
|
204
292
|
}
|
|
205
293
|
|
|
206
|
-
export function createScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
294
|
+
// export function createScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
|
|
295
|
+
// const container = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
|
|
296
|
+
// if (container) {
|
|
297
|
+
// if (scrollContainers.has(container)) {
|
|
298
|
+
// return scrollContainers.get(container);
|
|
299
|
+
// } else {
|
|
300
|
+
// const scrollContainer = new ScrollContainer(container);
|
|
301
|
+
// initNewScrollContainer(container, scrollContainer);
|
|
302
|
+
// return scrollContainer;
|
|
303
|
+
// }
|
|
304
|
+
// } else {
|
|
305
|
+
// return undefined;
|
|
306
|
+
// }
|
|
307
|
+
// }
|
|
308
|
+
|
|
309
|
+
interface ScrollbarSettings {
|
|
310
|
+
trackVisible?: boolean;
|
|
311
|
+
thumbHeight?: number;
|
|
219
312
|
}
|
|
220
313
|
|
|
221
314
|
function getPaddingY(content: HTMLElement): number {
|
|
@@ -223,48 +316,25 @@ function getPaddingY(content: HTMLElement): number {
|
|
|
223
316
|
return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
|
|
224
317
|
}
|
|
225
318
|
|
|
226
|
-
const scrollContainers = new Map<HTMLElement, ScrollContainer>();
|
|
319
|
+
// const scrollContainers = new Map<HTMLElement, ScrollContainer>();
|
|
227
320
|
|
|
228
|
-
const intersectionObserver = new IntersectionObserver((entries) => {
|
|
229
|
-
entries.forEach((entry) => {
|
|
230
|
-
if (entry.isIntersecting) {
|
|
231
|
-
const sc = getScrollContainer(entry.target as HTMLElement);
|
|
232
|
-
if (sc) {
|
|
233
|
-
sc.refresh();
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
},
|
|
238
|
-
{ threshold: 0.1 }
|
|
239
|
-
);
|
|
240
321
|
|
|
241
|
-
const mutationObserver = new MutationObserver((mutations) => {
|
|
242
|
-
const containers = new Set<IScrollContainer>();
|
|
243
|
-
mutations.forEach((mutation) => {
|
|
244
|
-
const sc = getScrollContainer(mutation.target as HTMLElement);
|
|
245
|
-
if (sc) {
|
|
246
|
-
containers.add(sc);
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
[...containers].forEach((container) => {
|
|
250
|
-
container.refresh();
|
|
251
|
-
});
|
|
252
|
-
});
|
|
253
322
|
|
|
254
|
-
function initNewScrollContainer(container: HTMLElement, scrollContainer: ScrollContainer) {
|
|
255
|
-
|
|
323
|
+
// function initNewScrollContainer(container: HTMLElement, scrollContainer: ScrollContainer) {
|
|
324
|
+
// scrollContainers.set(container, scrollContainer);
|
|
256
325
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
326
|
+
// intersectionObserver.observe(container);
|
|
327
|
+
// mutationObserver.observe(container, { attributes: true, childList: true, subtree: true });
|
|
328
|
+
// }
|
|
260
329
|
|
|
261
|
-
document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
});
|
|
330
|
+
// document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
|
|
331
|
+
// const scrollContainer = new ScrollContainer(container);
|
|
332
|
+
// initNewScrollContainer(container, scrollContainer);
|
|
333
|
+
// });
|
|
265
334
|
|
|
266
|
-
window.addEventListener('resize', () => {
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}
|
|
335
|
+
// window.addEventListener('resize', () => {
|
|
336
|
+
// // [...scrollContainers.values()].forEach((scrollContainer) => {
|
|
337
|
+
// [...document.querySelectorAll<ScrollContainer>('scroll-container')].forEach((scrollContainer) => {
|
|
338
|
+
// scrollContainer.refresh();
|
|
339
|
+
// });
|
|
340
|
+
// }, { passive: true });
|