@cntrl-site/components 0.1.4 → 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.
|
@@ -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 = {
|
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
|
},
|
|
@@ -1943,6 +2051,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
1943
2051
|
e.stopPropagation();
|
|
1944
2052
|
return;
|
|
1945
2053
|
}
|
|
2054
|
+
const target = e.target;
|
|
2055
|
+
if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
|
|
2056
|
+
return;
|
|
2057
|
+
}
|
|
1946
2058
|
if (e.touches.length === 0 && e.changedTouches.length > 0) {
|
|
1947
2059
|
const currentImage = content[currentIndex];
|
|
1948
2060
|
const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
|
|
@@ -3057,26 +3169,6 @@ const LightboxComponent = {
|
|
|
3057
3169
|
value: false
|
|
3058
3170
|
}
|
|
3059
3171
|
},
|
|
3060
|
-
{
|
|
3061
|
-
if: {
|
|
3062
|
-
name: "lightboxBlock.slider.type",
|
|
3063
|
-
value: "fade"
|
|
3064
|
-
},
|
|
3065
|
-
then: {
|
|
3066
|
-
name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
|
|
3067
|
-
value: false
|
|
3068
|
-
}
|
|
3069
|
-
},
|
|
3070
|
-
{
|
|
3071
|
-
if: {
|
|
3072
|
-
name: "lightboxBlock.slider.type",
|
|
3073
|
-
value: "scale"
|
|
3074
|
-
},
|
|
3075
|
-
then: {
|
|
3076
|
-
name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
|
|
3077
|
-
value: false
|
|
3078
|
-
}
|
|
3079
|
-
},
|
|
3080
3172
|
{
|
|
3081
3173
|
if: [
|
|
3082
3174
|
{ name: "lightboxBlock.triggers.type", value: "click" },
|
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
|
},
|
|
@@ -1941,6 +2049,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
1941
2049
|
e.stopPropagation();
|
|
1942
2050
|
return;
|
|
1943
2051
|
}
|
|
2052
|
+
const target = e.target;
|
|
2053
|
+
if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
|
|
2054
|
+
return;
|
|
2055
|
+
}
|
|
1944
2056
|
if (e.touches.length === 0 && e.changedTouches.length > 0) {
|
|
1945
2057
|
const currentImage = content[currentIndex];
|
|
1946
2058
|
const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
|
|
@@ -3055,26 +3167,6 @@ const LightboxComponent = {
|
|
|
3055
3167
|
value: false
|
|
3056
3168
|
}
|
|
3057
3169
|
},
|
|
3058
|
-
{
|
|
3059
|
-
if: {
|
|
3060
|
-
name: "lightboxBlock.slider.type",
|
|
3061
|
-
value: "fade"
|
|
3062
|
-
},
|
|
3063
|
-
then: {
|
|
3064
|
-
name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
|
|
3065
|
-
value: false
|
|
3066
|
-
}
|
|
3067
|
-
},
|
|
3068
|
-
{
|
|
3069
|
-
if: {
|
|
3070
|
-
name: "lightboxBlock.slider.type",
|
|
3071
|
-
value: "scale"
|
|
3072
|
-
},
|
|
3073
|
-
then: {
|
|
3074
|
-
name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
|
|
3075
|
-
value: false
|
|
3076
|
-
}
|
|
3077
|
-
},
|
|
3078
3170
|
{
|
|
3079
3171
|
if: [
|
|
3080
3172
|
{ name: "lightboxBlock.triggers.type", value: "click" },
|