use-snap-slider 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# Css snap slider
+
+JS helper for css-snap-sliders

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

@@ -0,0 +1,38 @@
+export interface TSnapListnerStateIndex {
+    index: number;
+    indexDelta: number;
+}
+export interface TSnapSliderState extends TSnapListnerStateIndex {
+    count: number;
+    countDelta: number;
+}
+interface TSnapSliderStateUpdate {
+    index?: number;
+    indexDelta?: number;
+    count?: number;
+    countDelta?: number;
+}
+export interface TSnapSliderStateFull extends TSnapSliderState {
+    prevEnabled: boolean;
+    nextEnabled: boolean;
+}
+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;
+    jumpTo: TSnapSliderJumpToFn;
+    goNext: () => void;
+    goPrev: () => void;
+    subscribe: (fn: TSnapListner) => () => void;
+    setElement: (el: HTMLElement) => void;
+    calculate: () => void;
+}
+export declare function createSnapSlider({ element: _element, count, countDelta, index, circular, indexDelta, initalSubscriptionPublish, itemSelector, }: TSnapSliderParams): TSnapSlider;
+export {};

package/dist/lib/throttle.d.ts

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

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

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+import { TSnapSliderStateFull } from "./snap-slider";
+export interface TUseSnapSlider extends TSnapSliderStateFull {
+    jumpTo: (index: number) => void;
+    goNext: () => void;
+    goPrev: () => void;
+}
+export declare function useSnapSlider(ref: MutableRefObject<HTMLDivElement | null>, count?: number, index?: number, circular?: boolean, countHash?: string | number): TUseSnapSlider;

package/dist/snap-slider.cjs.js

@@ -0,0 +1,241 @@
+"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;

package/dist/snap-slider.d.ts

@@ -0,0 +1 @@
+export * from './lib/snap-slider'

package/dist/snap-slider.es.js

@@ -0,0 +1,241 @@
+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
+  };
+}
+export {
+  createSnapSlider
+};

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

@@ -0,0 +1,45 @@
+"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;

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

@@ -0,0 +1 @@
+export * from './lib/use-snap-slider'

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

@@ -0,0 +1,45 @@
+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
+    })
+  );
+  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);
+      }
+    });
+    ref.current && observer.setElement(ref.current);
+    return () => {
+      mountedRef.current = false;
+      unsubscribe();
+    };
+  }, [observer, forceUpdate]);
+  return {
+    ...result,
+    jumpTo: observer.jumpTo,
+    goNext: observer.goNext,
+    goPrev: observer.goPrev
+  };
+}
+export {
+  useSnapSlider
+};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "use-snap-slider",
+  "version": "0.0.1",
+  "description": "React hook to use css snap slider",
+  "type": "module",
+  "main": "./dist/use-snap-slider.cjs.js",
+  "module": "./dist/use-snap-slider.es.js",
+  "types": "./dist/use-snap-slider.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "prepare": "npm run build",
+    "build-vercel": "tsc && vite build --config vite.config.vercel.ts",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@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",
+    "postcss": "^8.4.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vite-plugin-dts": "^2.2.0"
+  }
+}