@get-set/gs-zoom 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# Get-Set Carousel
+
+## Description
+
+Advanced level React carousel plugin
+
+## Installation
+
+To install this package, run:
+
+```html
+npm i @get-set/gs-carousel
+```
+
+## Usage
+
+```jsx
+import GSCarousel from '@get-set/gs-carousel';
+
+export default function Carousel() {
+  return (
+    <GSCarousel 
+      slidesToShow={2}
+      slidesToScroll={1}
+      gap='2rem'
+      focusOnSelect
+      autoplay
+    >
+      <div> //GSCarousel 1-st item
+        <img src="image1.jpg" />
+      </div>
+      <p> //GSCarousel 2-nd item
+        <span>text1</span>
+        <a>link</a>
+      </p>
+      <img src="image3.jpg" /> //GSCarousel 3-rd item
+      <section> //GSCarousel 4-th item
+        <img src="image4.jpg" />
+      </section>
+    </GSCarousel>
+  )
+}
+```
+## Props
+
+You can see all properties using jshint

package/dist/GSZoom.css

@@ -0,0 +1,235 @@
+html.gs-zoom-opened {
+  overflow: hidden !important;
+  touch-action: pan-x pan-y;
+}
+html.gs-zoom-opened body {
+  touch-action: pan-x pan-y;
+}
+
+.gs-zoom-magnifier-instance:hover {
+  cursor: none;
+}
+
+.gs-zoom-magnifier {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999;
+  border: 4px solid #fff;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+.gs-zoom-magnifier[data-type=circle] {
+  border-radius: 50%;
+}
+.gs-zoom-magnifier img {
+  position: absolute;
+  transform-origin: top left;
+  max-width: unset !important;
+}
+
+.gs-zoom-container {
+  position: fixed;
+  z-index: 9999999999;
+  width: 100vw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  -webkit-backdrop-filter: blur(50px);
+          backdrop-filter: blur(50px);
+}
+.gs-zoom-container .gs-zoom-autoplayline {
+  position: fixed;
+  height: 4px;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: red;
+}
+.gs-zoom-container button {
+  cursor: pointer;
+  outline: none !important;
+}
+.gs-zoom-container * {
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.gs-zoom-container .gs-zoom-header {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  z-index: 99;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions {
+  display: flex;
+  align-items: center;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions .gs-zoom-action {
+  width: 40px;
+  height: 40px;
+  background-color: rgba(35, 35, 35, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions .gs-zoom-action svg {
+  fill: #fff;
+  width: 18px;
+}
+.gs-zoom-container .gs-zoom-img-list {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  width: -moz-max-content;
+  width: max-content;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img {
+  width: 100vw;
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img-touch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gz-zoom-loading-container {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img.gs-zoom-is-adjusting {
+  transition: 0.4s ease-in-out !important;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img.gz-zoom-is-loading .gz-zoom-loading-container {
+  display: block;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img.gz-zoom-is-loading .gs-zoom-img {
+  visibility: hidden;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-info-data {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 20px 20px 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+}
+.gs-zoom-container .gs-zoom-additionals {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow-x: hidden;
+  padding: 5px 0;
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+  transform-origin: bottom;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list {
+  display: flex;
+  gap: 5px;
+  width: -moz-max-content;
+  width: max-content;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item {
+  width: 80px;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #000;
+  opacity: 0.5;
+  transition: 0.2s ease-out;
+  transform: scale(0.8);
+  cursor: pointer;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item:hover, .gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item.active {
+  transform: scale(1);
+  opacity: 1;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.gs-zoom-container .gs-zoom-additionals.gs-zoom-hidden {
+  z-index: 1;
+  opacity: 0;
+}
+.gs-zoom-container .gs-zoom-additionals.gs-zoom-hidden .gs-add-list {
+  transform: scale(0.9);
+}
+.gs-zoom-container:not(.gs-additional-isdragging) .gs-zoom-additionals .gs-add-list-container .gs-add-list {
+  transition: 0.3s transform ease-in-out;
+}
+.gs-zoom-container .gs-zoom-navigations button {
+  border: none;
+  position: fixed;
+  top: 50%;
+  width: 50px;
+  background-color: rgba(35, 35, 35, 0.65);
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: #fff;
+  transform: translateY(-50%);
+}
+.gs-zoom-container .gs-zoom-navigations button svg {
+  fill: #fff;
+  width: 18px;
+}
+.gs-zoom-container .gs-zoom-navigations .gs-zoom-next {
+  right: 10px;
+}
+.gs-zoom-container .gs-zoom-navigations .gs-zoom-prev {
+  left: 10px;
+}
+.gs-zoom-container .gs-zoom-hide-inzoomed {
+  z-index: 3;
+  opacity: 1;
+  transform: scale(1);
+  transition: 0.3s ease-in-out;
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed {
+  z-index: 1;
+  opacity: 0;
+  transform: scale(0.9);
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed.gs-zoom-additionals {
+  transform: scale(1);
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed.gs-zoom-additionals .gs-add-list {
+  transform: scale(0.9);
+}/*# sourceMappingURL=GSZoom.css.map */

package/dist/actions/general.js

@@ -0,0 +1,30 @@
+import initClose from "./initClose";
+
+export const getScale = (element) => {
+  // Get the computed style of the element
+  const style = window.getComputedStyle(element);
+  const transform = style.transform;
+
+  if (transform !== "none") {
+    const values = transform.match(/matrix.*\((.+)\)/)[1].split(", ");
+    return parseFloat(values[0]);
+  } else {
+    return 1;
+  }
+};
+
+export const getTranslateCoord = (element) => {
+  const style = window.getComputedStyle(element);
+  // eslint-disable-next-line no-undef
+  const matrix = new WebKitCSSMatrix(style.transform);
+  return {
+    x: matrix.e,
+    y: matrix.f,
+  };
+};
+
+export const fullscreenchange = () => {
+  if (!document.fullscreenElement) {
+    initClose();
+  }
+};

package/dist/actions/getAdjustTransform.js

@@ -0,0 +1,43 @@
+const getAdjustTransform = (
+  scale,
+  translatex,
+  translatey,
+  $img,
+  $container
+) => {
+  const actualWidth = $img.clientWidth * scale;
+  const actualHeight = $img.clientHeight * scale;
+  const containerWidth = $container.clientWidth;
+  const containerHeight = $container.clientHeight;
+  const maxTranslateXValue = (actualWidth - containerWidth) / 2;
+  const maxTranslateYValue = (actualHeight - containerHeight) / 2;
+  const minTranslateXValue = (containerWidth - actualWidth) / 2;
+  const minTranslateYValue = (containerHeight - actualHeight) / 2;
+  let newTranslateXValue = translatex / scale;
+  let newTranslateYValue = translatey / scale;
+  if (actualWidth <= containerWidth) {
+    if (translatex != 0) {
+      newTranslateXValue = 0;
+    }
+  } else {
+    if (translatex > maxTranslateXValue) {
+      newTranslateXValue = maxTranslateXValue / scale;
+    } else if (translatex < minTranslateXValue) {
+      newTranslateXValue = minTranslateXValue / scale;
+    }
+  }
+  if (actualHeight <= containerHeight) {
+    if (translatex != 0) {
+      newTranslateYValue = 0;
+    }
+  } else {
+    if (translatey > maxTranslateYValue) {
+      newTranslateYValue = maxTranslateYValue / scale;
+    } else if (translatey < minTranslateYValue) {
+      newTranslateYValue = minTranslateYValue / scale;
+    }
+  }
+  return [newTranslateXValue, newTranslateYValue];
+};
+
+export default getAdjustTransform;

package/dist/actions/getCurrentParams.js

@@ -0,0 +1,42 @@
+import _defaultParams from '../constants/defaultParams';
+import magnifierDefaultProps from '../constants/magnifierDefaultProps';
+
+const getCurrentParams = (params) => {
+  const defaultParams = { ..._defaultParams };
+  let finalParams = {
+    ...defaultParams,
+    ...params,
+  };
+
+  if (finalParams.responsive.length > 0) {
+    finalParams.responsive.sort((a, b) => b.windowSize - a.windowSize);
+  }
+
+  if (finalParams.responsive.length > 0) {
+    const windowSize = window.innerWidth;
+    const availableResponsives = finalParams.responsive.filter(
+      (resp) => resp.windowSize >= windowSize
+    );
+
+    availableResponsives.map((resp) => {
+      finalParams = {
+        ...finalParams,
+        ...resp.params,
+        magnifier: {
+          ...magnifierDefaultProps,
+          ...resp.magnifier,
+        },
+      };
+      return resp;
+    });
+  } else {
+    finalParams.magnifier = {
+      ...magnifierDefaultProps,
+      ...finalParams.magnifier,
+    };
+  }
+
+  return finalParams;
+};
+
+export default getCurrentParams;

package/dist/actions/getTranslateCoordToPoint.js

@@ -0,0 +1,41 @@
+import { getTranslateCoord } from "./general";
+
+const getTranslateCoordToPoint = (
+  $img,
+  $container,
+  scale,
+  newScale,
+  clientX,
+  clientY
+) => {
+  const coords = getTranslateCoord($img);
+  const translatex = coords.x;
+  const translatey = coords.y;
+  let mouseDirectionY = 0;
+  let mouseDirectionX = 0;
+  const actualWidth = $img.clientWidth * scale;
+  const actualHeight = $img.clientHeight * scale;
+  const containerWidth = $container.clientWidth;
+  const containerHeight = $container.clientHeight;
+
+  mouseDirectionY =
+    (clientY - (containerHeight - actualHeight) / 2 - translatey) /
+    actualHeight;
+
+  mouseDirectionX =
+    (clientX - (containerWidth - actualWidth) / 2 - translatex) / actualWidth;
+
+  const newActualWidth = (actualWidth * newScale) / scale;
+  const newActualHeight = (actualHeight * newScale) / scale;
+
+  const newTranslatex =
+    (newActualWidth - containerWidth) / 2 -
+    (newActualWidth * mouseDirectionX - clientX);
+  const newTranslatey =
+    (newActualHeight - containerHeight) / 2 -
+    (newActualHeight * mouseDirectionY - clientY);
+
+  return [newTranslatex, newTranslatey];
+};
+
+export default getTranslateCoordToPoint;

package/dist/actions/init.js

@@ -0,0 +1,21 @@
+import types from "../constants/types";
+import initLightBox from "./initLightBox";
+import initMagnifier from "./initMagnifier";
+
+const init = (ref) => {
+  if (typeof ref.currentParams.beforeInit === "function") {
+    ref.currentParams.beforeInit();
+  }
+  switch (ref.currentParams.type) {
+    case types.lightbox:
+      initLightBox(ref);
+      break;
+    case types.magnifier:
+      initMagnifier(ref);
+  }
+  if (typeof ref.currentParams.afterInit === "function") {
+    ref.currentParams.afterInit();
+  }
+};
+
+export default init;

package/dist/actions/initActionEvents.js

@@ -0,0 +1,93 @@
+import icons from '../constants/icons';
+import { initAutoplay, stopAutoplay } from './initAutoplay';
+import { exitFullScreen } from './initFullScreen';
+import setStyles from './setStyles';
+
+const initActionEvents = (ref) => {
+  const params = ref.currentParams;
+  const $container = ref.$container;
+  const $btnAdditionals = ref.$btnAdditionals;
+  const $btnAutoplay = ref.$btnAutoplay;
+  const $btnClose = ref.$btnClose;
+  const $btnZoomIn = ref.$btnZoomIn;
+  const $btnZoomOut = ref.$btnZoomOut;
+
+  if ($btnAdditionals != null) {
+    $btnAdditionals.addEventListener('click', () => {
+      if (
+        $container
+          .querySelector('.gs-zoom-additionals')
+          .classList.contains('gs-zoom-hidden')
+      ) {
+        $container
+          .querySelector('.gs-zoom-additionals')
+          .classList.remove('gs-zoom-hidden');
+      } else {
+        $container
+          .querySelector('.gs-zoom-additionals')
+          .classList.add('gs-zoom-hidden');
+      }
+    });
+  }
+  if ($btnAutoplay != null) {
+    $btnAutoplay.addEventListener('click', () => {
+      if (ref.autoplay == undefined) {
+        initAutoplay(ref);
+        $btnAutoplay.innerHTML = icons.autoplayPause;
+      } else {
+        stopAutoplay(ref);
+      }
+    });
+  }
+  if ($btnClose != null) {
+    $btnClose.addEventListener('click', () => {
+      exitFullScreen();
+    });
+  }
+  if ($btnZoomIn != null) {
+    $btnZoomIn.addEventListener('click', () => {
+      const $img = ref.$img;
+      const scale =
+        $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
+
+      if (scale < params.maxZoom) {
+        clearTimeout(window.timeout);
+        const newScale = Math.min(scale + 0.4, params.maxZoom);
+        $img.dataset.scale = newScale;
+        setStyles(ref, $img, {
+          transition: '.3s ease-in-out',
+          transform: `scale(${newScale})`,
+        });
+        window.timeout = setTimeout(function () {
+          setStyles(ref, $img, {
+            transition: 'unset',
+          });
+        }, 300);
+      }
+    });
+  }
+  if ($btnZoomOut != null) {
+    $btnZoomOut.addEventListener('click', () => {
+      const $img = ref.$img;
+      const scale =
+        $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
+
+      if (scale > 1) {
+        clearTimeout(window.timeout);
+        const newScale = Math.max(1, scale - 0.4);
+        $img.dataset.scale = newScale;
+        setStyles(ref, $img, {
+          transition: '.3s ease-in-out',
+          transform: `scale(${newScale})`,
+        });
+        window.timeout = setTimeout(function () {
+          setStyles(ref, $img, {
+            transition: 'unset',
+          });
+        }, 300);
+      }
+    });
+  }
+};
+
+export default initActionEvents;

package/dist/actions/initAdditionals.js

@@ -0,0 +1,118 @@
+import { getTranslateCoord } from "./general";
+import initChange from "./initChange";
+
+const initAdditionals = (ref) => {
+  const params = ref.currentParams;
+
+  if (params.showAdditionals && ref.list.length > 1) {
+    const $container = ref.$container;
+    const $mainImg = ref.$mainImg;
+    const $img = ref.$img;
+    const $addContainer = document.createElement("div");
+    const $addList = document.createElement("div");
+    const $addListContainer = document.createElement("div");
+    $addContainer.classList.add("gs-zoom-additionals");
+    $addContainer.classList.add("gs-zoom-hide-inzoomed");
+    $addContainer.classList.add("gs-zoom-hidden");
+    $addListContainer.classList.add("gs-add-list-container");
+    $addList.classList.add("gs-add-list");
+    $addList.style.transform = "translateX(0px)";
+    [...ref.list].map((el, index) => {
+      const $item = document.createElement("div");
+      $item.dataset.index = index;
+      if (index === ref.currentIndex) {
+        $item.classList.add("active");
+      }
+      const $itemImg = document.createElement("img");
+      $itemImg.src =
+        el.src.split("?")[0] + params.additionalImageQueryParameters;
+      $mainImg.classList.add("gz-zoom-is-loading");
+      $img.onload = () => {
+        $mainImg.classList.remove("gz-zoom-is-loading");
+      };
+      $item.classList.add("gs-add-item");
+      $item.append($itemImg);
+      $addList.append($item);
+      $item.addEventListener("click", () => {
+        ref.currentIndex = index;
+        initChange(ref, index);
+      });
+    });
+    $addListContainer.append($addList);
+    $addContainer.append($addListContainer);
+    $container.append($addContainer);
+
+    $addList.ontouchstart = $addList.onmousedown = (e) => {
+      if ($addList.clientWidth > $container.clientWidth) {
+        window.initX =
+          e.targetTouches != null && e.targetTouches.length > 0
+            ? e.targetTouches[0].clientX
+            : e.clientX;
+        window.initTranslateX = getTranslateCoord($addList).x;
+        $container.classList.add("gs-additional-isdragging");
+      }
+    };
+    $container.addEventListener("touchmove", (e) => {
+      if ($container.classList.contains("gs-additional-isdragging")) {
+        window.clientX = e.targetTouches[0].clientX;
+        const movedX = window.clientX - window.initX;
+        $addList.style.transform = `translateX(${
+          window.initTranslateX + movedX
+        }px)`;
+      }
+    });
+    $container.addEventListener("mousemove", (e) => {
+      if (
+        $container.classList.contains("gs-additional-isdragging") &&
+        $addList.clientWidth > $container.clientWidth
+      ) {
+        window.clientX = e.clientX;
+        const movedX = window.clientX - window.initX;
+        $addList.style.transform = `translateX(${
+          window.initTranslateX + movedX
+        }px)`;
+      }
+    });
+    $container.addEventListener("mouseleave", (e) => {
+      if ($container.classList.contains("gs-additional-isdragging")) {
+        $container.classList.remove("gs-additional-isdragging");
+        const translate = getTranslateCoord($addList).x;
+        if (translate > 0) {
+          $addList.style.transform = `translateX(0px)`;
+        } else if (translate < $container.clientWidth - $addList.clientWidth) {
+          $addList.style.transform = `translateX(${
+            $container.clientWidth - $addList.clientWidth
+          }px)`;
+        }
+      }
+    });
+    $container.addEventListener("mouseup", (e) => {
+      if ($container.classList.contains("gs-additional-isdragging")) {
+        $container.classList.remove("gs-additional-isdragging");
+        const translate = getTranslateCoord($addList).x;
+        if (translate > 0) {
+          $addList.style.transform = `translateX(0px)`;
+        } else if (translate < $container.clientWidth - $addList.clientWidth) {
+          $addList.style.transform = `translateX(${
+            $container.clientWidth - $addList.clientWidth
+          }px)`;
+        }
+      }
+    });
+    $container.addEventListener("touchend", (e) => {
+      if ($container.classList.contains("gs-additional-isdragging")) {
+        $container.classList.remove("gs-additional-isdragging");
+        const translate = getTranslateCoord($addList).x;
+        if (translate > 0) {
+          $addList.style.transform = `translateX(0px)`;
+        } else if (translate < $container.clientWidth - $addList.clientWidth) {
+          $addList.style.transform = `translateX(${
+            $container.clientWidth - $addList.clientWidth
+          }px)`;
+        }
+      }
+    });
+  }
+};
+
+export default initAdditionals;