supercharged-slider - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/index.d.ts

 import createSlider from './utils/createSlider';
-export { createSlider };
+import breakpoints from './middlewares/breakpoints';
+import slidesPerView from './middlewares/slidesPerView';
+import spaceBetween from './middlewares/spaceBetween';
+import touch from './middlewares/touch';
+import activeClass from './middlewares/activeClass';
+import vertical from './middlewares/vertical';
+export { createSlider, breakpoints, slidesPerView, spaceBetween, touch, activeClass, vertical, };

dist/index.js

@@ -36,2 +36,8 @@ var index = "";
 };
+const getSlideY = (index2, slider) => {
+  if (slider.slideHeight) {
+    return index2 * (slider.slideHeight + slider.spaceBetween);
+  }
+  return -1;
+};
 const middlewareOrder = ["slidesPerView", "others", "breakpoints"];
@@ -128,2 +134,150 @@ const runMiddlewares = (middlewares, slider) => {
 };
-export { createSlider };
+const breakpoints = (props) => ({
+  name: "breakpoints",
+  callback(slider) {
+    const allBreakpoints = Object.keys(props).map(Number).sort((a, b) => b - a);
+    const middlewares = [];
+    let currentBreakpoint = null;
+    for (const breakpoint of allBreakpoints) {
+      if (window.innerWidth <= breakpoint) {
+        currentBreakpoint = breakpoint;
+        props[breakpoint].forEach((middleware) => {
+          const middlewareInList = middlewares.findIndex((item) => item.name === middleware.name);
+          if (middlewareInList !== -1) {
+            middlewares.splice(middlewareInList, 1);
+          }
+          middlewares.push(middleware);
+        });
+      }
+    }
+    if (!currentBreakpoint)
+      return;
+    runMiddlewares(middlewares, slider);
+  }
+});
+const slidesPerView = (count) => ({
+  name: "slidesPerView",
+  callback: (slider) => {
+    const elementWidth = slider.element.clientWidth;
+    const slideWidth = elementWidth / count;
+    slider.slidesPerView = count;
+    slider.slideWidth = slideWidth;
+  }
+});
+const spaceBetween = (size) => ({
+  name: "spaceBetween",
+  callback: (slider) => {
+    slider.spaceBetween = size;
+    if (slider.slidesPerView === 1)
+      return;
+    const marginPerView = size * (slider.slidesPerView - 1);
+    slider.slideWidth = (slider.element.clientWidth - marginPerView) / slider.slidesPerView;
+  }
+});
+const touch = () => ({
+  name: "touch",
+  callback: (slider) => {
+    const isVertical = () => slider.direction === "vertical";
+    const isTargetValid = (e) => e.composedPath().includes(slider.element);
+    let isDragging = false;
+    let lastPositionBeforeMove = 0;
+    let lastCursorPosition = 0;
+    let lastWrapperPosition = 0;
+    const onMouseMove = (e) => {
+      const mousePosition = isVertical() ? e.clientY : e.clientX;
+      const scrollKey = isVertical() ? "scrollHeight" : "scrollWidth";
+      const clientKey = isVertical() ? "clientHeight" : "clientWidth";
+      if (lastCursorPosition === 0) {
+        lastCursorPosition = mousePosition;
+        return;
+      }
+      const threshold = slider.wrapper[scrollKey] - slider.element[clientKey];
+      const distance = (mousePosition - lastCursorPosition) * -1;
+      const newPosition = slider.wrapperPosition + distance;
+      lastCursorPosition = mousePosition;
+      lastWrapperPosition = Math.min(newPosition, threshold);
+      slider.scrollWrapperTo(lastWrapperPosition);
+    };
+    document.addEventListener("mousedown", (e) => {
+      const valid = isTargetValid(e);
+      if (!valid)
+        return;
+      isDragging = true;
+      lastPositionBeforeMove = slider.wrapperPosition;
+      slider.wrapper.style.transitionDuration = "0ms";
+      document.addEventListener("mousemove", onMouseMove);
+    });
+    document.addEventListener("mouseup", () => {
+      if (!isDragging)
+        return;
+      const rectKey = isVertical() ? "slideHeight" : "slideWidth";
+      const threshold = (slider[rectKey] || 0) / 4;
+      const difference = lastPositionBeforeMove - lastWrapperPosition;
+      const movedRight = difference < 0;
+      const passedThreshold = Math.abs(difference) > threshold;
+      if (passedThreshold) {
+        if (movedRight)
+          slider.next();
+        else
+          slider.prev();
+      } else {
+        slider.scrollWrapperTo(lastPositionBeforeMove);
+      }
+      lastCursorPosition = 0;
+      isDragging = false;
+      slider.wrapper.style.transitionDuration = "";
+      document.removeEventListener("mousemove", onMouseMove);
+    });
+  }
+});
+const getActiveSlides = (slider) => slider.slides.slice(
+  slider.activeView,
+  slider.activeView + slider.slidesPerView
+);
+const activeClass = (activeClassName = "s-slide-active") => ({
+  name: "activeClass",
+  callback: (slider) => {
+    slider.onBeforeSlideChange(() => {
+      const activeSlides = getActiveSlides(slider);
+      activeSlides.forEach((slide) => slide.classList.remove(activeClassName));
+    });
+    const handleSlideChange = () => {
+      const activeSlides = getActiveSlides(slider);
+      activeSlides.forEach((slide) => slide.classList.add(activeClassName));
+    };
+    handleSlideChange();
+    slider.onSlideChange(handleSlideChange);
+  }
+});
+const vertical = () => ({
+  name: "vertical",
+  callback: (slider) => {
+    slider.direction = "vertical";
+    slider.element.classList.add("s-slider-vertical");
+    slider.slideHeight = slider.element.clientHeight;
+    slider.resizeSlideElements = () => {
+      slider.slides.forEach((slide, index2) => {
+        slide.style.height = `${slider.slideHeight}px`;
+        if (index2 === slider.slides.length - 1)
+          return;
+        slide.style.marginBottom = `${slider.spaceBetween}px`;
+      });
+    };
+    slider.scrollWrapperTo = (y) => {
+      slider.wrapperPosition = y;
+      slider.wrapper.style.transform = `translate3d(0, -${y}px, 0)`;
+    };
+    slider.slideTo = (index2) => {
+      const max = slider.slides.length - slider.slidesPerView;
+      if (index2 > max || index2 < 0) {
+        return;
+      }
+      slider.runBeforeSlideChangeHooks(slider);
+      const y = getSlideY(index2, slider);
+      slider.scrollWrapperTo(y);
+      slider.activeView = index2;
+      slider.runSlideChangeHooks(slider);
+    };
+  }
+});
+export { activeClass, breakpoints, createSlider, slidesPerView, spaceBetween, touch, vertical };

package.json

 {
   "name": "supercharged-slider",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A super modular tiny slider library.",
@@ -5,0 +5,0 @@ "license": "MIT",

src/index.ts

 import './index.scss';
 
 import createSlider from './utils/createSlider';
+import breakpoints from './middlewares/breakpoints';
+import slidesPerView from './middlewares/slidesPerView';
+import spaceBetween from './middlewares/spaceBetween';
+import touch from './middlewares/touch';
+import activeClass from './middlewares/activeClass';
+import vertical from './middlewares/vertical';
 
-export { createSlider };
+export {
+  createSlider,
+  breakpoints,
+  slidesPerView,
+  spaceBetween,
+  touch,
+  activeClass,
+  vertical,
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35255

increased by24.67%

Number of package files

47

increased by14.63%

Lines of code

872

increased by28.8%

No dependency changes