react-freeslider/dist/index.js

React component to make responsive free slider

"use strict";

require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
require("./freeSlider.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
//STYLES

function FreeSlider(_ref, ref) {
  let {
    children
  } = _ref;
  //CONSTS
  const slider = (0, _react.useRef)(null);
  //LETS
  let holding = false;
  let firstClickX;
  let alreadyLeftScrolled;
  let velocity;
  let rafID;
  (0, _react.useImperativeHandle)(ref, () => ({
    prev: () => {
      _prev();
    },
    next: () => {
      _next();
    }
  }));

  //FUNCTIONS
  function init() {
    // slider.current = document.querySelector(".slideshowContainer");

    slider.current.addEventListener("mousedown", e => {
      holding = true;
      firstClickX = e.pageX - slider.current.offsetLeft;
      alreadyLeftScrolled = slider.current.scrollLeft;
      stopTransition();
    });
    slider.current.addEventListener("mousemove", e => {
      if (!holding) return;
      const x = e.pageX - slider.current.offsetLeft;
      const scrolled = (x - firstClickX) * 1.2;
      const prevScrollLeft = slider.current.scrollLeft;
      slider.current.scrollLeft = alreadyLeftScrolled - scrolled;
      velocity = slider.current.scrollLeft - prevScrollLeft;
    });
    slider.current.addEventListener("mouseup", () => {
      holding = false;
      startTransition();
    });
    slider.current.addEventListener("mouseleave", () => {
      holding = false;
    });
    slider.current.addEventListener("touchstart", e => {
      holding = true;
      // pageX => la largeur entre mon click et le DOCUMENT
      firstClickX = e.targetTouches[0].pageX - slider.current.offsetLeft;
      alreadyLeftScrolled = slider.current.scrollLeft;
      stopTransition();
    });
    slider.current.addEventListener("touchend", () => {
      holding = false;
      startTransition();
    });
    slider.current.addEventListener("touchmove", e => {
      if (!holding) return;
      const x = e.targetTouches[0].pageX - slider.current.offsetLeft;
      const scrolled = (x - firstClickX) * 1.2;
      const prevScrollLeft = slider.current.scrollLeft;
      slider.current.scrollLeft = alreadyLeftScrolled - scrolled;
      velocity = slider.current.scrollLeft - prevScrollLeft;
    });
  }
  function startTransition() {
    stopTransition();
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    rafID = requestAnimationFrame(decreasingTransition);
  }
  function stopTransition() {
    cancelAnimationFrame(rafID);
  }
  function decreasingTransition() {
    var _slider$current;
    if (!!((_slider$current = slider.current) !== null && _slider$current !== void 0 && _slider$current.scrollLeft)) {
      slider.current.scrollLeft += velocity;
      velocity *= 0.95;
      if (Math.abs(velocity) > 0.5) {
        rafID = requestAnimationFrame(decreasingTransition);
      }
    }
  }
  function _prev() {
    slider.current.scrollLeft -= 10;
    velocity = -15;
    startTransition();
  }
  function _next() {
    slider.current.scrollLeft += 10;
    velocity = 15;
    startTransition();
  }

  //EFFECTS
  (0, _react.useEffect)(() => {
    init();
    //eslint-disable-next-line
  }, [children]);

  //RENDER
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "freeSlider"
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: slider,
    className: "slideshowContainer"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "slideshow"
  }, children)));
}
var _default = /*#__PURE__*/(0, _react.forwardRef)(FreeSlider);
exports.default = _default;