use-snap-slider 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -7
- package/dist/lib/snap-slider.d.ts +2 -1
- package/dist/snap-slider.cjs +2 -0
- package/dist/snap-slider.cjs.map +1 -0
- package/dist/snap-slider.es.js +48 -43
- package/dist/snap-slider.es.js.map +1 -1
- package/dist/use-snap-slider.cjs +2 -0
- package/dist/use-snap-slider.cjs.map +1 -0
- package/dist/use-snap-slider.es.js +14 -13
- package/dist/use-snap-slider.es.js.map +1 -1
- package/package.json +2 -2
- package/dist/snap-slider.cjs.js +0 -2
- package/dist/snap-slider.cjs.js.map +0 -1
- package/dist/use-snap-slider.cjs.js +0 -2
- package/dist/use-snap-slider.cjs.js.map +0 -1
package/README.md
CHANGED
|
@@ -32,11 +32,11 @@ export function MySlider () {
|
|
|
32
32
|
const ref = useRef<HTMLDivElement | null>(null)
|
|
33
33
|
const slides = [1,2]
|
|
34
34
|
// Passing inital count avoid extra render, for best lighthouse score, pass the same count as you show on mobile
|
|
35
|
-
const
|
|
36
|
-
const pages = Array.from(Array(
|
|
35
|
+
const {index, count, jumpTo, goPrev, goNext, prevEnabled, nextEnabled} = useSnapSlider(ref, slides.length)
|
|
36
|
+
const pages = Array.from(Array(count).keys())
|
|
37
37
|
return (
|
|
38
38
|
<div>
|
|
39
|
-
<div className="flex scroll-smooth snap-x snap-mandatory overflow-x-auto
|
|
39
|
+
<div className="flex scroll-smooth snap-x snap-mandatory overflow-x-auto" ref={ref}>
|
|
40
40
|
{slides.map((slide) => (
|
|
41
41
|
<div key={slide} className="flex snap-start shrink-0 w-full md:w-1/2">
|
|
42
42
|
Slide {slide}
|
|
@@ -45,12 +45,12 @@ export function MySlider () {
|
|
|
45
45
|
</div>
|
|
46
46
|
<nav aria-label="Pages navigation">
|
|
47
47
|
{pages.map((page) => (
|
|
48
|
-
<button onClick={() =>
|
|
48
|
+
<button onClick={() => jumpTo(page)} disabled={page === index}>{page + 1}</button>
|
|
49
49
|
))}
|
|
50
50
|
</nav>
|
|
51
51
|
<nav aria-label="Prev / Next navigation">
|
|
52
|
-
<button onClick={
|
|
53
|
-
<button onClick={
|
|
52
|
+
<button onClick={goPrev} disabled={!prevEnabled}>Prev</button>
|
|
53
|
+
<button onClick={goNext} disabled={!nextEnabled}>Next</button>
|
|
54
54
|
</nav>
|
|
55
55
|
</div>
|
|
56
56
|
)
|
|
@@ -132,6 +132,8 @@ const {
|
|
|
132
132
|
setElement: (el: HTMLElement) => void,
|
|
133
133
|
// Updates count and countDelta, call if you change inner slides
|
|
134
134
|
calculate: () => void,
|
|
135
|
+
// Should subscribe return a inital publish after subscribing
|
|
136
|
+
initalSubscriptionPublish: boolean = true
|
|
135
137
|
} = createSnapSlider({
|
|
136
138
|
element: HTMLDivElement | null,
|
|
137
139
|
count?:number = 1,
|
|
@@ -177,7 +179,7 @@ See also tailwinds own documentation for [scroll snap](https://tailwindcss.com/d
|
|
|
177
179
|
-webkit-overflow-scrolling: touch;
|
|
178
180
|
}
|
|
179
181
|
.css-slider::-webkit-scrollbar {
|
|
180
|
-
|
|
182
|
+
display: none;
|
|
181
183
|
}
|
|
182
184
|
.css-slider-item {
|
|
183
185
|
display: flex;
|
|
@@ -20,6 +20,7 @@ export type TSnapListner = (params: TSnapSliderStateFull) => void;
|
|
|
20
20
|
export interface TSnapSliderParams extends TSnapSliderStateUpdate {
|
|
21
21
|
element: HTMLElement | null;
|
|
22
22
|
itemSelector?: string;
|
|
23
|
+
initalSubscriptionPublish?: boolean;
|
|
23
24
|
circular?: boolean;
|
|
24
25
|
}
|
|
25
26
|
export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
|
|
@@ -33,5 +34,5 @@ export interface TSnapSlider {
|
|
|
33
34
|
setElement: (el: HTMLElement) => void;
|
|
34
35
|
calculate: () => void;
|
|
35
36
|
}
|
|
36
|
-
export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, itemSelector, }: TSnapSliderParams): TSnapSlider;
|
|
37
|
+
export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
|
|
37
38
|
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=(f,u)=>{let h,r,a;return function(){const v=this,p=arguments;h?(clearTimeout(r),r=setTimeout(()=>{Date.now()-a>=u&&(f.apply(v,p),a=Date.now())},Math.max(u-(Date.now()-a),0))):(f.apply(v,p),a=Date.now(),h=!0)}};function C({element:f,count:u=1,countDelta:h,index:r=0,circular:a,indexDelta:v,initalSubscriptionPublish:p=!0,itemSelector:A=":scope > *"}){let T=r,c={index:r,indexDelta:v||r,count:u,countDelta:h||u},m=r,i=1,D=[],b=!1,x=0,n;function W(){if(n){const t=n.scrollLeft,{indexDelta:e}=c;if(x=e*(n.offsetWidth/i),m!==e){const o=Math.abs(t-x),l=n.offsetWidth*2;m=e,b=!0;const s=o>l?"instant":"smooth";n.scroll({left:x,top:0,behavior:s})}else T&&(b=!0,n.scroll({left:x,top:0,behavior:"instant"}),T=void 0)}}let P=!1,d=[];const O=t=>(d.push(t),n&&(P||p)&&t(S()),()=>{d=d.filter(e=>e!==t),d.length<1&&I()});function R(){d.forEach(t=>{t(S())})}const S=()=>{const{indexDelta:t,countDelta:e}=c;return{...c,prevEnabled:a||t>0,nextEnabled:a||e-i>t}};function g(t){let e=!1,o=!1;Object.keys(t).forEach(s=>{c[s]!==t[s]&&(c[s]=Number(t[s]),e=!0,s==="indexDelta"&&(o=!0))}),e&&(P=d.length===0,R(),o&&W())}function y(t){const{index:e,indexDelta:o}=t,{countDelta:l,count:s}=c,L=l-i;return{index:o<L?e:s-1,indexDelta:o}}function M(){if(n){let t=0,e=0;D=[],n.querySelectorAll(A).forEach(N=>{D.push(t),t+=N.clientWidth,e=N.clientWidth}),i=Math.round(n.offsetWidth/e);const o=D.length,l=Math.ceil(o/i),{index:s}=c,L=s+1>l?{index:0,indexDelta:0}:{};g({count:l,countDelta:o,...L})}}let E=!1;function B(){if(!E&&n){const t=n.scrollLeft;window.requestAnimationFrame(()=>{if(b)Math.abs(x-t)<2&&(b=!1);else{const e=D.reduce((l,s)=>Math.abs(s-t)<Math.abs(l-t)?s:l),o=D.findIndex(l=>l===e);m=o,g(y({index:Math.floor(o/i),indexDelta:o}))}E=!1}),E=!0}}const F=q(B,200),j=q(M,500);function z(t){n&&I(),n=t,W(),M(),n==null||n.addEventListener("scroll",F),window.addEventListener("resize",j)}f&&z(f);const w=function(t,e){e!==void 0&&g(y({index:Math.floor(e/i),indexDelta:e})),t!==void 0&&g(y({index:t,indexDelta:t*i}))},I=()=>{n==null||n.removeEventListener("scroll",F),window.removeEventListener("resize",j)};return{destroy:I,getState:S,subscribe:O,jumpTo:w,setElement:z,calculate:M,goNext:()=>{const{countDelta:t,indexDelta:e}=c,o=t-i,l=e+i<=o?e+i:a&&e===o?0:o;w(void 0,l)},goPrev:()=>{const{indexDelta:t,countDelta:e}=c,o=e-i,l=t-i>=0?t-i:a&&t===0?o:0;w(void 0,l)}}}exports.createSnapSlider=C;
|
|
2
|
+
//# sourceMappingURL=snap-slider.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snap-slider.cjs","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n let inThrottle: boolean\n let lastFn: ReturnType<typeof setTimeout>\n let lastTime: number\n return function (this: any) {\n const context = this\n const args = arguments\n if (!inThrottle) {\n fn.apply(context, args)\n lastTime = Date.now()\n inThrottle = true\n } else {\n clearTimeout(lastFn)\n lastFn = setTimeout(() => {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args)\n lastTime = Date.now()\n }\n }, Math.max(wait - (Date.now() - lastTime), 0))\n }\n }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n prevEnabled: boolean\n nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n element: HTMLElement | null\n itemSelector?: string\n initalSubscriptionPublish?: boolean\n circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n destroy: () => void\n getState: () => TSnapSliderStateFull\n jumpTo: TSnapSliderJumpToFn\n goNext: () => void\n goPrev: () => void\n subscribe: (fn: TSnapListner) => () => void\n setElement: (el: HTMLElement) => void\n calculate: () => void\n}\n\nexport function createSnapSlider({\n element: _element,\n count = 1,\n countDelta,\n index = 0,\n circular,\n indexDelta,\n initalSubscriptionPublish = true,\n itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n count,\n countDelta: countDelta || count,\n }\n let prevIndexDelta: number = index\n let slidesPerPage: number = 1\n let itemPositions: number[] = []\n let muteScrollListner: boolean = false\n let left: number = 0\n let element: HTMLElement | null\n function updateIndexDelta() {\n if (element) {\n const prev = element.scrollLeft\n const { indexDelta } = state\n left = indexDelta * (element.offsetWidth / slidesPerPage)\n if (prevIndexDelta !== indexDelta) {\n const distance = Math.abs(prev - left)\n const limitInstantScroll = element.offsetWidth * 2\n prevIndexDelta = indexDelta\n muteScrollListner = true\n // @ts-expect-error [mildly irritated message]\n const behavior: ScrollBehavior =\n distance > limitInstantScroll ? 'instant' : 'smooth'\n element.scroll({\n left,\n top: 0,\n behavior,\n })\n } else {\n if (initalIndex) {\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n // @ts-expect-error [mildly irritated message]\n behavior: 'instant',\n })\n initalIndex = undefined\n }\n }\n }\n }\n\n let publishDirty = false\n let listeners: TSnapListner[] = []\n const subscribe = (callback: TSnapListner) => {\n listeners.push(callback)\n if (element && (publishDirty || initalSubscriptionPublish)) {\n callback(getState())\n }\n return () => {\n listeners = listeners.filter((x) => x !== callback)\n if (listeners.length < 1) {\n destroy()\n }\n }\n }\n function notify() {\n listeners.forEach((callback) => {\n callback(getState())\n })\n }\n const getState = (): TSnapSliderStateFull => {\n const { indexDelta, countDelta } = state\n return {\n ...state,\n prevEnabled: circular || indexDelta > 0,\n nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n }\n }\n function update(params: TSnapSliderStateUpdate) {\n let dirty = false\n let indexDeltaDirty = false\n type TSnapSliderStateUpdateKey = keyof typeof params\n const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n params\n ) as Array<TSnapSliderStateUpdateKey>\n keys.forEach((key) => {\n if (state[key] !== params[key]) {\n state[key] = Number(params[key])\n dirty = true\n if (key === 'indexDelta') {\n indexDeltaDirty = true\n }\n }\n })\n if (dirty) {\n publishDirty = listeners.length === 0\n notify()\n if (indexDeltaDirty) {\n updateIndexDelta()\n }\n }\n }\n function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n const { index, indexDelta } = nextIndex\n const { countDelta, count } = state\n const last = countDelta - slidesPerPage\n return {\n index: indexDelta < last ? index : count - 1,\n indexDelta,\n }\n }\n function calculate() {\n if (element) {\n let contentWidth = 0\n let itemWidth = 0\n itemPositions = []\n element.querySelectorAll(itemSelector).forEach((slide) => {\n itemPositions.push(contentWidth)\n contentWidth += slide.clientWidth\n itemWidth = slide.clientWidth\n })\n slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n const countDelta = itemPositions.length\n const count = Math.ceil(countDelta / slidesPerPage)\n const { index } = state\n const resetIndexMayby =\n index + 1 > count\n ? {\n index: 0,\n indexDelta: 0,\n }\n : {}\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n }\n }\n\n let ticking = false\n function onScroll() {\n if (!ticking && element) {\n const scrollLeft = element.scrollLeft\n window.requestAnimationFrame(() => {\n if (muteScrollListner) {\n const leftToScroll = Math.abs(left - scrollLeft)\n if (leftToScroll < 2) {\n muteScrollListner = false\n }\n } else {\n const positionItem = itemPositions.reduce((prev, curr) => {\n return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n ? curr\n : prev\n })\n const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n prevIndexDelta = indexDelta\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 200)\n const onResizeFn = throttle(calculate, 500)\n function setElement(_el: HTMLElement) {\n if (element) {\n destroy()\n }\n element = _el\n updateIndexDelta()\n calculate()\n element?.addEventListener('scroll', onScrollFn)\n window.addEventListener('resize', onResizeFn)\n }\n _element && setElement(_element)\n const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n if (indexDelta !== undefined) {\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n if (index !== undefined) {\n update(\n fixIndex({\n index,\n indexDelta: index * slidesPerPage,\n })\n )\n }\n }\n const destroy = () => {\n element?.removeEventListener('scroll', onScrollFn)\n window.removeEventListener('resize', onResizeFn)\n }\n const goNext = () => {\n const { countDelta, indexDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta + slidesPerPage <= last\n ? indexDelta + slidesPerPage\n : circular && indexDelta === last\n ? 0\n : last\n jumpTo(undefined, next)\n }\n const goPrev = () => {\n const { indexDelta, countDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta - slidesPerPage >= 0\n ? indexDelta - slidesPerPage\n : circular && indexDelta === 0\n ? last\n : 0\n jumpTo(undefined, next)\n }\n return {\n destroy,\n getState,\n subscribe,\n jumpTo,\n setElement,\n calculate,\n goNext,\n goPrev,\n }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","initalSubscriptionPublish","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","behavior","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"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"}
|
package/dist/snap-slider.es.js
CHANGED
|
@@ -7,43 +7,48 @@ const q = (f, u) => {
|
|
|
7
7
|
}, Math.max(u - (Date.now() - c), 0))) : (f.apply(v, p), c = Date.now(), h = !0);
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
|
-
function
|
|
10
|
+
function H({
|
|
11
11
|
element: f,
|
|
12
12
|
count: u = 1,
|
|
13
13
|
countDelta: h,
|
|
14
14
|
index: r = 0,
|
|
15
15
|
circular: c,
|
|
16
16
|
indexDelta: v,
|
|
17
|
-
|
|
17
|
+
initalSubscriptionPublish: p = !0,
|
|
18
|
+
itemSelector: A = ":scope > *"
|
|
18
19
|
}) {
|
|
19
20
|
let T = r, a = {
|
|
20
21
|
index: r,
|
|
21
22
|
indexDelta: v || r,
|
|
22
23
|
count: u,
|
|
23
24
|
countDelta: h || u
|
|
24
|
-
},
|
|
25
|
+
}, g = r, i = 1, x = [], m = !1, D = 0, n;
|
|
25
26
|
function W() {
|
|
26
|
-
if (
|
|
27
|
-
const t =
|
|
28
|
-
if (D = e * (
|
|
29
|
-
const
|
|
30
|
-
|
|
27
|
+
if (n) {
|
|
28
|
+
const t = n.scrollLeft, { indexDelta: e } = a;
|
|
29
|
+
if (D = e * (n.offsetWidth / i), g !== e) {
|
|
30
|
+
const o = Math.abs(t - D), l = n.offsetWidth * 2;
|
|
31
|
+
g = e, m = !0;
|
|
32
|
+
const s = o > l ? "instant" : "smooth";
|
|
33
|
+
n.scroll({
|
|
31
34
|
left: D,
|
|
32
35
|
top: 0,
|
|
33
|
-
behavior:
|
|
36
|
+
behavior: s
|
|
34
37
|
});
|
|
35
38
|
} else
|
|
36
|
-
T && (m = !0,
|
|
39
|
+
T && (m = !0, n.scroll({
|
|
37
40
|
left: D,
|
|
38
|
-
top: 0
|
|
41
|
+
top: 0,
|
|
42
|
+
// @ts-expect-error [mildly irritated message]
|
|
43
|
+
behavior: "instant"
|
|
39
44
|
}), T = void 0);
|
|
40
45
|
}
|
|
41
46
|
}
|
|
42
47
|
let P = !1, d = [];
|
|
43
|
-
const
|
|
48
|
+
const O = (t) => (d.push(t), n && (P || p) && t(E()), () => {
|
|
44
49
|
d = d.filter((e) => e !== t), d.length < 1 && I();
|
|
45
50
|
});
|
|
46
|
-
function
|
|
51
|
+
function R() {
|
|
47
52
|
d.forEach((t) => {
|
|
48
53
|
t(E());
|
|
49
54
|
});
|
|
@@ -56,51 +61,51 @@ function G({
|
|
|
56
61
|
nextEnabled: c || e - i > t
|
|
57
62
|
};
|
|
58
63
|
};
|
|
59
|
-
function
|
|
60
|
-
let e = !1,
|
|
64
|
+
function b(t) {
|
|
65
|
+
let e = !1, o = !1;
|
|
61
66
|
Object.keys(
|
|
62
67
|
t
|
|
63
68
|
).forEach((s) => {
|
|
64
|
-
a[s] !== t[s] && (a[s] = Number(t[s]), e = !0, s === "indexDelta" && (
|
|
65
|
-
}), e && (P = d.length === 0,
|
|
69
|
+
a[s] !== t[s] && (a[s] = Number(t[s]), e = !0, s === "indexDelta" && (o = !0));
|
|
70
|
+
}), e && (P = d.length === 0, R(), o && W());
|
|
66
71
|
}
|
|
67
72
|
function M(t) {
|
|
68
|
-
const { index: e, indexDelta:
|
|
73
|
+
const { index: e, indexDelta: o } = t, { countDelta: l, count: s } = a, L = l - i;
|
|
69
74
|
return {
|
|
70
|
-
index:
|
|
71
|
-
indexDelta:
|
|
75
|
+
index: o < L ? e : s - 1,
|
|
76
|
+
indexDelta: o
|
|
72
77
|
};
|
|
73
78
|
}
|
|
74
79
|
function S() {
|
|
75
|
-
if (
|
|
80
|
+
if (n) {
|
|
76
81
|
let t = 0, e = 0;
|
|
77
|
-
x = [],
|
|
82
|
+
x = [], n.querySelectorAll(A).forEach((j) => {
|
|
78
83
|
x.push(t), t += j.clientWidth, e = j.clientWidth;
|
|
79
|
-
}), i = Math.round(
|
|
80
|
-
const
|
|
84
|
+
}), i = Math.round(n.offsetWidth / e);
|
|
85
|
+
const o = x.length, l = Math.ceil(o / i), { index: s } = a, L = s + 1 > l ? {
|
|
81
86
|
index: 0,
|
|
82
87
|
indexDelta: 0
|
|
83
88
|
} : {};
|
|
84
|
-
|
|
89
|
+
b({
|
|
85
90
|
count: l,
|
|
86
|
-
countDelta:
|
|
91
|
+
countDelta: o,
|
|
87
92
|
...L
|
|
88
93
|
});
|
|
89
94
|
}
|
|
90
95
|
}
|
|
91
96
|
let w = !1;
|
|
92
|
-
function
|
|
93
|
-
if (!w &&
|
|
94
|
-
const t =
|
|
97
|
+
function B() {
|
|
98
|
+
if (!w && n) {
|
|
99
|
+
const t = n.scrollLeft;
|
|
95
100
|
window.requestAnimationFrame(() => {
|
|
96
101
|
if (m)
|
|
97
|
-
Math.abs(D - t) <
|
|
102
|
+
Math.abs(D - t) < 2 && (m = !1);
|
|
98
103
|
else {
|
|
99
|
-
const e = x.reduce((l, s) => Math.abs(s - t) < Math.abs(l - t) ? s : l),
|
|
100
|
-
|
|
104
|
+
const e = x.reduce((l, s) => Math.abs(s - t) < Math.abs(l - t) ? s : l), o = x.findIndex((l) => l === e);
|
|
105
|
+
g = o, b(
|
|
101
106
|
M({
|
|
102
|
-
index: Math.floor(
|
|
103
|
-
indexDelta:
|
|
107
|
+
index: Math.floor(o / i),
|
|
108
|
+
indexDelta: o
|
|
104
109
|
})
|
|
105
110
|
);
|
|
106
111
|
}
|
|
@@ -108,44 +113,44 @@ function G({
|
|
|
108
113
|
}), w = !0;
|
|
109
114
|
}
|
|
110
115
|
}
|
|
111
|
-
const F = q(
|
|
116
|
+
const F = q(B, 200), z = q(S, 500);
|
|
112
117
|
function N(t) {
|
|
113
|
-
|
|
118
|
+
n && I(), n = t, W(), S(), n == null || n.addEventListener("scroll", F), window.addEventListener("resize", z);
|
|
114
119
|
}
|
|
115
120
|
f && N(f);
|
|
116
121
|
const y = function(t, e) {
|
|
117
|
-
e !== void 0 &&
|
|
122
|
+
e !== void 0 && b(
|
|
118
123
|
M({
|
|
119
124
|
index: Math.floor(e / i),
|
|
120
125
|
indexDelta: e
|
|
121
126
|
})
|
|
122
|
-
), t !== void 0 &&
|
|
127
|
+
), t !== void 0 && b(
|
|
123
128
|
M({
|
|
124
129
|
index: t,
|
|
125
130
|
indexDelta: t * i
|
|
126
131
|
})
|
|
127
132
|
);
|
|
128
133
|
}, I = () => {
|
|
129
|
-
|
|
134
|
+
n == null || n.removeEventListener("scroll", F), window.removeEventListener("resize", z);
|
|
130
135
|
};
|
|
131
136
|
return {
|
|
132
137
|
destroy: I,
|
|
133
138
|
getState: E,
|
|
134
|
-
subscribe:
|
|
139
|
+
subscribe: O,
|
|
135
140
|
jumpTo: y,
|
|
136
141
|
setElement: N,
|
|
137
142
|
calculate: S,
|
|
138
143
|
goNext: () => {
|
|
139
|
-
const { countDelta: t, indexDelta: e } = a,
|
|
144
|
+
const { countDelta: t, indexDelta: e } = a, o = t - i, l = e + i <= o ? e + i : c && e === o ? 0 : o;
|
|
140
145
|
y(void 0, l);
|
|
141
146
|
},
|
|
142
147
|
goPrev: () => {
|
|
143
|
-
const { indexDelta: t, countDelta: e } = a,
|
|
148
|
+
const { indexDelta: t, countDelta: e } = a, o = e - i, l = t - i >= 0 ? t - i : c && t === 0 ? o : 0;
|
|
144
149
|
y(void 0, l);
|
|
145
150
|
}
|
|
146
151
|
};
|
|
147
152
|
}
|
|
148
153
|
export {
|
|
149
|
-
|
|
154
|
+
H as createSnapSlider
|
|
150
155
|
};
|
|
151
156
|
//# sourceMappingURL=snap-slider.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snap-slider.es.js","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n let inThrottle: boolean\n let lastFn: ReturnType<typeof setTimeout>\n let lastTime: number\n return function (this: any) {\n const context = this\n const args = arguments\n if (!inThrottle) {\n fn.apply(context, args)\n lastTime = Date.now()\n inThrottle = true\n } else {\n clearTimeout(lastFn)\n lastFn = setTimeout(() => {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args)\n lastTime = Date.now()\n }\n }, Math.max(wait - (Date.now() - lastTime), 0))\n }\n }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n prevEnabled: boolean\n nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n element: HTMLElement | null\n itemSelector?: string\n circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n destroy: () => void\n getState: () => TSnapSliderStateFull\n jumpTo: TSnapSliderJumpToFn\n goNext: () => void\n goPrev: () => void\n subscribe: (fn: TSnapListner) => () => void\n setElement: (el: HTMLElement) => void\n calculate: () => void\n}\n\nexport function createSnapSlider({\n element: _element,\n count = 1,\n countDelta,\n index = 0,\n circular,\n indexDelta,\n itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n count,\n countDelta: countDelta || count,\n }\n let prevIndexDelta: number = index\n let slidesPerPage: number = 1\n let itemPositions: number[] = []\n let muteScrollListner: boolean = false\n let left: number = 0\n let element: HTMLElement | null\n function updateIndexDelta() {\n if (element) {\n const prev = element.scrollLeft\n const { indexDelta } = state\n left = indexDelta * (element.offsetWidth / slidesPerPage)\n if (prevIndexDelta !== indexDelta) {\n const distance = Math.abs(prev - left)\n const limitInstantScroll = element.offsetWidth * 2\n prevIndexDelta = indexDelta\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n behavior: distance > limitInstantScroll ? 'smooth' : undefined,\n })\n } else {\n if (initalIndex) {\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n })\n initalIndex = undefined\n }\n }\n }\n }\n\n let publishDirty = false\n let listeners: TSnapListner[] = []\n const subscribe = (callback: TSnapListner) => {\n listeners.push(callback)\n if (publishDirty) {\n callback(getState())\n }\n return () => {\n listeners = listeners.filter((x) => x !== callback)\n if (listeners.length < 1) {\n destroy()\n }\n }\n }\n function notify() {\n listeners.forEach((callback) => {\n callback(getState())\n })\n }\n const getState = (): TSnapSliderStateFull => {\n const { indexDelta, countDelta } = state\n return {\n ...state,\n prevEnabled: circular || indexDelta > 0,\n nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n }\n }\n function update(params: TSnapSliderStateUpdate) {\n let dirty = false\n let indexDeltaDirty = false\n type TSnapSliderStateUpdateKey = keyof typeof params\n const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n params\n ) as Array<TSnapSliderStateUpdateKey>\n keys.forEach((key) => {\n if (state[key] !== params[key]) {\n state[key] = Number(params[key])\n dirty = true\n if (key === 'indexDelta') {\n indexDeltaDirty = true\n }\n }\n })\n if (dirty) {\n publishDirty = listeners.length === 0\n notify()\n if (indexDeltaDirty) {\n updateIndexDelta()\n }\n }\n }\n function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n const { index, indexDelta } = nextIndex\n const { countDelta, count } = state\n const last = countDelta - slidesPerPage\n return {\n index: indexDelta < last ? index : count - 1,\n indexDelta,\n }\n }\n function calculate() {\n if (element) {\n let contentWidth = 0\n let itemWidth = 0\n itemPositions = []\n element.querySelectorAll(itemSelector).forEach((slide) => {\n itemPositions.push(contentWidth)\n contentWidth += slide.clientWidth\n itemWidth = slide.clientWidth\n })\n slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n const countDelta = itemPositions.length\n const count = Math.ceil(countDelta / slidesPerPage)\n const { index } = state\n const resetIndexMayby =\n index + 1 > count\n ? {\n index: 0,\n indexDelta: 0,\n }\n : {}\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n }\n }\n\n let ticking = false\n function onScroll() {\n if (!ticking && element) {\n const scrollLeft = element.scrollLeft\n window.requestAnimationFrame(() => {\n if (muteScrollListner) {\n const leftToScroll = Math.abs(left - scrollLeft)\n if (leftToScroll < 1) {\n muteScrollListner = false\n }\n } else {\n const positionItem = itemPositions.reduce((prev, curr) => {\n return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n ? curr\n : prev\n })\n const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n prevIndexDelta = indexDelta\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 200)\n const onResizeFn = throttle(calculate, 500)\n function setElement(_el: HTMLElement) {\n if (element) {\n destroy()\n }\n element = _el\n updateIndexDelta()\n calculate()\n element?.addEventListener('scroll', onScrollFn)\n window.addEventListener('resize', onResizeFn)\n }\n _element && setElement(_element)\n const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n if (indexDelta !== undefined) {\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n if (index !== undefined) {\n update(\n fixIndex({\n index,\n indexDelta: index * slidesPerPage,\n })\n )\n }\n }\n const destroy = () => {\n element?.removeEventListener('scroll', onScrollFn)\n window.removeEventListener('resize', onResizeFn)\n }\n const goNext = () => {\n const { countDelta, indexDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta + slidesPerPage <= last\n ? indexDelta + slidesPerPage\n : circular && indexDelta === last\n ? 0\n : last\n jumpTo(undefined, next)\n }\n const goPrev = () => {\n const { indexDelta, countDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta - slidesPerPage >= 0\n ? indexDelta - slidesPerPage\n : circular && indexDelta === 0\n ? last\n : 0\n jumpTo(undefined, next)\n }\n return {\n destroy,\n getState,\n subscribe,\n jumpTo,\n setElement,\n calculate,\n goNext,\n goPrev,\n }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"snap-slider.es.js","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n let inThrottle: boolean\n let lastFn: ReturnType<typeof setTimeout>\n let lastTime: number\n return function (this: any) {\n const context = this\n const args = arguments\n if (!inThrottle) {\n fn.apply(context, args)\n lastTime = Date.now()\n inThrottle = true\n } else {\n clearTimeout(lastFn)\n lastFn = setTimeout(() => {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args)\n lastTime = Date.now()\n }\n }, Math.max(wait - (Date.now() - lastTime), 0))\n }\n }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n prevEnabled: boolean\n nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n element: HTMLElement | null\n itemSelector?: string\n initalSubscriptionPublish?: boolean\n circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n destroy: () => void\n getState: () => TSnapSliderStateFull\n jumpTo: TSnapSliderJumpToFn\n goNext: () => void\n goPrev: () => void\n subscribe: (fn: TSnapListner) => () => void\n setElement: (el: HTMLElement) => void\n calculate: () => void\n}\n\nexport function createSnapSlider({\n element: _element,\n count = 1,\n countDelta,\n index = 0,\n circular,\n indexDelta,\n initalSubscriptionPublish = true,\n itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n count,\n countDelta: countDelta || count,\n }\n let prevIndexDelta: number = index\n let slidesPerPage: number = 1\n let itemPositions: number[] = []\n let muteScrollListner: boolean = false\n let left: number = 0\n let element: HTMLElement | null\n function updateIndexDelta() {\n if (element) {\n const prev = element.scrollLeft\n const { indexDelta } = state\n left = indexDelta * (element.offsetWidth / slidesPerPage)\n if (prevIndexDelta !== indexDelta) {\n const distance = Math.abs(prev - left)\n const limitInstantScroll = element.offsetWidth * 2\n prevIndexDelta = indexDelta\n muteScrollListner = true\n // @ts-expect-error [mildly irritated message]\n const behavior: ScrollBehavior =\n distance > limitInstantScroll ? 'instant' : 'smooth'\n element.scroll({\n left,\n top: 0,\n behavior,\n })\n } else {\n if (initalIndex) {\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n // @ts-expect-error [mildly irritated message]\n behavior: 'instant',\n })\n initalIndex = undefined\n }\n }\n }\n }\n\n let publishDirty = false\n let listeners: TSnapListner[] = []\n const subscribe = (callback: TSnapListner) => {\n listeners.push(callback)\n if (element && (publishDirty || initalSubscriptionPublish)) {\n callback(getState())\n }\n return () => {\n listeners = listeners.filter((x) => x !== callback)\n if (listeners.length < 1) {\n destroy()\n }\n }\n }\n function notify() {\n listeners.forEach((callback) => {\n callback(getState())\n })\n }\n const getState = (): TSnapSliderStateFull => {\n const { indexDelta, countDelta } = state\n return {\n ...state,\n prevEnabled: circular || indexDelta > 0,\n nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n }\n }\n function update(params: TSnapSliderStateUpdate) {\n let dirty = false\n let indexDeltaDirty = false\n type TSnapSliderStateUpdateKey = keyof typeof params\n const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n params\n ) as Array<TSnapSliderStateUpdateKey>\n keys.forEach((key) => {\n if (state[key] !== params[key]) {\n state[key] = Number(params[key])\n dirty = true\n if (key === 'indexDelta') {\n indexDeltaDirty = true\n }\n }\n })\n if (dirty) {\n publishDirty = listeners.length === 0\n notify()\n if (indexDeltaDirty) {\n updateIndexDelta()\n }\n }\n }\n function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n const { index, indexDelta } = nextIndex\n const { countDelta, count } = state\n const last = countDelta - slidesPerPage\n return {\n index: indexDelta < last ? index : count - 1,\n indexDelta,\n }\n }\n function calculate() {\n if (element) {\n let contentWidth = 0\n let itemWidth = 0\n itemPositions = []\n element.querySelectorAll(itemSelector).forEach((slide) => {\n itemPositions.push(contentWidth)\n contentWidth += slide.clientWidth\n itemWidth = slide.clientWidth\n })\n slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n const countDelta = itemPositions.length\n const count = Math.ceil(countDelta / slidesPerPage)\n const { index } = state\n const resetIndexMayby =\n index + 1 > count\n ? {\n index: 0,\n indexDelta: 0,\n }\n : {}\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n }\n }\n\n let ticking = false\n function onScroll() {\n if (!ticking && element) {\n const scrollLeft = element.scrollLeft\n window.requestAnimationFrame(() => {\n if (muteScrollListner) {\n const leftToScroll = Math.abs(left - scrollLeft)\n if (leftToScroll < 2) {\n muteScrollListner = false\n }\n } else {\n const positionItem = itemPositions.reduce((prev, curr) => {\n return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n ? curr\n : prev\n })\n const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n prevIndexDelta = indexDelta\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 200)\n const onResizeFn = throttle(calculate, 500)\n function setElement(_el: HTMLElement) {\n if (element) {\n destroy()\n }\n element = _el\n updateIndexDelta()\n calculate()\n element?.addEventListener('scroll', onScrollFn)\n window.addEventListener('resize', onResizeFn)\n }\n _element && setElement(_element)\n const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n if (indexDelta !== undefined) {\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n if (index !== undefined) {\n update(\n fixIndex({\n index,\n indexDelta: index * slidesPerPage,\n })\n )\n }\n }\n const destroy = () => {\n element?.removeEventListener('scroll', onScrollFn)\n window.removeEventListener('resize', onResizeFn)\n }\n const goNext = () => {\n const { countDelta, indexDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta + slidesPerPage <= last\n ? indexDelta + slidesPerPage\n : circular && indexDelta === last\n ? 0\n : last\n jumpTo(undefined, next)\n }\n const goPrev = () => {\n const { indexDelta, countDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta - slidesPerPage >= 0\n ? indexDelta - slidesPerPage\n : circular && indexDelta === 0\n ? last\n : 0\n jumpTo(undefined, next)\n }\n return {\n destroy,\n getState,\n subscribe,\n jumpTo,\n setElement,\n calculate,\n goNext,\n goPrev,\n }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","initalSubscriptionPublish","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","behavior","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),f=require("./snap-slider.cjs");function p(u,n=1,c=0,o=!1,i){const[,s]=t.useState(0),r=t.useRef(),[e]=t.useState(()=>f.createSnapSlider({element:u.current,count:n,index:c,circular:o,initalSubscriptionPublish:!1})),a=e.getState();return t.useEffect(()=>{r.current&&(e.jumpTo(0),e.calculate())},[n,i,e]),t.useEffect(()=>{r.current=!0,u.current&&e.setElement(u.current);const l=e.subscribe(()=>{r.current&&s(S=>S+1)});return()=>{r.current=!1,l()}},[e,s]),{...a,jumpTo:e.jumpTo,goNext:e.goNext,goPrev:e.goPrev}}exports.useSnapSlider=p;
|
|
2
|
+
//# sourceMappingURL=use-snap-slider.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-snap-slider.cjs","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: (index: number) => void\n goNext: () => void\n goPrev: () => void\n}\n\nexport function useSnapSlider(\n ref: MutableRefObject<HTMLDivElement | null>,\n count: number = 1,\n index: number = 0,\n circular = false,\n countHash?: string | number\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>()\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n })\n )\n const result = observer.getState()\n useEffect(() => {\n if (mountedRef.current) {\n observer.jumpTo(0)\n observer.calculate()\n }\n }, [count, countHash, observer])\n useEffect(() => {\n mountedRef.current = true\n ref.current && observer.setElement(ref.current)\n const unsubscribe = observer.subscribe(() => {\n if (mountedRef.current) {\n forceUpdate((x) => x + 1)\n }\n })\n\n return () => {\n mountedRef.current = false\n unsubscribe()\n }\n }, [observer, forceUpdate])\n return {\n ...result,\n jumpTo: observer.jumpTo,\n goNext: observer.goNext,\n goPrev: observer.goPrev,\n }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":"wIASgB,SAAAA,EACdC,EACAC,EAAgB,EAChBC,EAAgB,EAChBC,EAAW,GACXC,EACgB,CAChB,KAAM,EAAGC,CAAW,EAAIC,WAAiB,CAAC,EACpCC,EAAaC,EAAAA,SACb,CAACC,CAAQ,EAAIH,EAAA,SAAS,IAC1BI,mBAAiB,CACf,QAASV,EAAI,QACb,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,0BAA2B,EAAA,CAC5B,CAAA,EAEGQ,EAASF,EAAS,WACxBG,OAAAA,EAAAA,UAAU,IAAM,CACVL,EAAW,UACbE,EAAS,OAAO,CAAC,EACjBA,EAAS,UAAU,EAEpB,EAAA,CAACR,EAAOG,EAAWK,CAAQ,CAAC,EAC/BG,EAAAA,UAAU,IAAM,CACdL,EAAW,QAAU,GACrBP,EAAI,SAAWS,EAAS,WAAWT,EAAI,OAAO,EACxC,MAAAa,EAAcJ,EAAS,UAAU,IAAM,CACvCF,EAAW,SACDF,EAACS,GAAMA,EAAI,CAAC,CAC1B,CACD,EAED,MAAO,IAAM,CACXP,EAAW,QAAU,GACTM,GAAA,CACd,EACC,CAACJ,EAAUJ,CAAW,CAAC,EACnB,CACL,GAAGM,EACH,OAAQF,EAAS,OACjB,OAAQA,EAAS,OACjB,OAAQA,EAAS,MAAA,CAErB"}
|
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { useState as o, useRef as p, useEffect as
|
|
2
|
-
import { createSnapSlider as
|
|
3
|
-
function d(r, u = 1,
|
|
1
|
+
import { useState as o, useRef as p, useEffect as s } from "react";
|
|
2
|
+
import { createSnapSlider as b } from "./snap-slider.es.js";
|
|
3
|
+
function d(r, u = 1, c = 0, i = !1, a) {
|
|
4
4
|
const [, n] = o(0), t = p(), [e] = o(
|
|
5
|
-
() =>
|
|
5
|
+
() => b({
|
|
6
6
|
element: r.current,
|
|
7
7
|
count: u,
|
|
8
|
-
index:
|
|
9
|
-
circular:
|
|
8
|
+
index: c,
|
|
9
|
+
circular: i,
|
|
10
|
+
initalSubscriptionPublish: !1
|
|
10
11
|
})
|
|
11
|
-
),
|
|
12
|
-
return
|
|
12
|
+
), l = e.getState();
|
|
13
|
+
return s(() => {
|
|
13
14
|
t.current && (e.jumpTo(0), e.calculate());
|
|
14
|
-
}, [u,
|
|
15
|
+
}, [u, a, e]), s(() => {
|
|
15
16
|
t.current = !0, r.current && e.setElement(r.current);
|
|
16
|
-
const
|
|
17
|
-
t.current && n((
|
|
17
|
+
const f = e.subscribe(() => {
|
|
18
|
+
t.current && n((m) => m + 1);
|
|
18
19
|
});
|
|
19
20
|
return () => {
|
|
20
|
-
t.current = !1,
|
|
21
|
+
t.current = !1, f();
|
|
21
22
|
};
|
|
22
23
|
}, [e, n]), {
|
|
23
|
-
...
|
|
24
|
+
...l,
|
|
24
25
|
jumpTo: e.jumpTo,
|
|
25
26
|
goNext: e.goNext,
|
|
26
27
|
goPrev: e.goPrev
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-snap-slider.es.js","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: (index: number) => void\n goNext: () => void\n goPrev: () => void\n}\n\nexport function useSnapSlider(\n ref: MutableRefObject<HTMLDivElement | null>,\n count: number = 1,\n index: number = 0,\n circular = false,\n countHash?: string | number\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>()\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n })\n )\n const result = observer.getState()\n useEffect(() => {\n if (mountedRef.current) {\n observer.jumpTo(0)\n observer.calculate()\n }\n }, [count, countHash, observer])\n useEffect(() => {\n mountedRef.current = true\n ref.current && observer.setElement(ref.current)\n const unsubscribe = observer.subscribe(() => {\n if (mountedRef.current) {\n forceUpdate((x) => x + 1)\n }\n })\n\n return () => {\n mountedRef.current = false\n unsubscribe()\n }\n }, [observer, forceUpdate])\n return {\n ...result,\n jumpTo: observer.jumpTo,\n goNext: observer.goNext,\n goPrev: observer.goPrev,\n }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":";;AASgB,SAAAA,EACdC,GACAC,IAAgB,GAChBC,IAAgB,GAChBC,IAAW,IACXC,GACgB;AAChB,QAAM,GAAGC,CAAW,IAAIC,EAAiB,CAAC,GACpCC,IAAaC,KACb,CAACC,CAAQ,IAAIH;AAAA,IAAS,MAC1BI,EAAiB;AAAA,MACf,SAASV,EAAI;AAAA,MACb,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,IAAA,
|
|
1
|
+
{"version":3,"file":"use-snap-slider.es.js","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: (index: number) => void\n goNext: () => void\n goPrev: () => void\n}\n\nexport function useSnapSlider(\n ref: MutableRefObject<HTMLDivElement | null>,\n count: number = 1,\n index: number = 0,\n circular = false,\n countHash?: string | number\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>()\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n })\n )\n const result = observer.getState()\n useEffect(() => {\n if (mountedRef.current) {\n observer.jumpTo(0)\n observer.calculate()\n }\n }, [count, countHash, observer])\n useEffect(() => {\n mountedRef.current = true\n ref.current && observer.setElement(ref.current)\n const unsubscribe = observer.subscribe(() => {\n if (mountedRef.current) {\n forceUpdate((x) => x + 1)\n }\n })\n\n return () => {\n mountedRef.current = false\n unsubscribe()\n }\n }, [observer, forceUpdate])\n return {\n ...result,\n jumpTo: observer.jumpTo,\n goNext: observer.goNext,\n goPrev: observer.goPrev,\n }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":";;AASgB,SAAAA,EACdC,GACAC,IAAgB,GAChBC,IAAgB,GAChBC,IAAW,IACXC,GACgB;AAChB,QAAM,GAAGC,CAAW,IAAIC,EAAiB,CAAC,GACpCC,IAAaC,KACb,CAACC,CAAQ,IAAIH;AAAA,IAAS,MAC1BI,EAAiB;AAAA,MACf,SAASV,EAAI;AAAA,MACb,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,2BAA2B;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEGQ,IAASF,EAAS;AACxB,SAAAG,EAAU,MAAM;AACd,IAAIL,EAAW,YACbE,EAAS,OAAO,CAAC,GACjBA,EAAS,UAAU;AAAA,EAEpB,GAAA,CAACR,GAAOG,GAAWK,CAAQ,CAAC,GAC/BG,EAAU,MAAM;AACd,IAAAL,EAAW,UAAU,IACrBP,EAAI,WAAWS,EAAS,WAAWT,EAAI,OAAO;AACxC,UAAAa,IAAcJ,EAAS,UAAU,MAAM;AAC3C,MAAIF,EAAW,WACDF,EAAA,CAACS,MAAMA,IAAI,CAAC;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,MAAAP,EAAW,UAAU,IACTM;IAAA;AAAA,EACd,GACC,CAACJ,GAAUJ,CAAW,CAAC,GACnB;AAAA,IACL,GAAGM;AAAA,IACH,QAAQF,EAAS;AAAA,IACjB,QAAQA,EAAS;AAAA,IACjB,QAAQA,EAAS;AAAA,EAAA;AAErB;"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-snap-slider",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "React hook to manage css snap sliders",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/use-snap-slider.cjs
|
|
6
|
+
"main": "./dist/use-snap-slider.cjs",
|
|
7
7
|
"module": "./dist/use-snap-slider.es.js",
|
|
8
8
|
"types": "./dist/use-snap-slider.d.ts",
|
|
9
9
|
"files": [
|
package/dist/snap-slider.cjs.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=(f,u)=>{let h,r,c;return function(){const v=this,p=arguments;h?(clearTimeout(r),r=setTimeout(()=>{Date.now()-c>=u&&(f.apply(v,p),c=Date.now())},Math.max(u-(Date.now()-c),0))):(f.apply(v,p),c=Date.now(),h=!0)}};function B({element:f,count:u=1,countDelta:h,index:r=0,circular:c,indexDelta:v,itemSelector:p=":scope > *"}){let T=r,a={index:r,indexDelta:v||r,count:u,countDelta:h||u},S=r,i=1,D=[],g=!1,x=0,o;function W(){if(o){const t=o.scrollLeft,{indexDelta:e}=a;if(x=e*(o.offsetWidth/i),S!==e){const n=Math.abs(t-x),l=o.offsetWidth*2;S=e,g=!0,o.scroll({left:x,top:0,behavior:n>l?"smooth":void 0})}else T&&(g=!0,o.scroll({left:x,top:0}),T=void 0)}}let P=!1,d=[];const A=t=>(d.push(t),P&&t(b()),()=>{d=d.filter(e=>e!==t),d.length<1&&I()});function O(){d.forEach(t=>{t(b())})}const b=()=>{const{indexDelta:t,countDelta:e}=a;return{...a,prevEnabled:c||t>0,nextEnabled:c||e-i>t}};function m(t){let e=!1,n=!1;Object.keys(t).forEach(s=>{a[s]!==t[s]&&(a[s]=Number(t[s]),e=!0,s==="indexDelta"&&(n=!0))}),e&&(P=d.length===0,O(),n&&W())}function y(t){const{index:e,indexDelta:n}=t,{countDelta:l,count:s}=a,L=l-i;return{index:n<L?e:s-1,indexDelta:n}}function M(){if(o){let t=0,e=0;D=[],o.querySelectorAll(p).forEach(N=>{D.push(t),t+=N.clientWidth,e=N.clientWidth}),i=Math.round(o.offsetWidth/e);const n=D.length,l=Math.ceil(n/i),{index:s}=a,L=s+1>l?{index:0,indexDelta:0}:{};m({count:l,countDelta:n,...L})}}let E=!1;function R(){if(!E&&o){const t=o.scrollLeft;window.requestAnimationFrame(()=>{if(g)Math.abs(x-t)<1&&(g=!1);else{const e=D.reduce((l,s)=>Math.abs(s-t)<Math.abs(l-t)?s:l),n=D.findIndex(l=>l===e);S=n,m(y({index:Math.floor(n/i),indexDelta:n}))}E=!1}),E=!0}}const F=q(R,200),j=q(M,500);function z(t){o&&I(),o=t,W(),M(),o==null||o.addEventListener("scroll",F),window.addEventListener("resize",j)}f&&z(f);const w=function(t,e){e!==void 0&&m(y({index:Math.floor(e/i),indexDelta:e})),t!==void 0&&m(y({index:t,indexDelta:t*i}))},I=()=>{o==null||o.removeEventListener("scroll",F),window.removeEventListener("resize",j)};return{destroy:I,getState:b,subscribe:A,jumpTo:w,setElement:z,calculate:M,goNext:()=>{const{countDelta:t,indexDelta:e}=a,n=t-i,l=e+i<=n?e+i:c&&e===n?0:n;w(void 0,l)},goPrev:()=>{const{indexDelta:t,countDelta:e}=a,n=e-i,l=t-i>=0?t-i:c&&t===0?n:0;w(void 0,l)}}}exports.createSnapSlider=B;
|
|
2
|
-
//# sourceMappingURL=snap-slider.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"snap-slider.cjs.js","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n let inThrottle: boolean\n let lastFn: ReturnType<typeof setTimeout>\n let lastTime: number\n return function (this: any) {\n const context = this\n const args = arguments\n if (!inThrottle) {\n fn.apply(context, args)\n lastTime = Date.now()\n inThrottle = true\n } else {\n clearTimeout(lastFn)\n lastFn = setTimeout(() => {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args)\n lastTime = Date.now()\n }\n }, Math.max(wait - (Date.now() - lastTime), 0))\n }\n }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n prevEnabled: boolean\n nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n element: HTMLElement | null\n itemSelector?: string\n circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n destroy: () => void\n getState: () => TSnapSliderStateFull\n jumpTo: TSnapSliderJumpToFn\n goNext: () => void\n goPrev: () => void\n subscribe: (fn: TSnapListner) => () => void\n setElement: (el: HTMLElement) => void\n calculate: () => void\n}\n\nexport function createSnapSlider({\n element: _element,\n count = 1,\n countDelta,\n index = 0,\n circular,\n indexDelta,\n itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n count,\n countDelta: countDelta || count,\n }\n let prevIndexDelta: number = index\n let slidesPerPage: number = 1\n let itemPositions: number[] = []\n let muteScrollListner: boolean = false\n let left: number = 0\n let element: HTMLElement | null\n function updateIndexDelta() {\n if (element) {\n const prev = element.scrollLeft\n const { indexDelta } = state\n left = indexDelta * (element.offsetWidth / slidesPerPage)\n if (prevIndexDelta !== indexDelta) {\n const distance = Math.abs(prev - left)\n const limitInstantScroll = element.offsetWidth * 2\n prevIndexDelta = indexDelta\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n behavior: distance > limitInstantScroll ? 'smooth' : undefined,\n })\n } else {\n if (initalIndex) {\n muteScrollListner = true\n element.scroll({\n left,\n top: 0,\n })\n initalIndex = undefined\n }\n }\n }\n }\n\n let publishDirty = false\n let listeners: TSnapListner[] = []\n const subscribe = (callback: TSnapListner) => {\n listeners.push(callback)\n if (publishDirty) {\n callback(getState())\n }\n return () => {\n listeners = listeners.filter((x) => x !== callback)\n if (listeners.length < 1) {\n destroy()\n }\n }\n }\n function notify() {\n listeners.forEach((callback) => {\n callback(getState())\n })\n }\n const getState = (): TSnapSliderStateFull => {\n const { indexDelta, countDelta } = state\n return {\n ...state,\n prevEnabled: circular || indexDelta > 0,\n nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n }\n }\n function update(params: TSnapSliderStateUpdate) {\n let dirty = false\n let indexDeltaDirty = false\n type TSnapSliderStateUpdateKey = keyof typeof params\n const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n params\n ) as Array<TSnapSliderStateUpdateKey>\n keys.forEach((key) => {\n if (state[key] !== params[key]) {\n state[key] = Number(params[key])\n dirty = true\n if (key === 'indexDelta') {\n indexDeltaDirty = true\n }\n }\n })\n if (dirty) {\n publishDirty = listeners.length === 0\n notify()\n if (indexDeltaDirty) {\n updateIndexDelta()\n }\n }\n }\n function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n const { index, indexDelta } = nextIndex\n const { countDelta, count } = state\n const last = countDelta - slidesPerPage\n return {\n index: indexDelta < last ? index : count - 1,\n indexDelta,\n }\n }\n function calculate() {\n if (element) {\n let contentWidth = 0\n let itemWidth = 0\n itemPositions = []\n element.querySelectorAll(itemSelector).forEach((slide) => {\n itemPositions.push(contentWidth)\n contentWidth += slide.clientWidth\n itemWidth = slide.clientWidth\n })\n slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n const countDelta = itemPositions.length\n const count = Math.ceil(countDelta / slidesPerPage)\n const { index } = state\n const resetIndexMayby =\n index + 1 > count\n ? {\n index: 0,\n indexDelta: 0,\n }\n : {}\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n }\n }\n\n let ticking = false\n function onScroll() {\n if (!ticking && element) {\n const scrollLeft = element.scrollLeft\n window.requestAnimationFrame(() => {\n if (muteScrollListner) {\n const leftToScroll = Math.abs(left - scrollLeft)\n if (leftToScroll < 1) {\n muteScrollListner = false\n }\n } else {\n const positionItem = itemPositions.reduce((prev, curr) => {\n return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n ? curr\n : prev\n })\n const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n prevIndexDelta = indexDelta\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 200)\n const onResizeFn = throttle(calculate, 500)\n function setElement(_el: HTMLElement) {\n if (element) {\n destroy()\n }\n element = _el\n updateIndexDelta()\n calculate()\n element?.addEventListener('scroll', onScrollFn)\n window.addEventListener('resize', onResizeFn)\n }\n _element && setElement(_element)\n const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n if (indexDelta !== undefined) {\n update(\n fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n })\n )\n }\n if (index !== undefined) {\n update(\n fixIndex({\n index,\n indexDelta: index * slidesPerPage,\n })\n )\n }\n }\n const destroy = () => {\n element?.removeEventListener('scroll', onScrollFn)\n window.removeEventListener('resize', onResizeFn)\n }\n const goNext = () => {\n const { countDelta, indexDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta + slidesPerPage <= last\n ? indexDelta + slidesPerPage\n : circular && indexDelta === last\n ? 0\n : last\n jumpTo(undefined, next)\n }\n const goPrev = () => {\n const { indexDelta, countDelta } = state\n const last = countDelta - slidesPerPage\n const next =\n indexDelta - slidesPerPage >= 0\n ? indexDelta - slidesPerPage\n : circular && indexDelta === 0\n ? last\n : 0\n jumpTo(undefined, next)\n }\n return {\n destroy,\n getState,\n subscribe,\n jumpTo,\n setElement,\n calculate,\n goNext,\n goPrev,\n }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),f=require("./snap-slider.cjs.js");function p(u,n=1,c=0,o=!1,a){const[,s]=t.useState(0),r=t.useRef(),[e]=t.useState(()=>f.createSnapSlider({element:u.current,count:n,index:c,circular:o})),i=e.getState();return t.useEffect(()=>{r.current&&(e.jumpTo(0),e.calculate())},[n,a,e]),t.useEffect(()=>{r.current=!0,u.current&&e.setElement(u.current);const l=e.subscribe(()=>{r.current&&s(S=>S+1)});return()=>{r.current=!1,l()}},[e,s]),{...i,jumpTo:e.jumpTo,goNext:e.goNext,goPrev:e.goPrev}}exports.useSnapSlider=p;
|
|
2
|
-
//# sourceMappingURL=use-snap-slider.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-snap-slider.cjs.js","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: (index: number) => void\n goNext: () => void\n goPrev: () => void\n}\n\nexport function useSnapSlider(\n ref: MutableRefObject<HTMLDivElement | null>,\n count: number = 1,\n index: number = 0,\n circular = false,\n countHash?: string | number\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>()\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n })\n )\n const result = observer.getState()\n useEffect(() => {\n if (mountedRef.current) {\n observer.jumpTo(0)\n observer.calculate()\n }\n }, [count, countHash, observer])\n useEffect(() => {\n mountedRef.current = true\n ref.current && observer.setElement(ref.current)\n const unsubscribe = observer.subscribe(() => {\n if (mountedRef.current) {\n forceUpdate((x) => x + 1)\n }\n })\n\n return () => {\n mountedRef.current = false\n unsubscribe()\n }\n }, [observer, forceUpdate])\n return {\n ...result,\n jumpTo: observer.jumpTo,\n goNext: observer.goNext,\n goPrev: observer.goPrev,\n }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":"2IASgB,SAAAA,EACdC,EACAC,EAAgB,EAChBC,EAAgB,EAChBC,EAAW,GACXC,EACgB,CAChB,KAAM,EAAGC,CAAW,EAAIC,WAAiB,CAAC,EACpCC,EAAaC,EAAAA,SACb,CAACC,CAAQ,EAAIH,EAAA,SAAS,IAC1BI,mBAAiB,CACf,QAASV,EAAI,QACb,MAAAC,EACA,MAAAC,EACA,SAAAC,CAAA,CACD,CAAA,EAEGQ,EAASF,EAAS,WACxBG,OAAAA,EAAAA,UAAU,IAAM,CACVL,EAAW,UACbE,EAAS,OAAO,CAAC,EACjBA,EAAS,UAAU,EAEpB,EAAA,CAACR,EAAOG,EAAWK,CAAQ,CAAC,EAC/BG,EAAAA,UAAU,IAAM,CACdL,EAAW,QAAU,GACrBP,EAAI,SAAWS,EAAS,WAAWT,EAAI,OAAO,EACxC,MAAAa,EAAcJ,EAAS,UAAU,IAAM,CACvCF,EAAW,SACDF,EAACS,GAAMA,EAAI,CAAC,CAC1B,CACD,EAED,MAAO,IAAM,CACXP,EAAW,QAAU,GACTM,GAAA,CACd,EACC,CAACJ,EAAUJ,CAAW,CAAC,EACnB,CACL,GAAGM,EACH,OAAQF,EAAS,OACjB,OAAQA,EAAS,OACjB,OAAQA,EAAS,MAAA,CAErB"}
|