@cntrl-site/components 0.1.0-alpha.24 → 0.1.0-alpha.25
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/Components/Lightbox/Lightbox.d.ts +1 -1
- package/dist/index.js +39 -43
- package/dist/index.mjs +39 -43
- package/package.json +1 -1
|
@@ -39,6 +39,7 @@ type Padding = {
|
|
|
39
39
|
type Triggers = {
|
|
40
40
|
type: 'click' | 'drag';
|
|
41
41
|
switch: 'image' | '50/50';
|
|
42
|
+
repeat: 'close' | 'loop';
|
|
42
43
|
};
|
|
43
44
|
type LightboxSettings = {
|
|
44
45
|
thumbnailBlock: {
|
|
@@ -51,7 +52,6 @@ type LightboxSettings = {
|
|
|
51
52
|
type: 'slide in' | 'fade in' | 'mix';
|
|
52
53
|
duration: string;
|
|
53
54
|
direction: 'top' | 'bottom' | 'left' | 'right';
|
|
54
|
-
repeat: 'close' | 'loop';
|
|
55
55
|
};
|
|
56
56
|
triggers: Triggers;
|
|
57
57
|
slider: {
|
package/dist/index.js
CHANGED
|
@@ -1663,11 +1663,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1663
1663
|
if (contentRef.current) {
|
|
1664
1664
|
animationEndHandlerRef.current = handleAnimationEnd;
|
|
1665
1665
|
contentRef.current.addEventListener("animationend", handleAnimationEnd);
|
|
1666
|
-
} else {
|
|
1667
|
-
setTimeout(() => {
|
|
1668
|
-
onClose();
|
|
1669
|
-
setIsClosing(false);
|
|
1670
|
-
}, appearDurationMs);
|
|
1671
1666
|
}
|
|
1672
1667
|
}, [onClose, appearDurationMs]);
|
|
1673
1668
|
const handleBackdropClick = (e) => {
|
|
@@ -1703,7 +1698,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1703
1698
|
var _a, _b;
|
|
1704
1699
|
e.stopPropagation();
|
|
1705
1700
|
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1706
|
-
(
|
|
1701
|
+
if (triggers.repeat === "close" && currentIndex === content.length - 1) {
|
|
1702
|
+
handleClose();
|
|
1703
|
+
} else {
|
|
1704
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
1705
|
+
}
|
|
1707
1706
|
}
|
|
1708
1707
|
if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1709
1708
|
const img2 = e.currentTarget;
|
|
@@ -1950,7 +1949,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1950
1949
|
height: "100%",
|
|
1951
1950
|
type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
|
|
1952
1951
|
padding: 0,
|
|
1953
|
-
rewind: (slider.type === "scale" || slider.type === "fade") &&
|
|
1952
|
+
rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop"
|
|
1954
1953
|
},
|
|
1955
1954
|
style: { "--splide-speed": slider.duration || "500ms" },
|
|
1956
1955
|
children: content.map((item, index) => {
|
|
@@ -2137,6 +2136,12 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2137
2136
|
setCurrentIndex(index);
|
|
2138
2137
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(index);
|
|
2139
2138
|
},
|
|
2139
|
+
onMouseEnter: () => {
|
|
2140
|
+
var _a;
|
|
2141
|
+
if (thumbnail.triggers === "hover") {
|
|
2142
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go(index);
|
|
2143
|
+
}
|
|
2144
|
+
},
|
|
2140
2145
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2141
2146
|
"img",
|
|
2142
2147
|
{
|
|
@@ -2170,7 +2175,7 @@ const LightboxComponent = {
|
|
|
2170
2175
|
name: "Lightbox",
|
|
2171
2176
|
preview: {
|
|
2172
2177
|
type: "video",
|
|
2173
|
-
url: "https://cdn.cntrl.site/
|
|
2178
|
+
url: "https://cdn.cntrl.site/component-assets/lightbox.mp4"
|
|
2174
2179
|
},
|
|
2175
2180
|
defaultSize: {
|
|
2176
2181
|
width: 440,
|
|
@@ -2241,14 +2246,6 @@ const LightboxComponent = {
|
|
|
2241
2246
|
type: "direction-control"
|
|
2242
2247
|
},
|
|
2243
2248
|
enum: ["top", "left", "right", "bottom"]
|
|
2244
|
-
},
|
|
2245
|
-
repeat: {
|
|
2246
|
-
type: "string",
|
|
2247
|
-
title: "Repeat",
|
|
2248
|
-
display: {
|
|
2249
|
-
type: "ratio-group"
|
|
2250
|
-
},
|
|
2251
|
-
enum: ["close", "loop"]
|
|
2252
2249
|
}
|
|
2253
2250
|
}
|
|
2254
2251
|
},
|
|
@@ -2271,6 +2268,15 @@ const LightboxComponent = {
|
|
|
2271
2268
|
type: "ratio-group"
|
|
2272
2269
|
},
|
|
2273
2270
|
enum: ["image", "50/50"]
|
|
2271
|
+
},
|
|
2272
|
+
repeat: {
|
|
2273
|
+
type: "string",
|
|
2274
|
+
title: "Repeat",
|
|
2275
|
+
display: {
|
|
2276
|
+
visible: false,
|
|
2277
|
+
type: "ratio-group"
|
|
2278
|
+
},
|
|
2279
|
+
enum: ["close", "loop"]
|
|
2274
2280
|
}
|
|
2275
2281
|
}
|
|
2276
2282
|
},
|
|
@@ -2725,19 +2731,19 @@ const LightboxComponent = {
|
|
|
2725
2731
|
default: {
|
|
2726
2732
|
thumbnailBlock: {
|
|
2727
2733
|
cover: {
|
|
2728
|
-
url: "https://cdn.cntrl.site/
|
|
2734
|
+
url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
|
|
2729
2735
|
}
|
|
2730
2736
|
},
|
|
2731
2737
|
lightboxBlock: {
|
|
2732
2738
|
appear: {
|
|
2733
2739
|
type: "slide in",
|
|
2734
2740
|
duration: "500ms",
|
|
2735
|
-
direction: "right"
|
|
2736
|
-
repeat: "loop"
|
|
2741
|
+
direction: "right"
|
|
2737
2742
|
},
|
|
2738
2743
|
triggers: {
|
|
2739
2744
|
type: "click",
|
|
2740
|
-
switch: "image"
|
|
2745
|
+
switch: "image",
|
|
2746
|
+
repeat: "loop"
|
|
2741
2747
|
},
|
|
2742
2748
|
slider: {
|
|
2743
2749
|
type: "fade",
|
|
@@ -2871,27 +2877,17 @@ const LightboxComponent = {
|
|
|
2871
2877
|
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2872
2878
|
value: false
|
|
2873
2879
|
}
|
|
2880
|
+
},
|
|
2881
|
+
{
|
|
2882
|
+
if: [
|
|
2883
|
+
{ name: "lightboxBlock.triggers.type", value: "click" },
|
|
2884
|
+
{ name: "lightboxBlock.triggers.switch", value: "image" }
|
|
2885
|
+
],
|
|
2886
|
+
then: {
|
|
2887
|
+
name: "properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",
|
|
2888
|
+
value: true
|
|
2889
|
+
}
|
|
2874
2890
|
}
|
|
2875
|
-
// {
|
|
2876
|
-
// if: {
|
|
2877
|
-
// name: 'lightboxBlock.triggers.type',
|
|
2878
|
-
// value: 'click'
|
|
2879
|
-
// },
|
|
2880
|
-
// then: {
|
|
2881
|
-
// name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
|
|
2882
|
-
// value: true
|
|
2883
|
-
// }
|
|
2884
|
-
// },
|
|
2885
|
-
// {
|
|
2886
|
-
// if: {
|
|
2887
|
-
// name: 'lightboxBlock.triggers.type',
|
|
2888
|
-
// value: 'drag'
|
|
2889
|
-
// },
|
|
2890
|
-
// then: {
|
|
2891
|
-
// name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
|
|
2892
|
-
// value: false
|
|
2893
|
-
// }
|
|
2894
|
-
// }
|
|
2895
2891
|
]
|
|
2896
2892
|
},
|
|
2897
2893
|
content: {
|
|
@@ -2942,7 +2938,7 @@ const LightboxComponent = {
|
|
|
2942
2938
|
{
|
|
2943
2939
|
image: {
|
|
2944
2940
|
objectFit: "contain",
|
|
2945
|
-
url: "https://cdn.cntrl.site/
|
|
2941
|
+
url: "https://cdn.cntrl.site/component-assets/2.jpg",
|
|
2946
2942
|
name: "Slider-1.png"
|
|
2947
2943
|
},
|
|
2948
2944
|
imageCaption: [
|
|
@@ -2955,7 +2951,7 @@ const LightboxComponent = {
|
|
|
2955
2951
|
{
|
|
2956
2952
|
image: {
|
|
2957
2953
|
objectFit: "contain",
|
|
2958
|
-
url: "https://cdn.cntrl.site/
|
|
2954
|
+
url: "https://cdn.cntrl.site/component-assets/3.jpg",
|
|
2959
2955
|
name: "Slider-2.png"
|
|
2960
2956
|
},
|
|
2961
2957
|
imageCaption: [
|
|
@@ -2968,7 +2964,7 @@ const LightboxComponent = {
|
|
|
2968
2964
|
{
|
|
2969
2965
|
image: {
|
|
2970
2966
|
objectFit: "contain",
|
|
2971
|
-
url: "https://cdn.cntrl.site/
|
|
2967
|
+
url: "https://cdn.cntrl.site/component-assets/4.jpg",
|
|
2972
2968
|
name: "Slider-3.png"
|
|
2973
2969
|
},
|
|
2974
2970
|
imageCaption: [
|
package/dist/index.mjs
CHANGED
|
@@ -1661,11 +1661,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1661
1661
|
if (contentRef.current) {
|
|
1662
1662
|
animationEndHandlerRef.current = handleAnimationEnd;
|
|
1663
1663
|
contentRef.current.addEventListener("animationend", handleAnimationEnd);
|
|
1664
|
-
} else {
|
|
1665
|
-
setTimeout(() => {
|
|
1666
|
-
onClose();
|
|
1667
|
-
setIsClosing(false);
|
|
1668
|
-
}, appearDurationMs);
|
|
1669
1664
|
}
|
|
1670
1665
|
}, [onClose, appearDurationMs]);
|
|
1671
1666
|
const handleBackdropClick = (e) => {
|
|
@@ -1701,7 +1696,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1701
1696
|
var _a, _b;
|
|
1702
1697
|
e.stopPropagation();
|
|
1703
1698
|
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1704
|
-
(
|
|
1699
|
+
if (triggers.repeat === "close" && currentIndex === content.length - 1) {
|
|
1700
|
+
handleClose();
|
|
1701
|
+
} else {
|
|
1702
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
1703
|
+
}
|
|
1705
1704
|
}
|
|
1706
1705
|
if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1707
1706
|
const img2 = e.currentTarget;
|
|
@@ -1948,7 +1947,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1948
1947
|
height: "100%",
|
|
1949
1948
|
type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
|
|
1950
1949
|
padding: 0,
|
|
1951
|
-
rewind: (slider.type === "scale" || slider.type === "fade") &&
|
|
1950
|
+
rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop"
|
|
1952
1951
|
},
|
|
1953
1952
|
style: { "--splide-speed": slider.duration || "500ms" },
|
|
1954
1953
|
children: content.map((item, index) => {
|
|
@@ -2135,6 +2134,12 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2135
2134
|
setCurrentIndex(index);
|
|
2136
2135
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(index);
|
|
2137
2136
|
},
|
|
2137
|
+
onMouseEnter: () => {
|
|
2138
|
+
var _a;
|
|
2139
|
+
if (thumbnail.triggers === "hover") {
|
|
2140
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go(index);
|
|
2141
|
+
}
|
|
2142
|
+
},
|
|
2138
2143
|
children: /* @__PURE__ */ jsx(
|
|
2139
2144
|
"img",
|
|
2140
2145
|
{
|
|
@@ -2168,7 +2173,7 @@ const LightboxComponent = {
|
|
|
2168
2173
|
name: "Lightbox",
|
|
2169
2174
|
preview: {
|
|
2170
2175
|
type: "video",
|
|
2171
|
-
url: "https://cdn.cntrl.site/
|
|
2176
|
+
url: "https://cdn.cntrl.site/component-assets/lightbox.mp4"
|
|
2172
2177
|
},
|
|
2173
2178
|
defaultSize: {
|
|
2174
2179
|
width: 440,
|
|
@@ -2239,14 +2244,6 @@ const LightboxComponent = {
|
|
|
2239
2244
|
type: "direction-control"
|
|
2240
2245
|
},
|
|
2241
2246
|
enum: ["top", "left", "right", "bottom"]
|
|
2242
|
-
},
|
|
2243
|
-
repeat: {
|
|
2244
|
-
type: "string",
|
|
2245
|
-
title: "Repeat",
|
|
2246
|
-
display: {
|
|
2247
|
-
type: "ratio-group"
|
|
2248
|
-
},
|
|
2249
|
-
enum: ["close", "loop"]
|
|
2250
2247
|
}
|
|
2251
2248
|
}
|
|
2252
2249
|
},
|
|
@@ -2269,6 +2266,15 @@ const LightboxComponent = {
|
|
|
2269
2266
|
type: "ratio-group"
|
|
2270
2267
|
},
|
|
2271
2268
|
enum: ["image", "50/50"]
|
|
2269
|
+
},
|
|
2270
|
+
repeat: {
|
|
2271
|
+
type: "string",
|
|
2272
|
+
title: "Repeat",
|
|
2273
|
+
display: {
|
|
2274
|
+
visible: false,
|
|
2275
|
+
type: "ratio-group"
|
|
2276
|
+
},
|
|
2277
|
+
enum: ["close", "loop"]
|
|
2272
2278
|
}
|
|
2273
2279
|
}
|
|
2274
2280
|
},
|
|
@@ -2723,19 +2729,19 @@ const LightboxComponent = {
|
|
|
2723
2729
|
default: {
|
|
2724
2730
|
thumbnailBlock: {
|
|
2725
2731
|
cover: {
|
|
2726
|
-
url: "https://cdn.cntrl.site/
|
|
2732
|
+
url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
|
|
2727
2733
|
}
|
|
2728
2734
|
},
|
|
2729
2735
|
lightboxBlock: {
|
|
2730
2736
|
appear: {
|
|
2731
2737
|
type: "slide in",
|
|
2732
2738
|
duration: "500ms",
|
|
2733
|
-
direction: "right"
|
|
2734
|
-
repeat: "loop"
|
|
2739
|
+
direction: "right"
|
|
2735
2740
|
},
|
|
2736
2741
|
triggers: {
|
|
2737
2742
|
type: "click",
|
|
2738
|
-
switch: "image"
|
|
2743
|
+
switch: "image",
|
|
2744
|
+
repeat: "loop"
|
|
2739
2745
|
},
|
|
2740
2746
|
slider: {
|
|
2741
2747
|
type: "fade",
|
|
@@ -2869,27 +2875,17 @@ const LightboxComponent = {
|
|
|
2869
2875
|
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2870
2876
|
value: false
|
|
2871
2877
|
}
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
if: [
|
|
2881
|
+
{ name: "lightboxBlock.triggers.type", value: "click" },
|
|
2882
|
+
{ name: "lightboxBlock.triggers.switch", value: "image" }
|
|
2883
|
+
],
|
|
2884
|
+
then: {
|
|
2885
|
+
name: "properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",
|
|
2886
|
+
value: true
|
|
2887
|
+
}
|
|
2872
2888
|
}
|
|
2873
|
-
// {
|
|
2874
|
-
// if: {
|
|
2875
|
-
// name: 'lightboxBlock.triggers.type',
|
|
2876
|
-
// value: 'click'
|
|
2877
|
-
// },
|
|
2878
|
-
// then: {
|
|
2879
|
-
// name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
|
|
2880
|
-
// value: true
|
|
2881
|
-
// }
|
|
2882
|
-
// },
|
|
2883
|
-
// {
|
|
2884
|
-
// if: {
|
|
2885
|
-
// name: 'lightboxBlock.triggers.type',
|
|
2886
|
-
// value: 'drag'
|
|
2887
|
-
// },
|
|
2888
|
-
// then: {
|
|
2889
|
-
// name: 'properties.lightboxBlock.properties.slider.properties.switch.display.visible',
|
|
2890
|
-
// value: false
|
|
2891
|
-
// }
|
|
2892
|
-
// }
|
|
2893
2889
|
]
|
|
2894
2890
|
},
|
|
2895
2891
|
content: {
|
|
@@ -2940,7 +2936,7 @@ const LightboxComponent = {
|
|
|
2940
2936
|
{
|
|
2941
2937
|
image: {
|
|
2942
2938
|
objectFit: "contain",
|
|
2943
|
-
url: "https://cdn.cntrl.site/
|
|
2939
|
+
url: "https://cdn.cntrl.site/component-assets/2.jpg",
|
|
2944
2940
|
name: "Slider-1.png"
|
|
2945
2941
|
},
|
|
2946
2942
|
imageCaption: [
|
|
@@ -2953,7 +2949,7 @@ const LightboxComponent = {
|
|
|
2953
2949
|
{
|
|
2954
2950
|
image: {
|
|
2955
2951
|
objectFit: "contain",
|
|
2956
|
-
url: "https://cdn.cntrl.site/
|
|
2952
|
+
url: "https://cdn.cntrl.site/component-assets/3.jpg",
|
|
2957
2953
|
name: "Slider-2.png"
|
|
2958
2954
|
},
|
|
2959
2955
|
imageCaption: [
|
|
@@ -2966,7 +2962,7 @@ const LightboxComponent = {
|
|
|
2966
2962
|
{
|
|
2967
2963
|
image: {
|
|
2968
2964
|
objectFit: "contain",
|
|
2969
|
-
url: "https://cdn.cntrl.site/
|
|
2965
|
+
url: "https://cdn.cntrl.site/component-assets/4.jpg",
|
|
2970
2966
|
name: "Slider-3.png"
|
|
2971
2967
|
},
|
|
2972
2968
|
imageCaption: [
|