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

package/dist/index.js

@@ -1639,9 +1639,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
+  const [imageDimensions, setImageDimensions] = React.useState({});
   const lightboxRef = React.useRef(null);
   const prevSliderTypeRef = React.useRef(null);
   const imageRef = React.useRef(null);
+  const imgWrapperRef = React.useRef(null);
   const isClosingRef = React.useRef(false);
   const contentRef = React.useRef(null);
   const animationEndHandlerRef = React.useRef(null);
@@ -1759,6 +1761,55 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
     prevSliderTypeRef.current = slider.type;
   }, [slider.type]);
+  React.useEffect(() => {
+    if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
+      setImageDimensions({});
+      return;
+    }
+    const img2 = imageRef.current;
+    const wrapper2 = imgWrapperRef.current;
+    const currentItem = content[currentIndex];
+    if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
+      setImageDimensions({});
+      return;
+    }
+    const calculateDimensions = () => {
+      if (!img2.naturalWidth || !img2.naturalHeight) return;
+      const wrapperRect = wrapper2.getBoundingClientRect();
+      const wrapperStyle = window.getComputedStyle(wrapper2);
+      const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
+      const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
+      const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
+      const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
+      const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
+      const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
+      const containerRatio = contentWidth / contentHeight;
+      const imgRatio = img2.naturalWidth / img2.naturalHeight;
+      let width;
+      let height;
+      if (imgRatio > containerRatio) {
+        width = contentWidth;
+        height = contentWidth / imgRatio;
+      } else {
+        height = contentHeight;
+        width = contentHeight * imgRatio;
+      }
+      setImageDimensions({ width, height });
+    };
+    if (img2.complete && img2.naturalWidth > 0) {
+      calculateDimensions();
+    } else {
+      img2.onload = calculateDimensions;
+    }
+    const handleResize = () => calculateDimensions();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (img2.onload) {
+        img2.onload = null;
+      }
+    };
+  }, [isOpen, currentIndex, content]);
   React.useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
@@ -1863,9 +1914,11 @@ 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;
+        console.log("inside", rect.width, rect.height);
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1964,13 +2017,14 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
+                          ref: index === currentIndex ? imgWrapperRef : null,
                           className: styles.imgWrapper,
                           onClick: handleImageWrapperClick,
                           style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
                           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",
@@ -1979,7 +2033,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               onClick: onImageClick,
-                              style: imageStyle2
+                              style: {
+                                ...imageStyle2,
+                                ...item.image.objectFit === "contain" && imageDimensions.width && imageDimensions.height ? {
+                                  width: `${imageDimensions.width}px`,
+                                  height: `${imageDimensions.height}px`,
+                                  maxWidth: "none",
+                                  maxHeight: "none"
+                                } : {}
+                              }
                             }
                           )
                         }
@@ -2757,8 +2819,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 },
@@ -2782,7 +2844,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

@@ -1637,9 +1637,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
+  const [imageDimensions, setImageDimensions] = React.useState({});
   const lightboxRef = useRef(null);
   const prevSliderTypeRef = useRef(null);
   const imageRef = useRef(null);
+  const imgWrapperRef = useRef(null);
   const isClosingRef = useRef(false);
   const contentRef = useRef(null);
   const animationEndHandlerRef = useRef(null);
@@ -1757,6 +1759,55 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
     prevSliderTypeRef.current = slider.type;
   }, [slider.type]);
+  useEffect(() => {
+    if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
+      setImageDimensions({});
+      return;
+    }
+    const img2 = imageRef.current;
+    const wrapper2 = imgWrapperRef.current;
+    const currentItem = content[currentIndex];
+    if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
+      setImageDimensions({});
+      return;
+    }
+    const calculateDimensions = () => {
+      if (!img2.naturalWidth || !img2.naturalHeight) return;
+      const wrapperRect = wrapper2.getBoundingClientRect();
+      const wrapperStyle = window.getComputedStyle(wrapper2);
+      const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
+      const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
+      const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
+      const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
+      const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
+      const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
+      const containerRatio = contentWidth / contentHeight;
+      const imgRatio = img2.naturalWidth / img2.naturalHeight;
+      let width;
+      let height;
+      if (imgRatio > containerRatio) {
+        width = contentWidth;
+        height = contentWidth / imgRatio;
+      } else {
+        height = contentHeight;
+        width = contentHeight * imgRatio;
+      }
+      setImageDimensions({ width, height });
+    };
+    if (img2.complete && img2.naturalWidth > 0) {
+      calculateDimensions();
+    } else {
+      img2.onload = calculateDimensions;
+    }
+    const handleResize = () => calculateDimensions();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (img2.onload) {
+        img2.onload = null;
+      }
+    };
+  }, [isOpen, currentIndex, content]);
   useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
@@ -1861,9 +1912,11 @@ 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;
+        console.log("inside", rect.width, rect.height);
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1962,13 +2015,14 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
                         "div",
                         {
+                          ref: index === currentIndex ? imgWrapperRef : null,
                           className: styles.imgWrapper,
                           onClick: handleImageWrapperClick,
                           style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
                           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",
@@ -1977,7 +2031,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               onClick: onImageClick,
-                              style: imageStyle2
+                              style: {
+                                ...imageStyle2,
+                                ...item.image.objectFit === "contain" && imageDimensions.width && imageDimensions.height ? {
+                                  width: `${imageDimensions.width}px`,
+                                  height: `${imageDimensions.height}px`,
+                                  maxWidth: "none",
+                                  maxHeight: "none"
+                                } : {}
+                              }
                             }
                           )
                         }
@@ -2755,8 +2817,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 },
@@ -2780,7 +2842,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.27",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",