@cntrl-site/components 0.1.0-alpha.30 → 0.1.0-alpha.31

package/dist/index.js

@@ -1690,13 +1690,8 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   };
   const handleImageWrapperClick = (e) => {
     var _a, _b;
-    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-    if (!rect) {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-      return;
-    }
+    const currentImage = content[currentIndex];
+    const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
     let clientX;
     let clientY;
     if ("changedTouches" in e && e.changedTouches.length > 0) {
@@ -1708,7 +1703,20 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     } else {
       return;
     }
-    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    let inside;
+    if (isCover && imageRef.current) {
+      const imgRect = imageRef.current.getBoundingClientRect();
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+    } else {
+      const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+      if (!rect) {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+        return;
+      }
+      inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    }
     if (inside) {
       if (triggers.type === "click" && triggers.switch === "image") {
         if (triggers.repeat === "close" && currentIndex === content.length - 1) {
@@ -1753,6 +1761,32 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       handleClose();
     }
   };
+  const onImageClick = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    if (triggers.type === "click" && triggers.switch === "image") {
+      if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+        handleClose();
+      } else {
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      }
+    }
+    if (triggers.type === "click" && triggers.switch === "50/50") {
+      const img2 = e.currentTarget;
+      const rect = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      const imgWidth = rect.width;
+      const imgHeight = rect.height;
+      let dir;
+      if (slider.direction === "horiz") {
+        dir = clickX < imgWidth / 2 ? "-1" : "+1";
+      } else {
+        dir = clickY < imgHeight / 2 ? "-1" : "+1";
+      }
+      (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+    }
+  };
   React.useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
@@ -1909,11 +1943,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
-        const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-        console.log("rect", rect);
-        if (!rect) return;
+        const currentImage = content[currentIndex];
+        const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
-        const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        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;
+        } else {
+          const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+          if (!rect) return;
+          inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        }
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1931,7 +1972,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     return () => {
       document.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [isOpen, handleClose, currentIndex]);
+  }, [isOpen, handleClose, currentIndex, content]);
   if (!isOpen && !isClosing) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2023,6 +2064,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                                 [styles.cover]: item.image.objectFit === "cover",
                                 [styles.scaleSlide]: slider.type === "scale"
                               }),
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               style: {

package/dist/index.mjs

@@ -1688,13 +1688,8 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   };
   const handleImageWrapperClick = (e) => {
     var _a, _b;
-    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-    if (!rect) {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-      return;
-    }
+    const currentImage = content[currentIndex];
+    const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
     let clientX;
     let clientY;
     if ("changedTouches" in e && e.changedTouches.length > 0) {
@@ -1706,7 +1701,20 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     } else {
       return;
     }
-    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    let inside;
+    if (isCover && imageRef.current) {
+      const imgRect = imageRef.current.getBoundingClientRect();
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+    } else {
+      const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+      if (!rect) {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+        return;
+      }
+      inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    }
     if (inside) {
       if (triggers.type === "click" && triggers.switch === "image") {
         if (triggers.repeat === "close" && currentIndex === content.length - 1) {
@@ -1751,6 +1759,32 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       handleClose();
     }
   };
+  const onImageClick = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    if (triggers.type === "click" && triggers.switch === "image") {
+      if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+        handleClose();
+      } else {
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      }
+    }
+    if (triggers.type === "click" && triggers.switch === "50/50") {
+      const img2 = e.currentTarget;
+      const rect = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      const imgWidth = rect.width;
+      const imgHeight = rect.height;
+      let dir;
+      if (slider.direction === "horiz") {
+        dir = clickX < imgWidth / 2 ? "-1" : "+1";
+      } else {
+        dir = clickY < imgHeight / 2 ? "-1" : "+1";
+      }
+      (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+    }
+  };
   useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
@@ -1907,11 +1941,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
-        const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-        console.log("rect", rect);
-        if (!rect) return;
+        const currentImage = content[currentIndex];
+        const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
-        const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        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;
+        } else {
+          const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+          if (!rect) return;
+          inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        }
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1929,7 +1970,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     return () => {
       document.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [isOpen, handleClose, currentIndex]);
+  }, [isOpen, handleClose, currentIndex, content]);
   if (!isOpen && !isClosing) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2021,6 +2062,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                                 [styles.cover]: item.image.objectFit === "cover",
                                 [styles.scaleSlide]: slider.type === "scale"
                               }),
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               style: {

package/package.json

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