use-snap-slider 0.0.5 → 0.1.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.
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  React hook / Vanilla JS to manage scroll-state for [CSS Scroll Snap](https://caniuse.com/?search=scroll-snap)
4
4
 
5
+ ![](https://img.shields.io/bundlephobia/min/use-snap-slider)
6
+
5
7
  Gives you states and actions for CSS Scroll Snap sliders:
6
8
 
7
9
  * `count:number` - total pages
@@ -112,7 +114,7 @@ const {
112
114
  )
113
115
  ```
114
116
 
115
- ### useSnapSlider react hook
117
+ ### createSnapSlider vanilla js function
116
118
 
117
119
  ```ts
118
120
  import { createSnapSlider } from 'use-snap-slider/dist/snap-slider'
@@ -0,0 +1,248 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const throttle = (fn, wait) => {
4
+ let inThrottle;
5
+ let lastFn;
6
+ let lastTime;
7
+ return function() {
8
+ const context = this;
9
+ const args = arguments;
10
+ if (!inThrottle) {
11
+ fn.apply(context, args);
12
+ lastTime = Date.now();
13
+ inThrottle = true;
14
+ } else {
15
+ clearTimeout(lastFn);
16
+ lastFn = setTimeout(() => {
17
+ if (Date.now() - lastTime >= wait) {
18
+ fn.apply(context, args);
19
+ lastTime = Date.now();
20
+ }
21
+ }, Math.max(wait - (Date.now() - lastTime), 0));
22
+ }
23
+ };
24
+ };
25
+ function createSnapSlider({
26
+ element: _element,
27
+ count = 1,
28
+ countDelta,
29
+ index = 0,
30
+ circular,
31
+ indexDelta,
32
+ initalSubscriptionPublish = true,
33
+ itemSelector = ":scope > *"
34
+ }) {
35
+ let initalIndex = index;
36
+ let state = {
37
+ index,
38
+ indexDelta: indexDelta || index,
39
+ count,
40
+ countDelta: countDelta || count
41
+ };
42
+ let prevIndexDelta = index;
43
+ let slidesPerPage = 1;
44
+ let itemPositions = [];
45
+ let muteScrollListner = false;
46
+ let left = 0;
47
+ let element;
48
+ function updateIndexDelta() {
49
+ if (element) {
50
+ const prev = element.scrollLeft;
51
+ const { indexDelta: indexDelta2 } = state;
52
+ left = indexDelta2 * (element.offsetWidth / slidesPerPage);
53
+ if (prevIndexDelta !== indexDelta2) {
54
+ const distance = Math.abs(prev - left);
55
+ const limitInstantScroll = element.offsetWidth * 2;
56
+ prevIndexDelta = indexDelta2;
57
+ muteScrollListner = true;
58
+ const behavior = distance > limitInstantScroll ? "instant" : "smooth";
59
+ element.scroll({
60
+ left,
61
+ top: 0,
62
+ behavior
63
+ });
64
+ } else {
65
+ if (initalIndex) {
66
+ muteScrollListner = true;
67
+ element.scroll({
68
+ left,
69
+ top: 0,
70
+ behavior: "instant"
71
+ });
72
+ initalIndex = void 0;
73
+ }
74
+ }
75
+ }
76
+ }
77
+ let publishDirty = false;
78
+ let listeners = [];
79
+ const subscribe = (callback) => {
80
+ listeners.push(callback);
81
+ if (element && (publishDirty || initalSubscriptionPublish)) {
82
+ callback(getState());
83
+ }
84
+ return () => {
85
+ listeners = listeners.filter((x) => x !== callback);
86
+ if (listeners.length < 1) {
87
+ destroy();
88
+ }
89
+ };
90
+ };
91
+ function notify() {
92
+ listeners.forEach((callback) => {
93
+ callback(getState());
94
+ });
95
+ }
96
+ const getState = () => {
97
+ const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
98
+ return {
99
+ ...state,
100
+ prevEnabled: circular || indexDelta2 > 0,
101
+ nextEnabled: circular || countDelta2 - slidesPerPage > indexDelta2
102
+ };
103
+ };
104
+ function update(params) {
105
+ let dirty = false;
106
+ let indexDeltaDirty = false;
107
+ const keys = Object.keys(
108
+ params
109
+ );
110
+ keys.forEach((key) => {
111
+ if (state[key] !== params[key]) {
112
+ state[key] = Number(params[key]);
113
+ dirty = true;
114
+ if (key === "indexDelta") {
115
+ indexDeltaDirty = true;
116
+ }
117
+ }
118
+ });
119
+ if (dirty) {
120
+ publishDirty = listeners.length === 0;
121
+ notify();
122
+ if (indexDeltaDirty) {
123
+ updateIndexDelta();
124
+ }
125
+ }
126
+ }
127
+ function fixIndex(nextIndex) {
128
+ const { index: index2, indexDelta: indexDelta2 } = nextIndex;
129
+ const { countDelta: countDelta2, count: count2 } = state;
130
+ const last = countDelta2 - slidesPerPage;
131
+ return {
132
+ index: indexDelta2 < last ? index2 : count2 - 1,
133
+ indexDelta: indexDelta2
134
+ };
135
+ }
136
+ function calculate() {
137
+ if (element) {
138
+ let contentWidth = 0;
139
+ let itemWidth = 0;
140
+ itemPositions = [];
141
+ element.querySelectorAll(itemSelector).forEach((slide) => {
142
+ itemPositions.push(contentWidth);
143
+ contentWidth += slide.clientWidth;
144
+ itemWidth = slide.clientWidth;
145
+ });
146
+ slidesPerPage = Math.round(element.offsetWidth / itemWidth);
147
+ const countDelta2 = itemPositions.length;
148
+ const count2 = Math.ceil(countDelta2 / slidesPerPage);
149
+ const { index: index2 } = state;
150
+ const resetIndexMayby = index2 + 1 > count2 ? {
151
+ index: 0,
152
+ indexDelta: 0
153
+ } : {};
154
+ update({
155
+ count: count2,
156
+ countDelta: countDelta2,
157
+ ...resetIndexMayby
158
+ });
159
+ }
160
+ }
161
+ let ticking = false;
162
+ function onScroll() {
163
+ if (!ticking && element) {
164
+ const scrollLeft = element.scrollLeft;
165
+ window.requestAnimationFrame(() => {
166
+ if (muteScrollListner) {
167
+ const leftToScroll = Math.abs(left - scrollLeft);
168
+ if (leftToScroll < 2) {
169
+ muteScrollListner = false;
170
+ }
171
+ } else {
172
+ const positionItem = itemPositions.reduce((prev, curr) => {
173
+ return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
174
+ });
175
+ const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
176
+ prevIndexDelta = indexDelta2;
177
+ update(
178
+ fixIndex({
179
+ index: Math.floor(indexDelta2 / slidesPerPage),
180
+ indexDelta: indexDelta2
181
+ })
182
+ );
183
+ }
184
+ ticking = false;
185
+ });
186
+ ticking = true;
187
+ }
188
+ }
189
+ const onScrollFn = throttle(onScroll, 200);
190
+ const onResizeFn = throttle(calculate, 500);
191
+ function setElement(_el) {
192
+ if (element) {
193
+ destroy();
194
+ }
195
+ element = _el;
196
+ updateIndexDelta();
197
+ calculate();
198
+ element == null ? void 0 : element.addEventListener("scroll", onScrollFn);
199
+ window.addEventListener("resize", onResizeFn);
200
+ }
201
+ _element && setElement(_element);
202
+ const jumpTo = function(index2, indexDelta2) {
203
+ if (indexDelta2 !== void 0) {
204
+ update(
205
+ fixIndex({
206
+ index: Math.floor(indexDelta2 / slidesPerPage),
207
+ indexDelta: indexDelta2
208
+ })
209
+ );
210
+ }
211
+ if (index2 !== void 0) {
212
+ update(
213
+ fixIndex({
214
+ index: index2,
215
+ indexDelta: index2 * slidesPerPage
216
+ })
217
+ );
218
+ }
219
+ };
220
+ const destroy = () => {
221
+ element == null ? void 0 : element.removeEventListener("scroll", onScrollFn);
222
+ window.removeEventListener("resize", onResizeFn);
223
+ };
224
+ const goNext = () => {
225
+ const { countDelta: countDelta2, indexDelta: indexDelta2 } = state;
226
+ const last = countDelta2 - slidesPerPage;
227
+ const next = indexDelta2 + slidesPerPage <= last ? indexDelta2 + slidesPerPage : circular && indexDelta2 === last ? 0 : last;
228
+ jumpTo(void 0, next);
229
+ };
230
+ const goPrev = () => {
231
+ const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
232
+ const last = countDelta2 - slidesPerPage;
233
+ const next = indexDelta2 - slidesPerPage >= 0 ? indexDelta2 - slidesPerPage : circular && indexDelta2 === 0 ? last : 0;
234
+ jumpTo(void 0, next);
235
+ };
236
+ return {
237
+ destroy,
238
+ getState,
239
+ subscribe,
240
+ jumpTo,
241
+ setElement,
242
+ calculate,
243
+ goNext,
244
+ goPrev
245
+ };
246
+ }
247
+ exports.createSnapSlider = createSnapSlider;
248
+ //# sourceMappingURL=snap-slider.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"snap-slider.cjs","sources":["../lib/throttle.ts","../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 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 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":["indexDelta","countDelta","index","count"],"mappings":"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"}
@@ -1 +1,38 @@
1
- export * from './lib/snap-slider'
1
+ export interface TSnapListnerStateIndex {
2
+ index: number;
3
+ indexDelta: number;
4
+ }
5
+ export interface TSnapSliderState extends TSnapListnerStateIndex {
6
+ count: number;
7
+ countDelta: number;
8
+ }
9
+ interface TSnapSliderStateUpdate {
10
+ index?: number;
11
+ indexDelta?: number;
12
+ count?: number;
13
+ countDelta?: number;
14
+ }
15
+ export interface TSnapSliderStateFull extends TSnapSliderState {
16
+ prevEnabled: boolean;
17
+ nextEnabled: boolean;
18
+ }
19
+ export type TSnapListner = (params: TSnapSliderStateFull) => void;
20
+ export interface TSnapSliderParams extends TSnapSliderStateUpdate {
21
+ element: HTMLElement | null;
22
+ itemSelector?: string;
23
+ initalSubscriptionPublish?: boolean;
24
+ circular?: boolean;
25
+ }
26
+ export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
27
+ export interface TSnapSlider {
28
+ destroy: () => void;
29
+ getState: () => TSnapSliderStateFull;
30
+ jumpTo: TSnapSliderJumpToFn;
31
+ goNext: () => void;
32
+ goPrev: () => void;
33
+ subscribe: (fn: TSnapListner) => () => void;
34
+ setElement: (el: HTMLElement) => void;
35
+ calculate: () => void;
36
+ }
37
+ export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
38
+ export {};
@@ -1,156 +1,248 @@
1
- const q = (f, u) => {
2
- let h, r, c;
1
+ const throttle = (fn, wait) => {
2
+ let inThrottle;
3
+ let lastFn;
4
+ let lastTime;
3
5
  return function() {
4
- const v = this, p = arguments;
5
- h ? (clearTimeout(r), r = setTimeout(() => {
6
- Date.now() - c >= u && (f.apply(v, p), c = Date.now());
7
- }, Math.max(u - (Date.now() - c), 0))) : (f.apply(v, p), c = Date.now(), h = !0);
6
+ const context = this;
7
+ const args = arguments;
8
+ if (!inThrottle) {
9
+ fn.apply(context, args);
10
+ lastTime = Date.now();
11
+ inThrottle = true;
12
+ } else {
13
+ clearTimeout(lastFn);
14
+ lastFn = setTimeout(() => {
15
+ if (Date.now() - lastTime >= wait) {
16
+ fn.apply(context, args);
17
+ lastTime = Date.now();
18
+ }
19
+ }, Math.max(wait - (Date.now() - lastTime), 0));
20
+ }
8
21
  };
9
22
  };
10
- function H({
11
- element: f,
12
- count: u = 1,
13
- countDelta: h,
14
- index: r = 0,
15
- circular: c,
16
- indexDelta: v,
17
- initalSubscriptionPublish: p = !0,
18
- itemSelector: A = ":scope > *"
23
+ function createSnapSlider({
24
+ element: _element,
25
+ count = 1,
26
+ countDelta,
27
+ index = 0,
28
+ circular,
29
+ indexDelta,
30
+ initalSubscriptionPublish = true,
31
+ itemSelector = ":scope > *"
19
32
  }) {
20
- let T = r, a = {
21
- index: r,
22
- indexDelta: v || r,
23
- count: u,
24
- countDelta: h || u
25
- }, g = r, i = 1, x = [], m = !1, D = 0, n;
26
- function W() {
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({
34
- left: D,
33
+ let initalIndex = index;
34
+ let state = {
35
+ index,
36
+ indexDelta: indexDelta || index,
37
+ count,
38
+ countDelta: countDelta || count
39
+ };
40
+ let prevIndexDelta = index;
41
+ let slidesPerPage = 1;
42
+ let itemPositions = [];
43
+ let muteScrollListner = false;
44
+ let left = 0;
45
+ let element;
46
+ function updateIndexDelta() {
47
+ if (element) {
48
+ const prev = element.scrollLeft;
49
+ const { indexDelta: indexDelta2 } = state;
50
+ left = indexDelta2 * (element.offsetWidth / slidesPerPage);
51
+ if (prevIndexDelta !== indexDelta2) {
52
+ const distance = Math.abs(prev - left);
53
+ const limitInstantScroll = element.offsetWidth * 2;
54
+ prevIndexDelta = indexDelta2;
55
+ muteScrollListner = true;
56
+ const behavior = distance > limitInstantScroll ? "instant" : "smooth";
57
+ element.scroll({
58
+ left,
35
59
  top: 0,
36
- behavior: s
60
+ behavior
37
61
  });
38
- } else
39
- T && (m = !0, n.scroll({
40
- left: D,
41
- top: 0,
42
- // @ts-expect-error [mildly irritated message]
43
- behavior: "instant"
44
- }), T = void 0);
62
+ } else {
63
+ if (initalIndex) {
64
+ muteScrollListner = true;
65
+ element.scroll({
66
+ left,
67
+ top: 0,
68
+ behavior: "instant"
69
+ });
70
+ initalIndex = void 0;
71
+ }
72
+ }
45
73
  }
46
74
  }
47
- let P = !1, d = [];
48
- const O = (t) => (d.push(t), n && (P || p) && t(E()), () => {
49
- d = d.filter((e) => e !== t), d.length < 1 && I();
50
- });
51
- function R() {
52
- d.forEach((t) => {
53
- t(E());
75
+ let publishDirty = false;
76
+ let listeners = [];
77
+ const subscribe = (callback) => {
78
+ listeners.push(callback);
79
+ if (element && (publishDirty || initalSubscriptionPublish)) {
80
+ callback(getState());
81
+ }
82
+ return () => {
83
+ listeners = listeners.filter((x) => x !== callback);
84
+ if (listeners.length < 1) {
85
+ destroy();
86
+ }
87
+ };
88
+ };
89
+ function notify() {
90
+ listeners.forEach((callback) => {
91
+ callback(getState());
54
92
  });
55
93
  }
56
- const E = () => {
57
- const { indexDelta: t, countDelta: e } = a;
94
+ const getState = () => {
95
+ const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
58
96
  return {
59
- ...a,
60
- prevEnabled: c || t > 0,
61
- nextEnabled: c || e - i > t
97
+ ...state,
98
+ prevEnabled: circular || indexDelta2 > 0,
99
+ nextEnabled: circular || countDelta2 - slidesPerPage > indexDelta2
62
100
  };
63
101
  };
64
- function b(t) {
65
- let e = !1, o = !1;
66
- Object.keys(
67
- t
68
- ).forEach((s) => {
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());
102
+ function update(params) {
103
+ let dirty = false;
104
+ let indexDeltaDirty = false;
105
+ const keys = Object.keys(
106
+ params
107
+ );
108
+ keys.forEach((key) => {
109
+ if (state[key] !== params[key]) {
110
+ state[key] = Number(params[key]);
111
+ dirty = true;
112
+ if (key === "indexDelta") {
113
+ indexDeltaDirty = true;
114
+ }
115
+ }
116
+ });
117
+ if (dirty) {
118
+ publishDirty = listeners.length === 0;
119
+ notify();
120
+ if (indexDeltaDirty) {
121
+ updateIndexDelta();
122
+ }
123
+ }
71
124
  }
72
- function M(t) {
73
- const { index: e, indexDelta: o } = t, { countDelta: l, count: s } = a, L = l - i;
125
+ function fixIndex(nextIndex) {
126
+ const { index: index2, indexDelta: indexDelta2 } = nextIndex;
127
+ const { countDelta: countDelta2, count: count2 } = state;
128
+ const last = countDelta2 - slidesPerPage;
74
129
  return {
75
- index: o < L ? e : s - 1,
76
- indexDelta: o
130
+ index: indexDelta2 < last ? index2 : count2 - 1,
131
+ indexDelta: indexDelta2
77
132
  };
78
133
  }
79
- function S() {
80
- if (n) {
81
- let t = 0, e = 0;
82
- x = [], n.querySelectorAll(A).forEach((j) => {
83
- x.push(t), t += j.clientWidth, e = j.clientWidth;
84
- }), i = Math.round(n.offsetWidth / e);
85
- const o = x.length, l = Math.ceil(o / i), { index: s } = a, L = s + 1 > l ? {
134
+ function calculate() {
135
+ if (element) {
136
+ let contentWidth = 0;
137
+ let itemWidth = 0;
138
+ itemPositions = [];
139
+ element.querySelectorAll(itemSelector).forEach((slide) => {
140
+ itemPositions.push(contentWidth);
141
+ contentWidth += slide.clientWidth;
142
+ itemWidth = slide.clientWidth;
143
+ });
144
+ slidesPerPage = Math.round(element.offsetWidth / itemWidth);
145
+ const countDelta2 = itemPositions.length;
146
+ const count2 = Math.ceil(countDelta2 / slidesPerPage);
147
+ const { index: index2 } = state;
148
+ const resetIndexMayby = index2 + 1 > count2 ? {
86
149
  index: 0,
87
150
  indexDelta: 0
88
151
  } : {};
89
- b({
90
- count: l,
91
- countDelta: o,
92
- ...L
152
+ update({
153
+ count: count2,
154
+ countDelta: countDelta2,
155
+ ...resetIndexMayby
93
156
  });
94
157
  }
95
158
  }
96
- let w = !1;
97
- function B() {
98
- if (!w && n) {
99
- const t = n.scrollLeft;
159
+ let ticking = false;
160
+ function onScroll() {
161
+ if (!ticking && element) {
162
+ const scrollLeft = element.scrollLeft;
100
163
  window.requestAnimationFrame(() => {
101
- if (m)
102
- Math.abs(D - t) < 2 && (m = !1);
103
- else {
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(
106
- M({
107
- index: Math.floor(o / i),
108
- indexDelta: o
164
+ if (muteScrollListner) {
165
+ const leftToScroll = Math.abs(left - scrollLeft);
166
+ if (leftToScroll < 2) {
167
+ muteScrollListner = false;
168
+ }
169
+ } else {
170
+ const positionItem = itemPositions.reduce((prev, curr) => {
171
+ return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
172
+ });
173
+ const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
174
+ prevIndexDelta = indexDelta2;
175
+ update(
176
+ fixIndex({
177
+ index: Math.floor(indexDelta2 / slidesPerPage),
178
+ indexDelta: indexDelta2
109
179
  })
110
180
  );
111
181
  }
112
- w = !1;
113
- }), w = !0;
182
+ ticking = false;
183
+ });
184
+ ticking = true;
114
185
  }
115
186
  }
116
- const F = q(B, 200), z = q(S, 500);
117
- function N(t) {
118
- n && I(), n = t, W(), S(), n == null || n.addEventListener("scroll", F), window.addEventListener("resize", z);
187
+ const onScrollFn = throttle(onScroll, 200);
188
+ const onResizeFn = throttle(calculate, 500);
189
+ function setElement(_el) {
190
+ if (element) {
191
+ destroy();
192
+ }
193
+ element = _el;
194
+ updateIndexDelta();
195
+ calculate();
196
+ element == null ? void 0 : element.addEventListener("scroll", onScrollFn);
197
+ window.addEventListener("resize", onResizeFn);
119
198
  }
120
- f && N(f);
121
- const y = function(t, e) {
122
- e !== void 0 && b(
123
- M({
124
- index: Math.floor(e / i),
125
- indexDelta: e
126
- })
127
- ), t !== void 0 && b(
128
- M({
129
- index: t,
130
- indexDelta: t * i
131
- })
132
- );
133
- }, I = () => {
134
- n == null || n.removeEventListener("scroll", F), window.removeEventListener("resize", z);
199
+ _element && setElement(_element);
200
+ const jumpTo = function(index2, indexDelta2) {
201
+ if (indexDelta2 !== void 0) {
202
+ update(
203
+ fixIndex({
204
+ index: Math.floor(indexDelta2 / slidesPerPage),
205
+ indexDelta: indexDelta2
206
+ })
207
+ );
208
+ }
209
+ if (index2 !== void 0) {
210
+ update(
211
+ fixIndex({
212
+ index: index2,
213
+ indexDelta: index2 * slidesPerPage
214
+ })
215
+ );
216
+ }
217
+ };
218
+ const destroy = () => {
219
+ element == null ? void 0 : element.removeEventListener("scroll", onScrollFn);
220
+ window.removeEventListener("resize", onResizeFn);
221
+ };
222
+ const goNext = () => {
223
+ const { countDelta: countDelta2, indexDelta: indexDelta2 } = state;
224
+ const last = countDelta2 - slidesPerPage;
225
+ const next = indexDelta2 + slidesPerPage <= last ? indexDelta2 + slidesPerPage : circular && indexDelta2 === last ? 0 : last;
226
+ jumpTo(void 0, next);
227
+ };
228
+ const goPrev = () => {
229
+ const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
230
+ const last = countDelta2 - slidesPerPage;
231
+ const next = indexDelta2 - slidesPerPage >= 0 ? indexDelta2 - slidesPerPage : circular && indexDelta2 === 0 ? last : 0;
232
+ jumpTo(void 0, next);
135
233
  };
136
234
  return {
137
- destroy: I,
138
- getState: E,
139
- subscribe: O,
140
- jumpTo: y,
141
- setElement: N,
142
- calculate: S,
143
- goNext: () => {
144
- const { countDelta: t, indexDelta: e } = a, o = t - i, l = e + i <= o ? e + i : c && e === o ? 0 : o;
145
- y(void 0, l);
146
- },
147
- goPrev: () => {
148
- const { indexDelta: t, countDelta: e } = a, o = e - i, l = t - i >= 0 ? t - i : c && t === 0 ? o : 0;
149
- y(void 0, l);
150
- }
235
+ destroy,
236
+ getState,
237
+ subscribe,
238
+ jumpTo,
239
+ setElement,
240
+ calculate,
241
+ goNext,
242
+ goPrev
151
243
  };
152
244
  }
153
245
  export {
154
- H as createSnapSlider
246
+ createSnapSlider
155
247
  };
156
248
  //# 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 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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"}
1
+ {"version":3,"file":"snap-slider.es.js","sources":["../lib/throttle.ts","../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 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 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":["indexDelta","countDelta","index","count"],"mappings":"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"}
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const react = require("react");
4
+ const snapSlider = require("./snap-slider.cjs");
5
+ function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
6
+ const [, forceUpdate] = react.useState(0);
7
+ const mountedRef = react.useRef();
8
+ const [observer] = react.useState(
9
+ () => snapSlider.createSnapSlider({
10
+ element: ref.current,
11
+ count,
12
+ index,
13
+ circular,
14
+ initalSubscriptionPublish: false
15
+ })
16
+ );
17
+ const result = observer.getState();
18
+ react.useEffect(() => {
19
+ if (mountedRef.current) {
20
+ observer.jumpTo(0);
21
+ observer.calculate();
22
+ }
23
+ }, [count, countHash, observer]);
24
+ react.useEffect(() => {
25
+ mountedRef.current = true;
26
+ ref.current && observer.setElement(ref.current);
27
+ const unsubscribe = observer.subscribe(() => {
28
+ if (mountedRef.current) {
29
+ forceUpdate((x) => x + 1);
30
+ }
31
+ });
32
+ return () => {
33
+ mountedRef.current = false;
34
+ unsubscribe();
35
+ };
36
+ }, [observer, forceUpdate]);
37
+ return {
38
+ ...result,
39
+ jumpTo: observer.jumpTo,
40
+ goNext: observer.goNext,
41
+ goPrev: observer.goPrev
42
+ };
43
+ }
44
+ exports.useSnapSlider = useSnapSlider;
45
+ //# sourceMappingURL=use-snap-slider.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-snap-slider.cjs","sources":["../lib/use-snap-slider.ts"],"sourcesContent":["import { type MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, type 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":["useState","useRef","createSnapSlider","useEffect"],"mappings":";;;;AASgB,SAAA,cACd,KACA,QAAgB,GAChB,QAAgB,GAChB,WAAW,OACX,WACgB;AAChB,QAAM,GAAG,WAAW,IAAIA,eAAiB,CAAC;AAC1C,QAAM,aAAaC,MAAAA;AACb,QAAA,CAAC,QAAQ,IAAID,MAAA;AAAA,IAAS,MAC1BE,4BAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,IAAA,CAC5B;AAAA,EAAA;AAEG,QAAA,SAAS,SAAS;AACxBC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IACrB;AAAA,EACC,GAAA,CAAC,OAAO,WAAW,QAAQ,CAAC;AAC/BA,QAAAA,UAAU,MAAM;AACd,eAAW,UAAU;AACrB,QAAI,WAAW,SAAS,WAAW,IAAI,OAAO;AACxC,UAAA,cAAc,SAAS,UAAU,MAAM;AAC3C,UAAI,WAAW,SAAS;AACV,oBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,MAC1B;AAAA,IAAA,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT;IAAA;AAAA,EACd,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EAAA;AAErB;;"}
@@ -1 +1,8 @@
1
- export * from './lib/use-snap-slider'
1
+ import { type MutableRefObject } from 'react';
2
+ import { type TSnapSliderStateFull } from './snap-slider';
3
+ export interface TUseSnapSlider extends TSnapSliderStateFull {
4
+ jumpTo: (index: number) => void;
5
+ goNext: () => void;
6
+ goPrev: () => void;
7
+ }
8
+ export declare function useSnapSlider(ref: MutableRefObject<HTMLDivElement | null>, count?: number, index?: number, circular?: boolean, countHash?: string | number): TUseSnapSlider;
@@ -1,33 +1,45 @@
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
- const [, n] = o(0), t = p(), [e] = o(
5
- () => b({
6
- element: r.current,
7
- count: u,
8
- index: c,
9
- circular: i,
10
- initalSubscriptionPublish: !1
1
+ import { useState, useRef, useEffect } from "react";
2
+ import { createSnapSlider } from "./snap-slider.es.js";
3
+ function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
4
+ const [, forceUpdate] = useState(0);
5
+ const mountedRef = useRef();
6
+ const [observer] = useState(
7
+ () => createSnapSlider({
8
+ element: ref.current,
9
+ count,
10
+ index,
11
+ circular,
12
+ initalSubscriptionPublish: false
11
13
  })
12
- ), l = e.getState();
13
- return s(() => {
14
- t.current && (e.jumpTo(0), e.calculate());
15
- }, [u, a, e]), s(() => {
16
- t.current = !0, r.current && e.setElement(r.current);
17
- const f = e.subscribe(() => {
18
- t.current && n((m) => m + 1);
14
+ );
15
+ const result = observer.getState();
16
+ useEffect(() => {
17
+ if (mountedRef.current) {
18
+ observer.jumpTo(0);
19
+ observer.calculate();
20
+ }
21
+ }, [count, countHash, observer]);
22
+ useEffect(() => {
23
+ mountedRef.current = true;
24
+ ref.current && observer.setElement(ref.current);
25
+ const unsubscribe = observer.subscribe(() => {
26
+ if (mountedRef.current) {
27
+ forceUpdate((x) => x + 1);
28
+ }
19
29
  });
20
30
  return () => {
21
- t.current = !1, f();
31
+ mountedRef.current = false;
32
+ unsubscribe();
22
33
  };
23
- }, [e, n]), {
24
- ...l,
25
- jumpTo: e.jumpTo,
26
- goNext: e.goNext,
27
- goPrev: e.goPrev
34
+ }, [observer, forceUpdate]);
35
+ return {
36
+ ...result,
37
+ jumpTo: observer.jumpTo,
38
+ goNext: observer.goNext,
39
+ goPrev: observer.goPrev
28
40
  };
29
41
  }
30
42
  export {
31
- d as useSnapSlider
43
+ useSnapSlider
32
44
  };
33
45
  //# sourceMappingURL=use-snap-slider.es.js.map
@@ -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 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;"}
1
+ {"version":3,"file":"use-snap-slider.es.js","sources":["../lib/use-snap-slider.ts"],"sourcesContent":["import { type MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, type 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":[],"mappings":";;AASgB,SAAA,cACd,KACA,QAAgB,GAChB,QAAgB,GAChB,WAAW,OACX,WACgB;AAChB,QAAM,GAAG,WAAW,IAAI,SAAiB,CAAC;AAC1C,QAAM,aAAa;AACb,QAAA,CAAC,QAAQ,IAAI;AAAA,IAAS,MAC1B,iBAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,IAAA,CAC5B;AAAA,EAAA;AAEG,QAAA,SAAS,SAAS;AACxB,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IACrB;AAAA,EACC,GAAA,CAAC,OAAO,WAAW,QAAQ,CAAC;AAC/B,YAAU,MAAM;AACd,eAAW,UAAU;AACrB,QAAI,WAAW,SAAS,WAAW,IAAI,OAAO;AACxC,UAAA,cAAc,SAAS,UAAU,MAAM;AAC3C,UAAI,WAAW,SAAS;AACV,oBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,MAC1B;AAAA,IAAA,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT;IAAA;AAAA,EACd,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EAAA;AAErB;"}
package/package.json CHANGED
@@ -1,11 +1,33 @@
1
1
  {
2
2
  "name": "use-snap-slider",
3
- "version": "0.0.5",
3
+ "version": "0.1.0",
4
4
  "description": "React hook to manage css snap sliders",
5
5
  "type": "module",
6
- "main": "./dist/use-snap-slider.cjs.js",
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
+ "exports": {
10
+ ".": {
11
+ "import": {
12
+ "types": "./dist/use-snap-slider.d.ts",
13
+ "default": "./dist/use-snap-slider.es.js"
14
+ },
15
+ "require": {
16
+ "types": "./dist/use-snap-slider.d.ts",
17
+ "default": "./dist/use-snap-slider.cjs"
18
+ }
19
+ },
20
+ "./dist/snap-slider": {
21
+ "import": {
22
+ "types": "./dist/snap-slider.d.ts",
23
+ "default": "./dist/snap-slider.es.js"
24
+ },
25
+ "require": {
26
+ "types": "./dist/snap-slider.d.ts",
27
+ "default": "./dist/snap-slider.cjs"
28
+ }
29
+ }
30
+ },
9
31
  "files": [
10
32
  "dist"
11
33
  ],
@@ -16,7 +38,8 @@
16
38
  "homepage": "https://use-snap-slider.vercel.app",
17
39
  "scripts": {
18
40
  "dev": "vite",
19
- "build": "tsc -p tsconfig.prod.json && vite build",
41
+ "clean": "rimraf dist/*",
42
+ "build": "npm run clean && tsc -p tsconfig.prod.json && vite build --config vite.config.lib.ts",
20
43
  "build::source": "DISABLE_MINIFY=1 npm run build",
21
44
  "prepare": "npm run build",
22
45
  "build-vercel": "tsc -p tsconfig.prod.json && vite build --config vite.config.vercel.ts",
@@ -30,24 +53,25 @@
30
53
  "singleQuote": true
31
54
  },
32
55
  "devDependencies": {
33
- "@testing-library/jest-dom": "^5.16.5",
34
- "@testing-library/react": "^14.0.0",
35
- "@types/jest": "^29.5.0",
36
- "@types/node": "^18.15.11",
37
- "@types/react": "^18.0.28",
38
- "@types/react-dom": "^18.0.11",
39
- "@vitejs/plugin-react": "^3.1.0",
40
- "autoprefixer": "^10.4.14",
41
- "classnames": "^2.3.2",
42
- "jest": "^29.5.0",
43
- "jest-environment-jsdom": "^29.5.0",
44
- "postcss": "^8.4.21",
56
+ "@testing-library/jest-dom": "^6.4.2",
57
+ "@testing-library/react": "^14.2.1",
58
+ "@types/jest": "^29.5.12",
59
+ "@types/node": "^20.11.17",
60
+ "@types/react": "^18.2.55",
61
+ "@types/react-dom": "^18.2.19",
62
+ "@vitejs/plugin-react": "^4.2.1",
63
+ "autoprefixer": "^10.4.17",
64
+ "classnames": "^2.5.1",
65
+ "jest": "^29.7.0",
66
+ "jest-environment-jsdom": "^29.7.0",
67
+ "postcss": "^8.4.35",
45
68
  "react": "^18.2.0",
46
69
  "react-dom": "^18.2.0",
47
- "tailwindcss": "^3.2.7",
48
- "ts-jest": "^29.1.0",
49
- "typescript": "^4.9.3",
50
- "vite": "^4.2.0",
51
- "vite-plugin-dts": "^2.2.0"
70
+ "rimraf": "^5.0.5",
71
+ "tailwindcss": "^3.4.1",
72
+ "ts-jest": "^29.1.2",
73
+ "typescript": "^5.3.3",
74
+ "vite": "^5.1.1",
75
+ "vite-plugin-dts": "^3.7.2"
52
76
  }
53
77
  }
@@ -1,38 +0,0 @@
1
- export interface TSnapListnerStateIndex {
2
- index: number;
3
- indexDelta: number;
4
- }
5
- export interface TSnapSliderState extends TSnapListnerStateIndex {
6
- count: number;
7
- countDelta: number;
8
- }
9
- interface TSnapSliderStateUpdate {
10
- index?: number;
11
- indexDelta?: number;
12
- count?: number;
13
- countDelta?: number;
14
- }
15
- export interface TSnapSliderStateFull extends TSnapSliderState {
16
- prevEnabled: boolean;
17
- nextEnabled: boolean;
18
- }
19
- export type TSnapListner = (params: TSnapSliderStateFull) => void;
20
- export interface TSnapSliderParams extends TSnapSliderStateUpdate {
21
- element: HTMLElement | null;
22
- itemSelector?: string;
23
- initalSubscriptionPublish?: boolean;
24
- circular?: boolean;
25
- }
26
- export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
27
- export interface TSnapSlider {
28
- destroy: () => void;
29
- getState: () => TSnapSliderStateFull;
30
- jumpTo: TSnapSliderJumpToFn;
31
- goNext: () => void;
32
- goPrev: () => void;
33
- subscribe: (fn: TSnapListner) => () => void;
34
- setElement: (el: HTMLElement) => void;
35
- calculate: () => void;
36
- }
37
- export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
38
- export {};
@@ -1,8 +0,0 @@
1
- import { MutableRefObject } from 'react';
2
- import { TSnapSliderStateFull } from './snap-slider';
3
- export interface TUseSnapSlider extends TSnapSliderStateFull {
4
- jumpTo: (index: number) => void;
5
- goNext: () => void;
6
- goPrev: () => void;
7
- }
8
- export declare function useSnapSlider(ref: MutableRefObject<HTMLDivElement | null>, count?: number, index?: number, circular?: boolean, countHash?: string | number): TUseSnapSlider;
@@ -1,2 +0,0 @@
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.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 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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"}
@@ -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,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.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 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":"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,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"}
package/dist/vite.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
File without changes