use-snap-slider 0.1.0 → 0.1.2

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.
@@ -30,7 +30,8 @@ function createSnapSlider({
30
30
  circular,
31
31
  indexDelta,
32
32
  initalSubscriptionPublish = true,
33
- itemSelector = ":scope > *"
33
+ itemSelector = ":scope > *",
34
+ debug
34
35
  }) {
35
36
  let initalIndex = index;
36
37
  let state = {
@@ -138,7 +139,8 @@ function createSnapSlider({
138
139
  let contentWidth = 0;
139
140
  let itemWidth = 0;
140
141
  itemPositions = [];
141
- element.querySelectorAll(itemSelector).forEach((slide) => {
142
+ const slides = element.querySelectorAll(itemSelector);
143
+ slides.forEach((slide) => {
142
144
  itemPositions.push(contentWidth);
143
145
  contentWidth += slide.clientWidth;
144
146
  itemWidth = slide.clientWidth;
@@ -151,11 +153,23 @@ function createSnapSlider({
151
153
  index: 0,
152
154
  indexDelta: 0
153
155
  } : {};
154
- update({
155
- count: count2,
156
- countDelta: countDelta2,
157
- ...resetIndexMayby
158
- });
156
+ if (!isNaN(count2)) {
157
+ update({
158
+ count: count2,
159
+ countDelta: countDelta2,
160
+ ...resetIndexMayby
161
+ });
162
+ debug && console.log("update count", {
163
+ count: count2,
164
+ countDelta: countDelta2,
165
+ itemPositions,
166
+ slidesPerPage,
167
+ clientWidth: element.clientWidth,
168
+ offsetWidth: element.offsetWidth,
169
+ itemSelector,
170
+ slides
171
+ });
172
+ }
159
173
  }
160
174
  }
161
175
  let ticking = false;
@@ -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}\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
+ {"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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"}
@@ -22,6 +22,7 @@ export interface TSnapSliderParams extends TSnapSliderStateUpdate {
22
22
  itemSelector?: string;
23
23
  initalSubscriptionPublish?: boolean;
24
24
  circular?: boolean;
25
+ debug?: boolean;
25
26
  }
26
27
  export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
27
28
  export interface TSnapSlider {
@@ -34,5 +35,5 @@ export interface TSnapSlider {
34
35
  setElement: (el: HTMLElement) => void;
35
36
  calculate: () => void;
36
37
  }
37
- export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
38
+ export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, debug, }: TSnapSliderParams): TSnapSlider;
38
39
  export {};
@@ -28,7 +28,8 @@ function createSnapSlider({
28
28
  circular,
29
29
  indexDelta,
30
30
  initalSubscriptionPublish = true,
31
- itemSelector = ":scope > *"
31
+ itemSelector = ":scope > *",
32
+ debug
32
33
  }) {
33
34
  let initalIndex = index;
34
35
  let state = {
@@ -136,7 +137,8 @@ function createSnapSlider({
136
137
  let contentWidth = 0;
137
138
  let itemWidth = 0;
138
139
  itemPositions = [];
139
- element.querySelectorAll(itemSelector).forEach((slide) => {
140
+ const slides = element.querySelectorAll(itemSelector);
141
+ slides.forEach((slide) => {
140
142
  itemPositions.push(contentWidth);
141
143
  contentWidth += slide.clientWidth;
142
144
  itemWidth = slide.clientWidth;
@@ -149,11 +151,23 @@ function createSnapSlider({
149
151
  index: 0,
150
152
  indexDelta: 0
151
153
  } : {};
152
- update({
153
- count: count2,
154
- countDelta: countDelta2,
155
- ...resetIndexMayby
156
- });
154
+ if (!isNaN(count2)) {
155
+ update({
156
+ count: count2,
157
+ countDelta: countDelta2,
158
+ ...resetIndexMayby
159
+ });
160
+ debug && console.log("update count", {
161
+ count: count2,
162
+ countDelta: countDelta2,
163
+ itemPositions,
164
+ slidesPerPage,
165
+ clientWidth: element.clientWidth,
166
+ offsetWidth: element.offsetWidth,
167
+ itemSelector,
168
+ slides
169
+ });
170
+ }
157
171
  }
158
172
  }
159
173
  let ticking = false;
@@ -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}\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
+ {"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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"}
@@ -2,16 +2,18 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const react = require("react");
4
4
  const snapSlider = require("./snap-slider.cjs");
5
- function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
5
+ function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash, debug) {
6
6
  const [, forceUpdate] = react.useState(0);
7
- const mountedRef = react.useRef();
7
+ const mountedRef = react.useRef(false);
8
+ react.useRef(false);
8
9
  const [observer] = react.useState(
9
10
  () => snapSlider.createSnapSlider({
10
11
  element: ref.current,
11
12
  count,
12
13
  index,
13
14
  circular,
14
- initalSubscriptionPublish: false
15
+ initalSubscriptionPublish: false,
16
+ debug
15
17
  })
16
18
  );
17
19
  const result = observer.getState();
@@ -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): 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
+ {"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,8 +1,8 @@
1
- import { type MutableRefObject } from 'react';
2
- import { type TSnapSliderStateFull } from './snap-slider';
1
+ import { MutableRefObject } from 'react';
2
+ import { TSnapSliderStateFull } from './snap-slider';
3
3
  export interface TUseSnapSlider extends TSnapSliderStateFull {
4
4
  jumpTo: (index: number) => void;
5
5
  goNext: () => void;
6
6
  goPrev: () => void;
7
7
  }
8
- export declare function useSnapSlider(ref: MutableRefObject<HTMLDivElement | null>, count?: number, index?: number, circular?: boolean, countHash?: string | number): TUseSnapSlider;
8
+ export declare function useSnapSlider(ref: MutableRefObject<HTMLDivElement | null>, count?: number, index?: number, circular?: boolean, countHash?: string | number, debug?: boolean): TUseSnapSlider;
@@ -1,15 +1,17 @@
1
1
  import { useState, useRef, useEffect } from "react";
2
2
  import { createSnapSlider } from "./snap-slider.es.js";
3
- function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
3
+ function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash, debug) {
4
4
  const [, forceUpdate] = useState(0);
5
- const mountedRef = useRef();
5
+ const mountedRef = useRef(false);
6
+ useRef(false);
6
7
  const [observer] = useState(
7
8
  () => createSnapSlider({
8
9
  element: ref.current,
9
10
  count,
10
11
  index,
11
12
  circular,
12
- initalSubscriptionPublish: false
13
+ initalSubscriptionPublish: false,
14
+ debug
13
15
  })
14
16
  );
15
17
  const result = observer.getState();
@@ -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): 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;"}
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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-snap-slider",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "React hook to manage css snap sliders",
5
5
  "type": "module",
6
6
  "main": "./dist/use-snap-slider.cjs",
@@ -53,25 +53,25 @@
53
53
  "singleQuote": true
54
54
  },
55
55
  "devDependencies": {
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",
56
+ "@testing-library/jest-dom": "^6.6.3",
57
+ "@testing-library/react": "^16.0.1",
58
+ "@types/jest": "^29.5.14",
59
+ "@types/node": "^22.9.1",
60
+ "@types/react": "^18.3.12",
61
+ "@types/react-dom": "^18.3.1",
62
+ "@vitejs/plugin-react": "^4.3.3",
63
+ "autoprefixer": "^10.4.20",
64
64
  "classnames": "^2.5.1",
65
65
  "jest": "^29.7.0",
66
66
  "jest-environment-jsdom": "^29.7.0",
67
- "postcss": "^8.4.35",
68
- "react": "^18.2.0",
69
- "react-dom": "^18.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"
67
+ "postcss": "^8.4.49",
68
+ "react": "^18.3.1",
69
+ "react-dom": "^18.3.1",
70
+ "rimraf": "^6.0.1",
71
+ "tailwindcss": "^3.4.15",
72
+ "ts-jest": "^29.2.5",
73
+ "typescript": "^5.6.3",
74
+ "vite": "^5.4.11",
75
+ "vite-plugin-dts": "^4.3.0"
76
76
  }
77
77
  }