@cntrl-site/components 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/index.js

@@ -1645,9 +1645,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const isClosingRef = React.useRef(false);
   const contentRef = React.useRef(null);
   const animationEndHandlerRef = React.useRef(null);
+  const appearAnimationEndHandlerRef = React.useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const handleClose = React.useCallback(() => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    if (isMobile && !isEditor && colorAlpha > 0.9) {
+      document.body.style.backgroundColor = "";
+    }
     setIsClosing(true);
     isClosingRef.current = true;
     const handleAnimationEnd = (e) => {
@@ -1664,7 +1670,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       animationEndHandlerRef.current = handleAnimationEnd;
       contentRef.current.addEventListener("animationend", handleAnimationEnd);
     }
-  }, [onClose, appearDurationMs]);
+  }, [onClose, appearDurationMs, area.color, isEditor]);
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
     if (e.target === e.currentTarget) {
@@ -1672,8 +1678,52 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
   };
   const handleImageWrapperClick = (e) => {
+    var _a, _b;
     if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
+    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+    if (!rect) {
+      if (e.target === e.currentTarget) {
+        handleClose();
+      }
+      return;
+    }
+    let clientX;
+    let clientY;
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      clientX = e.changedTouches[0].clientX;
+      clientY = e.changedTouches[0].clientY;
+    } else if ("clientX" in e) {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    } else {
+      return;
+    }
+    const 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) {
+          handleClose();
+        } else {
+          (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+        }
+      } else if (triggers.type === "click" && triggers.switch === "50/50") {
+        const img2 = imageRef.current;
+        if (img2) {
+          const imgRect = img2.getBoundingClientRect();
+          const clickX = clientX - imgRect.left;
+          const clickY = clientY - imgRect.top;
+          const imgWidth = imgRect.width;
+          const imgHeight = imgRect.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);
+        }
+      }
+    } else {
       handleClose();
     }
   };
@@ -1764,19 +1814,33 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    if (isMobile && !isEditor) {
-      document.body.style.backgroundColor = area.color;
+    const colorAlpha = getColorAlpha(area.color);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
+        }
+        if (contentRef.current && appearAnimationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
+      }
+    };
+    if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
     }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      if (isMobile && !isEditor) {
-        document.body.style.backgroundColor = "";
+      if (contentRef.current && appearAnimationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
       }
     };
-  }, [isOpen]);
+  }, [isOpen, area.color, isEditor]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1863,6 +1927,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       }
       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 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;
@@ -1926,8 +1991,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                 animationTimingFunction: "ease",
                 animationFillMode: "both",
                 ...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
-                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" },
-                "--splide-speed": slider.duration || "500ms"
+                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1970,7 +2034,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                           children: /* @__PURE__ */ jsxRuntime.jsx(
                             "img",
                             {
-                              ref: imageRef,
+                              ref: index === currentIndex ? imageRef : null,
                               className: cn(styles.imageStyle, {
                                 [styles.contain]: item.image.objectFit === "contain",
                                 [styles.cover]: item.image.objectFit === "cover",
@@ -1978,8 +2042,13 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               }),
                               src: item.image.url,
                               alt: item.image.name ?? "",
-                              onClick: onImageClick,
-                              style: imageStyle2
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
+                              style: {
+                                ...imageStyle2,
+                                ...item.image.objectFit === "contain" ? {
+                                  pointerEvents: "none"
+                                } : {}
+                              }
                             }
                           )
                         }
@@ -2169,6 +2238,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
+const getColorAlpha = (color) => {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2507,15 +2595,23 @@ const LightboxComponent = {
                     },
                     properties: {
                       top: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       left: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       right: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       bottom: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       }
                     }
