@cntrl-site/components 0.1.0-alpha.19 → 0.1.0-alpha.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +39 -22
- package/dist/index.mjs +39 -22
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1654,19 +1654,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1654
1654
|
}
|
|
1655
1655
|
const isImg = target.tagName === "IMG" || target.closest("img");
|
|
1656
1656
|
const isButton = target.tagName === "BUTTON" || target.closest("button");
|
|
1657
|
-
|
|
1657
|
+
const isSplide = target.closest(".splide") || target.closest('[class*="splide"]');
|
|
1658
|
+
const isCaption = target.closest(`.${styles.caption}`);
|
|
1659
|
+
const isThumbnail = target.closest(`.${styles.thumbsContainer}`);
|
|
1660
|
+
if (!isImg && !isButton && !isSplide && !isCaption && !isThumbnail) {
|
|
1658
1661
|
onClose();
|
|
1659
1662
|
}
|
|
1660
1663
|
};
|
|
1661
1664
|
const onImageClick = (e) => {
|
|
1662
1665
|
var _a, _b;
|
|
1663
|
-
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1664
|
-
if (!rect) return;
|
|
1665
|
-
const inside = e.clientX >= rect.x && e.clientX <= rect.x + rect.width && e.clientY >= rect.y && e.clientY <= rect.y + rect.height;
|
|
1666
|
-
if (!inside) {
|
|
1667
|
-
onClose();
|
|
1668
|
-
return;
|
|
1669
|
-
}
|
|
1670
1666
|
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1671
1667
|
e.stopPropagation();
|
|
1672
1668
|
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
@@ -1674,11 +1670,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1674
1670
|
if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1675
1671
|
e.stopPropagation();
|
|
1676
1672
|
const img2 = e.currentTarget;
|
|
1677
|
-
const
|
|
1678
|
-
const clickX = e.clientX -
|
|
1679
|
-
const clickY = e.clientY -
|
|
1680
|
-
const imgWidth =
|
|
1681
|
-
const imgHeight =
|
|
1673
|
+
const rect = img2.getBoundingClientRect();
|
|
1674
|
+
const clickX = e.clientX - rect.left;
|
|
1675
|
+
const clickY = e.clientY - rect.top;
|
|
1676
|
+
const imgWidth = rect.width;
|
|
1677
|
+
const imgHeight = rect.height;
|
|
1682
1678
|
let dir;
|
|
1683
1679
|
if (slider.direction === "horiz") {
|
|
1684
1680
|
dir = clickX < imgWidth / 2 ? "-1" : "+1";
|
|
@@ -1772,6 +1768,27 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1772
1768
|
}
|
|
1773
1769
|
return styles.fadeIn;
|
|
1774
1770
|
})();
|
|
1771
|
+
React.useEffect(() => {
|
|
1772
|
+
if (!isOpen || !closeOnBackdropClick) return;
|
|
1773
|
+
const handleTouchEnd = (e) => {
|
|
1774
|
+
if (e.touches.length === 0 && e.changedTouches.length > 0) {
|
|
1775
|
+
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1776
|
+
if (!rect) return;
|
|
1777
|
+
const touch = e.changedTouches[0];
|
|
1778
|
+
const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
|
|
1779
|
+
if (!inside) {
|
|
1780
|
+
onClose();
|
|
1781
|
+
}
|
|
1782
|
+
}
|
|
1783
|
+
};
|
|
1784
|
+
const timeoutId = setTimeout(() => {
|
|
1785
|
+
document.addEventListener("touchend", handleTouchEnd, { passive: true });
|
|
1786
|
+
}, 100);
|
|
1787
|
+
return () => {
|
|
1788
|
+
clearTimeout(timeoutId);
|
|
1789
|
+
document.removeEventListener("touchend", handleTouchEnd);
|
|
1790
|
+
};
|
|
1791
|
+
}, [isOpen, closeOnBackdropClick, onClose, currentIndex]);
|
|
1775
1792
|
if (!isOpen) return null;
|
|
1776
1793
|
return reactDom.createPortal(
|
|
1777
1794
|
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1992,7 +2009,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1992
2009
|
}
|
|
1993
2010
|
),
|
|
1994
2011
|
style: {
|
|
1995
|
-
gap: `${thumbnail.grid.gap}
|
|
2012
|
+
gap: `${scalingValue(thumbnail.grid.gap, isEditor)}`,
|
|
1996
2013
|
...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
|
|
1997
2014
|
},
|
|
1998
2015
|
children: content.map((item, index) => {
|
|
@@ -2002,10 +2019,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2002
2019
|
{
|
|
2003
2020
|
className: styles.thumbItem,
|
|
2004
2021
|
style: {
|
|
2005
|
-
...slider.direction === "horiz" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2006
|
-
...slider.direction === "vert" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2007
|
-
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2008
|
-
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2022
|
+
...slider.direction === "horiz" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
|
|
2023
|
+
...slider.direction === "vert" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
|
|
2024
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
|
|
2025
|
+
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
|
|
2009
2026
|
transition: isActive ? "all 0.2s ease" : "none",
|
|
2010
2027
|
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
2011
2028
|
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
@@ -2628,12 +2645,12 @@ const LightboxComponent = {
|
|
|
2628
2645
|
align: "center",
|
|
2629
2646
|
triggers: "clk",
|
|
2630
2647
|
grid: {
|
|
2631
|
-
height:
|
|
2632
|
-
width:
|
|
2633
|
-
gap:
|
|
2648
|
+
height: 0.03,
|
|
2649
|
+
width: 0.03,
|
|
2650
|
+
gap: 8e-3
|
|
2634
2651
|
},
|
|
2635
2652
|
offset: { x: 0, y: 0 },
|
|
2636
|
-
opacity:
|
|
2653
|
+
opacity: 80,
|
|
2637
2654
|
activeState: {
|
|
2638
2655
|
scale: 1,
|
|
2639
2656
|
opacity: 100
|
package/dist/index.mjs
CHANGED
|
@@ -1652,19 +1652,15 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1652
1652
|
}
|
|
1653
1653
|
const isImg = target.tagName === "IMG" || target.closest("img");
|
|
1654
1654
|
const isButton = target.tagName === "BUTTON" || target.closest("button");
|
|
1655
|
-
|
|
1655
|
+
const isSplide = target.closest(".splide") || target.closest('[class*="splide"]');
|
|
1656
|
+
const isCaption = target.closest(`.${styles.caption}`);
|
|
1657
|
+
const isThumbnail = target.closest(`.${styles.thumbsContainer}`);
|
|
1658
|
+
if (!isImg && !isButton && !isSplide && !isCaption && !isThumbnail) {
|
|
1656
1659
|
onClose();
|
|
1657
1660
|
}
|
|
1658
1661
|
};
|
|
1659
1662
|
const onImageClick = (e) => {
|
|
1660
1663
|
var _a, _b;
|
|
1661
|
-
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1662
|
-
if (!rect) return;
|
|
1663
|
-
const inside = e.clientX >= rect.x && e.clientX <= rect.x + rect.width && e.clientY >= rect.y && e.clientY <= rect.y + rect.height;
|
|
1664
|
-
if (!inside) {
|
|
1665
|
-
onClose();
|
|
1666
|
-
return;
|
|
1667
|
-
}
|
|
1668
1664
|
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1669
1665
|
e.stopPropagation();
|
|
1670
1666
|
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
@@ -1672,11 +1668,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1672
1668
|
if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1673
1669
|
e.stopPropagation();
|
|
1674
1670
|
const img2 = e.currentTarget;
|
|
1675
|
-
const
|
|
1676
|
-
const clickX = e.clientX -
|
|
1677
|
-
const clickY = e.clientY -
|
|
1678
|
-
const imgWidth =
|
|
1679
|
-
const imgHeight =
|
|
1671
|
+
const rect = img2.getBoundingClientRect();
|
|
1672
|
+
const clickX = e.clientX - rect.left;
|
|
1673
|
+
const clickY = e.clientY - rect.top;
|
|
1674
|
+
const imgWidth = rect.width;
|
|
1675
|
+
const imgHeight = rect.height;
|
|
1680
1676
|
let dir;
|
|
1681
1677
|
if (slider.direction === "horiz") {
|
|
1682
1678
|
dir = clickX < imgWidth / 2 ? "-1" : "+1";
|
|
@@ -1770,6 +1766,27 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1770
1766
|
}
|
|
1771
1767
|
return styles.fadeIn;
|
|
1772
1768
|
})();
|
|
1769
|
+
useEffect(() => {
|
|
1770
|
+
if (!isOpen || !closeOnBackdropClick) return;
|
|
1771
|
+
const handleTouchEnd = (e) => {
|
|
1772
|
+
if (e.touches.length === 0 && e.changedTouches.length > 0) {
|
|
1773
|
+
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1774
|
+
if (!rect) return;
|
|
1775
|
+
const touch = e.changedTouches[0];
|
|
1776
|
+
const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
|
|
1777
|
+
if (!inside) {
|
|
1778
|
+
onClose();
|
|
1779
|
+
}
|
|
1780
|
+
}
|
|
1781
|
+
};
|
|
1782
|
+
const timeoutId = setTimeout(() => {
|
|
1783
|
+
document.addEventListener("touchend", handleTouchEnd, { passive: true });
|
|
1784
|
+
}, 100);
|
|
1785
|
+
return () => {
|
|
1786
|
+
clearTimeout(timeoutId);
|
|
1787
|
+
document.removeEventListener("touchend", handleTouchEnd);
|
|
1788
|
+
};
|
|
1789
|
+
}, [isOpen, closeOnBackdropClick, onClose, currentIndex]);
|
|
1773
1790
|
if (!isOpen) return null;
|
|
1774
1791
|
return createPortal(
|
|
1775
1792
|
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1990,7 +2007,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1990
2007
|
}
|
|
1991
2008
|
),
|
|
1992
2009
|
style: {
|
|
1993
|
-
gap: `${thumbnail.grid.gap}
|
|
2010
|
+
gap: `${scalingValue(thumbnail.grid.gap, isEditor)}`,
|
|
1994
2011
|
...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
|
|
1995
2012
|
},
|
|
1996
2013
|
children: content.map((item, index) => {
|
|
@@ -2000,10 +2017,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2000
2017
|
{
|
|
2001
2018
|
className: styles.thumbItem,
|
|
2002
2019
|
style: {
|
|
2003
|
-
...slider.direction === "horiz" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2004
|
-
...slider.direction === "vert" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2005
|
-
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2006
|
-
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}
|
|
2020
|
+
...slider.direction === "horiz" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
|
|
2021
|
+
...slider.direction === "vert" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
|
|
2022
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
|
|
2023
|
+
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
|
|
2007
2024
|
transition: isActive ? "all 0.2s ease" : "none",
|
|
2008
2025
|
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
2009
2026
|
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
@@ -2626,12 +2643,12 @@ const LightboxComponent = {
|
|
|
2626
2643
|
align: "center",
|
|
2627
2644
|
triggers: "clk",
|
|
2628
2645
|
grid: {
|
|
2629
|
-
height:
|
|
2630
|
-
width:
|
|
2631
|
-
gap:
|
|
2646
|
+
height: 0.03,
|
|
2647
|
+
width: 0.03,
|
|
2648
|
+
gap: 8e-3
|
|
2632
2649
|
},
|
|
2633
2650
|
offset: { x: 0, y: 0 },
|
|
2634
|
-
opacity:
|
|
2651
|
+
opacity: 80,
|
|
2635
2652
|
activeState: {
|
|
2636
2653
|
scale: 1,
|
|
2637
2654
|
opacity: 100
|