use-snap-slider 0.0.2 → 0.0.4

package/README.md

@@ -1,3 +1,200 @@
 # use-snap-slider
 
-React hook to manage css snap sliders
+React hook / Vanilla JS to manage scroll-state for [CSS Scroll Snap](https://caniuse.com/?search=scroll-snap)
+
+Gives you states and actions for CSS Scroll Snap sliders:
+
+* `count:number` - total pages
+* `countDelta:number` - total slides, for 1/1 width slides the same as count
+* `index:number` - current page index
+* `indexDelto:number` - current slide index, for 1/1 width slides the same as index
+* `prevEnabled:boolean` - can go to previous slide
+* `nextEnabled:boolean` - can go to next slide
+* `goPrev()` - scroll to previous slide
+* `goNext()` - scroll to next slide
+* `jumpTo(index:number)` - go to a spesified slide
+
+## Usage
+
+`npm i use-snap-slider`
+
+### Basic usage (react)
+
+In your react component:
+
+See a [more complete react-example here](https://github.com/gerhardsletten/use-snap-slider/blob/main/src/react-example/SnapSliderReact.tsx)
+
+```tsx
+import React, { useRef } from 'react'
+import { useSnapSlider } from 'use-snap-slider'
+
+export function MySlider () {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const slides = [1,2]
+  // Passing inital count avoid extra render, for best lighthouse score, pass the same count as you show on mobile
+  const state = useSnapSlider(ref, slides.count)
+  const pages = Array.from(Array(state.count).keys())
+  return (
+    <div>
+      <div className="flex scroll-smooth snap-x snap-mandatory overflow-x-auto w-full" ref={ref}>
+        {slides.map((slide) => (
+          <div key={slide} className="flex snap-start shrink-0 w-full md:w-1/2">
+            Slide {slide}
+          </div>
+        ))}
+      </div>
+      <nav aria-label="Pages navigation">
+        {pages.map((page) => (
+          <button onClick={() => state.jumpTo(page)} disabled={page === state.index}>{page + 1}</button>
+        ))}
+      </nav>
+      <nav aria-label="Prev / Next navigation">
+        <button onClick={state.goPrev} disabled={!state.prevEnabled}>Prev</button>
+        <button onClick={state.goNext} disabled={!state.nextEnabled}>Next</button>
+      </nav>
+    </div>
+  )
+}
+```
+
+### Basic usage (vanilla javascript)
+
+See a [more complete vanilla javascript example here](https://github.com/gerhardsletten/use-snap-slider/blob/main/src/vanilla-example/create-snap-slider.ts)
+
+```ts
+import { createSnapSlider } from 'use-snap-slider/dist/snap-slider'
+
+function createSnapSliderVanilla(element: HTMLElement) {
+  const { jumpTo, goNext, goPrev, subscribe } = createSnapSlider({
+    element,
+    count: count,
+    index: 0,
+  })
+  subscribe((state) => {
+    // Update UI with sate
+  })
+  document.querySelector('.prev-btn')?.addEventListener('click', goPrev)
+  document.querySelector('.next-btn')?.addEventListener('click', goNext)
+}
+// Expose globally
+window.createSnapSliderVanilla = createSnapSliderVanilla
+```
+
+## API
+
+### useSnapSlider react hook
+
+```ts
+import { useSnapSlider } from 'use-snap-slider'
+
+const {
+  index: number,
+  // If displaying multiple slides on the same page, this will be slide at left position
+  indexDelta: number,
+  // Count of pages
+  count: number,
+  countDelta: number,
+  prevEnabled: boolean,
+  nextEnabled: boolean,
+  jumpTo: (index: number) => void,
+  goNext: () => void,
+  goPrev: () => void,
+} = useSnapSlider(
+  ref: MutableRefObject<HTMLDivElement | null>,
+  // Pass inital count
+  count?: number = 1,
+  // Pass inital index
+  index?: number = 0,
+  // onPrev / next buttons go to end / start 
+  circular = false,
+  // Will reset index on change of count, but pass something here to force a reset even if count dont change
+  countHash?: string | number
+)
+```
+
+### useSnapSlider react hook
+
+```ts
+import { createSnapSlider } from 'use-snap-slider/dist/snap-slider'
+
+const {
+  // Removes event listner for window.resize and element.scroll
+  destroy: () => void,
+  // Get current state
+  getState: () => TSnapSliderStateFull,
+  // Go to slide index
+  jumpTo: (index?: number, indexDelta?: number) => void,
+  goNext: () => void,
+  goPrev: () => void,
+  // Subscribe to updates
+  subscribe: (fn: TSnapListner) => () => void,
+  // Set element at later stage
+  setElement: (el: HTMLElement) => void,
+  // Updates count and countDelta, call if you change inner slides
+  calculate: () => void,
+} = createSnapSlider({
+  element: HTMLDivElement | null,
+  count?:number = 1,
+  countDelta?:number,
+  index?:number = 0,
+  circular?:boolean,
+  indexDelta?:number,
+  itemSelector?:string = ':scope > *',
+})
+```
+
+## Adding nessesary styles
+
+This library only delivers javascript for handle the state, you will need to make your own component for complete solution. See examples in this repo: 
+
+* [React component](https://github.com/gerhardsletten/use-snap-slider/blob/main/src/react-example/SnapSliderReact.tsx)
+* [Vanilla JS function](https://github.com/gerhardsletten/use-snap-slider/blob/main/src/vanilla-example/create-snap-slider.ts)
+
+### TailwindCSS
+
+See also tailwinds own documentation for [scroll snap](https://tailwindcss.com/docs/scroll-snap-type)
+
+```html
+<div class="flex scroll-smooth snap-x snap-mandatory overflow-x-auto">
+  <div class="flex snap-start shrink-0">
+    Slide 1
+  </div>
+  <div class="flex snap-start shrink-0">
+    Slide 2
+  </div>
+</div>
+```
+
+### Basic css
+
+```html
+<style>
+.css-slider {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+.css-slider::-webkit-scrollbar {
+  @apply hidden;
+}
+.css-slider-item {
+  display: flex;
+  scroll-snap-align: start;
+  flex-shrink: 0;
+}
+.css-slider-item-half {
+  width: 50%;
+}
+</style>
+<!-- Markup -->
+<div class="css-slider">
+  <div class="css-slider-item css-slider-item-half">
+    Slide 1
+  </div>
+  <div class="css-slider-item css-slider-item-half">
+    Slide 2
+  </div>
+</div>
+```

package/dist/lib/snap-slider.d.ts

@@ -20,13 +20,12 @@ export type TSnapListner = (params: TSnapSliderStateFull) => void;
 export interface TSnapSliderParams extends TSnapSliderStateUpdate {
     element: HTMLElement | null;
     itemSelector?: string;
-    initalSubscriptionPublish?: boolean;
     circular?: boolean;
 }
 export type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void;
 export interface TSnapSlider {
     destroy: () => void;
-    getState: (count?: number, index?: number) => TSnapSliderStateFull;
+    getState: () => TSnapSliderStateFull;
     jumpTo: TSnapSliderJumpToFn;
     goNext: () => void;
     goPrev: () => void;
@@ -34,5 +33,5 @@ export interface TSnapSlider {
     setElement: (el: HTMLElement) => void;
     calculate: () => void;
 }
-export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
+export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, itemSelector, }: TSnapSliderParams): TSnapSlider;
 export {};

package/dist/lib/throttle.d.ts

@@ -1 +1 @@
-export declare const throttle: (fn: Function, wait?: number) => (this: any) => void;
+export declare const throttle: (fn: Function, wait: number) => (this: any) => void;

package/dist/lib/use-snap-slider.d.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject } from "react";
-import { TSnapSliderStateFull } from "./snap-slider";
+import { MutableRefObject } from 'react';
+import { TSnapSliderStateFull } from './snap-slider';
 export interface TUseSnapSlider extends TSnapSliderStateFull {
     jumpTo: (index: number) => void;
     goNext: () => void;

package/dist/snap-slider.cjs.js

@@ -1,241 +1,2 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const throttle = (fn, wait = 300) => {
-  let inThrottle, lastFn, lastTime;
-  return function() {
-    const context = this, args = arguments;
-    if (!inThrottle) {
-      fn.apply(context, args);
-      lastTime = Date.now();
-      inThrottle = true;
-    } else {
-      clearTimeout(lastFn);
-      lastFn = setTimeout(() => {
-        if (Date.now() - lastTime >= wait) {
-          fn.apply(context, args);
-          lastTime = Date.now();
-        }
-      }, Math.max(wait - (Date.now() - lastTime), 0));
-    }
-  };
-};
-function createSnapSlider({
-  element: _element,
-  count = 1,
-  countDelta,
-  index = 0,
-  circular,
-  indexDelta,
-  initalSubscriptionPublish = true,
-  itemSelector = ":scope > *"
-}) {
-  let initalIndex = index;
-  let state = {
-    index,
-    indexDelta: indexDelta || index,
-    count,
-    countDelta: countDelta || count
-  };
-  let prevIndexDelta = index;
-  let slidesPerPage = 1;
-  let itemPositions = [];
-  let muteScrollListner = false;
-  let left = 0;
-  let element;
-  function updateIndexDelta() {
-    if (!element) {
-      return;
-    }
-    const prev = element.scrollLeft;
-    const { indexDelta: indexDelta2 } = state;
-    left = indexDelta2 * (element.offsetWidth / slidesPerPage);
-    if (prevIndexDelta !== indexDelta2) {
-      const distance = Math.abs(prev - left);
-      const limitInstantScroll = element.offsetWidth * 2;
-      prevIndexDelta = indexDelta2;
-      muteScrollListner = true;
-      element.scroll({
-        left,
-        top: 0,
-        behavior: distance > limitInstantScroll ? "smooth" : void 0
-      });
-    } else {
-      if (initalIndex) {
-        muteScrollListner = true;
-        element.scroll({
-          left,
-          top: 0
-        });
-        initalIndex = void 0;
-      }
-    }
-  }
-  let listeners = [];
-  const subscribe = (callback) => {
-    listeners.push(callback);
-    return () => {
-      listeners = listeners.filter((x) => x !== callback);
-      if (listeners.length < 1) {
-        destroy();
-      }
-    };
-  };
-  function notify() {
-    listeners.forEach((callback) => {
-      callback(getState());
-    });
-  }
-  const getState = () => {
-    const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
-    return {
-      ...state,
-      prevEnabled: circular || indexDelta2 > 0,
-      nextEnabled: circular || countDelta2 - slidesPerPage > indexDelta2
-    };
-  };
-  let initalPublish = !initalSubscriptionPublish;
-  function update(params = {}) {
-    let dirty = false;
-    let indexDeltaDirty = false;
-    const keys = Object.keys(
-      params
-    );
-    keys.forEach((key) => {
-      if (state[key] !== params[key]) {
-        state[key] = Number(params[key]);
-        dirty = true;
-        if (key === "indexDelta") {
-          indexDeltaDirty = true;
-        }
-      }
-    });
-    if (dirty || !initalPublish) {
-      initalPublish = true;
-      notify();
-      if (indexDeltaDirty) {
-        updateIndexDelta();
-      }
-    }
-  }
-  function fixIndex(nextIndex) {
-    const { index: index2, indexDelta: indexDelta2 } = nextIndex;
-    const { countDelta: countDelta2, count: count2 } = state;
-    const last = countDelta2 - slidesPerPage;
-    return {
-      index: indexDelta2 < last ? index2 : count2 - 1,
-      indexDelta: indexDelta2
-    };
-  }
-  function calculate() {
-    if (!element) {
-      return;
-    }
-    let contentWidth = 0;
-    let itemWidth = 0;
-    itemPositions = [];
-    element.querySelectorAll(itemSelector).forEach((slide) => {
-      itemPositions.push(contentWidth);
-      contentWidth += slide.clientWidth;
-      itemWidth = slide.clientWidth;
-    });
-    slidesPerPage = Math.round(element.offsetWidth / itemWidth);
-    const count2 = Math.ceil(contentWidth / element.offsetWidth);
-    const countDelta2 = itemPositions.length;
-    const { index: index2 } = state;
-    const resetIndexMayby = index2 + 1 > count2 ? {
-      index: 0,
-      indexDelta: 0
-    } : {};
-    update({
-      count: count2,
-      countDelta: countDelta2,
-      ...resetIndexMayby
-    });
-  }
-  let ticking = false;
-  function onScroll() {
-    if (!ticking && element) {
-      const scrollLeft = element.scrollLeft;
-      window.requestAnimationFrame(() => {
-        if (muteScrollListner) {
-          const leftToScroll = Math.abs(left - scrollLeft);
-          if (leftToScroll < 1) {
-            muteScrollListner = false;
-          }
-        } else {
-          const positionItem = itemPositions.reduce((prev, curr) => {
-            return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
-          });
-          const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
-          prevIndexDelta = indexDelta2;
-          update(
-            fixIndex({
-              index: Math.floor(indexDelta2 / slidesPerPage),
-              indexDelta: indexDelta2
-            })
-          );
-        }
-        ticking = false;
-      });
-      ticking = true;
-    }
-  }
-  const onScrollFn = throttle(onScroll, 200);
-  const onResizeFn = throttle(calculate, 200);
-  function setElement(_el) {
-    if (element) {
-      destroy();
-    }
-    element = _el;
-    updateIndexDelta();
-    calculate();
-    element == null ? void 0 : element.addEventListener("scroll", onScrollFn);
-    window.addEventListener("resize", onResizeFn);
-  }
-  _element && setElement(_element);
-  const jumpTo = function(index2, indexDelta2) {
-    if (indexDelta2 !== void 0) {
-      update(
-        fixIndex({
-          index: Math.floor(indexDelta2 / slidesPerPage),
-          indexDelta: indexDelta2
-        })
-      );
-    }
-    if (index2 !== void 0) {
-      update(
-        fixIndex({
-          index: index2,
-          indexDelta: index2 * slidesPerPage
-        })
-      );
-    }
-  };
-  const destroy = () => {
-    element == null ? void 0 : element.removeEventListener("scroll", onScrollFn);
-    window.removeEventListener("resize", onResizeFn);
-  };
-  const goNext = () => {
-    const { countDelta: countDelta2, indexDelta: indexDelta2 } = state;
-    const last = countDelta2 - slidesPerPage;
-    const next = indexDelta2 + slidesPerPage <= last ? indexDelta2 + slidesPerPage : circular && indexDelta2 === last ? 0 : last;
-    jumpTo(void 0, next);
-  };
-  const goPrev = () => {
-    const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
-    const last = countDelta2 - slidesPerPage;
-    const next = indexDelta2 - slidesPerPage >= 0 ? indexDelta2 - slidesPerPage : circular && indexDelta2 === 0 ? last : 0;
-    jumpTo(void 0, next);
-  };
-  return {
-    destroy,
-    getState,
-    subscribe,
-    jumpTo,
-    setElement,
-    calculate,
-    goNext,
-    goPrev
-  };
-}
-exports.createSnapSlider = createSnapSlider;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=(f,u)=>{let h,r,c;return function(){const v=this,p=arguments;h?(clearTimeout(r),r=setTimeout(()=>{Date.now()-c>=u&&(f.apply(v,p),c=Date.now())},Math.max(u-(Date.now()-c),0))):(f.apply(v,p),c=Date.now(),h=!0)}};function B({element:f,count:u=1,countDelta:h,index:r=0,circular:c,indexDelta:v,itemSelector:p=":scope > *"}){let T=r,a={index:r,indexDelta:v||r,count:u,countDelta:h||u},S=r,i=1,D=[],g=!1,x=0,o;function W(){if(o){const t=o.scrollLeft,{indexDelta:e}=a;if(x=e*(o.offsetWidth/i),S!==e){const n=Math.abs(t-x),l=o.offsetWidth*2;S=e,g=!0,o.scroll({left:x,top:0,behavior:n>l?"smooth":void 0})}else T&&(g=!0,o.scroll({left:x,top:0}),T=void 0)}}let P=!1,d=[];const A=t=>(d.push(t),P&&t(b()),()=>{d=d.filter(e=>e!==t),d.length<1&&I()});function O(){d.forEach(t=>{t(b())})}const b=()=>{const{indexDelta:t,countDelta:e}=a;return{...a,prevEnabled:c||t>0,nextEnabled:c||e-i>t}};function m(t){let e=!1,n=!1;Object.keys(t).forEach(s=>{a[s]!==t[s]&&(a[s]=Number(t[s]),e=!0,s==="indexDelta"&&(n=!0))}),e&&(P=d.length===0,O(),n&&W())}function y(t){const{index:e,indexDelta:n}=t,{countDelta:l,count:s}=a,L=l-i;return{index:n<L?e:s-1,indexDelta:n}}function M(){if(o){let t=0,e=0;D=[],o.querySelectorAll(p).forEach(N=>{D.push(t),t+=N.clientWidth,e=N.clientWidth}),i=Math.round(o.offsetWidth/e);const n=D.length,l=Math.ceil(n/i),{index:s}=a,L=s+1>l?{index:0,indexDelta:0}:{};m({count:l,countDelta:n,...L})}}let E=!1;function R(){if(!E&&o){const t=o.scrollLeft;window.requestAnimationFrame(()=>{if(g)Math.abs(x-t)<1&&(g=!1);else{const e=D.reduce((l,s)=>Math.abs(s-t)<Math.abs(l-t)?s:l),n=D.findIndex(l=>l===e);S=n,m(y({index:Math.floor(n/i),indexDelta:n}))}E=!1}),E=!0}}const F=q(R,200),j=q(M,500);function z(t){o&&I(),o=t,W(),M(),o==null||o.addEventListener("scroll",F),window.addEventListener("resize",j)}f&&z(f);const w=function(t,e){e!==void 0&&m(y({index:Math.floor(e/i),indexDelta:e})),t!==void 0&&m(y({index:t,indexDelta:t*i}))},I=()=>{o==null||o.removeEventListener("scroll",F),window.removeEventListener("resize",j)};return{destroy:I,getState:b,subscribe:A,jumpTo:w,setElement:z,calculate:M,goNext:()=>{const{countDelta:t,indexDelta:e}=a,n=t-i,l=e+i<=n?e+i:c&&e===n?0:n;w(void 0,l)},goPrev:()=>{const{indexDelta:t,countDelta:e}=a,n=e-i,l=t-i>=0?t-i:c&&t===0?n:0;w(void 0,l)}}}exports.createSnapSlider=B;
+//# sourceMappingURL=snap-slider.cjs.js.map

package/dist/snap-slider.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-slider.cjs.js","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n  let inThrottle: boolean\n  let lastFn: ReturnType<typeof setTimeout>\n  let lastTime: number\n  return function (this: any) {\n    const context = this\n    const args = arguments\n    if (!inThrottle) {\n      fn.apply(context, args)\n      lastTime = Date.now()\n      inThrottle = true\n    } else {\n      clearTimeout(lastFn)\n      lastFn = setTimeout(() => {\n        if (Date.now() - lastTime >= wait) {\n          fn.apply(context, args)\n          lastTime = Date.now()\n        }\n      }, Math.max(wait - (Date.now() - lastTime), 0))\n    }\n  }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n  index: number\n  indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n  count: number\n  countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n  index?: number\n  indexDelta?: number\n  count?: number\n  countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n  prevEnabled: boolean\n  nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n  element: HTMLElement | null\n  itemSelector?: string\n  circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n  destroy: () => void\n  getState: () => TSnapSliderStateFull\n  jumpTo: TSnapSliderJumpToFn\n  goNext: () => void\n  goPrev: () => void\n  subscribe: (fn: TSnapListner) => () => void\n  setElement: (el: HTMLElement) => void\n  calculate: () => void\n}\n\nexport function createSnapSlider({\n  element: _element,\n  count = 1,\n  countDelta,\n  index = 0,\n  circular,\n  indexDelta,\n  itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n  let initalIndex: number | undefined = index\n  let state: TSnapSliderState = {\n    index,\n    indexDelta: indexDelta || index,\n    count,\n    countDelta: countDelta || count,\n  }\n  let prevIndexDelta: number = index\n  let slidesPerPage: number = 1\n  let itemPositions: number[] = []\n  let muteScrollListner: boolean = false\n  let left: number = 0\n  let element: HTMLElement | null\n  function updateIndexDelta() {\n    if (element) {\n      const prev = element.scrollLeft\n      const { indexDelta } = state\n      left = indexDelta * (element.offsetWidth / slidesPerPage)\n      if (prevIndexDelta !== indexDelta) {\n        const distance = Math.abs(prev - left)\n        const limitInstantScroll = element.offsetWidth * 2\n        prevIndexDelta = indexDelta\n        muteScrollListner = true\n        element.scroll({\n          left,\n          top: 0,\n          behavior: distance > limitInstantScroll ? 'smooth' : undefined,\n        })\n      } else {\n        if (initalIndex) {\n          muteScrollListner = true\n          element.scroll({\n            left,\n            top: 0,\n          })\n          initalIndex = undefined\n        }\n      }\n    }\n  }\n\n  let publishDirty = false\n  let listeners: TSnapListner[] = []\n  const subscribe = (callback: TSnapListner) => {\n    listeners.push(callback)\n    if (publishDirty) {\n      callback(getState())\n    }\n    return () => {\n      listeners = listeners.filter((x) => x !== callback)\n      if (listeners.length < 1) {\n        destroy()\n      }\n    }\n  }\n  function notify() {\n    listeners.forEach((callback) => {\n      callback(getState())\n    })\n  }\n  const getState = (): TSnapSliderStateFull => {\n    const { indexDelta, countDelta } = state\n    return {\n      ...state,\n      prevEnabled: circular || indexDelta > 0,\n      nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n    }\n  }\n  function update(params: TSnapSliderStateUpdate) {\n    let dirty = false\n    let indexDeltaDirty = false\n    type TSnapSliderStateUpdateKey = keyof typeof params\n    const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n      params\n    ) as Array<TSnapSliderStateUpdateKey>\n    keys.forEach((key) => {\n      if (state[key] !== params[key]) {\n        state[key] = Number(params[key])\n        dirty = true\n        if (key === 'indexDelta') {\n          indexDeltaDirty = true\n        }\n      }\n    })\n    if (dirty) {\n      publishDirty = listeners.length === 0\n      notify()\n      if (indexDeltaDirty) {\n        updateIndexDelta()\n      }\n    }\n  }\n  function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n    const { index, indexDelta } = nextIndex\n    const { countDelta, count } = state\n    const last = countDelta - slidesPerPage\n    return {\n      index: indexDelta < last ? index : count - 1,\n      indexDelta,\n    }\n  }\n  function calculate() {\n    if (element) {\n      let contentWidth = 0\n      let itemWidth = 0\n      itemPositions = []\n      element.querySelectorAll(itemSelector).forEach((slide) => {\n        itemPositions.push(contentWidth)\n        contentWidth += slide.clientWidth\n        itemWidth = slide.clientWidth\n      })\n      slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n      const countDelta = itemPositions.length\n      const count = Math.ceil(countDelta / slidesPerPage)\n      const { index } = state\n      const resetIndexMayby =\n        index + 1 > count\n          ? {\n              index: 0,\n              indexDelta: 0,\n            }\n          : {}\n      update({\n        count,\n        countDelta,\n        ...resetIndexMayby,\n      })\n    }\n  }\n\n  let ticking = false\n  function onScroll() {\n    if (!ticking && element) {\n      const scrollLeft = element.scrollLeft\n      window.requestAnimationFrame(() => {\n        if (muteScrollListner) {\n          const leftToScroll = Math.abs(left - scrollLeft)\n          if (leftToScroll < 1) {\n            muteScrollListner = false\n          }\n        } else {\n          const positionItem = itemPositions.reduce((prev, curr) => {\n            return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n              ? curr\n              : prev\n          })\n          const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n          prevIndexDelta = indexDelta\n          update(\n            fixIndex({\n              index: Math.floor(indexDelta / slidesPerPage),\n              indexDelta,\n            })\n          )\n        }\n        ticking = false\n      })\n      ticking = true\n    }\n  }\n  const onScrollFn = throttle(onScroll, 200)\n  const onResizeFn = throttle(calculate, 500)\n  function setElement(_el: HTMLElement) {\n    if (element) {\n      destroy()\n    }\n    element = _el\n    updateIndexDelta()\n    calculate()\n    element?.addEventListener('scroll', onScrollFn)\n    window.addEventListener('resize', onResizeFn)\n  }\n  _element && setElement(_element)\n  const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n    if (indexDelta !== undefined) {\n      update(\n        fixIndex({\n          index: Math.floor(indexDelta / slidesPerPage),\n          indexDelta,\n        })\n      )\n    }\n    if (index !== undefined) {\n      update(\n        fixIndex({\n          index,\n          indexDelta: index * slidesPerPage,\n        })\n      )\n    }\n  }\n  const destroy = () => {\n    element?.removeEventListener('scroll', onScrollFn)\n    window.removeEventListener('resize', onResizeFn)\n  }\n  const goNext = () => {\n    const { countDelta, indexDelta } = state\n    const last = countDelta - slidesPerPage\n    const next =\n      indexDelta + slidesPerPage <= last\n        ? indexDelta + slidesPerPage\n        : circular && indexDelta === last\n        ? 0\n        : last\n    jumpTo(undefined, next)\n  }\n  const goPrev = () => {\n    const { indexDelta, countDelta } = state\n    const last = countDelta - slidesPerPage\n    const next =\n      indexDelta - slidesPerPage >= 0\n        ? indexDelta - slidesPerPage\n        : circular && indexDelta === 0\n        ? last\n        : 0\n    jumpTo(undefined, next)\n  }\n  return {\n    destroy,\n    getState,\n    subscribe,\n    jumpTo,\n    setElement,\n    calculate,\n    goNext,\n    goPrev,\n  }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"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"}

package/dist/snap-slider.es.js

@@ -1,241 +1,151 @@
-const throttle = (fn, wait = 300) => {
-  let inThrottle, lastFn, lastTime;
+const q = (f, u) => {
+  let h, r, c;
   return function() {
-    const context = this, args = arguments;
-    if (!inThrottle) {
-      fn.apply(context, args);
-      lastTime = Date.now();
-      inThrottle = true;
-    } else {
-      clearTimeout(lastFn);
-      lastFn = setTimeout(() => {
-        if (Date.now() - lastTime >= wait) {
-          fn.apply(context, args);
-          lastTime = Date.now();
-        }
-      }, Math.max(wait - (Date.now() - lastTime), 0));
-    }
+    const v = this, p = arguments;
+    h ? (clearTimeout(r), r = setTimeout(() => {
+      Date.now() - c >= u && (f.apply(v, p), c = Date.now());
+    }, Math.max(u - (Date.now() - c), 0))) : (f.apply(v, p), c = Date.now(), h = !0);
   };
 };
-function createSnapSlider({
-  element: _element,
-  count = 1,
-  countDelta,
-  index = 0,
-  circular,
-  indexDelta,
-  initalSubscriptionPublish = true,
-  itemSelector = ":scope > *"
+function G({
+  element: f,
+  count: u = 1,
+  countDelta: h,
+  index: r = 0,
+  circular: c,
+  indexDelta: v,
+  itemSelector: p = ":scope > *"
 }) {
-  let initalIndex = index;
-  let state = {
-    index,
-    indexDelta: indexDelta || index,
-    count,
-    countDelta: countDelta || count
-  };
-  let prevIndexDelta = index;
-  let slidesPerPage = 1;
-  let itemPositions = [];
-  let muteScrollListner = false;
-  let left = 0;
-  let element;
-  function updateIndexDelta() {
-    if (!element) {
-      return;
-    }
-    const prev = element.scrollLeft;
-    const { indexDelta: indexDelta2 } = state;
-    left = indexDelta2 * (element.offsetWidth / slidesPerPage);
-    if (prevIndexDelta !== indexDelta2) {
-      const distance = Math.abs(prev - left);
-      const limitInstantScroll = element.offsetWidth * 2;
-      prevIndexDelta = indexDelta2;
-      muteScrollListner = true;
-      element.scroll({
-        left,
-        top: 0,
-        behavior: distance > limitInstantScroll ? "smooth" : void 0
-      });
-    } else {
-      if (initalIndex) {
-        muteScrollListner = true;
-        element.scroll({
-          left,
-          top: 0
+  let T = r, a = {
+    index: r,
+    indexDelta: v || r,
+    count: u,
+    countDelta: h || u
+  }, b = r, i = 1, x = [], m = !1, D = 0, o;
+  function W() {
+    if (o) {
+      const t = o.scrollLeft, { indexDelta: e } = a;
+      if (D = e * (o.offsetWidth / i), b !== e) {
+        const n = Math.abs(t - D), l = o.offsetWidth * 2;
+        b = e, m = !0, o.scroll({
+          left: D,
+          top: 0,
+          behavior: n > l ? "smooth" : void 0
         });
-        initalIndex = void 0;
-      }
+      } else
+        T && (m = !0, o.scroll({
+          left: D,
+          top: 0
+        }), T = void 0);
     }
   }
-  let listeners = [];
-  const subscribe = (callback) => {
-    listeners.push(callback);
-    return () => {
-      listeners = listeners.filter((x) => x !== callback);
-      if (listeners.length < 1) {
-        destroy();
-      }
-    };
-  };
-  function notify() {
-    listeners.forEach((callback) => {
-      callback(getState());
+  let P = !1, d = [];
+  const A = (t) => (d.push(t), P && t(E()), () => {
+    d = d.filter((e) => e !== t), d.length < 1 && I();
+  });
+  function O() {
+    d.forEach((t) => {
+      t(E());
     });
   }
-  const getState = () => {
-    const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
+  const E = () => {
+    const { indexDelta: t, countDelta: e } = a;
     return {
-      ...state,
-      prevEnabled: circular || indexDelta2 > 0,
-      nextEnabled: circular || countDelta2 - slidesPerPage > indexDelta2
+      ...a,
+      prevEnabled: c || t > 0,
+      nextEnabled: c || e - i > t
     };
   };
-  let initalPublish = !initalSubscriptionPublish;
-  function update(params = {}) {
-    let dirty = false;
-    let indexDeltaDirty = false;
-    const keys = Object.keys(
-      params
-    );
-    keys.forEach((key) => {
-      if (state[key] !== params[key]) {
-        state[key] = Number(params[key]);
-        dirty = true;
-        if (key === "indexDelta") {
-          indexDeltaDirty = true;
-        }
-      }
-    });
-    if (dirty || !initalPublish) {
-      initalPublish = true;
-      notify();
-      if (indexDeltaDirty) {
-        updateIndexDelta();
-      }
-    }
+  function g(t) {
+    let e = !1, n = !1;
+    Object.keys(
+      t
+    ).forEach((s) => {
+      a[s] !== t[s] && (a[s] = Number(t[s]), e = !0, s === "indexDelta" && (n = !0));
+    }), e && (P = d.length === 0, O(), n && W());
   }
-  function fixIndex(nextIndex) {
-    const { index: index2, indexDelta: indexDelta2 } = nextIndex;
-    const { countDelta: countDelta2, count: count2 } = state;
-    const last = countDelta2 - slidesPerPage;
+  function M(t) {
+    const { index: e, indexDelta: n } = t, { countDelta: l, count: s } = a, L = l - i;
     return {
-      index: indexDelta2 < last ? index2 : count2 - 1,
-      indexDelta: indexDelta2
+      index: n < L ? e : s - 1,
+      indexDelta: n
     };
   }
-  function calculate() {
-    if (!element) {
-      return;
+  function S() {
+    if (o) {
+      let t = 0, e = 0;
+      x = [], o.querySelectorAll(p).forEach((j) => {
+        x.push(t), t += j.clientWidth, e = j.clientWidth;
+      }), i = Math.round(o.offsetWidth / e);
+      const n = x.length, l = Math.ceil(n / i), { index: s } = a, L = s + 1 > l ? {
+        index: 0,
+        indexDelta: 0
+      } : {};
+      g({
+        count: l,
+        countDelta: n,
+        ...L
+      });
     }
-    let contentWidth = 0;
-    let itemWidth = 0;
-    itemPositions = [];
-    element.querySelectorAll(itemSelector).forEach((slide) => {
-      itemPositions.push(contentWidth);
-      contentWidth += slide.clientWidth;
-      itemWidth = slide.clientWidth;
-    });
-    slidesPerPage = Math.round(element.offsetWidth / itemWidth);
-    const count2 = Math.ceil(contentWidth / element.offsetWidth);
-    const countDelta2 = itemPositions.length;
-    const { index: index2 } = state;
-    const resetIndexMayby = index2 + 1 > count2 ? {
-      index: 0,
-      indexDelta: 0
-    } : {};
-    update({
-      count: count2,
-      countDelta: countDelta2,
-      ...resetIndexMayby
-    });
   }
-  let ticking = false;
-  function onScroll() {
-    if (!ticking && element) {
-      const scrollLeft = element.scrollLeft;
+  let w = !1;
+  function R() {
+    if (!w && o) {
+      const t = o.scrollLeft;
       window.requestAnimationFrame(() => {
-        if (muteScrollListner) {
-          const leftToScroll = Math.abs(left - scrollLeft);
-          if (leftToScroll < 1) {
-            muteScrollListner = false;
-          }
-        } else {
-          const positionItem = itemPositions.reduce((prev, curr) => {
-            return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev;
-          });
-          const indexDelta2 = itemPositions.findIndex((x) => x === positionItem);
-          prevIndexDelta = indexDelta2;
-          update(
-            fixIndex({
-              index: Math.floor(indexDelta2 / slidesPerPage),
-              indexDelta: indexDelta2
+        if (m)
+          Math.abs(D - t) < 1 && (m = !1);
+        else {
+          const e = x.reduce((l, s) => Math.abs(s - t) < Math.abs(l - t) ? s : l), n = x.findIndex((l) => l === e);
+          b = n, g(
+            M({
+              index: Math.floor(n / i),
+              indexDelta: n
             })
           );
         }
-        ticking = false;
-      });
-      ticking = true;
+        w = !1;
+      }), w = !0;
     }
   }
-  const onScrollFn = throttle(onScroll, 200);
-  const onResizeFn = throttle(calculate, 200);
-  function setElement(_el) {
-    if (element) {
-      destroy();
-    }
-    element = _el;
-    updateIndexDelta();
-    calculate();
-    element == null ? void 0 : element.addEventListener("scroll", onScrollFn);
-    window.addEventListener("resize", onResizeFn);
+  const F = q(R, 200), z = q(S, 500);
+  function N(t) {
+    o && I(), o = t, W(), S(), o == null || o.addEventListener("scroll", F), window.addEventListener("resize", z);
   }
-  _element && setElement(_element);
-  const jumpTo = function(index2, indexDelta2) {
-    if (indexDelta2 !== void 0) {
-      update(
-        fixIndex({
-          index: Math.floor(indexDelta2 / slidesPerPage),
-          indexDelta: indexDelta2
-        })
-      );
-    }
-    if (index2 !== void 0) {
-      update(
-        fixIndex({
-          index: index2,
-          indexDelta: index2 * slidesPerPage
-        })
-      );
-    }
-  };
-  const destroy = () => {
-    element == null ? void 0 : element.removeEventListener("scroll", onScrollFn);
-    window.removeEventListener("resize", onResizeFn);
-  };
-  const goNext = () => {
-    const { countDelta: countDelta2, indexDelta: indexDelta2 } = state;
-    const last = countDelta2 - slidesPerPage;
-    const next = indexDelta2 + slidesPerPage <= last ? indexDelta2 + slidesPerPage : circular && indexDelta2 === last ? 0 : last;
-    jumpTo(void 0, next);
-  };
-  const goPrev = () => {
-    const { indexDelta: indexDelta2, countDelta: countDelta2 } = state;
-    const last = countDelta2 - slidesPerPage;
-    const next = indexDelta2 - slidesPerPage >= 0 ? indexDelta2 - slidesPerPage : circular && indexDelta2 === 0 ? last : 0;
-    jumpTo(void 0, next);
+  f && N(f);
+  const y = function(t, e) {
+    e !== void 0 && g(
+      M({
+        index: Math.floor(e / i),
+        indexDelta: e
+      })
+    ), t !== void 0 && g(
+      M({
+        index: t,
+        indexDelta: t * i
+      })
+    );
+  }, I = () => {
+    o == null || o.removeEventListener("scroll", F), window.removeEventListener("resize", z);
   };
   return {
-    destroy,
-    getState,
-    subscribe,
-    jumpTo,
-    setElement,
-    calculate,
-    goNext,
-    goPrev
+    destroy: I,
+    getState: E,
+    subscribe: A,
+    jumpTo: y,
+    setElement: N,
+    calculate: S,
+    goNext: () => {
+      const { countDelta: t, indexDelta: e } = a, n = t - i, l = e + i <= n ? e + i : c && e === n ? 0 : n;
+      y(void 0, l);
+    },
+    goPrev: () => {
+      const { indexDelta: t, countDelta: e } = a, n = e - i, l = t - i >= 0 ? t - i : c && t === 0 ? n : 0;
+      y(void 0, l);
+    }
   };
 }
 export {
-  createSnapSlider
+  G as createSnapSlider
 };
+//# sourceMappingURL=snap-slider.es.js.map

package/dist/snap-slider.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-slider.es.js","sources":["../src/lib/throttle.ts","../src/lib/snap-slider.ts"],"sourcesContent":["export const throttle = (fn: Function, wait: number) => {\n  let inThrottle: boolean\n  let lastFn: ReturnType<typeof setTimeout>\n  let lastTime: number\n  return function (this: any) {\n    const context = this\n    const args = arguments\n    if (!inThrottle) {\n      fn.apply(context, args)\n      lastTime = Date.now()\n      inThrottle = true\n    } else {\n      clearTimeout(lastFn)\n      lastFn = setTimeout(() => {\n        if (Date.now() - lastTime >= wait) {\n          fn.apply(context, args)\n          lastTime = Date.now()\n        }\n      }, Math.max(wait - (Date.now() - lastTime), 0))\n    }\n  }\n}\n","import { throttle } from './throttle'\n\nexport interface TSnapListnerStateIndex {\n  index: number\n  indexDelta: number\n}\n\nexport interface TSnapSliderState extends TSnapListnerStateIndex {\n  count: number\n  countDelta: number\n}\n\ninterface TSnapSliderStateUpdate {\n  index?: number\n  indexDelta?: number\n  count?: number\n  countDelta?: number\n}\n\nexport interface TSnapSliderStateFull extends TSnapSliderState {\n  prevEnabled: boolean\n  nextEnabled: boolean\n}\n\nexport type TSnapListner = (params: TSnapSliderStateFull) => void\n\nexport interface TSnapSliderParams extends TSnapSliderStateUpdate {\n  element: HTMLElement | null\n  itemSelector?: string\n  circular?: boolean\n}\n\nexport type TSnapSliderJumpToFn = (index?: number, indexDelta?: number) => void\n\nexport interface TSnapSlider {\n  destroy: () => void\n  getState: () => TSnapSliderStateFull\n  jumpTo: TSnapSliderJumpToFn\n  goNext: () => void\n  goPrev: () => void\n  subscribe: (fn: TSnapListner) => () => void\n  setElement: (el: HTMLElement) => void\n  calculate: () => void\n}\n\nexport function createSnapSlider({\n  element: _element,\n  count = 1,\n  countDelta,\n  index = 0,\n  circular,\n  indexDelta,\n  itemSelector = ':scope > *',\n}: TSnapSliderParams): TSnapSlider {\n  let initalIndex: number | undefined = index\n  let state: TSnapSliderState = {\n    index,\n    indexDelta: indexDelta || index,\n    count,\n    countDelta: countDelta || count,\n  }\n  let prevIndexDelta: number = index\n  let slidesPerPage: number = 1\n  let itemPositions: number[] = []\n  let muteScrollListner: boolean = false\n  let left: number = 0\n  let element: HTMLElement | null\n  function updateIndexDelta() {\n    if (element) {\n      const prev = element.scrollLeft\n      const { indexDelta } = state\n      left = indexDelta * (element.offsetWidth / slidesPerPage)\n      if (prevIndexDelta !== indexDelta) {\n        const distance = Math.abs(prev - left)\n        const limitInstantScroll = element.offsetWidth * 2\n        prevIndexDelta = indexDelta\n        muteScrollListner = true\n        element.scroll({\n          left,\n          top: 0,\n          behavior: distance > limitInstantScroll ? 'smooth' : undefined,\n        })\n      } else {\n        if (initalIndex) {\n          muteScrollListner = true\n          element.scroll({\n            left,\n            top: 0,\n          })\n          initalIndex = undefined\n        }\n      }\n    }\n  }\n\n  let publishDirty = false\n  let listeners: TSnapListner[] = []\n  const subscribe = (callback: TSnapListner) => {\n    listeners.push(callback)\n    if (publishDirty) {\n      callback(getState())\n    }\n    return () => {\n      listeners = listeners.filter((x) => x !== callback)\n      if (listeners.length < 1) {\n        destroy()\n      }\n    }\n  }\n  function notify() {\n    listeners.forEach((callback) => {\n      callback(getState())\n    })\n  }\n  const getState = (): TSnapSliderStateFull => {\n    const { indexDelta, countDelta } = state\n    return {\n      ...state,\n      prevEnabled: circular || indexDelta > 0,\n      nextEnabled: circular || countDelta - slidesPerPage > indexDelta,\n    }\n  }\n  function update(params: TSnapSliderStateUpdate) {\n    let dirty = false\n    let indexDeltaDirty = false\n    type TSnapSliderStateUpdateKey = keyof typeof params\n    const keys: TSnapSliderStateUpdateKey[] = Object.keys(\n      params\n    ) as Array<TSnapSliderStateUpdateKey>\n    keys.forEach((key) => {\n      if (state[key] !== params[key]) {\n        state[key] = Number(params[key])\n        dirty = true\n        if (key === 'indexDelta') {\n          indexDeltaDirty = true\n        }\n      }\n    })\n    if (dirty) {\n      publishDirty = listeners.length === 0\n      notify()\n      if (indexDeltaDirty) {\n        updateIndexDelta()\n      }\n    }\n  }\n  function fixIndex(nextIndex: TSnapListnerStateIndex): TSnapListnerStateIndex {\n    const { index, indexDelta } = nextIndex\n    const { countDelta, count } = state\n    const last = countDelta - slidesPerPage\n    return {\n      index: indexDelta < last ? index : count - 1,\n      indexDelta,\n    }\n  }\n  function calculate() {\n    if (element) {\n      let contentWidth = 0\n      let itemWidth = 0\n      itemPositions = []\n      element.querySelectorAll(itemSelector).forEach((slide) => {\n        itemPositions.push(contentWidth)\n        contentWidth += slide.clientWidth\n        itemWidth = slide.clientWidth\n      })\n      slidesPerPage = Math.round(element.offsetWidth / itemWidth)\n      const countDelta = itemPositions.length\n      const count = Math.ceil(countDelta / slidesPerPage)\n      const { index } = state\n      const resetIndexMayby =\n        index + 1 > count\n          ? {\n              index: 0,\n              indexDelta: 0,\n            }\n          : {}\n      update({\n        count,\n        countDelta,\n        ...resetIndexMayby,\n      })\n    }\n  }\n\n  let ticking = false\n  function onScroll() {\n    if (!ticking && element) {\n      const scrollLeft = element.scrollLeft\n      window.requestAnimationFrame(() => {\n        if (muteScrollListner) {\n          const leftToScroll = Math.abs(left - scrollLeft)\n          if (leftToScroll < 1) {\n            muteScrollListner = false\n          }\n        } else {\n          const positionItem = itemPositions.reduce((prev, curr) => {\n            return Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft)\n              ? curr\n              : prev\n          })\n          const indexDelta = itemPositions.findIndex((x) => x === positionItem)\n          prevIndexDelta = indexDelta\n          update(\n            fixIndex({\n              index: Math.floor(indexDelta / slidesPerPage),\n              indexDelta,\n            })\n          )\n        }\n        ticking = false\n      })\n      ticking = true\n    }\n  }\n  const onScrollFn = throttle(onScroll, 200)\n  const onResizeFn = throttle(calculate, 500)\n  function setElement(_el: HTMLElement) {\n    if (element) {\n      destroy()\n    }\n    element = _el\n    updateIndexDelta()\n    calculate()\n    element?.addEventListener('scroll', onScrollFn)\n    window.addEventListener('resize', onResizeFn)\n  }\n  _element && setElement(_element)\n  const jumpTo: TSnapSliderJumpToFn = function (index, indexDelta) {\n    if (indexDelta !== undefined) {\n      update(\n        fixIndex({\n          index: Math.floor(indexDelta / slidesPerPage),\n          indexDelta,\n        })\n      )\n    }\n    if (index !== undefined) {\n      update(\n        fixIndex({\n          index,\n          indexDelta: index * slidesPerPage,\n        })\n      )\n    }\n  }\n  const destroy = () => {\n    element?.removeEventListener('scroll', onScrollFn)\n    window.removeEventListener('resize', onResizeFn)\n  }\n  const goNext = () => {\n    const { countDelta, indexDelta } = state\n    const last = countDelta - slidesPerPage\n    const next =\n      indexDelta + slidesPerPage <= last\n        ? indexDelta + slidesPerPage\n        : circular && indexDelta === last\n        ? 0\n        : last\n    jumpTo(undefined, next)\n  }\n  const goPrev = () => {\n    const { indexDelta, countDelta } = state\n    const last = countDelta - slidesPerPage\n    const next =\n      indexDelta - slidesPerPage >= 0\n        ? indexDelta - slidesPerPage\n        : circular && indexDelta === 0\n        ? last\n        : 0\n    jumpTo(undefined, next)\n  }\n  return {\n    destroy,\n    getState,\n    subscribe,\n    jumpTo,\n    setElement,\n    calculate,\n    goNext,\n    goPrev,\n  }\n}\n"],"names":["throttle","fn","wait","inThrottle","lastFn","lastTime","context","args","createSnapSlider","_element","count","countDelta","index","circular","indexDelta","itemSelector","initalIndex","state","prevIndexDelta","slidesPerPage","itemPositions","muteScrollListner","left","element","updateIndexDelta","prev","distance","limitInstantScroll","publishDirty","listeners","subscribe","callback","getState","x","destroy","notify","update","params","dirty","indexDeltaDirty","key","fixIndex","nextIndex","last","calculate","contentWidth","itemWidth","slide","resetIndexMayby","ticking","onScroll","scrollLeft","positionItem","curr","onScrollFn","onResizeFn","setElement","_el","jumpTo","next"],"mappings":"AAAa,MAAAA,IAAW,CAACC,GAAcC,MAAiB;AAClD,MAAAC,GACAC,GACAC;AACJ,SAAO,WAAqB;AAC1B,UAAMC,IAAU,MACVC,IAAO;AACb,IAAKJ,KAKH,aAAaC,CAAM,GACnBA,IAAS,WAAW,MAAM;AACxB,MAAI,KAAK,QAAQC,KAAYH,MACxBD,EAAA,MAAMK,GAASC,CAAI,GACtBF,IAAW,KAAK;IAClB,GACC,KAAK,IAAIH,KAAQ,KAAK,IAAI,IAAIG,IAAW,CAAC,CAAC,MAV3CJ,EAAA,MAAMK,GAASC,CAAI,GACtBF,IAAW,KAAK,OACHF,IAAA;AAAA,EASf;AAEJ;ACwBO,SAASK,EAAiB;AAAA,EAC/B,SAASC;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,GAAmC;AACjC,MAAIC,IAAkCJ,GAClCK,IAA0B;AAAA,IAC5B,OAAAL;AAAA,IACA,YAAYE,KAAcF;AAAA,IAC1B,OAAAF;AAAA,IACA,YAAYC,KAAcD;AAAA,EAAA,GAExBQ,IAAyBN,GACzBO,IAAwB,GACxBC,IAA0B,CAAA,GAC1BC,IAA6B,IAC7BC,IAAe,GACfC;AACJ,WAASC,IAAmB;AAC1B,QAAID,GAAS;AACX,YAAME,IAAOF,EAAQ,YACf,EAAE,YAAAT,EAAe,IAAAG;AAEvB,UADOH,IAAAA,KAAcS,EAAQ,cAAcJ,IACvCD,MAAmBJ,GAAY;AACjC,cAAMY,IAAW,KAAK,IAAID,IAAOH,CAAI,GAC/BK,IAAqBJ,EAAQ,cAAc;AAChCT,QAAAA,IAAAA,GACGO,IAAA,IACpBE,EAAQ,OAAO;AAAA,UACb,MAAAD;AAAA,UACA,KAAK;AAAA,UACL,UAAUI,IAAWC,IAAqB,WAAW;AAAA,QAAA,CACtD;AAAA;AAED,QAAIX,MACkBK,IAAA,IACpBE,EAAQ,OAAO;AAAA,UACb,MAAAD;AAAA,UACA,KAAK;AAAA,QAAA,CACN,GACaN,IAAA;AAAA;AAAA,EAItB;AAEA,MAAIY,IAAe,IACfC,IAA4B,CAAA;AAC1B,QAAAC,IAAY,CAACC,OACjBF,EAAU,KAAKE,CAAQ,GACnBH,KACFG,EAASC,GAAU,GAEd,MAAM;AACX,IAAAH,IAAYA,EAAU,OAAO,CAACI,MAAMA,MAAMF,CAAQ,GAC9CF,EAAU,SAAS,KACbK;EACV;AAGJ,WAASC,IAAS;AACN,IAAAN,EAAA,QAAQ,CAACE,MAAa;AAC9B,MAAAA,EAASC,GAAU;AAAA,IAAA,CACpB;AAAA,EACH;AACA,QAAMA,IAAW,MAA4B;AAC3C,UAAM,EAAE,YAAAlB,GAAY,YAAAH,MAAeM;AAC5B,WAAA;AAAA,MACL,GAAGA;AAAA,MACH,aAAaJ,KAAYC,IAAa;AAAA,MACtC,aAAaD,KAAYF,IAAaQ,IAAgBL;AAAAA,IAAA;AAAA,EACxD;AAEF,WAASsB,EAAOC,GAAgC;AAC9C,QAAIC,IAAQ,IACRC,IAAkB;AAKjB,IAHqC,OAAO;AAAA,MAC/CF;AAAA,IAAA,EAEG,QAAQ,CAACG,MAAQ;AACpB,MAAIvB,EAAMuB,CAAG,MAAMH,EAAOG,CAAG,MAC3BvB,EAAMuB,CAAG,IAAI,OAAOH,EAAOG,CAAG,CAAC,GACvBF,IAAA,IACJE,MAAQ,iBACQD,IAAA;AAAA,IAEtB,CACD,GACGD,MACFV,IAAeC,EAAU,WAAW,GAC7BM,KACHI,KACef;EAGvB;AACA,WAASiB,EAASC,GAA2D;AAC3E,UAAM,EAAE,OAAA9B,GAAO,YAAAE,MAAe4B,GACxB,EAAE,YAAA/B,GAAY,OAAAD,MAAUO,GACxB0B,IAAOhC,IAAaQ;AACnB,WAAA;AAAA,MACL,OAAOL,IAAa6B,IAAO/B,IAAQF,IAAQ;AAAA,MAC3C,YAAAI;AAAAA,IAAA;AAAA,EAEJ;AACA,WAAS8B,IAAY;AACnB,QAAIrB,GAAS;AACX,UAAIsB,IAAe,GACfC,IAAY;AAChB,MAAA1B,IAAgB,CAAA,GAChBG,EAAQ,iBAAiBR,CAAY,EAAE,QAAQ,CAACgC,MAAU;AACxD,QAAA3B,EAAc,KAAKyB,CAAY,GAC/BA,KAAgBE,EAAM,aACtBD,IAAYC,EAAM;AAAA,MAAA,CACnB,GACD5B,IAAgB,KAAK,MAAMI,EAAQ,cAAcuB,CAAS;AAC1D,YAAMnC,IAAaS,EAAc,QAC3BV,IAAQ,KAAK,KAAKC,IAAaQ,CAAa,GAC5C,EAAE,OAAAP,EAAU,IAAAK,GACZ+B,IACJpC,IAAQ,IAAIF,IACR;AAAA,QACE,OAAO;AAAA,QACP,YAAY;AAAA,UAEd;AACC,MAAA0B,EAAA;AAAA,QACL,OAAA1B;AAAAA,QACA,YAAAC;AAAAA,QACA,GAAGqC;AAAA,MAAA,CACJ;AAAA;AAAA,EAEL;AAEA,MAAIC,IAAU;AACd,WAASC,IAAW;AACd,QAAA,CAACD,KAAW1B,GAAS;AACvB,YAAM4B,IAAa5B,EAAQ;AAC3B,aAAO,sBAAsB,MAAM;AACjC,YAAIF;AAEF,UADqB,KAAK,IAAIC,IAAO6B,CAAU,IAC5B,MACG9B,IAAA;AAAA,aAEjB;AACL,gBAAM+B,IAAehC,EAAc,OAAO,CAACK,GAAM4B,MACxC,KAAK,IAAIA,IAAOF,CAAU,IAAI,KAAK,IAAI1B,IAAO0B,CAAU,IAC3DE,IACA5B,CACL,GACKX,IAAaM,EAAc,UAAU,CAACa,MAAMA,MAAMmB,CAAY;AACnDtC,UAAAA,IAAAA,GACjBsB;AAAA,YACEK,EAAS;AAAA,cACP,OAAO,KAAK,MAAM3B,IAAaK,CAAa;AAAA,cAC5C,YAAAL;AAAAA,YAAA,CACD;AAAA,UAAA;AAAA;AAGK,QAAAmC,IAAA;AAAA,MAAA,CACX,GACSA,IAAA;AAAA;AAAA,EAEd;AACM,QAAAK,IAAatD,EAASkD,GAAU,GAAG,GACnCK,IAAavD,EAAS4C,GAAW,GAAG;AAC1C,WAASY,EAAWC,GAAkB;AACpC,IAAIlC,KACMW,KAEAX,IAAAkC,GACOjC,KACPoB,KACDrB,KAAA,QAAAA,EAAA,iBAAiB,UAAU+B,IAC7B,OAAA,iBAAiB,UAAUC,CAAU;AAAA,EAC9C;AACA,EAAA9C,KAAY+C,EAAW/C,CAAQ;AACzB,QAAAiD,IAA8B,SAAU9C,GAAOE,GAAY;AAC/D,IAAIA,MAAe,UACjBsB;AAAA,MACEK,EAAS;AAAA,QACP,OAAO,KAAK,MAAM3B,IAAaK,CAAa;AAAA,QAC5C,YAAAL;AAAAA,MAAA,CACD;AAAA,IAAA,GAGDF,MAAU,UACZwB;AAAA,MACEK,EAAS;AAAA,QACP,OAAA7B;AAAAA,QACA,YAAYA,IAAQO;AAAA,MAAA,CACrB;AAAA,IAAA;AAAA,EAEL,GAEIe,IAAU,MAAM;AACX,IAAAX,KAAA,QAAAA,EAAA,oBAAoB,UAAU+B,IAChC,OAAA,oBAAoB,UAAUC,CAAU;AAAA,EAAA;AAwB1C,SAAA;AAAA,IACL,SAAArB;AAAA,IACA,UAAAF;AAAA,IACA,WAAAF;AAAA,IACA,QAAA4B;AAAA,IACA,YAAAF;AAAA,IACA,WAAAZ;AAAA,IACA,QA7Ba,MAAM;AACnB,YAAM,EAAE,YAAAjC,GAAY,YAAAG,MAAeG,GAC7B0B,IAAOhC,IAAaQ,GACpBwC,IACJ7C,IAAaK,KAAiBwB,IAC1B7B,IAAaK,IACbN,KAAYC,MAAe6B,IAC3B,IACAA;AACN,MAAAe,EAAO,QAAWC,CAAI;AAAA,IAAA;AAAA,IAqBtB,QAnBa,MAAM;AACnB,YAAM,EAAE,YAAA7C,GAAY,YAAAH,MAAeM,GAC7B0B,IAAOhC,IAAaQ,GACpBwC,IACJ7C,IAAaK,KAAiB,IAC1BL,IAAaK,IACbN,KAAYC,MAAe,IAC3B6B,IACA;AACN,MAAAe,EAAO,QAAWC,CAAI;AAAA,IAAA;AAAA,EAUtB;AAEJ;"}

package/dist/use-snap-slider.cjs.js

@@ -1,45 +1,2 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const snapSlider = require("./snap-slider.cjs.js");
-function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
-  const [, forceUpdate] = react.useState(0);
-  const mountedRef = react.useRef();
-  const [observer] = react.useState(
-    () => snapSlider.createSnapSlider({
-      element: ref.current,
-      count,
-      index,
-      circular,
-      initalSubscriptionPublish: false
-    })
-  );
-  const result = observer.getState(count, index);
-  react.useEffect(() => {
-    if (mountedRef.current) {
-      console.log("change count", count, countHash);
-      observer.jumpTo(0);
-      observer.calculate();
-    }
-  }, [count, countHash, observer]);
-  react.useEffect(() => {
-    mountedRef.current = true;
-    const unsubscribe = observer.subscribe(() => {
-      if (mountedRef.current) {
-        forceUpdate((x) => x + 1);
-      }
-    });
-    ref.current && observer.setElement(ref.current);
-    return () => {
-      mountedRef.current = false;
-      unsubscribe();
-    };
-  }, [observer, forceUpdate]);
-  return {
-    ...result,
-    jumpTo: observer.jumpTo,
-    goNext: observer.goNext,
-    goPrev: observer.goPrev
-  };
-}
-exports.useSnapSlider = useSnapSlider;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),f=require("./snap-slider.cjs.js");function p(u,n=1,c=0,o=!1,a){const[,s]=t.useState(0),r=t.useRef(),[e]=t.useState(()=>f.createSnapSlider({element:u.current,count:n,index:c,circular:o})),i=e.getState();return t.useEffect(()=>{r.current&&(e.jumpTo(0),e.calculate())},[n,a,e]),t.useEffect(()=>{r.current=!0,u.current&&e.setElement(u.current);const l=e.subscribe(()=>{r.current&&s(S=>S+1)});return()=>{r.current=!1,l()}},[e,s]),{...i,jumpTo:e.jumpTo,goNext:e.goNext,goPrev:e.goPrev}}exports.useSnapSlider=p;
+//# sourceMappingURL=use-snap-slider.cjs.js.map

package/dist/use-snap-slider.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-snap-slider.cjs.js","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n  jumpTo: (index: number) => void\n  goNext: () => void\n  goPrev: () => void\n}\n\nexport function useSnapSlider(\n  ref: MutableRefObject<HTMLDivElement | null>,\n  count: number = 1,\n  index: number = 0,\n  circular = false,\n  countHash?: string | number\n): TUseSnapSlider {\n  const [, forceUpdate] = useState<number>(0)\n  const mountedRef = useRef<boolean>()\n  const [observer] = useState(() =>\n    createSnapSlider({\n      element: ref.current,\n      count,\n      index,\n      circular,\n    })\n  )\n  const result = observer.getState()\n  useEffect(() => {\n    if (mountedRef.current) {\n      observer.jumpTo(0)\n      observer.calculate()\n    }\n  }, [count, countHash, observer])\n  useEffect(() => {\n    mountedRef.current = true\n    ref.current && observer.setElement(ref.current)\n    const unsubscribe = observer.subscribe(() => {\n      if (mountedRef.current) {\n        forceUpdate((x) => x + 1)\n      }\n    })\n\n    return () => {\n      mountedRef.current = false\n      unsubscribe()\n    }\n  }, [observer, forceUpdate])\n  return {\n    ...result,\n    jumpTo: observer.jumpTo,\n    goNext: observer.goNext,\n    goPrev: observer.goPrev,\n  }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":"2IASgB,SAAAA,EACdC,EACAC,EAAgB,EAChBC,EAAgB,EAChBC,EAAW,GACXC,EACgB,CAChB,KAAM,EAAGC,CAAW,EAAIC,WAAiB,CAAC,EACpCC,EAAaC,EAAAA,SACb,CAACC,CAAQ,EAAIH,EAAA,SAAS,IAC1BI,mBAAiB,CACf,QAASV,EAAI,QACb,MAAAC,EACA,MAAAC,EACA,SAAAC,CAAA,CACD,CAAA,EAEGQ,EAASF,EAAS,WACxBG,OAAAA,EAAAA,UAAU,IAAM,CACVL,EAAW,UACbE,EAAS,OAAO,CAAC,EACjBA,EAAS,UAAU,EAEpB,EAAA,CAACR,EAAOG,EAAWK,CAAQ,CAAC,EAC/BG,EAAAA,UAAU,IAAM,CACdL,EAAW,QAAU,GACrBP,EAAI,SAAWS,EAAS,WAAWT,EAAI,OAAO,EACxC,MAAAa,EAAcJ,EAAS,UAAU,IAAM,CACvCF,EAAW,SACDF,EAACS,GAAMA,EAAI,CAAC,CAC1B,CACD,EAED,MAAO,IAAM,CACXP,EAAW,QAAU,GACTM,GAAA,CACd,EACC,CAACJ,EAAUJ,CAAW,CAAC,EACnB,CACL,GAAGM,EACH,OAAQF,EAAS,OACjB,OAAQA,EAAS,OACjB,OAAQA,EAAS,MAAA,CAErB"}

package/dist/use-snap-slider.es.js

@@ -1,45 +1,32 @@
-import { useState, useRef, useEffect } from "react";
-import { createSnapSlider } from "./snap-slider.es.js";
-function useSnapSlider(ref, count = 1, index = 0, circular = false, countHash) {
-  const [, forceUpdate] = useState(0);
-  const mountedRef = useRef();
-  const [observer] = useState(
-    () => createSnapSlider({
-      element: ref.current,
-      count,
-      index,
-      circular,
-      initalSubscriptionPublish: false
+import { useState as o, useRef as p, useEffect as c } from "react";
+import { createSnapSlider as S } from "./snap-slider.es.js";
+function d(r, u = 1, s = 0, a = !1, f) {
+  const [, n] = o(0), t = p(), [e] = o(
+    () => S({
+      element: r.current,
+      count: u,
+      index: s,
+      circular: a
     })
-  );
-  const result = observer.getState(count, index);
-  useEffect(() => {
-    if (mountedRef.current) {
-      console.log("change count", count, countHash);
-      observer.jumpTo(0);
-      observer.calculate();
-    }
-  }, [count, countHash, observer]);
-  useEffect(() => {
-    mountedRef.current = true;
-    const unsubscribe = observer.subscribe(() => {
-      if (mountedRef.current) {
-        forceUpdate((x) => x + 1);
-      }
+  ), m = e.getState();
+  return c(() => {
+    t.current && (e.jumpTo(0), e.calculate());
+  }, [u, f, e]), c(() => {
+    t.current = !0, r.current && e.setElement(r.current);
+    const i = e.subscribe(() => {
+      t.current && n((l) => l + 1);
     });
-    ref.current && observer.setElement(ref.current);
     return () => {
-      mountedRef.current = false;
-      unsubscribe();
+      t.current = !1, i();
     };
-  }, [observer, forceUpdate]);
-  return {
-    ...result,
-    jumpTo: observer.jumpTo,
-    goNext: observer.goNext,
-    goPrev: observer.goPrev
+  }, [e, n]), {
+    ...m,
+    jumpTo: e.jumpTo,
+    goNext: e.goNext,
+    goPrev: e.goPrev
   };
 }
 export {
-  useSnapSlider
+  d as useSnapSlider
 };
+//# sourceMappingURL=use-snap-slider.es.js.map

package/dist/use-snap-slider.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-snap-slider.es.js","sources":["../src/lib/use-snap-slider.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { createSnapSlider, TSnapSliderStateFull } from './snap-slider'\n\nexport interface TUseSnapSlider extends TSnapSliderStateFull {\n  jumpTo: (index: number) => void\n  goNext: () => void\n  goPrev: () => void\n}\n\nexport function useSnapSlider(\n  ref: MutableRefObject<HTMLDivElement | null>,\n  count: number = 1,\n  index: number = 0,\n  circular = false,\n  countHash?: string | number\n): TUseSnapSlider {\n  const [, forceUpdate] = useState<number>(0)\n  const mountedRef = useRef<boolean>()\n  const [observer] = useState(() =>\n    createSnapSlider({\n      element: ref.current,\n      count,\n      index,\n      circular,\n    })\n  )\n  const result = observer.getState()\n  useEffect(() => {\n    if (mountedRef.current) {\n      observer.jumpTo(0)\n      observer.calculate()\n    }\n  }, [count, countHash, observer])\n  useEffect(() => {\n    mountedRef.current = true\n    ref.current && observer.setElement(ref.current)\n    const unsubscribe = observer.subscribe(() => {\n      if (mountedRef.current) {\n        forceUpdate((x) => x + 1)\n      }\n    })\n\n    return () => {\n      mountedRef.current = false\n      unsubscribe()\n    }\n  }, [observer, forceUpdate])\n  return {\n    ...result,\n    jumpTo: observer.jumpTo,\n    goNext: observer.goNext,\n    goPrev: observer.goPrev,\n  }\n}\n"],"names":["useSnapSlider","ref","count","index","circular","countHash","forceUpdate","useState","mountedRef","useRef","observer","createSnapSlider","result","useEffect","unsubscribe","x"],"mappings":";;AASgB,SAAAA,EACdC,GACAC,IAAgB,GAChBC,IAAgB,GAChBC,IAAW,IACXC,GACgB;AAChB,QAAM,GAAGC,CAAW,IAAIC,EAAiB,CAAC,GACpCC,IAAaC,KACb,CAACC,CAAQ,IAAIH;AAAA,IAAS,MAC1BI,EAAiB;AAAA,MACf,SAASV,EAAI;AAAA,MACb,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,IAAA,CACD;AAAA,EAAA,GAEGQ,IAASF,EAAS;AACxB,SAAAG,EAAU,MAAM;AACd,IAAIL,EAAW,YACbE,EAAS,OAAO,CAAC,GACjBA,EAAS,UAAU;AAAA,EAEpB,GAAA,CAACR,GAAOG,GAAWK,CAAQ,CAAC,GAC/BG,EAAU,MAAM;AACd,IAAAL,EAAW,UAAU,IACrBP,EAAI,WAAWS,EAAS,WAAWT,EAAI,OAAO;AACxC,UAAAa,IAAcJ,EAAS,UAAU,MAAM;AAC3C,MAAIF,EAAW,WACDF,EAAA,CAACS,MAAMA,IAAI,CAAC;AAAA,IAC1B,CACD;AAED,WAAO,MAAM;AACX,MAAAP,EAAW,UAAU,IACTM;IAAA;AAAA,EACd,GACC,CAACJ,GAAUJ,CAAW,CAAC,GACnB;AAAA,IACL,GAAGM;AAAA,IACH,QAAQF,EAAS;AAAA,IACjB,QAAQA,EAAS;AAAA,IACjB,QAAQA,EAAS;AAAA,EAAA;AAErB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-snap-slider",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React hook to manage css snap sliders",
   "type": "module",
   "main": "./dist/use-snap-slider.cjs.js",
@@ -13,24 +13,39 @@
     "type": "git",
     "url": "git+https://github.com/gerhardsletten/use-snap-slider.git"
   },
+  "homepage": "https://use-snap-slider.vercel.app",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.prod.json && vite build",
+    "build::source": "DISABLE_MINIFY=1 npm run build",
     "prepare": "npm run build",
-    "build-vercel": "tsc && vite build --config vite.config.vercel.ts",
-    "preview": "vite preview"
+    "build-vercel": "tsc -p tsconfig.prod.json && vite build --config vite.config.vercel.ts",
+    "preview": "vite preview",
+    "test": "npm run jest",
+    "jest": "NODE_ENV=test NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest",
+    "coverage": "npm run jest -- --coverage=true"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.14",
     "classnames": "^2.3.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",
     "vite-plugin-dts": "^2.2.0"