@cntrl-site/components 0.1.18 → 0.1.19

package/dist/Components/utils/getImageRect.d.ts

@@ -4,3 +4,9 @@ export declare function getDisplayedImageRect(img: HTMLImageElement): {
     width: number;
     height: number;
 };
+export declare function getPaddedContainerBounds(img: HTMLImageElement): {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};

package/dist/index.js

@@ -1729,15 +1729,20 @@ const getPositionStyles = (position, offset, isEditor) => {
   }
   return styles2;
 };
+function getPaddingValues(img2) {
+  const style = window.getComputedStyle(img2);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    right: parseFloat(style.paddingRight) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+    left: parseFloat(style.paddingLeft) || 0
+  };
+}
 function getDisplayedImageRect(img2) {
   const container = img2.getBoundingClientRect();
-  const style = window.getComputedStyle(img2);
-  const paddingTop = parseFloat(style.paddingTop) || 0;
-  const paddingRight = parseFloat(style.paddingRight) || 0;
-  const paddingBottom = parseFloat(style.paddingBottom) || 0;
-  const paddingLeft = parseFloat(style.paddingLeft) || 0;
-  const containerW = Math.max(0, container.width - paddingLeft - paddingRight);
-  const containerH = Math.max(0, container.height - paddingTop - paddingBottom);
+  const padding = getPaddingValues(img2);
+  const containerW = Math.max(0, container.width - padding.left - padding.right);
+  const containerH = Math.max(0, container.height - padding.top - padding.bottom);
   const imgW = img2.naturalWidth;
   const imgH = img2.naturalHeight;
   const containerRatio = containerW / containerH;
@@ -1750,8 +1755,8 @@ function getDisplayedImageRect(img2) {
     renderedH = containerH;
     renderedW = containerH * imgRatio;
   }
-  const contentLeft = container.left + paddingLeft;
-  const contentTop = container.top + paddingTop;
+  const contentLeft = container.left + padding.left;
+  const contentTop = container.top + padding.top;
   const offsetX = (containerW - renderedW) / 2 + contentLeft;
   const offsetY = (containerH - renderedH) / 2 + contentTop;
   return {
@@ -1761,6 +1766,16 @@ function getDisplayedImageRect(img2) {
     height: renderedH
   };
 }
+function getPaddedContainerBounds(img2) {
+  const container = img2.getBoundingClientRect();
+  const padding = getPaddingValues(img2);
+  return {
+    left: container.left + padding.left,
+    right: container.right - padding.right,
+    top: container.top + padding.top,
+    bottom: container.bottom - padding.bottom
+  };
+}
 function getColorAlpha(color) {
   const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
   if (rgbaMatch) {
@@ -1991,17 +2006,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     }
     let inside;
     if (isCover && imageRef.current) {
-      const imgRect = imageRef.current.getBoundingClientRect();
-      const style = window.getComputedStyle(imageRef.current);
-      const paddingTop = parseFloat(style.paddingTop) || 0;
-      const paddingRight = parseFloat(style.paddingRight) || 0;
-      const paddingBottom = parseFloat(style.paddingBottom) || 0;
-      const paddingLeft = parseFloat(style.paddingLeft) || 0;
-      const contentLeft = imgRect.left + paddingLeft;
-      const contentRight = imgRect.right - paddingRight;
-      const contentTop = imgRect.top + paddingTop;
-      const contentBottom = imgRect.bottom - paddingBottom;
-      inside = clientX >= contentLeft && clientX <= contentRight && clientY >= contentTop && clientY <= contentBottom;
+      const bounds = getPaddedContainerBounds(imageRef.current);
+      inside = clientX >= bounds.left && clientX <= bounds.right && clientY >= bounds.top && clientY <= bounds.bottom;
     } else {
       const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
       if (!rect) {
@@ -2098,6 +2104,9 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       if (target && (target.closest(`.${classes.thumbsWrapper}`) || target.closest(`.${classes.thumbsContainer}`))) {
         return;
       }
+      if (slider.type === "slide") {
+        return;
+      }
       e.preventDefault();
     };
     document.addEventListener("touchmove", preventScroll, { passive: false });
@@ -2110,10 +2119,11 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       }
       setAnimationFinished(false);
     };
-  }, [isOpen, isEditor, area.color]);
+  }, [isOpen, isEditor, area.color, slider.type]);
   react.useEffect(() => {
     if (!isOpen) return;
     const handleTouchEnd = (e) => {
+      var _a, _b;
       if (isClosingRef.current) {
         e.stopPropagation();
         return;
@@ -2126,14 +2136,20 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
         return;
       }
+      if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) {
+        const splideContainer = lightboxRef.current.splide.root;
+        if (target && (splideContainer.contains(target) || splideContainer === target)) {
+          return;
+        }
+      }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
         const currentImage = content[currentIndex];
         const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
         let inside;
         if (isCover && imageRef.current) {
-          const imgRect = imageRef.current.getBoundingClientRect();
-          inside = touch.clientX >= imgRect.left && touch.clientX <= imgRect.right && touch.clientY >= imgRect.top && touch.clientY <= imgRect.bottom;
+          const bounds = getPaddedContainerBounds(imageRef.current);
+          inside = touch.clientX >= bounds.left && touch.clientX <= bounds.right && touch.clientY >= bounds.top && touch.clientY <= bounds.bottom;
         } else {
           const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
           if (!rect) return;
@@ -2307,7 +2323,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   height: "100%",
                   type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                   padding: 0,
-                  rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop",
+                  rewind: triggers.repeat !== "close",
                   start: 0
                 },
                 style: { "--splide-speed": slider.duration },

package/dist/index.mjs

@@ -1727,15 +1727,20 @@ const getPositionStyles = (position, offset, isEditor) => {
   }
   return styles2;
 };
+function getPaddingValues(img2) {
+  const style = window.getComputedStyle(img2);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    right: parseFloat(style.paddingRight) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+    left: parseFloat(style.paddingLeft) || 0
+  };
+}
 function getDisplayedImageRect(img2) {
   const container = img2.getBoundingClientRect();
-  const style = window.getComputedStyle(img2);
-  const paddingTop = parseFloat(style.paddingTop) || 0;
-  const paddingRight = parseFloat(style.paddingRight) || 0;
-  const paddingBottom = parseFloat(style.paddingBottom) || 0;
-  const paddingLeft = parseFloat(style.paddingLeft) || 0;
-  const containerW = Math.max(0, container.width - paddingLeft - paddingRight);
-  const containerH = Math.max(0, container.height - paddingTop - paddingBottom);
+  const padding = getPaddingValues(img2);
+  const containerW = Math.max(0, container.width - padding.left - padding.right);
+  const containerH = Math.max(0, container.height - padding.top - padding.bottom);
   const imgW = img2.naturalWidth;
   const imgH = img2.naturalHeight;
   const containerRatio = containerW / containerH;
@@ -1748,8 +1753,8 @@ function getDisplayedImageRect(img2) {
     renderedH = containerH;
     renderedW = containerH * imgRatio;
   }
-  const contentLeft = container.left + paddingLeft;
-  const contentTop = container.top + paddingTop;
+  const contentLeft = container.left + padding.left;
+  const contentTop = container.top + padding.top;
   const offsetX = (containerW - renderedW) / 2 + contentLeft;
   const offsetY = (containerH - renderedH) / 2 + contentTop;
   return {
@@ -1759,6 +1764,16 @@ function getDisplayedImageRect(img2) {
     height: renderedH
   };
 }
+function getPaddedContainerBounds(img2) {
+  const container = img2.getBoundingClientRect();
+  const padding = getPaddingValues(img2);
+  return {
+    left: container.left + padding.left,
+    right: container.right - padding.right,
+    top: container.top + padding.top,
+    bottom: container.bottom - padding.bottom
+  };
+}
 function getColorAlpha(color) {
   const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
   if (rgbaMatch) {
@@ -1989,17 +2004,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     }
     let inside;
     if (isCover && imageRef.current) {
-      const imgRect = imageRef.current.getBoundingClientRect();
-      const style = window.getComputedStyle(imageRef.current);
-      const paddingTop = parseFloat(style.paddingTop) || 0;
-      const paddingRight = parseFloat(style.paddingRight) || 0;
-      const paddingBottom = parseFloat(style.paddingBottom) || 0;
-      const paddingLeft = parseFloat(style.paddingLeft) || 0;
-      const contentLeft = imgRect.left + paddingLeft;
-      const contentRight = imgRect.right - paddingRight;
-      const contentTop = imgRect.top + paddingTop;
-      const contentBottom = imgRect.bottom - paddingBottom;
-      inside = clientX >= contentLeft && clientX <= contentRight && clientY >= contentTop && clientY <= contentBottom;
+      const bounds = getPaddedContainerBounds(imageRef.current);
+      inside = clientX >= bounds.left && clientX <= bounds.right && clientY >= bounds.top && clientY <= bounds.bottom;
     } else {
       const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
       if (!rect) {
@@ -2096,6 +2102,9 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       if (target && (target.closest(`.${classes.thumbsWrapper}`) || target.closest(`.${classes.thumbsContainer}`))) {
         return;
       }
+      if (slider.type === "slide") {
+        return;
+      }
       e.preventDefault();
     };
     document.addEventListener("touchmove", preventScroll, { passive: false });
@@ -2108,10 +2117,11 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       }
       setAnimationFinished(false);
     };
-  }, [isOpen, isEditor, area.color]);
+  }, [isOpen, isEditor, area.color, slider.type]);
   useEffect(() => {
     if (!isOpen) return;
     const handleTouchEnd = (e) => {
+      var _a, _b;
       if (isClosingRef.current) {
         e.stopPropagation();
         return;
@@ -2124,14 +2134,20 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
         return;
       }
+      if (slider.type === "slide" && triggers.type === "drag" && ((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) {
+        const splideContainer = lightboxRef.current.splide.root;
+        if (target && (splideContainer.contains(target) || splideContainer === target)) {
+          return;
+        }
+      }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
         const currentImage = content[currentIndex];
         const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
         let inside;
         if (isCover && imageRef.current) {
-          const imgRect = imageRef.current.getBoundingClientRect();
-          inside = touch.clientX >= imgRect.left && touch.clientX <= imgRect.right && touch.clientY >= imgRect.top && touch.clientY <= imgRect.bottom;
+          const bounds = getPaddedContainerBounds(imageRef.current);
+          inside = touch.clientX >= bounds.left && touch.clientX <= bounds.right && touch.clientY >= bounds.top && touch.clientY <= bounds.bottom;
         } else {
           const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
           if (!rect) return;
@@ -2305,7 +2321,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   height: "100%",
                   type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                   padding: 0,
-                  rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop",
+                  rewind: triggers.repeat !== "close",
                   start: 0
                 },
                 style: { "--splide-speed": slider.duration },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",