@@ -2757,8 +2853,8 @@ const LightboxComponent = {
               align: "center",
               triggers: "clk",
               grid: {
-                height: 0.03,
-                width: 0.03,
+                height: 0.04,
+                width: 0.04,
                 gap: 8e-3
               },
               offset: { x: 0, y: 0 },
@@ -2771,7 +2867,7 @@ const LightboxComponent = {
             layout: {
               position: "middle-center",
               offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
+              padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
             },
             controls: {
               isActive: true,
@@ -2782,7 +2878,7 @@ const LightboxComponent = {
               hover: "#cccccc"
             },
             area: {
-              color: "rgba(64,67,71,0.4)",
+              color: "rgba(64,67,71,0.9)",
               blur: 0,
               closeIconUrl: null,
               closeIconAlign: "top-right",

package/dist/index.mjs

@@ -1643,9 +1643,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const isClosingRef = useRef(false);
   const contentRef = useRef(null);
   const animationEndHandlerRef = useRef(null);
+  const appearAnimationEndHandlerRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const handleClose = useCallback(() => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    if (isMobile && !isEditor && colorAlpha > 0.9) {
+      document.body.style.backgroundColor = "";
+    }
     setIsClosing(true);
     isClosingRef.current = true;
     const handleAnimationEnd = (e) => {
@@ -1662,7 +1668,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       animationEndHandlerRef.current = handleAnimationEnd;
       contentRef.current.addEventListener("animationend", handleAnimationEnd);
     }
-  }, [onClose, appearDurationMs]);
+  }, [onClose, appearDurationMs, area.color, isEditor]);
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
     if (e.target === e.currentTarget) {
@@ -1670,8 +1676,52 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
   };
   const handleImageWrapperClick = (e) => {
+    var _a, _b;
     if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
+    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+    if (!rect) {
+      if (e.target === e.currentTarget) {
+        handleClose();
+      }
+      return;
+    }
+    let clientX;
+    let clientY;
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      clientX = e.changedTouches[0].clientX;
+      clientY = e.changedTouches[0].clientY;
+    } else if ("clientX" in e) {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    } else {
+      return;
+    }
+    const 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) {
+          handleClose();
+        } else {
+          (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+        }
+      } else if (triggers.type === "click" && triggers.switch === "50/50") {
+        const img2 = imageRef.current;
+        if (img2) {
+          const imgRect = img2.getBoundingClientRect();
+          const clickX = clientX - imgRect.left;
+          const clickY = clientY - imgRect.top;
+          const imgWidth = imgRect.width;
+          const imgHeight = imgRect.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);
+        }
+      }
+    } else {
       handleClose();
     }
   };
@@ -1762,19 +1812,33 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    if (isMobile && !isEditor) {
-      document.body.style.backgroundColor = area.color;
+    const colorAlpha = getColorAlpha(area.color);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
+        }
+        if (contentRef.current && appearAnimationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
+      }
+    };
+    if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
     }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      if (isMobile && !isEditor) {
-        document.body.style.backgroundColor = "";
+      if (contentRef.current && appearAnimationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
       }
     };
-  }, [isOpen]);
+  }, [isOpen, area.color, isEditor]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1861,6 +1925,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       }
       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 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;
@@ -1924,8 +1989,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                 animationTimingFunction: "ease",
                 animationFillMode: "both",
                 ...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
-                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" },
-                "--splide-speed": slider.duration || "500ms"
+                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
               },
               children: [
                 /* @__PURE__ */ jsx(
@@ -1968,7 +2032,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                           children: /* @__PURE__ */ jsx(
                             "img",
                             {
-                              ref: imageRef,
+                              ref: index === currentIndex ? imageRef : null,
                               className: cn(styles.imageStyle, {
                                 [styles.contain]: item.image.objectFit === "contain",
                                 [styles.cover]: item.image.objectFit === "cover",
@@ -1976,8 +2040,13 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               }),
                               src: item.image.url,
                               alt: item.image.name ?? "",
-                              onClick: onImageClick,
-                              style: imageStyle2
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
+                              style: {
+                                ...imageStyle2,
+                                ...item.image.objectFit === "contain" ? {
+                                  pointerEvents: "none"
+                                } : {}
+                              }
                             }
                           )
                         }
@@ -2167,6 +2236,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
+const getColorAlpha = (color) => {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2505,15 +2593,23 @@ const LightboxComponent = {
                     },
                     properties: {
                       top: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       left: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       right: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       bottom: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       }
                     }
@@ -2755,8 +2851,8 @@ const LightboxComponent = {
               align: "center",
               triggers: "clk",
               grid: {
-                height: 0.03,
-                width: 0.03,
+                height: 0.04,
+                width: 0.04,
                 gap: 8e-3
               },
               offset: { x: 0, y: 0 },
@@ -2769,7 +2865,7 @@ const LightboxComponent = {
             layout: {
               position: "middle-center",
               offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
+              padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
             },
             controls: {
               isActive: true,
@@ -2780,7 +2876,7 @@ const LightboxComponent = {
               hover: "#cccccc"
             },
             area: {
-              color: "rgba(64,67,71,0.4)",
+              color: "rgba(64,67,71,0.9)",
               blur: 0,
               closeIconUrl: null,
               closeIconAlign: "top-right",

package/package.json

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