use-snap-slider 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/snap-slider.cjs +26 -17
  2. package/dist/snap-slider.cjs.map +1 -1
  3. package/dist/snap-slider.d.ts +5 -2
  4. package/dist/snap-slider.es.js +26 -17
  5. package/dist/snap-slider.es.js.map +1 -1
  6. package/dist/use-snap-slider.cjs.map +1 -1
  7. package/dist/use-snap-slider.d.ts +2 -2
  8. package/dist/use-snap-slider.es.js.map +1 -1
  9. package/package.json +1 -1
package/dist/snap-slider.cjs CHANGED
@@ -37,6 +37,7 @@ function createSnapSlider({
37
37
  let state = {
38
38
  index,
39
39
  indexDelta: indexDelta || index,
40
+ event: "inital",
40
41
  count,
41
42
  countDelta: countDelta || count
42
43
  };
@@ -49,14 +50,14 @@ function createSnapSlider({
49
50
  function updateIndexDelta() {
50
51
  if (element) {
51
52
  const prev = element.scrollLeft;
52
- const { indexDelta: indexDelta2 } = state;
53
+ const { indexDelta: indexDelta2, event } = state;
53
54
  left = indexDelta2 * (element.offsetWidth / slidesPerPage);
54
55
  if (prevIndexDelta !== indexDelta2) {
55
56
  const distance = Math.abs(prev - left);
56
57
  const limitInstantScroll = element.offsetWidth * 2;
57
58
  prevIndexDelta = indexDelta2;
58
59
  muteScrollListner = true;
59
- const behavior = distance > limitInstantScroll ? "instant" : "smooth";
60
+ const behavior = distance > limitInstantScroll || event === "click" ? "instant" : "smooth";
60
61
  element.scroll({
61
62
  left,
62
63
  top: 0,
@@ -108,8 +109,9 @@ function createSnapSlider({
108
109
  const keys = Object.keys(
109
110
  params
110
111
  );
112
+ state["event"] = params["event"];
111
113
  keys.forEach((key) => {
112
- if (state[key] !== params[key]) {
114
+ if (key !== "event" && state[key] !== params[key]) {
113
115
  state[key] = Number(params[key]);
114
116
  dirty = true;
115
117
  if (key === "indexDelta") {
@@ -155,6 +157,7 @@ function createSnapSlider({
155
157
  } : {};
156
158
  if (!isNaN(count2)) {
157
159
  update({
160
+ event: "inital",
158
161
  count: count2,
159
162
  countDelta: countDelta2,
160
163
  ...resetIndexMayby
@@ -187,20 +190,24 @@ function createSnapSlider({
187
190
  return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
188
191
  });
189
192
  const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
193
+ const pxLeftScrolling = Math.abs(scrollLeft - positionItem);
190
194
  prevIndexDelta = indexDelta2;
191
- update(
192
- fixIndex({
193
- index: Math.floor(indexDelta2 / slidesPerPage),
194
- indexDelta: indexDelta2
195
- })
196
- );
195
+ if (pxLeftScrolling < 2) {
196
+ update({
197
+ event: "scroll",
198
+ ...fixIndex({
199
+ index: Math.floor(indexDelta2 / slidesPerPage),
200
+ indexDelta: indexDelta2
201
+ })
202
+ });
203
+ }
197
204
  }
198
205
  ticking = false;
199
206
  });
200
207
  ticking = true;
201
208
  }
202
209
  }
203
- const onScrollFn = throttle(onScroll, 200);
210
+ const onScrollFn = throttle(onScroll, 500);
204
211
  const onResizeFn = throttle(calculate, 500);
205
212
  function setElement(_el) {
206
213
  if (element) {
@@ -213,22 +220,24 @@ function createSnapSlider({
213
220
  window.addEventListener("resize", onResizeFn);
214
221
  }
215
222
  _element && setElement(_element);
216
- const jumpTo = function(index2, indexDelta2) {
223
+ const jumpTo = function(index2, indexDelta2, event = "goto") {
217
224
  if (indexDelta2 !== void 0) {
218
- update(
219
- fixIndex({
225
+ update({
226
+ event,
227
+ ...fixIndex({
220
228
  index: Math.floor(indexDelta2 / slidesPerPage),
221
229
  indexDelta: indexDelta2
222
230
  })
223
- );
231
+ });
224
232
  }
225
233
  if (index2 !== void 0) {
226
- update(
227
- fixIndex({
234
+ update({
235
+ event,
236
+ ...fixIndex({
228
237
  index: index2,
229
238
  indexDelta: index2 * slidesPerPage
230
239
  })
231
- );
240
+ });
232
241
  }
233
242
  };
234
243
  const destroy = () => {
package/dist/snap-slider.cjs.map CHANGED
@@ -1 +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 debug?: 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 debug,\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 const slides = element.querySelectorAll<HTMLDivElement>(itemSelector)\n slides.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\n if (!isNaN(count)) {\n // if element not mounted / hidden not update\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n debug &&\n console.log('update count', {\n count,\n countDelta,\n itemPositions,\n slidesPerPage,\n clientWidth: element.clientWidth,\n offsetWidth: element.offsetWidth,\n itemSelector,\n slides,\n })\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
+ {"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 type TSnapListnerEvent = 'scroll' | 'click' | 'inital' | 'goto'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n event: TSnapListnerEvent\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n event: TSnapListnerEvent\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\n extends Omit<TSnapSliderStateUpdate, 'event'> {\n element: HTMLElement | null\n itemSelector?: string\n initalSubscriptionPublish?: boolean\n circular?: boolean\n debug?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (\n index?: number,\n indexDelta?: number,\n event?: TSnapListnerEvent\n) => 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 debug,\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n event: 'inital',\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, event } = 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 || event === 'click'\n ? 'instant'\n : '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 state['event'] = params['event']\n keys.forEach((key) => {\n if (key !== 'event' && 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 const slides = element.querySelectorAll<HTMLDivElement>(itemSelector)\n slides.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\n if (!isNaN(count)) {\n // if element not mounted / hidden not update\n update({\n event: 'inital',\n count,\n countDelta,\n ...resetIndexMayby,\n })\n debug &&\n console.log('update count', {\n count,\n countDelta,\n itemPositions,\n slidesPerPage,\n clientWidth: element.clientWidth,\n offsetWidth: element.offsetWidth,\n itemSelector,\n slides,\n })\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 const pxLeftScrolling = Math.abs(scrollLeft - positionItem)\n prevIndexDelta = indexDelta\n if (pxLeftScrolling < 2) {\n update({\n event: 'scroll',\n ...fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n }),\n })\n }\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 500)\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 (\n index,\n indexDelta,\n event = 'goto'\n ) {\n if (indexDelta !== undefined) {\n update({\n event,\n ...fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n }),\n })\n }\n if (index !== undefined) {\n update({\n event,\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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"}
package/dist/snap-slider.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export type TSnapListnerEvent = 'scroll' | 'click' | 'inital' | 'goto';
1
2
  export interface TSnapListnerStateIndex {
2
3
  index: number;
3
4
  indexDelta: number;
@@ -5,26 +6,28 @@ export interface TSnapListnerStateIndex {
5
6
  export interface TSnapSliderState extends TSnapListnerStateIndex {
6
7
  count: number;
7
8
  countDelta: number;
9
+ event: TSnapListnerEvent;
8
10
  }
9
11
  interface TSnapSliderStateUpdate {
10
12
  index?: number;
11
13
  indexDelta?: number;
12
14
  count?: number;
13
15
  countDelta?: number;
16
+ event: TSnapListnerEvent;
14
17
  }
15
18
  export interface TSnapSliderStateFull extends TSnapSliderState {
16
19
  prevEnabled: boolean;
17
20
  nextEnabled: boolean;
18
21
  }
19
22
  export type TSnapListner = (params: TSnapSliderStateFull) => void;
20
- export interface TSnapSliderParams extends TSnapSliderStateUpdate {
23
+ export interface TSnapSliderParams extends Omit<TSnapSliderStateUpdate, 'event'> {
21
24
  element: HTMLElement | null;
22
25
  itemSelector?: string;
23
26
  initalSubscriptionPublish?: boolean;
24
27
  circular?: boolean;
25
28
  debug?: boolean;
26
29
  }
27
- export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
30
+ export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number, event?: TSnapListnerEvent) => void;
28
31
  export interface TSnapSlider {
29
32
  destroy: () => void;
30
33
  getState: () => TSnapSliderStateFull;
package/dist/snap-slider.es.js CHANGED
@@ -35,6 +35,7 @@ function createSnapSlider({
35
35
  let state = {
36
36
  index,
37
37
  indexDelta: indexDelta || index,
38
+ event: "inital",
38
39
  count,
39
40
  countDelta: countDelta || count
40
41
  };
@@ -47,14 +48,14 @@ function createSnapSlider({
47
48
  function updateIndexDelta() {
48
49
  if (element) {
49
50
  const prev = element.scrollLeft;
50
- const { indexDelta: indexDelta2 } = state;
51
+ const { indexDelta: indexDelta2, event } = state;
51
52
  left = indexDelta2 * (element.offsetWidth / slidesPerPage);
52
53
  if (prevIndexDelta !== indexDelta2) {
53
54
  const distance = Math.abs(prev - left);
54
55
  const limitInstantScroll = element.offsetWidth * 2;
55
56
  prevIndexDelta = indexDelta2;
56
57
  muteScrollListner = true;
57
- const behavior = distance > limitInstantScroll ? "instant" : "smooth";
58
+ const behavior = distance > limitInstantScroll || event === "click" ? "instant" : "smooth";
58
59
  element.scroll({
59
60
  left,
60
61
  top: 0,
@@ -106,8 +107,9 @@ function createSnapSlider({
106
107
  const keys = Object.keys(
107
108
  params
108
109
  );
110
+ state["event"] = params["event"];
109
111
  keys.forEach((key) => {
110
- if (state[key] !== params[key]) {
112
+ if (key !== "event" && state[key] !== params[key]) {
111
113
  state[key] = Number(params[key]);
112
114
  dirty = true;
113
115
  if (key === "indexDelta") {
@@ -153,6 +155,7 @@ function createSnapSlider({
153
155
  } : {};
154
156
  if (!isNaN(count2)) {
155
157
  update({
158
+ event: "inital",
156
159
  count: count2,
157
160
  countDelta: countDelta2,
158
161
  ...resetIndexMayby
@@ -185,20 +188,24 @@ function createSnapSlider({
185
188
  return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
186
189
  });
187
190
  const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
191
+ const pxLeftScrolling = Math.abs(scrollLeft - positionItem);
188
192
  prevIndexDelta = indexDelta2;
189
- update(
190
- fixIndex({
191
- index: Math.floor(indexDelta2 / slidesPerPage),
192
- indexDelta: indexDelta2
193
- })
194
- );
193
+ if (pxLeftScrolling < 2) {
194
+ update({
195
+ event: "scroll",
196
+ ...fixIndex({
197
+ index: Math.floor(indexDelta2 / slidesPerPage),
198
+ indexDelta: indexDelta2
199
+ })
200
+ });
201
+ }
195
202
  }
196
203
  ticking = false;
197
204
  });
198
205
  ticking = true;
199
206
  }
200
207
  }
201
- const onScrollFn = throttle(onScroll, 200);
208
+ const onScrollFn = throttle(onScroll, 500);
202
209
  const onResizeFn = throttle(calculate, 500);
203
210
  function setElement(_el) {
204
211
  if (element) {
@@ -211,22 +218,24 @@ function createSnapSlider({
211
218
  window.addEventListener("resize", onResizeFn);
212
219
  }
213
220
  _element && setElement(_element);
214
- const jumpTo = function(index2, indexDelta2) {
221
+ const jumpTo = function(index2, indexDelta2, event = "goto") {
215
222
  if (indexDelta2 !== void 0) {
216
- update(
217
- fixIndex({
223
+ update({
224
+ event,
225
+ ...fixIndex({
218
226
  index: Math.floor(indexDelta2 / slidesPerPage),
219
227
  indexDelta: indexDelta2
220
228
  })
221
- );
229
+ });
222
230
  }
223
231
  if (index2 !== void 0) {
224
- update(
225
- fixIndex({
232
+ update({
233
+ event,
234
+ ...fixIndex({
226
235
  index: index2,
227
236
  indexDelta: index2 * slidesPerPage
228
237
  })
229
- );
238
+ });
230
239
  }
231
240
  };
232
241
  const destroy = () => {
package/dist/snap-slider.es.js.map CHANGED
@@ -1 +1 @@
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 debug?: 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 debug,\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 const slides = element.querySelectorAll<HTMLDivElement>(itemSelector)\n slides.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\n if (!isNaN(count)) {\n // if element not mounted / hidden not update\n update({\n count,\n countDelta,\n ...resetIndexMayby,\n })\n debug &&\n console.log('update count', {\n count,\n countDelta,\n itemPositions,\n slidesPerPage,\n clientWidth: element.clientWidth,\n offsetWidth: element.offsetWidth,\n itemSelector,\n slides,\n })\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
+ {"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 type TSnapListnerEvent = 'scroll' | 'click' | 'inital' | 'goto'\n\nexport interface TSnapListnerStateIndex {\n index: number\n indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n count: number\n countDelta: number\n event: TSnapListnerEvent\n}\n\ninterface TSnapSliderStateUpdate {\n index?: number\n indexDelta?: number\n count?: number\n countDelta?: number\n event: TSnapListnerEvent\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\n extends Omit<TSnapSliderStateUpdate, 'event'> {\n element: HTMLElement | null\n itemSelector?: string\n initalSubscriptionPublish?: boolean\n circular?: boolean\n debug?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (\n index?: number,\n indexDelta?: number,\n event?: TSnapListnerEvent\n) => 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 debug,\n}: TSnapSliderParams): TSnapSlider {\n let initalIndex: number | undefined = index\n let state: TSnapSliderState = {\n index,\n indexDelta: indexDelta || index,\n event: 'inital',\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, event } = 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 || event === 'click'\n ? 'instant'\n : '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 state['event'] = params['event']\n keys.forEach((key) => {\n if (key !== 'event' && 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 const slides = element.querySelectorAll<HTMLDivElement>(itemSelector)\n slides.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\n if (!isNaN(count)) {\n // if element not mounted / hidden not update\n update({\n event: 'inital',\n count,\n countDelta,\n ...resetIndexMayby,\n })\n debug &&\n console.log('update count', {\n count,\n countDelta,\n itemPositions,\n slidesPerPage,\n clientWidth: element.clientWidth,\n offsetWidth: element.offsetWidth,\n itemSelector,\n slides,\n })\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 const pxLeftScrolling = Math.abs(scrollLeft - positionItem)\n prevIndexDelta = indexDelta\n if (pxLeftScrolling < 2) {\n update({\n event: 'scroll',\n ...fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n }),\n })\n }\n }\n ticking = false\n })\n ticking = true\n }\n }\n const onScrollFn = throttle(onScroll, 500)\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 (\n index,\n indexDelta,\n event = 'goto'\n ) {\n if (indexDelta !== undefined) {\n update({\n event,\n ...fixIndex({\n index: Math.floor(indexDelta / slidesPerPage),\n indexDelta,\n }),\n })\n }\n if (index !== undefined) {\n update({\n event,\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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"}
package/dist/use-snap-slider.cjs.map CHANGED
@@ -1 +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 debug?: boolean\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>(false)\n const initRef = useRef<boolean>(false)\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n debug,\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,WACA,OACgB;AAChB,QAAM,GAAG,WAAW,IAAIA,eAAiB,CAAC;AACpC,QAAA,aAAaC,aAAgB,KAAK;AACxBA,QAAAA,OAAgB,KAAK;AAC/B,QAAA,CAAC,QAAQ,IAAID,MAAA;AAAA,IAAS,MAC1BE,4BAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,MAC3B;AAAA,IACD,CAAA;AAAA,EACH;AACM,QAAA,SAAS,SAAS,SAAS;AACjCC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IAAA;AAAA,EAEpB,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,MAAA;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT,kBAAA;AAAA,IACd;AAAA,EAAA,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AACF;;"}
1
+ {"version":3,"file":"use-snap-slider.cjs","sources":["../lib/use-snap-slider.ts"],"sourcesContent":["import { type MutableRefObject, useEffect, useRef, useState } from 'react'\nimport {\n createSnapSlider,\n TSnapSliderJumpToFn,\n type TSnapSliderStateFull,\n} from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: TSnapSliderJumpToFn\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 debug?: boolean\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>(false)\n const initRef = useRef<boolean>(false)\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n debug,\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":";;;;AAagB,SAAA,cACd,KACA,QAAgB,GAChB,QAAgB,GAChB,WAAW,OACX,WACA,OACgB;AAChB,QAAM,GAAG,WAAW,IAAIA,eAAiB,CAAC;AACpC,QAAA,aAAaC,aAAgB,KAAK;AACxBA,QAAAA,OAAgB,KAAK;AAC/B,QAAA,CAAC,QAAQ,IAAID,MAAA;AAAA,IAAS,MAC1BE,4BAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,MAC3B;AAAA,IACD,CAAA;AAAA,EACH;AACM,QAAA,SAAS,SAAS,SAAS;AACjCC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IAAA;AAAA,EAEpB,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,MAAA;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT,kBAAA;AAAA,IACd;AAAA,EAAA,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AACF;;"}
package/dist/use-snap-slider.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { MutableRefObject } from 'react';
2
- import { TSnapSliderStateFull } from './snap-slider';
2
+ import { TSnapSliderJumpToFn, TSnapSliderStateFull } from './snap-slider';
3
3
  export interface TUseSnapSlider extends TSnapSliderStateFull {
4
- jumpTo: (index: number) => void;
4
+ jumpTo: TSnapSliderJumpToFn;
5
5
  goNext: () => void;
6
6
  goPrev: () => void;
7
7
  }
package/dist/use-snap-slider.es.js.map CHANGED
@@ -1 +1 @@
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 debug?: boolean\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>(false)\n const initRef = useRef<boolean>(false)\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n debug,\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,WACA,OACgB;AAChB,QAAM,GAAG,WAAW,IAAI,SAAiB,CAAC;AACpC,QAAA,aAAa,OAAgB,KAAK;AACxB,SAAgB,KAAK;AAC/B,QAAA,CAAC,QAAQ,IAAI;AAAA,IAAS,MAC1B,iBAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,MAC3B;AAAA,IACD,CAAA;AAAA,EACH;AACM,QAAA,SAAS,SAAS,SAAS;AACjC,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IAAA;AAAA,EAEpB,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,MAAA;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT,kBAAA;AAAA,IACd;AAAA,EAAA,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AACF;"}
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 {\n createSnapSlider,\n TSnapSliderJumpToFn,\n type TSnapSliderStateFull,\n} from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n jumpTo: TSnapSliderJumpToFn\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 debug?: boolean\n): TUseSnapSlider {\n const [, forceUpdate] = useState<number>(0)\n const mountedRef = useRef<boolean>(false)\n const initRef = useRef<boolean>(false)\n const [observer] = useState(() =>\n createSnapSlider({\n element: ref.current,\n count,\n index,\n circular,\n initalSubscriptionPublish: false,\n debug,\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":";;AAagB,SAAA,cACd,KACA,QAAgB,GAChB,QAAgB,GAChB,WAAW,OACX,WACA,OACgB;AAChB,QAAM,GAAG,WAAW,IAAI,SAAiB,CAAC;AACpC,QAAA,aAAa,OAAgB,KAAK;AACxB,SAAgB,KAAK;AAC/B,QAAA,CAAC,QAAQ,IAAI;AAAA,IAAS,MAC1B,iBAAiB;AAAA,MACf,SAAS,IAAI;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,2BAA2B;AAAA,MAC3B;AAAA,IACD,CAAA;AAAA,EACH;AACM,QAAA,SAAS,SAAS,SAAS;AACjC,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,OAAO,CAAC;AACjB,eAAS,UAAU;AAAA,IAAA;AAAA,EAEpB,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,MAAA;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACT,kBAAA;AAAA,IACd;AAAA,EAAA,GACC,CAAC,UAAU,WAAW,CAAC;AACnB,SAAA;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AACF;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-snap-slider",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "React hook to manage css snap sliders",
5
5
  "type": "module",
6
6
  "main": "./dist/use-snap-slider.cjs",