@cntrl-site/components 0.1.5 → 0.1.6-14
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/LICENSE +21 -21
- package/README.md +2 -2
- package/dist/Components/ControlSlider/ControlSlider.d.ts +1 -1
- package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +24 -0
- package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts +3 -1
- package/dist/Components/Lightbox/Lightbox.d.ts +1 -1
- package/dist/components.css +1 -1
- package/dist/index.js +152 -44
- package/dist/index.mjs +152 -44
- package/package.json +68 -68
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 GX Platform
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 GX Platform
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# Control Components
|
|
2
|
-
|
|
1
|
+
# Control Components
|
|
2
|
+
|
|
3
3
|
This is custom components for control editor and public websites.
|
|
@@ -4,7 +4,7 @@ interface SliderProps {
|
|
|
4
4
|
styles: SliderStyles;
|
|
5
5
|
isEditor?: boolean;
|
|
6
6
|
}
|
|
7
|
-
export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
|
|
7
|
+
export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
type SliderItem = {
|
|
9
9
|
image: {
|
|
10
10
|
url: string;
|
|
@@ -80,6 +80,17 @@ export declare const ControlImageRevealSliderComponent: {
|
|
|
80
80
|
visible: boolean;
|
|
81
81
|
};
|
|
82
82
|
};
|
|
83
|
+
defaultCursorScale: {
|
|
84
|
+
type: string;
|
|
85
|
+
title: string;
|
|
86
|
+
min: number;
|
|
87
|
+
max: number;
|
|
88
|
+
step: number;
|
|
89
|
+
display: {
|
|
90
|
+
type: string;
|
|
91
|
+
visible: boolean;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
83
94
|
hoverCursor: {
|
|
84
95
|
type: string[];
|
|
85
96
|
title: string;
|
|
@@ -88,6 +99,17 @@ export declare const ControlImageRevealSliderComponent: {
|
|
|
88
99
|
visible: boolean;
|
|
89
100
|
};
|
|
90
101
|
};
|
|
102
|
+
hoverCursorScale: {
|
|
103
|
+
type: string;
|
|
104
|
+
title: string;
|
|
105
|
+
min: number;
|
|
106
|
+
max: number;
|
|
107
|
+
step: number;
|
|
108
|
+
display: {
|
|
109
|
+
type: string;
|
|
110
|
+
visible: boolean;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
91
113
|
};
|
|
92
114
|
};
|
|
93
115
|
position: {
|
|
@@ -132,7 +154,9 @@ export declare const ControlImageRevealSliderComponent: {
|
|
|
132
154
|
cursor: {
|
|
133
155
|
cursorType: string;
|
|
134
156
|
defaultCursor: null;
|
|
157
|
+
defaultCursorScale: number;
|
|
135
158
|
hoverCursor: null;
|
|
159
|
+
hoverCursorScale: number;
|
|
136
160
|
};
|
|
137
161
|
position: {
|
|
138
162
|
revealPosition: string;
|
|
@@ -14,7 +14,9 @@ type ImageRevealSliderImageSize = {
|
|
|
14
14
|
};
|
|
15
15
|
type ImageRevealSliderCursor = {
|
|
16
16
|
cursorType: 'system' | 'custom';
|
|
17
|
+
defaultCursorScale: number;
|
|
17
18
|
defaultCursor: string | null;
|
|
19
|
+
hoverCursorScale: number;
|
|
18
20
|
hoverCursor: string | null;
|
|
19
21
|
};
|
|
20
22
|
type ImageRevealSliderPosition = {
|
|
@@ -34,5 +36,5 @@ type ImageRevealSliderItem = {
|
|
|
34
36
|
};
|
|
35
37
|
link: string;
|
|
36
38
|
};
|
|
37
|
-
export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): JSX.Element;
|
|
39
|
+
export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): import("react/jsx-runtime").JSX.Element;
|
|
38
40
|
export {};
|
|
@@ -7,7 +7,7 @@ type LightboxGalleryProps = {
|
|
|
7
7
|
activeEvent: 'close' | 'open';
|
|
8
8
|
isEditor?: boolean;
|
|
9
9
|
};
|
|
10
|
-
export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => JSX.Element;
|
|
10
|
+
export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
type LightboxImage = {
|
|
12
12
|
image: {
|
|
13
13
|
url: string;
|
package/dist/components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
|
|
1
|
+
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block;cursor:pointer}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
|
package/dist/index.js
CHANGED
|
@@ -1046,7 +1046,8 @@ const styles = {
|
|
|
1046
1046
|
link
|
|
1047
1047
|
};
|
|
1048
1048
|
function isMouseOverImage(mouseX, mouseY, placedImages) {
|
|
1049
|
-
for (
|
|
1049
|
+
for (let i = placedImages.length - 1; i >= 0; i--) {
|
|
1050
|
+
const img2 = placedImages[i];
|
|
1050
1051
|
const imgEl = new Image();
|
|
1051
1052
|
imgEl.src = img2.url;
|
|
1052
1053
|
const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
|
|
@@ -1054,10 +1055,10 @@ function isMouseOverImage(mouseX, mouseY, placedImages) {
|
|
|
1054
1055
|
const halfW = imgWidth / 2;
|
|
1055
1056
|
const halfH = imgHeight / 2;
|
|
1056
1057
|
if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
|
|
1057
|
-
return true;
|
|
1058
|
+
return { isOverImage: true, hasLink: img2.link.length > 0 };
|
|
1058
1059
|
}
|
|
1059
1060
|
}
|
|
1060
|
-
return false;
|
|
1061
|
+
return { isOverImage: false, hasLink: false };
|
|
1061
1062
|
}
|
|
1062
1063
|
function getImageSize(url) {
|
|
1063
1064
|
return new Promise((resolve) => {
|
|
@@ -1091,10 +1092,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1091
1092
|
const [placedImages, setPlacedImages] = React.useState([]);
|
|
1092
1093
|
const [counter, setCounter] = React.useState(0);
|
|
1093
1094
|
const imageIdCounter = React.useRef(0);
|
|
1094
|
-
const defaultImageCount = 1;
|
|
1095
1095
|
const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
|
|
1096
1096
|
const { revealPosition, visible, target } = settings.position;
|
|
1097
|
-
const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
|
|
1097
|
+
const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
|
|
1098
|
+
const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });
|
|
1099
|
+
const [cursorScale, setCursorScale] = React.useState(defaultCursorScale);
|
|
1100
|
+
const [isCursorVisible, setIsCursorVisible] = React.useState(false);
|
|
1101
|
+
const lastMousePos = React.useRef(null);
|
|
1098
1102
|
const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
|
|
1099
1103
|
const { width, height, finalWidth } = await calculateImageWidthHeight(
|
|
1100
1104
|
imgData.image.url,
|
|
@@ -1123,7 +1127,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1123
1127
|
};
|
|
1124
1128
|
};
|
|
1125
1129
|
const defaultContentUrls = React.useMemo(() => {
|
|
1126
|
-
const defaultContentLength = Math.min(content.length,
|
|
1130
|
+
const defaultContentLength = Math.min(content.length, 1);
|
|
1127
1131
|
return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
|
|
1128
1132
|
}, [content]);
|
|
1129
1133
|
React.useEffect(() => {
|
|
@@ -1133,13 +1137,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1133
1137
|
const containerHeight = rect.height;
|
|
1134
1138
|
const defaultPlaced = [];
|
|
1135
1139
|
const placeImages = async () => {
|
|
1136
|
-
for (let i = 0; i <
|
|
1140
|
+
for (let i = 0; i < 1 && i < content.length; i++) {
|
|
1137
1141
|
const imgData = content[i];
|
|
1138
1142
|
const newImg = await createNewImage(imgData, containerWidth, containerHeight);
|
|
1139
1143
|
defaultPlaced.push(newImg);
|
|
1140
1144
|
}
|
|
1141
1145
|
setPlacedImages(defaultPlaced);
|
|
1142
|
-
setCounter(
|
|
1146
|
+
setCounter(1 % content.length);
|
|
1143
1147
|
};
|
|
1144
1148
|
placeImages();
|
|
1145
1149
|
}, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
|
|
@@ -1153,7 +1157,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1153
1157
|
const rect = divRef.current.getBoundingClientRect();
|
|
1154
1158
|
const clickX = e.clientX - rect.left;
|
|
1155
1159
|
const clickY = e.clientY - rect.top;
|
|
1156
|
-
|
|
1160
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(clickX, clickY, placedImages);
|
|
1161
|
+
if (target === "image" && !isOverImage2) return;
|
|
1157
1162
|
let x = 0, y = 0;
|
|
1158
1163
|
if (revealPosition === "on Click") {
|
|
1159
1164
|
x = clickX;
|
|
@@ -1170,46 +1175,105 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1170
1175
|
setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
|
|
1171
1176
|
setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
|
|
1172
1177
|
};
|
|
1173
|
-
|
|
1178
|
+
React.useEffect(() => {
|
|
1179
|
+
if (!divRef.current) return;
|
|
1180
|
+
const handleMouseMove = (e) => {
|
|
1181
|
+
if (!divRef.current) return;
|
|
1182
|
+
lastMousePos.current = { x: e.clientX, y: e.clientY };
|
|
1183
|
+
const rect = divRef.current.getBoundingClientRect();
|
|
1184
|
+
const x = e.clientX - rect.left;
|
|
1185
|
+
const y = e.clientY - rect.top;
|
|
1186
|
+
const insideContainer = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
|
|
1187
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(x, y, placedImages);
|
|
1188
|
+
setCursorPos({ x, y });
|
|
1189
|
+
setCursorScale(isOverImage2 || target === "area" ? hoverCursorScale : defaultCursorScale);
|
|
1190
|
+
setIsCursorVisible(insideContainer || isOverImage2);
|
|
1191
|
+
};
|
|
1192
|
+
const handleScroll = () => {
|
|
1193
|
+
if (!divRef.current || !lastMousePos.current) return;
|
|
1194
|
+
const rect = divRef.current.getBoundingClientRect();
|
|
1195
|
+
const { x: clientX, y: clientY } = lastMousePos.current;
|
|
1196
|
+
const x = clientX - rect.left;
|
|
1197
|
+
const y = clientY - rect.top;
|
|
1198
|
+
const insideContainer = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
|
|
1199
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(x, y, placedImages);
|
|
1200
|
+
setCursorPos({ x, y });
|
|
1201
|
+
setCursorScale(isOverImage2 || target === "area" ? hoverCursorScale : defaultCursorScale);
|
|
1202
|
+
setIsCursorVisible(insideContainer || isOverImage2);
|
|
1203
|
+
};
|
|
1204
|
+
const handleMouseLeave = () => {
|
|
1205
|
+
setIsCursorVisible(false);
|
|
1206
|
+
};
|
|
1207
|
+
const divEl = divRef.current;
|
|
1208
|
+
divEl.addEventListener("mousemove", handleMouseMove);
|
|
1209
|
+
divEl.addEventListener("mouseleave", handleMouseLeave);
|
|
1210
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
1211
|
+
return () => {
|
|
1212
|
+
divEl.removeEventListener("mousemove", handleMouseMove);
|
|
1213
|
+
divEl.removeEventListener("mouseleave", handleMouseLeave);
|
|
1214
|
+
window.removeEventListener("scroll", handleScroll);
|
|
1215
|
+
};
|
|
1216
|
+
}, [placedImages, hoverCursorScale, defaultCursorScale]);
|
|
1217
|
+
const { isOverImage, hasLink: overImageHasLink } = isMouseOverImage(cursorPos.x, cursorPos.y, placedImages);
|
|
1218
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1174
1219
|
"div",
|
|
1175
1220
|
{
|
|
1176
1221
|
ref: divRef,
|
|
1177
1222
|
onClick: handleClick,
|
|
1178
1223
|
className: styles.imageRevealSlider,
|
|
1179
|
-
style: { cursor: cursorType
|
|
1180
|
-
children:
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
},
|
|
1193
|
-
children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1194
|
-
"img",
|
|
1195
|
-
{
|
|
1196
|
-
src: img2.url,
|
|
1197
|
-
alt: img2.name,
|
|
1198
|
-
className: styles.image
|
|
1199
|
-
},
|
|
1200
|
-
img2.id
|
|
1201
|
-
) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1202
|
-
"img",
|
|
1203
|
-
{
|
|
1204
|
-
src: img2.url,
|
|
1205
|
-
alt: img2.name,
|
|
1206
|
-
className: styles.image
|
|
1224
|
+
style: { cursor: cursorType === "custom" ? !defaultCursor ? "default" : "none" : "default" },
|
|
1225
|
+
children: [
|
|
1226
|
+
placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1227
|
+
"div",
|
|
1228
|
+
{
|
|
1229
|
+
style: {
|
|
1230
|
+
top: `${img2.y}px`,
|
|
1231
|
+
left: `${img2.x}px`,
|
|
1232
|
+
position: "absolute",
|
|
1233
|
+
transform: "translate(-50%, -50%)",
|
|
1234
|
+
width: img2.width ?? "auto",
|
|
1235
|
+
height: "auto",
|
|
1236
|
+
cursor: cursorType === "custom" ? !hoverCursor ? "default" : "none" : "default"
|
|
1207
1237
|
},
|
|
1208
|
-
img2.
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1238
|
+
children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1239
|
+
"img",
|
|
1240
|
+
{
|
|
1241
|
+
src: img2.url,
|
|
1242
|
+
alt: img2.name,
|
|
1243
|
+
className: styles.image
|
|
1244
|
+
},
|
|
1245
|
+
img2.id
|
|
1246
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1247
|
+
"img",
|
|
1248
|
+
{
|
|
1249
|
+
src: img2.url,
|
|
1250
|
+
alt: img2.name,
|
|
1251
|
+
className: styles.image
|
|
1252
|
+
},
|
|
1253
|
+
img2.id
|
|
1254
|
+
)
|
|
1255
|
+
},
|
|
1256
|
+
img2.id
|
|
1257
|
+
)),
|
|
1258
|
+
cursorType === "custom" && (defaultCursor || hoverCursor) && isCursorVisible && (target === "area" && !overImageHasLink || target !== "area") && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1259
|
+
"div",
|
|
1260
|
+
{
|
|
1261
|
+
style: {
|
|
1262
|
+
position: "absolute",
|
|
1263
|
+
top: cursorPos.y,
|
|
1264
|
+
left: cursorPos.x,
|
|
1265
|
+
width: "40px",
|
|
1266
|
+
height: "40px",
|
|
1267
|
+
pointerEvents: "none",
|
|
1268
|
+
backgroundImage: `url(${isOverImage || target === "area" ? hoverCursor : defaultCursor})`,
|
|
1269
|
+
backgroundSize: "contain",
|
|
1270
|
+
backgroundRepeat: "no-repeat",
|
|
1271
|
+
transform: `translate(-50%, -50%) scale(${cursorScale})`,
|
|
1272
|
+
zIndex: 1e3
|
|
1273
|
+
}
|
|
1274
|
+
}
|
|
1275
|
+
)
|
|
1276
|
+
]
|
|
1213
1277
|
}
|
|
1214
1278
|
);
|
|
1215
1279
|
}
|
|
@@ -1294,6 +1358,17 @@ const ControlImageRevealSliderComponent = {
|
|
|
1294
1358
|
visible: false
|
|
1295
1359
|
}
|
|
1296
1360
|
},
|
|
1361
|
+
defaultCursorScale: {
|
|
1362
|
+
type: "number",
|
|
1363
|
+
title: "Scale",
|
|
1364
|
+
min: 1,
|
|
1365
|
+
max: 5,
|
|
1366
|
+
step: 0.1,
|
|
1367
|
+
display: {
|
|
1368
|
+
type: "range-control",
|
|
1369
|
+
visible: false
|
|
1370
|
+
}
|
|
1371
|
+
},
|
|
1297
1372
|
hoverCursor: {
|
|
1298
1373
|
type: ["string", "null"],
|
|
1299
1374
|
title: "Hover",
|
|
@@ -1301,6 +1376,17 @@ const ControlImageRevealSliderComponent = {
|
|
|
1301
1376
|
type: "settings-image-input",
|
|
1302
1377
|
visible: false
|
|
1303
1378
|
}
|
|
1379
|
+
},
|
|
1380
|
+
hoverCursorScale: {
|
|
1381
|
+
type: "number",
|
|
1382
|
+
title: "Scale",
|
|
1383
|
+
min: 1,
|
|
1384
|
+
max: 5,
|
|
1385
|
+
step: 0.1,
|
|
1386
|
+
display: {
|
|
1387
|
+
type: "range-control",
|
|
1388
|
+
visible: false
|
|
1389
|
+
}
|
|
1304
1390
|
}
|
|
1305
1391
|
}
|
|
1306
1392
|
},
|
|
@@ -1346,7 +1432,9 @@ const ControlImageRevealSliderComponent = {
|
|
|
1346
1432
|
cursor: {
|
|
1347
1433
|
cursorType: "system",
|
|
1348
1434
|
defaultCursor: null,
|
|
1349
|
-
|
|
1435
|
+
defaultCursorScale: 2,
|
|
1436
|
+
hoverCursor: null,
|
|
1437
|
+
hoverCursorScale: 2
|
|
1350
1438
|
},
|
|
1351
1439
|
position: {
|
|
1352
1440
|
revealPosition: "random",
|
|
@@ -1385,6 +1473,16 @@ const ControlImageRevealSliderComponent = {
|
|
|
1385
1473
|
value: true
|
|
1386
1474
|
}
|
|
1387
1475
|
},
|
|
1476
|
+
{
|
|
1477
|
+
if: [
|
|
1478
|
+
{ name: "position.target", value: "image" },
|
|
1479
|
+
{ name: "cursor.cursorType", value: "custom" }
|
|
1480
|
+
],
|
|
1481
|
+
then: {
|
|
1482
|
+
name: "properties.cursor.properties.defaultCursorScale.display.visible",
|
|
1483
|
+
value: true
|
|
1484
|
+
}
|
|
1485
|
+
},
|
|
1388
1486
|
{
|
|
1389
1487
|
if: {
|
|
1390
1488
|
name: "cursor.cursorType",
|
|
@@ -1394,6 +1492,16 @@ const ControlImageRevealSliderComponent = {
|
|
|
1394
1492
|
name: "properties.cursor.properties.hoverCursor.display.visible",
|
|
1395
1493
|
value: true
|
|
1396
1494
|
}
|
|
1495
|
+
},
|
|
1496
|
+
{
|
|
1497
|
+
if: {
|
|
1498
|
+
name: "cursor.cursorType",
|
|
1499
|
+
value: "custom"
|
|
1500
|
+
},
|
|
1501
|
+
then: {
|
|
1502
|
+
name: "properties.cursor.properties.hoverCursorScale.display.visible",
|
|
1503
|
+
value: true
|
|
1504
|
+
}
|
|
1397
1505
|
}
|
|
1398
1506
|
]
|
|
1399
1507
|
},
|
package/dist/index.mjs
CHANGED
|
@@ -1044,7 +1044,8 @@ const styles = {
|
|
|
1044
1044
|
link
|
|
1045
1045
|
};
|
|
1046
1046
|
function isMouseOverImage(mouseX, mouseY, placedImages) {
|
|
1047
|
-
for (
|
|
1047
|
+
for (let i = placedImages.length - 1; i >= 0; i--) {
|
|
1048
|
+
const img2 = placedImages[i];
|
|
1048
1049
|
const imgEl = new Image();
|
|
1049
1050
|
imgEl.src = img2.url;
|
|
1050
1051
|
const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
|
|
@@ -1052,10 +1053,10 @@ function isMouseOverImage(mouseX, mouseY, placedImages) {
|
|
|
1052
1053
|
const halfW = imgWidth / 2;
|
|
1053
1054
|
const halfH = imgHeight / 2;
|
|
1054
1055
|
if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
|
|
1055
|
-
return true;
|
|
1056
|
+
return { isOverImage: true, hasLink: img2.link.length > 0 };
|
|
1056
1057
|
}
|
|
1057
1058
|
}
|
|
1058
|
-
return false;
|
|
1059
|
+
return { isOverImage: false, hasLink: false };
|
|
1059
1060
|
}
|
|
1060
1061
|
function getImageSize(url) {
|
|
1061
1062
|
return new Promise((resolve) => {
|
|
@@ -1089,10 +1090,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1089
1090
|
const [placedImages, setPlacedImages] = useState([]);
|
|
1090
1091
|
const [counter, setCounter] = useState(0);
|
|
1091
1092
|
const imageIdCounter = useRef(0);
|
|
1092
|
-
const defaultImageCount = 1;
|
|
1093
1093
|
const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
|
|
1094
1094
|
const { revealPosition, visible, target } = settings.position;
|
|
1095
|
-
const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
|
|
1095
|
+
const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
|
|
1096
|
+
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
|
|
1097
|
+
const [cursorScale, setCursorScale] = useState(defaultCursorScale);
|
|
1098
|
+
const [isCursorVisible, setIsCursorVisible] = useState(false);
|
|
1099
|
+
const lastMousePos = useRef(null);
|
|
1096
1100
|
const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
|
|
1097
1101
|
const { width, height, finalWidth } = await calculateImageWidthHeight(
|
|
1098
1102
|
imgData.image.url,
|
|
@@ -1121,7 +1125,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1121
1125
|
};
|
|
1122
1126
|
};
|
|
1123
1127
|
const defaultContentUrls = useMemo(() => {
|
|
1124
|
-
const defaultContentLength = Math.min(content.length,
|
|
1128
|
+
const defaultContentLength = Math.min(content.length, 1);
|
|
1125
1129
|
return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
|
|
1126
1130
|
}, [content]);
|
|
1127
1131
|
useEffect(() => {
|
|
@@ -1131,13 +1135,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1131
1135
|
const containerHeight = rect.height;
|
|
1132
1136
|
const defaultPlaced = [];
|
|
1133
1137
|
const placeImages = async () => {
|
|
1134
|
-
for (let i = 0; i <
|
|
1138
|
+
for (let i = 0; i < 1 && i < content.length; i++) {
|
|
1135
1139
|
const imgData = content[i];
|
|
1136
1140
|
const newImg = await createNewImage(imgData, containerWidth, containerHeight);
|
|
1137
1141
|
defaultPlaced.push(newImg);
|
|
1138
1142
|
}
|
|
1139
1143
|
setPlacedImages(defaultPlaced);
|
|
1140
|
-
setCounter(
|
|
1144
|
+
setCounter(1 % content.length);
|
|
1141
1145
|
};
|
|
1142
1146
|
placeImages();
|
|
1143
1147
|
}, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
|
|
@@ -1151,7 +1155,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1151
1155
|
const rect = divRef.current.getBoundingClientRect();
|
|
1152
1156
|
const clickX = e.clientX - rect.left;
|
|
1153
1157
|
const clickY = e.clientY - rect.top;
|
|
1154
|
-
|
|
1158
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(clickX, clickY, placedImages);
|
|
1159
|
+
if (target === "image" && !isOverImage2) return;
|
|
1155
1160
|
let x = 0, y = 0;
|
|
1156
1161
|
if (revealPosition === "on Click") {
|
|
1157
1162
|
x = clickX;
|
|
@@ -1168,46 +1173,105 @@ function ImageRevealSlider({ settings, content, isEditor }) {
|
|
|
1168
1173
|
setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
|
|
1169
1174
|
setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
|
|
1170
1175
|
};
|
|
1171
|
-
|
|
1176
|
+
useEffect(() => {
|
|
1177
|
+
if (!divRef.current) return;
|
|
1178
|
+
const handleMouseMove = (e) => {
|
|
1179
|
+
if (!divRef.current) return;
|
|
1180
|
+
lastMousePos.current = { x: e.clientX, y: e.clientY };
|
|
1181
|
+
const rect = divRef.current.getBoundingClientRect();
|
|
1182
|
+
const x = e.clientX - rect.left;
|
|
1183
|
+
const y = e.clientY - rect.top;
|
|
1184
|
+
const insideContainer = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
|
|
1185
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(x, y, placedImages);
|
|
1186
|
+
setCursorPos({ x, y });
|
|
1187
|
+
setCursorScale(isOverImage2 || target === "area" ? hoverCursorScale : defaultCursorScale);
|
|
1188
|
+
setIsCursorVisible(insideContainer || isOverImage2);
|
|
1189
|
+
};
|
|
1190
|
+
const handleScroll = () => {
|
|
1191
|
+
if (!divRef.current || !lastMousePos.current) return;
|
|
1192
|
+
const rect = divRef.current.getBoundingClientRect();
|
|
1193
|
+
const { x: clientX, y: clientY } = lastMousePos.current;
|
|
1194
|
+
const x = clientX - rect.left;
|
|
1195
|
+
const y = clientY - rect.top;
|
|
1196
|
+
const insideContainer = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
|
|
1197
|
+
const { isOverImage: isOverImage2 } = isMouseOverImage(x, y, placedImages);
|
|
1198
|
+
setCursorPos({ x, y });
|
|
1199
|
+
setCursorScale(isOverImage2 || target === "area" ? hoverCursorScale : defaultCursorScale);
|
|
1200
|
+
setIsCursorVisible(insideContainer || isOverImage2);
|
|
1201
|
+
};
|
|
1202
|
+
const handleMouseLeave = () => {
|
|
1203
|
+
setIsCursorVisible(false);
|
|
1204
|
+
};
|
|
1205
|
+
const divEl = divRef.current;
|
|
1206
|
+
divEl.addEventListener("mousemove", handleMouseMove);
|
|
1207
|
+
divEl.addEventListener("mouseleave", handleMouseLeave);
|
|
1208
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
1209
|
+
return () => {
|
|
1210
|
+
divEl.removeEventListener("mousemove", handleMouseMove);
|
|
1211
|
+
divEl.removeEventListener("mouseleave", handleMouseLeave);
|
|
1212
|
+
window.removeEventListener("scroll", handleScroll);
|
|
1213
|
+
};
|
|
1214
|
+
}, [placedImages, hoverCursorScale, defaultCursorScale]);
|
|
1215
|
+
const { isOverImage, hasLink: overImageHasLink } = isMouseOverImage(cursorPos.x, cursorPos.y, placedImages);
|
|
1216
|
+
return /* @__PURE__ */ jsxs(
|
|
1172
1217
|
"div",
|
|
1173
1218
|
{
|
|
1174
1219
|
ref: divRef,
|
|
1175
1220
|
onClick: handleClick,
|
|
1176
1221
|
className: styles.imageRevealSlider,
|
|
1177
|
-
style: { cursor: cursorType
|
|
1178
|
-
children:
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
},
|
|
1191
|
-
children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
|
|
1192
|
-
"img",
|
|
1193
|
-
{
|
|
1194
|
-
src: img2.url,
|
|
1195
|
-
alt: img2.name,
|
|
1196
|
-
className: styles.image
|
|
1197
|
-
},
|
|
1198
|
-
img2.id
|
|
1199
|
-
) }) : /* @__PURE__ */ jsx(
|
|
1200
|
-
"img",
|
|
1201
|
-
{
|
|
1202
|
-
src: img2.url,
|
|
1203
|
-
alt: img2.name,
|
|
1204
|
-
className: styles.image
|
|
1222
|
+
style: { cursor: cursorType === "custom" ? !defaultCursor ? "default" : "none" : "default" },
|
|
1223
|
+
children: [
|
|
1224
|
+
placedImages.map((img2) => /* @__PURE__ */ jsx(
|
|
1225
|
+
"div",
|
|
1226
|
+
{
|
|
1227
|
+
style: {
|
|
1228
|
+
top: `${img2.y}px`,
|
|
1229
|
+
left: `${img2.x}px`,
|
|
1230
|
+
position: "absolute",
|
|
1231
|
+
transform: "translate(-50%, -50%)",
|
|
1232
|
+
width: img2.width ?? "auto",
|
|
1233
|
+
height: "auto",
|
|
1234
|
+
cursor: cursorType === "custom" ? !hoverCursor ? "default" : "none" : "default"
|
|
1205
1235
|
},
|
|
1206
|
-
img2.
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1236
|
+
children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
|
|
1237
|
+
"img",
|
|
1238
|
+
{
|
|
1239
|
+
src: img2.url,
|
|
1240
|
+
alt: img2.name,
|
|
1241
|
+
className: styles.image
|
|
1242
|
+
},
|
|
1243
|
+
img2.id
|
|
1244
|
+
) }) : /* @__PURE__ */ jsx(
|
|
1245
|
+
"img",
|
|
1246
|
+
{
|
|
1247
|
+
src: img2.url,
|
|
1248
|
+
alt: img2.name,
|
|
1249
|
+
className: styles.image
|
|
1250
|
+
},
|
|
1251
|
+
img2.id
|
|
1252
|
+
)
|
|
1253
|
+
},
|
|
1254
|
+
img2.id
|
|
1255
|
+
)),
|
|
1256
|
+
cursorType === "custom" && (defaultCursor || hoverCursor) && isCursorVisible && (target === "area" && !overImageHasLink || target !== "area") && /* @__PURE__ */ jsx(
|
|
1257
|
+
"div",
|
|
1258
|
+
{
|
|
1259
|
+
style: {
|
|
1260
|
+
position: "absolute",
|
|
1261
|
+
top: cursorPos.y,
|
|
1262
|
+
left: cursorPos.x,
|
|
1263
|
+
width: "40px",
|
|
1264
|
+
height: "40px",
|
|
1265
|
+
pointerEvents: "none",
|
|
1266
|
+
backgroundImage: `url(${isOverImage || target === "area" ? hoverCursor : defaultCursor})`,
|
|
1267
|
+
backgroundSize: "contain",
|
|
1268
|
+
backgroundRepeat: "no-repeat",
|
|
1269
|
+
transform: `translate(-50%, -50%) scale(${cursorScale})`,
|
|
1270
|
+
zIndex: 1e3
|
|
1271
|
+
}
|
|
1272
|
+
}
|
|
1273
|
+
)
|
|
1274
|
+
]
|
|
1211
1275
|
}
|
|
1212
1276
|
);
|
|
1213
1277
|
}
|
|
@@ -1292,6 +1356,17 @@ const ControlImageRevealSliderComponent = {
|
|
|
1292
1356
|
visible: false
|
|
1293
1357
|
}
|
|
1294
1358
|
},
|
|
1359
|
+
defaultCursorScale: {
|
|
1360
|
+
type: "number",
|
|
1361
|
+
title: "Scale",
|
|
1362
|
+
min: 1,
|
|
1363
|
+
max: 5,
|
|
1364
|
+
step: 0.1,
|
|
1365
|
+
display: {
|
|
1366
|
+
type: "range-control",
|
|
1367
|
+
visible: false
|
|
1368
|
+
}
|
|
1369
|
+
},
|
|
1295
1370
|
hoverCursor: {
|
|
1296
1371
|
type: ["string", "null"],
|
|
1297
1372
|
title: "Hover",
|
|
@@ -1299,6 +1374,17 @@ const ControlImageRevealSliderComponent = {
|
|
|
1299
1374
|
type: "settings-image-input",
|
|
1300
1375
|
visible: false
|
|
1301
1376
|
}
|
|
1377
|
+
},
|
|
1378
|
+
hoverCursorScale: {
|
|
1379
|
+
type: "number",
|
|
1380
|
+
title: "Scale",
|
|
1381
|
+
min: 1,
|
|
1382
|
+
max: 5,
|
|
1383
|
+
step: 0.1,
|
|
1384
|
+
display: {
|
|
1385
|
+
type: "range-control",
|
|
1386
|
+
visible: false
|
|
1387
|
+
}
|
|
1302
1388
|
}
|
|
1303
1389
|
}
|
|
1304
1390
|
},
|
|
@@ -1344,7 +1430,9 @@ const ControlImageRevealSliderComponent = {
|
|
|
1344
1430
|
cursor: {
|
|
1345
1431
|
cursorType: "system",
|
|
1346
1432
|
defaultCursor: null,
|
|
1347
|
-
|
|
1433
|
+
defaultCursorScale: 2,
|
|
1434
|
+
hoverCursor: null,
|
|
1435
|
+
hoverCursorScale: 2
|
|
1348
1436
|
},
|
|
1349
1437
|
position: {
|
|
1350
1438
|
revealPosition: "random",
|
|
@@ -1383,6 +1471,16 @@ const ControlImageRevealSliderComponent = {
|
|
|
1383
1471
|
value: true
|
|
1384
1472
|
}
|
|
1385
1473
|
},
|
|
1474
|
+
{
|
|
1475
|
+
if: [
|
|
1476
|
+
{ name: "position.target", value: "image" },
|
|
1477
|
+
{ name: "cursor.cursorType", value: "custom" }
|
|
1478
|
+
],
|
|
1479
|
+
then: {
|
|
1480
|
+
name: "properties.cursor.properties.defaultCursorScale.display.visible",
|
|
1481
|
+
value: true
|
|
1482
|
+
}
|
|
1483
|
+
},
|
|
1386
1484
|
{
|
|
1387
1485
|
if: {
|
|
1388
1486
|
name: "cursor.cursorType",
|
|
@@ -1392,6 +1490,16 @@ const ControlImageRevealSliderComponent = {
|
|
|
1392
1490
|
name: "properties.cursor.properties.hoverCursor.display.visible",
|
|
1393
1491
|
value: true
|
|
1394
1492
|
}
|
|
1493
|
+
},
|
|
1494
|
+
{
|
|
1495
|
+
if: {
|
|
1496
|
+
name: "cursor.cursorType",
|
|
1497
|
+
value: "custom"
|
|
1498
|
+
},
|
|
1499
|
+
then: {
|
|
1500
|
+
name: "properties.cursor.properties.hoverCursorScale.display.visible",
|
|
1501
|
+
value: true
|
|
1502
|
+
}
|
|
1395
1503
|
}
|
|
1396
1504
|
]
|
|
1397
1505
|
},
|
package/package.json
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@cntrl-site/components",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Custom components for control editor and public websites.",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.mjs",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"style": "dist/components.css",
|
|
9
|
-
"sideEffects": [
|
|
10
|
-
"**/*.css"
|
|
11
|
-
],
|
|
12
|
-
"exports": {
|
|
13
|
-
".": {
|
|
14
|
-
"types": "./dist/index.d.ts",
|
|
15
|
-
"import": "./dist/index.mjs",
|
|
16
|
-
"require": "./dist/index.js"
|
|
17
|
-
},
|
|
18
|
-
"./style/components.css": {
|
|
19
|
-
"default": "./dist/components.css"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
"scripts": {
|
|
23
|
-
"test": "jest",
|
|
24
|
-
"dev": "vite development",
|
|
25
|
-
"prebuild": "rimraf ./dist",
|
|
26
|
-
"build": "vite build",
|
|
27
|
-
"prepublishOnly": "cross-env NODE_ENV=production npm run build"
|
|
28
|
-
},
|
|
29
|
-
"files": [
|
|
30
|
-
"dist",
|
|
31
|
-
"resources"
|
|
32
|
-
],
|
|
33
|
-
"repository": {
|
|
34
|
-
"type": "git",
|
|
35
|
-
"url": "git+https://github.com/cntrl-site/components.git"
|
|
36
|
-
},
|
|
37
|
-
"author": "arsen@momdesign.nyc",
|
|
38
|
-
"license": "MIT",
|
|
39
|
-
"bugs": {
|
|
40
|
-
"url": "https://github.com/cntrl-site/components/issues"
|
|
41
|
-
},
|
|
42
|
-
"homepage": "https://github.com/cntrl-site/components#readme",
|
|
43
|
-
"directories": {
|
|
44
|
-
"lib": "dist"
|
|
45
|
-
},
|
|
46
|
-
"dependencies": {
|
|
47
|
-
"@antfu/eslint-config": "^3.16.0",
|
|
48
|
-
"@splidejs/react-splide": "^0.7.12",
|
|
49
|
-
"classnames": "^2.5.1",
|
|
50
|
-
"ts-node": "^10.9.1"
|
|
51
|
-
},
|
|
52
|
-
"devDependencies": {
|
|
53
|
-
"@tsconfig/node16": "^1.0.3",
|
|
54
|
-
"@tsconfig/recommended": "^1.0.1",
|
|
55
|
-
"@types/node": "^18.11.7",
|
|
56
|
-
"@types/react": "^18.2.0",
|
|
57
|
-
"@types/react-dom": "^18.2.0",
|
|
58
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
59
|
-
"cross-env": "^10.1.0",
|
|
60
|
-
"react": "^18.2.0",
|
|
61
|
-
"react-dom": "^18.2.0",
|
|
62
|
-
"rimraf": "^6.0.1",
|
|
63
|
-
"sass": "^1.86.3",
|
|
64
|
-
"typescript": "^5.2.2",
|
|
65
|
-
"vite": "^6.2.5",
|
|
66
|
-
"vite-plugin-dts": "^4.5.3"
|
|
67
|
-
}
|
|
68
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@cntrl-site/components",
|
|
3
|
+
"version": "0.1.6-14",
|
|
4
|
+
"description": "Custom components for control editor and public websites.",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"style": "dist/components.css",
|
|
9
|
+
"sideEffects": [
|
|
10
|
+
"**/*.css"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.mjs",
|
|
16
|
+
"require": "./dist/index.js"
|
|
17
|
+
},
|
|
18
|
+
"./style/components.css": {
|
|
19
|
+
"default": "./dist/components.css"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"test": "jest",
|
|
24
|
+
"dev": "vite development",
|
|
25
|
+
"prebuild": "rimraf ./dist",
|
|
26
|
+
"build": "vite build",
|
|
27
|
+
"prepublishOnly": "cross-env NODE_ENV=production npm run build"
|
|
28
|
+
},
|
|
29
|
+
"files": [
|
|
30
|
+
"dist",
|
|
31
|
+
"resources"
|
|
32
|
+
],
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/cntrl-site/components.git"
|
|
36
|
+
},
|
|
37
|
+
"author": "arsen@momdesign.nyc",
|
|
38
|
+
"license": "MIT",
|
|
39
|
+
"bugs": {
|
|
40
|
+
"url": "https://github.com/cntrl-site/components/issues"
|
|
41
|
+
},
|
|
42
|
+
"homepage": "https://github.com/cntrl-site/components#readme",
|
|
43
|
+
"directories": {
|
|
44
|
+
"lib": "dist"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@antfu/eslint-config": "^3.16.0",
|
|
48
|
+
"@splidejs/react-splide": "^0.7.12",
|
|
49
|
+
"classnames": "^2.5.1",
|
|
50
|
+
"ts-node": "^10.9.1"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@tsconfig/node16": "^1.0.3",
|
|
54
|
+
"@tsconfig/recommended": "^1.0.1",
|
|
55
|
+
"@types/node": "^18.11.7",
|
|
56
|
+
"@types/react": "^18.2.0",
|
|
57
|
+
"@types/react-dom": "^18.2.0",
|
|
58
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
59
|
+
"cross-env": "^10.1.0",
|
|
60
|
+
"react": "^18.2.0",
|
|
61
|
+
"react-dom": "^18.2.0",
|
|
62
|
+
"rimraf": "^6.0.1",
|
|
63
|
+
"sass": "^1.86.3",
|
|
64
|
+
"typescript": "^5.2.2",
|
|
65
|
+
"vite": "^6.2.5",
|
|
66
|
+
"vite-plugin-dts": "^4.5.3"
|
|
67
|
+
}
|
|
68
|
+
}
|