@cntrl-site/components 0.1.0-alpha.16 → 0.1.0-alpha.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +38 -0
- package/dist/Components/Lightbox/Lightbox.d.ts +1 -1
- package/dist/Components/utils/getPositionStyles.d.ts +1 -1
- package/dist/components.css +1 -1
- package/dist/index.js +172 -68
- package/dist/index.mjs +172 -68
- package/package.json +1 -1
|
@@ -113,15 +113,28 @@ export declare const ControlSliderComponent: {
|
|
|
113
113
|
};
|
|
114
114
|
offset: {
|
|
115
115
|
type: string;
|
|
116
|
+
title: string;
|
|
116
117
|
display: {
|
|
117
118
|
type: string;
|
|
118
119
|
};
|
|
119
120
|
properties: {
|
|
120
121
|
x: {
|
|
121
122
|
type: string;
|
|
123
|
+
label: string;
|
|
124
|
+
scalingEnabled: boolean;
|
|
125
|
+
display: {
|
|
126
|
+
type: string;
|
|
127
|
+
visible: boolean;
|
|
128
|
+
};
|
|
122
129
|
};
|
|
123
130
|
y: {
|
|
124
131
|
type: string;
|
|
132
|
+
label: string;
|
|
133
|
+
scalingEnabled: boolean;
|
|
134
|
+
display: {
|
|
135
|
+
type: string;
|
|
136
|
+
visible: boolean;
|
|
137
|
+
};
|
|
125
138
|
};
|
|
126
139
|
};
|
|
127
140
|
};
|
|
@@ -174,15 +187,28 @@ export declare const ControlSliderComponent: {
|
|
|
174
187
|
};
|
|
175
188
|
offset: {
|
|
176
189
|
type: string;
|
|
190
|
+
title: string;
|
|
177
191
|
display: {
|
|
178
192
|
type: string;
|
|
179
193
|
};
|
|
180
194
|
properties: {
|
|
181
195
|
x: {
|
|
182
196
|
type: string;
|
|
197
|
+
label: string;
|
|
198
|
+
scalingEnabled: boolean;
|
|
199
|
+
display: {
|
|
200
|
+
type: string;
|
|
201
|
+
visible: boolean;
|
|
202
|
+
};
|
|
183
203
|
};
|
|
184
204
|
y: {
|
|
185
205
|
type: string;
|
|
206
|
+
label: string;
|
|
207
|
+
scalingEnabled: boolean;
|
|
208
|
+
display: {
|
|
209
|
+
type: string;
|
|
210
|
+
visible: boolean;
|
|
211
|
+
};
|
|
186
212
|
};
|
|
187
213
|
};
|
|
188
214
|
};
|
|
@@ -243,9 +269,21 @@ export declare const ControlSliderComponent: {
|
|
|
243
269
|
properties: {
|
|
244
270
|
x: {
|
|
245
271
|
type: string;
|
|
272
|
+
label: string;
|
|
273
|
+
scalingEnabled: boolean;
|
|
274
|
+
display: {
|
|
275
|
+
type: string;
|
|
276
|
+
visible: boolean;
|
|
277
|
+
};
|
|
246
278
|
};
|
|
247
279
|
y: {
|
|
248
280
|
type: string;
|
|
281
|
+
label: string;
|
|
282
|
+
scalingEnabled: boolean;
|
|
283
|
+
display: {
|
|
284
|
+
type: string;
|
|
285
|
+
visible: boolean;
|
|
286
|
+
};
|
|
249
287
|
};
|
|
250
288
|
};
|
|
251
289
|
};
|
|
@@ -39,7 +39,6 @@ type Padding = {
|
|
|
39
39
|
type Triggers = {
|
|
40
40
|
type: 'click' | 'drag';
|
|
41
41
|
switch: 'image' | '50/50';
|
|
42
|
-
duration: string;
|
|
43
42
|
};
|
|
44
43
|
type LightboxSettings = {
|
|
45
44
|
thumbnailBlock: {
|
|
@@ -58,6 +57,7 @@ type LightboxSettings = {
|
|
|
58
57
|
slider: {
|
|
59
58
|
type: 'slide' | 'fade' | 'scale';
|
|
60
59
|
direction: 'horiz' | 'vert';
|
|
60
|
+
duration: string;
|
|
61
61
|
};
|
|
62
62
|
thumbnail: {
|
|
63
63
|
isActive: boolean;
|
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}.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__background___wf1Ii{position:absolute;z-index:9998;width:100%;height:100%;top:0;left:0}.Lightbox-module__backdropStyle___y7avj{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999}.Lightbox-module__editor___Vh82D{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.Lightbox-module__contentStyle___FzFaW{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.Lightbox-module__imageStyle___Qb7f5{position:relative;display:block;cursor:pointer;background-color:transparent;width:fit-content;height:fit-content}.Lightbox-module__imgWrapper___cdytV{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.Lightbox-module__contain___5gATW{object-fit:contain;max-width:100%;max-height:100%}.Lightbox-module__cover___8HZy7{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.Lightbox-module__caption___3e-22{position:absolute;display:flex}.Lightbox-module__lightboxSplide___yMC4v.splide,.Lightbox-module__lightboxSplide___yMC4v .splide__track{height:100%}.Lightbox-module__arrow___s3Bn2{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___s3Bn2.Lightbox-module__arrowVertical___6ztxz{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___i23DU{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___i23DU.Lightbox-module__arrowVertical___6ztxz{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___Mm3xe{all:unset;cursor:pointer;width:100%;height:100%}.Lightbox-module__arrowInner___Mm3xe:hover .Lightbox-module__arrowIcon___UpzOt path{fill:var(--arrow-hover-color)!important}.Lightbox-module__arrowImg___UxHPR{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleX(-1)!important}.Lightbox-module__arrowVertical___6ztxz.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleY(-1)!important}.Lightbox-module__thumbsContainerVertical___lVaf-{flex-direction:column;display:flex}.Lightbox-module__thumbsContainer___DqOCP{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.Lightbox-module__thumbsAlignStart___uiFIV{align-items:flex-start}.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center}.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:flex-end}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignStart___uiFIV{align-items:center;justify-content:flex-start}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center;justify-content:center}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:center;justify-content:flex-end}.Lightbox-module__thumbItem___zROyu{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___zROyu:hover{opacity:var(--thumb-hover)!important}.Lightbox-module__thumbImage___xGakV{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}.Lightbox-module__closeButton___r3Dur{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___3xoHQ{0%{opacity:0}to{opacity:1}}.Lightbox-module__fadeIn___sHwRK{animation-name:Lightbox-module__lbFadeIn___3xoHQ}@keyframes Lightbox-module__lbSlideInLeft___vgE9-{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInRight___nByIA{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInTop___hI5ju{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes Lightbox-module__lbSlideInBottom___M6-9o{0%{transform:translateY(100%)}to{transform:translateY(0)}}.Lightbox-module__slideInLeft___P-XRo{animation-name:Lightbox-module__lbSlideInLeft___vgE9-}.Lightbox-module__slideInRight___ZQqFi{animation-name:Lightbox-module__lbSlideInRight___nByIA}.Lightbox-module__slideInTop___XRKCs{animation-name:Lightbox-module__lbSlideInTop___hI5ju}.Lightbox-module__slideInBottom___TYOBS{animation-name:Lightbox-module__lbSlideInBottom___M6-9o}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .Lightbox-module__scaleSlide___wS7d4{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___yMC4v.splide--fade .splide__slide.is-active .Lightbox-module__scaleSlide___wS7d4{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .splide__slide:not(.is-active) .Lightbox-module__scaleSlide___wS7d4{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
|
|
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}.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__background___wf1Ii{position:absolute;z-index:9998;width:100%;height:100%;top:0;left:0}.Lightbox-module__backdropStyle___y7avj{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999}.Lightbox-module__editor___Vh82D{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.Lightbox-module__contentStyle___FzFaW{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.Lightbox-module__imageStyle___Qb7f5{position:relative;display:block;cursor:pointer;background-color:transparent;width:fit-content;height:fit-content}.Lightbox-module__imgWrapper___cdytV{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.Lightbox-module__contain___5gATW{object-fit:contain;max-width:100%;max-height:100%}.Lightbox-module__cover___8HZy7{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.Lightbox-module__caption___3e-22{position:absolute;display:flex}.Lightbox-module__caption___3e-22:hover{color:var(--link-hover-color)!important}.Lightbox-module__lightboxSplide___yMC4v.splide,.Lightbox-module__lightboxSplide___yMC4v .splide__track{height:100%}.Lightbox-module__arrow___s3Bn2{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___s3Bn2.Lightbox-module__arrowVertical___6ztxz{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___i23DU{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___i23DU.Lightbox-module__arrowVertical___6ztxz{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___Mm3xe{all:unset;cursor:pointer;width:100%;height:100%}.Lightbox-module__arrowInner___Mm3xe:hover .Lightbox-module__arrowIcon___UpzOt path{fill:var(--arrow-hover-color)!important}.Lightbox-module__arrowImg___UxHPR{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleX(-1)!important}.Lightbox-module__arrowVertical___6ztxz.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleY(-1)!important}.Lightbox-module__thumbsContainerVertical___lVaf-{flex-direction:column;display:flex}.Lightbox-module__thumbsContainer___DqOCP{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.Lightbox-module__thumbsAlignStart___uiFIV{align-items:flex-start}.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center}.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:flex-end}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignStart___uiFIV{align-items:center;justify-content:flex-start}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center;justify-content:center}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:center;justify-content:flex-end}.Lightbox-module__thumbItem___zROyu{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___zROyu:hover{opacity:var(--thumb-hover)!important}.Lightbox-module__thumbImage___xGakV{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}.Lightbox-module__closeButton___r3Dur{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___3xoHQ{0%{opacity:0}to{opacity:1}}.Lightbox-module__fadeIn___sHwRK{animation-name:Lightbox-module__lbFadeIn___3xoHQ}@keyframes Lightbox-module__lbSlideInLeft___vgE9-{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInRight___nByIA{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInTop___hI5ju{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes Lightbox-module__lbSlideInBottom___M6-9o{0%{transform:translateY(100%)}to{transform:translateY(0)}}.Lightbox-module__slideInLeft___P-XRo{animation-name:Lightbox-module__lbSlideInLeft___vgE9-}.Lightbox-module__slideInRight___ZQqFi{animation-name:Lightbox-module__lbSlideInRight___nByIA}.Lightbox-module__slideInTop___XRKCs{animation-name:Lightbox-module__lbSlideInTop___hI5ju}.Lightbox-module__slideInBottom___TYOBS{animation-name:Lightbox-module__lbSlideInBottom___M6-9o}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .Lightbox-module__scaleSlide___wS7d4{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___yMC4v.splide--fade .splide__slide.is-active .Lightbox-module__scaleSlide___wS7d4{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .splide__slide:not(.is-active) .Lightbox-module__scaleSlide___wS7d4{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
|
package/dist/index.js
CHANGED
|
@@ -565,15 +565,28 @@ const ControlSliderComponent = {
|
|
|
565
565
|
},
|
|
566
566
|
offset: {
|
|
567
567
|
type: "object",
|
|
568
|
+
title: "Offset",
|
|
568
569
|
display: {
|
|
569
|
-
type: "
|
|
570
|
+
type: "group"
|
|
570
571
|
},
|
|
571
572
|
properties: {
|
|
572
573
|
x: {
|
|
573
|
-
type: "number"
|
|
574
|
+
type: "number",
|
|
575
|
+
label: "X",
|
|
576
|
+
scalingEnabled: true,
|
|
577
|
+
display: {
|
|
578
|
+
type: "numeric-input",
|
|
579
|
+
visible: true
|
|
580
|
+
}
|
|
574
581
|
},
|
|
575
582
|
y: {
|
|
576
|
-
type: "number"
|
|
583
|
+
type: "number",
|
|
584
|
+
label: "Y",
|
|
585
|
+
scalingEnabled: true,
|
|
586
|
+
display: {
|
|
587
|
+
type: "numeric-input",
|
|
588
|
+
visible: true
|
|
589
|
+
}
|
|
577
590
|
}
|
|
578
591
|
}
|
|
579
592
|
},
|
|
@@ -626,15 +639,28 @@ const ControlSliderComponent = {
|
|
|
626
639
|
},
|
|
627
640
|
offset: {
|
|
628
641
|
type: "object",
|
|
642
|
+
title: "Offset",
|
|
629
643
|
display: {
|
|
630
|
-
type: "
|
|
644
|
+
type: "group"
|
|
631
645
|
},
|
|
632
646
|
properties: {
|
|
633
647
|
x: {
|
|
634
|
-
type: "number"
|
|
648
|
+
type: "number",
|
|
649
|
+
label: "X",
|
|
650
|
+
scalingEnabled: true,
|
|
651
|
+
display: {
|
|
652
|
+
type: "numeric-input",
|
|
653
|
+
visible: true
|
|
654
|
+
}
|
|
635
655
|
},
|
|
636
656
|
y: {
|
|
637
|
-
type: "number"
|
|
657
|
+
type: "number",
|
|
658
|
+
label: "Y",
|
|
659
|
+
scalingEnabled: true,
|
|
660
|
+
display: {
|
|
661
|
+
type: "numeric-input",
|
|
662
|
+
visible: true
|
|
663
|
+
}
|
|
638
664
|
}
|
|
639
665
|
}
|
|
640
666
|
},
|
|
@@ -690,14 +716,26 @@ const ControlSliderComponent = {
|
|
|
690
716
|
offset: {
|
|
691
717
|
type: "object",
|
|
692
718
|
display: {
|
|
693
|
-
type: "
|
|
719
|
+
type: "group"
|
|
694
720
|
},
|
|
695
721
|
properties: {
|
|
696
722
|
x: {
|
|
697
|
-
type: "number"
|
|
723
|
+
type: "number",
|
|
724
|
+
label: "X",
|
|
725
|
+
scalingEnabled: true,
|
|
726
|
+
display: {
|
|
727
|
+
type: "numeric-input",
|
|
728
|
+
visible: true
|
|
729
|
+
}
|
|
698
730
|
},
|
|
699
731
|
y: {
|
|
700
|
-
type: "number"
|
|
732
|
+
type: "number",
|
|
733
|
+
label: "Y",
|
|
734
|
+
scalingEnabled: true,
|
|
735
|
+
display: {
|
|
736
|
+
type: "numeric-input",
|
|
737
|
+
visible: true
|
|
738
|
+
}
|
|
701
739
|
}
|
|
702
740
|
}
|
|
703
741
|
},
|
|
@@ -1505,7 +1543,7 @@ const styles = {
|
|
|
1505
1543
|
slideInBottom,
|
|
1506
1544
|
scaleSlide
|
|
1507
1545
|
};
|
|
1508
|
-
const getPositionStyles = (position, offset) => {
|
|
1546
|
+
const getPositionStyles = (position, offset, isEditor) => {
|
|
1509
1547
|
const styles2 = {};
|
|
1510
1548
|
const [vertical, horizontal] = position.split("-");
|
|
1511
1549
|
if (vertical === "top") {
|
|
@@ -1529,13 +1567,13 @@ const getPositionStyles = (position, offset) => {
|
|
|
1529
1567
|
styles2.right = "0";
|
|
1530
1568
|
}
|
|
1531
1569
|
if (vertical === "middle" && horizontal === "center") {
|
|
1532
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}
|
|
1570
|
+
styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
|
|
1533
1571
|
} else if (vertical === "middle") {
|
|
1534
|
-
styles2.transform = `translate(${offset.x}
|
|
1572
|
+
styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
|
|
1535
1573
|
} else if (horizontal === "center") {
|
|
1536
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}
|
|
1574
|
+
styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), ${scalingValue(offset.y, isEditor)})`;
|
|
1537
1575
|
} else {
|
|
1538
|
-
styles2.transform = `translate(${offset.x}
|
|
1576
|
+
styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, ${scalingValue(offset.y, isEditor)})`;
|
|
1539
1577
|
}
|
|
1540
1578
|
return styles2;
|
|
1541
1579
|
};
|
|
@@ -1673,8 +1711,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1673
1711
|
const containerAspectRatio = containerWidth / containerHeight;
|
|
1674
1712
|
if (imageAspectRatio > containerAspectRatio) {
|
|
1675
1713
|
img2.style.width = "100%";
|
|
1714
|
+
img2.style.height = "";
|
|
1676
1715
|
} else {
|
|
1677
1716
|
img2.style.height = "100%";
|
|
1717
|
+
img2.style.width = "";
|
|
1678
1718
|
}
|
|
1679
1719
|
};
|
|
1680
1720
|
if (img2.complete) {
|
|
@@ -1759,7 +1799,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1759
1799
|
"div",
|
|
1760
1800
|
{
|
|
1761
1801
|
className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
|
|
1762
|
-
style: { ...isEditor && { backgroundColor: area.color } },
|
|
1802
|
+
style: { ...isEditor && { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)` } },
|
|
1763
1803
|
onClick: handleBackdropClick,
|
|
1764
1804
|
onTouchEnd: handleBackdropClick,
|
|
1765
1805
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1771,8 +1811,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1771
1811
|
animationDuration: `${appearDurationMs}ms`,
|
|
1772
1812
|
animationTimingFunction: "ease",
|
|
1773
1813
|
animationFillMode: "both",
|
|
1774
|
-
...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
|
|
1775
|
-
"--splide-speed":
|
|
1814
|
+
...appear.type === "mix" && { animationDelay: `${backdropDurationMs / 2}ms` },
|
|
1815
|
+
"--splide-speed": slider.duration || "500ms"
|
|
1776
1816
|
},
|
|
1777
1817
|
children: [
|
|
1778
1818
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1785,7 +1825,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1785
1825
|
className: styles.lightboxSplide,
|
|
1786
1826
|
options: {
|
|
1787
1827
|
arrows: false,
|
|
1788
|
-
speed:
|
|
1828
|
+
speed: slider.duration ? parseInt(slider.duration) : 500,
|
|
1789
1829
|
direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
|
|
1790
1830
|
pagination: false,
|
|
1791
1831
|
drag: triggers.type === "drag",
|
|
@@ -1796,9 +1836,9 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1796
1836
|
padding: 0,
|
|
1797
1837
|
rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
|
|
1798
1838
|
},
|
|
1799
|
-
style: { "--splide-speed":
|
|
1839
|
+
style: { "--splide-speed": slider.duration || "500ms" },
|
|
1800
1840
|
children: content.map((item, index) => {
|
|
1801
|
-
const positionStyles = getPositionStyles(layout.position, layout.offset);
|
|
1841
|
+
const positionStyles = getPositionStyles(layout.position, layout.offset, isEditor);
|
|
1802
1842
|
const imageStyle2 = slider.type === "scale" ? (() => {
|
|
1803
1843
|
const { transform, ...restStyles } = positionStyles;
|
|
1804
1844
|
return {
|
|
@@ -1811,9 +1851,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1811
1851
|
{
|
|
1812
1852
|
className: styles.imgWrapper,
|
|
1813
1853
|
onClick: handleImageWrapperClick,
|
|
1814
|
-
style: {
|
|
1815
|
-
padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
|
|
1816
|
-
},
|
|
1854
|
+
style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
|
|
1817
1855
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1818
1856
|
"img",
|
|
1819
1857
|
{
|
|
@@ -1844,7 +1882,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1844
1882
|
{
|
|
1845
1883
|
className: styles.arrowInner,
|
|
1846
1884
|
style: {
|
|
1847
|
-
transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1885
|
+
transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1848
1886
|
},
|
|
1849
1887
|
onClick: (e) => {
|
|
1850
1888
|
handleArrowClick("-1");
|
|
@@ -1872,7 +1910,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1872
1910
|
{
|
|
1873
1911
|
className: styles.arrowInner,
|
|
1874
1912
|
style: {
|
|
1875
|
-
transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1913
|
+
transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1876
1914
|
},
|
|
1877
1915
|
onClick: (e) => {
|
|
1878
1916
|
handleArrowClick("+1");
|
|
@@ -1893,7 +1931,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1893
1931
|
)
|
|
1894
1932
|
] }),
|
|
1895
1933
|
area.closeIconUrl && (() => {
|
|
1896
|
-
const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
|
|
1934
|
+
const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
|
|
1897
1935
|
const scaleTransform = `scale(${area.closeIconScale})`;
|
|
1898
1936
|
const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
|
|
1899
1937
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1914,9 +1952,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1914
1952
|
{
|
|
1915
1953
|
className: styles.caption,
|
|
1916
1954
|
style: {
|
|
1917
|
-
...getPositionStyles(caption2.alignment, caption2.offset),
|
|
1955
|
+
...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
|
|
1918
1956
|
["--link-hover-color"]: caption2.hover
|
|
1919
1957
|
},
|
|
1958
|
+
onClick: (e) => e.stopPropagation(),
|
|
1920
1959
|
children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
|
|
1921
1960
|
}
|
|
1922
1961
|
),
|
|
@@ -1934,9 +1973,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1934
1973
|
),
|
|
1935
1974
|
style: {
|
|
1936
1975
|
gap: `${thumbnail.grid.gap}px`,
|
|
1937
|
-
...
|
|
1938
|
-
...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
|
|
1939
|
-
...getPositionStyles(thumbnail.position, thumbnail.offset)
|
|
1976
|
+
...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
|
|
1940
1977
|
},
|
|
1941
1978
|
children: content.map((item, index) => {
|
|
1942
1979
|
const isActive = index === currentIndex;
|
|
@@ -1945,11 +1982,13 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1945
1982
|
{
|
|
1946
1983
|
className: styles.thumbItem,
|
|
1947
1984
|
style: {
|
|
1948
|
-
|
|
1949
|
-
...slider.direction === "
|
|
1950
|
-
...slider.direction === "
|
|
1951
|
-
|
|
1952
|
-
|
|
1985
|
+
...slider.direction === "horiz" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
|
|
1986
|
+
...slider.direction === "vert" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
|
|
1987
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
|
|
1988
|
+
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
|
|
1989
|
+
transition: isActive ? "all 0.2s ease" : "none",
|
|
1990
|
+
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
1991
|
+
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
1953
1992
|
},
|
|
1954
1993
|
onClick: (e) => {
|
|
1955
1994
|
var _a;
|
|
@@ -1967,8 +2006,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1967
2006
|
objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
|
|
1968
2007
|
...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
|
|
1969
2008
|
...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
|
|
1970
|
-
...slider.direction === "horiz" ? { height: "100%" } : {}
|
|
1971
|
-
...slider.direction === "vert" ? { width: "100%" } : {}
|
|
2009
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
|
|
1972
2010
|
}
|
|
1973
2011
|
}
|
|
1974
2012
|
)
|
|
@@ -2022,6 +2060,7 @@ const LightboxComponent = {
|
|
|
2022
2060
|
url: {
|
|
2023
2061
|
type: "string",
|
|
2024
2062
|
display: {
|
|
2063
|
+
mode: "cover",
|
|
2025
2064
|
type: "settings-image-input"
|
|
2026
2065
|
}
|
|
2027
2066
|
}
|
|
@@ -2094,14 +2133,6 @@ const LightboxComponent = {
|
|
|
2094
2133
|
type: "ratio-group"
|
|
2095
2134
|
},
|
|
2096
2135
|
enum: ["image", "50/50"]
|
|
2097
|
-
},
|
|
2098
|
-
duration: {
|
|
2099
|
-
type: "string",
|
|
2100
|
-
label: "T",
|
|
2101
|
-
display: {
|
|
2102
|
-
type: "step-selector"
|
|
2103
|
-
},
|
|
2104
|
-
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
2105
2136
|
}
|
|
2106
2137
|
}
|
|
2107
2138
|
},
|
|
@@ -2124,6 +2155,14 @@ const LightboxComponent = {
|
|
|
2124
2155
|
type: "ratio-group"
|
|
2125
2156
|
},
|
|
2126
2157
|
enum: ["horiz", "vert"]
|
|
2158
|
+
},
|
|
2159
|
+
duration: {
|
|
2160
|
+
type: "string",
|
|
2161
|
+
label: "T",
|
|
2162
|
+
display: {
|
|
2163
|
+
type: "step-selector"
|
|
2164
|
+
},
|
|
2165
|
+
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
2127
2166
|
}
|
|
2128
2167
|
}
|
|
2129
2168
|
},
|
|
@@ -2205,15 +2244,28 @@ const LightboxComponent = {
|
|
|
2205
2244
|
},
|
|
2206
2245
|
offset: {
|
|
2207
2246
|
type: "object",
|
|
2247
|
+
title: "Offset",
|
|
2208
2248
|
display: {
|
|
2209
|
-
type: "
|
|
2249
|
+
type: "group"
|
|
2210
2250
|
},
|
|
2211
2251
|
properties: {
|
|
2212
2252
|
x: {
|
|
2213
|
-
type: "number"
|
|
2253
|
+
type: "number",
|
|
2254
|
+
label: "X",
|
|
2255
|
+
scalingEnabled: true,
|
|
2256
|
+
display: {
|
|
2257
|
+
type: "numeric-input",
|
|
2258
|
+
visible: true
|
|
2259
|
+
}
|
|
2214
2260
|
},
|
|
2215
2261
|
y: {
|
|
2216
|
-
type: "number"
|
|
2262
|
+
type: "number",
|
|
2263
|
+
label: "Y",
|
|
2264
|
+
scalingEnabled: true,
|
|
2265
|
+
display: {
|
|
2266
|
+
type: "numeric-input",
|
|
2267
|
+
visible: true
|
|
2268
|
+
}
|
|
2217
2269
|
}
|
|
2218
2270
|
}
|
|
2219
2271
|
},
|
|
@@ -2238,7 +2290,7 @@ const LightboxComponent = {
|
|
|
2238
2290
|
scale: {
|
|
2239
2291
|
type: "number",
|
|
2240
2292
|
title: "Scale",
|
|
2241
|
-
min:
|
|
2293
|
+
min: 1,
|
|
2242
2294
|
max: 5,
|
|
2243
2295
|
step: 0.1,
|
|
2244
2296
|
display: {
|
|
@@ -2275,15 +2327,28 @@ const LightboxComponent = {
|
|
|
2275
2327
|
},
|
|
2276
2328
|
offset: {
|
|
2277
2329
|
type: "object",
|
|
2330
|
+
title: "Offset",
|
|
2278
2331
|
display: {
|
|
2279
|
-
type: "
|
|
2332
|
+
type: "group"
|
|
2280
2333
|
},
|
|
2281
2334
|
properties: {
|
|
2282
2335
|
x: {
|
|
2283
|
-
type: "number"
|
|
2336
|
+
type: "number",
|
|
2337
|
+
label: "X",
|
|
2338
|
+
scalingEnabled: true,
|
|
2339
|
+
display: {
|
|
2340
|
+
type: "numeric-input",
|
|
2341
|
+
visible: true
|
|
2342
|
+
}
|
|
2284
2343
|
},
|
|
2285
2344
|
y: {
|
|
2286
|
-
type: "number"
|
|
2345
|
+
type: "number",
|
|
2346
|
+
label: "Y",
|
|
2347
|
+
scalingEnabled: true,
|
|
2348
|
+
display: {
|
|
2349
|
+
type: "numeric-input",
|
|
2350
|
+
visible: true
|
|
2351
|
+
}
|
|
2287
2352
|
}
|
|
2288
2353
|
}
|
|
2289
2354
|
},
|
|
@@ -2329,16 +2394,29 @@ const LightboxComponent = {
|
|
|
2329
2394
|
}
|
|
2330
2395
|
},
|
|
2331
2396
|
offset: {
|
|
2397
|
+
title: "Offset",
|
|
2332
2398
|
type: "object",
|
|
2333
2399
|
display: {
|
|
2334
|
-
type: "
|
|
2400
|
+
type: "group"
|
|
2335
2401
|
},
|
|
2336
2402
|
properties: {
|
|
2337
2403
|
x: {
|
|
2338
|
-
type: "number"
|
|
2404
|
+
type: "number",
|
|
2405
|
+
label: "X",
|
|
2406
|
+
scalingEnabled: true,
|
|
2407
|
+
display: {
|
|
2408
|
+
type: "numeric-input",
|
|
2409
|
+
visible: true
|
|
2410
|
+
}
|
|
2339
2411
|
},
|
|
2340
2412
|
y: {
|
|
2341
|
-
type: "number"
|
|
2413
|
+
type: "number",
|
|
2414
|
+
label: "Y",
|
|
2415
|
+
scalingEnabled: true,
|
|
2416
|
+
display: {
|
|
2417
|
+
type: "numeric-input",
|
|
2418
|
+
visible: true
|
|
2419
|
+
}
|
|
2342
2420
|
}
|
|
2343
2421
|
}
|
|
2344
2422
|
},
|
|
@@ -2417,15 +2495,28 @@ const LightboxComponent = {
|
|
|
2417
2495
|
},
|
|
2418
2496
|
closeIconOffset: {
|
|
2419
2497
|
type: "object",
|
|
2498
|
+
title: "Offset",
|
|
2420
2499
|
display: {
|
|
2421
|
-
type: "
|
|
2500
|
+
type: "group"
|
|
2422
2501
|
},
|
|
2423
2502
|
properties: {
|
|
2424
2503
|
x: {
|
|
2425
|
-
type: "number"
|
|
2504
|
+
type: "number",
|
|
2505
|
+
label: "X",
|
|
2506
|
+
scalingEnabled: true,
|
|
2507
|
+
display: {
|
|
2508
|
+
type: "numeric-input",
|
|
2509
|
+
visible: true
|
|
2510
|
+
}
|
|
2426
2511
|
},
|
|
2427
2512
|
y: {
|
|
2428
|
-
type: "number"
|
|
2513
|
+
type: "number",
|
|
2514
|
+
label: "Y",
|
|
2515
|
+
scalingEnabled: true,
|
|
2516
|
+
display: {
|
|
2517
|
+
type: "numeric-input",
|
|
2518
|
+
visible: true
|
|
2519
|
+
}
|
|
2429
2520
|
}
|
|
2430
2521
|
}
|
|
2431
2522
|
}
|
|
@@ -2451,16 +2542,29 @@ const LightboxComponent = {
|
|
|
2451
2542
|
enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
|
|
2452
2543
|
},
|
|
2453
2544
|
offset: {
|
|
2545
|
+
title: "Offset",
|
|
2454
2546
|
type: "object",
|
|
2455
2547
|
display: {
|
|
2456
|
-
type: "
|
|
2548
|
+
type: "group"
|
|
2457
2549
|
},
|
|
2458
2550
|
properties: {
|
|
2459
2551
|
x: {
|
|
2460
|
-
type: "number"
|
|
2552
|
+
type: "number",
|
|
2553
|
+
label: "X",
|
|
2554
|
+
scalingEnabled: true,
|
|
2555
|
+
display: {
|
|
2556
|
+
type: "numeric-input",
|
|
2557
|
+
visible: true
|
|
2558
|
+
}
|
|
2461
2559
|
},
|
|
2462
2560
|
y: {
|
|
2463
|
-
type: "number"
|
|
2561
|
+
type: "number",
|
|
2562
|
+
label: "Y",
|
|
2563
|
+
scalingEnabled: true,
|
|
2564
|
+
display: {
|
|
2565
|
+
type: "numeric-input",
|
|
2566
|
+
visible: true
|
|
2567
|
+
}
|
|
2464
2568
|
}
|
|
2465
2569
|
}
|
|
2466
2570
|
},
|
|
@@ -2492,12 +2596,12 @@ const LightboxComponent = {
|
|
|
2492
2596
|
},
|
|
2493
2597
|
triggers: {
|
|
2494
2598
|
type: "click",
|
|
2495
|
-
switch: "image"
|
|
2496
|
-
duration: "2000ms"
|
|
2599
|
+
switch: "image"
|
|
2497
2600
|
},
|
|
2498
2601
|
slider: {
|
|
2499
2602
|
type: "fade",
|
|
2500
|
-
direction: "horiz"
|
|
2603
|
+
direction: "horiz",
|
|
2604
|
+
duration: "1000ms"
|
|
2501
2605
|
},
|
|
2502
2606
|
thumbnail: {
|
|
2503
2607
|
isActive: true,
|
|
@@ -2633,7 +2737,7 @@ const LightboxComponent = {
|
|
|
2633
2737
|
value: "click"
|
|
2634
2738
|
},
|
|
2635
2739
|
then: {
|
|
2636
|
-
name: "properties.lightboxBlock.properties.
|
|
2740
|
+
name: "properties.lightboxBlock.properties.slider.properties.duration.display.visible",
|
|
2637
2741
|
value: true
|
|
2638
2742
|
}
|
|
2639
2743
|
},
|
|
@@ -2643,7 +2747,7 @@ const LightboxComponent = {
|
|
|
2643
2747
|
value: "click"
|
|
2644
2748
|
},
|
|
2645
2749
|
then: {
|
|
2646
|
-
name: "properties.lightboxBlock.properties.
|
|
2750
|
+
name: "properties.lightboxBlock.properties.slider.properties.switch.display.visible",
|
|
2647
2751
|
value: true
|
|
2648
2752
|
}
|
|
2649
2753
|
},
|
|
@@ -2653,7 +2757,7 @@ const LightboxComponent = {
|
|
|
2653
2757
|
value: "drag"
|
|
2654
2758
|
},
|
|
2655
2759
|
then: {
|
|
2656
|
-
name: "properties.lightboxBlock.properties.
|
|
2760
|
+
name: "properties.lightboxBlock.properties.slider.properties.duration.display.visible",
|
|
2657
2761
|
value: false
|
|
2658
2762
|
}
|
|
2659
2763
|
},
|
|
@@ -2663,7 +2767,7 @@ const LightboxComponent = {
|
|
|
2663
2767
|
value: "drag"
|
|
2664
2768
|
},
|
|
2665
2769
|
then: {
|
|
2666
|
-
name: "properties.lightboxBlock.properties.
|
|
2770
|
+
name: "properties.lightboxBlock.properties.slider.properties.switch.display.visible",
|
|
2667
2771
|
value: false
|
|
2668
2772
|
}
|
|
2669
2773
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -563,15 +563,28 @@ const ControlSliderComponent = {
|
|
|
563
563
|
},
|
|
564
564
|
offset: {
|
|
565
565
|
type: "object",
|
|
566
|
+
title: "Offset",
|
|
566
567
|
display: {
|
|
567
|
-
type: "
|
|
568
|
+
type: "group"
|
|
568
569
|
},
|
|
569
570
|
properties: {
|
|
570
571
|
x: {
|
|
571
|
-
type: "number"
|
|
572
|
+
type: "number",
|
|
573
|
+
label: "X",
|
|
574
|
+
scalingEnabled: true,
|
|
575
|
+
display: {
|
|
576
|
+
type: "numeric-input",
|
|
577
|
+
visible: true
|
|
578
|
+
}
|
|
572
579
|
},
|
|
573
580
|
y: {
|
|
574
|
-
type: "number"
|
|
581
|
+
type: "number",
|
|
582
|
+
label: "Y",
|
|
583
|
+
scalingEnabled: true,
|
|
584
|
+
display: {
|
|
585
|
+
type: "numeric-input",
|
|
586
|
+
visible: true
|
|
587
|
+
}
|
|
575
588
|
}
|
|
576
589
|
}
|
|
577
590
|
},
|
|
@@ -624,15 +637,28 @@ const ControlSliderComponent = {
|
|
|
624
637
|
},
|
|
625
638
|
offset: {
|
|
626
639
|
type: "object",
|
|
640
|
+
title: "Offset",
|
|
627
641
|
display: {
|
|
628
|
-
type: "
|
|
642
|
+
type: "group"
|
|
629
643
|
},
|
|
630
644
|
properties: {
|
|
631
645
|
x: {
|
|
632
|
-
type: "number"
|
|
646
|
+
type: "number",
|
|
647
|
+
label: "X",
|
|
648
|
+
scalingEnabled: true,
|
|
649
|
+
display: {
|
|
650
|
+
type: "numeric-input",
|
|
651
|
+
visible: true
|
|
652
|
+
}
|
|
633
653
|
},
|
|
634
654
|
y: {
|
|
635
|
-
type: "number"
|
|
655
|
+
type: "number",
|
|
656
|
+
label: "Y",
|
|
657
|
+
scalingEnabled: true,
|
|
658
|
+
display: {
|
|
659
|
+
type: "numeric-input",
|
|
660
|
+
visible: true
|
|
661
|
+
}
|
|
636
662
|
}
|
|
637
663
|
}
|
|
638
664
|
},
|
|
@@ -688,14 +714,26 @@ const ControlSliderComponent = {
|
|
|
688
714
|
offset: {
|
|
689
715
|
type: "object",
|
|
690
716
|
display: {
|
|
691
|
-
type: "
|
|
717
|
+
type: "group"
|
|
692
718
|
},
|
|
693
719
|
properties: {
|
|
694
720
|
x: {
|
|
695
|
-
type: "number"
|
|
721
|
+
type: "number",
|
|
722
|
+
label: "X",
|
|
723
|
+
scalingEnabled: true,
|
|
724
|
+
display: {
|
|
725
|
+
type: "numeric-input",
|
|
726
|
+
visible: true
|
|
727
|
+
}
|
|
696
728
|
},
|
|
697
729
|
y: {
|
|
698
|
-
type: "number"
|
|
730
|
+
type: "number",
|
|
731
|
+
label: "Y",
|
|
732
|
+
scalingEnabled: true,
|
|
733
|
+
display: {
|
|
734
|
+
type: "numeric-input",
|
|
735
|
+
visible: true
|
|
736
|
+
}
|
|
699
737
|
}
|
|
700
738
|
}
|
|
701
739
|
},
|
|
@@ -1503,7 +1541,7 @@ const styles = {
|
|
|
1503
1541
|
slideInBottom,
|
|
1504
1542
|
scaleSlide
|
|
1505
1543
|
};
|
|
1506
|
-
const getPositionStyles = (position, offset) => {
|
|
1544
|
+
const getPositionStyles = (position, offset, isEditor) => {
|
|
1507
1545
|
const styles2 = {};
|
|
1508
1546
|
const [vertical, horizontal] = position.split("-");
|
|
1509
1547
|
if (vertical === "top") {
|
|
@@ -1527,13 +1565,13 @@ const getPositionStyles = (position, offset) => {
|
|
|
1527
1565
|
styles2.right = "0";
|
|
1528
1566
|
}
|
|
1529
1567
|
if (vertical === "middle" && horizontal === "center") {
|
|
1530
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}
|
|
1568
|
+
styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
|
|
1531
1569
|
} else if (vertical === "middle") {
|
|
1532
|
-
styles2.transform = `translate(${offset.x}
|
|
1570
|
+
styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
|
|
1533
1571
|
} else if (horizontal === "center") {
|
|
1534
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}
|
|
1572
|
+
styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), ${scalingValue(offset.y, isEditor)})`;
|
|
1535
1573
|
} else {
|
|
1536
|
-
styles2.transform = `translate(${offset.x}
|
|
1574
|
+
styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, ${scalingValue(offset.y, isEditor)})`;
|
|
1537
1575
|
}
|
|
1538
1576
|
return styles2;
|
|
1539
1577
|
};
|
|
@@ -1671,8 +1709,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1671
1709
|
const containerAspectRatio = containerWidth / containerHeight;
|
|
1672
1710
|
if (imageAspectRatio > containerAspectRatio) {
|
|
1673
1711
|
img2.style.width = "100%";
|
|
1712
|
+
img2.style.height = "";
|
|
1674
1713
|
} else {
|
|
1675
1714
|
img2.style.height = "100%";
|
|
1715
|
+
img2.style.width = "";
|
|
1676
1716
|
}
|
|
1677
1717
|
};
|
|
1678
1718
|
if (img2.complete) {
|
|
@@ -1757,7 +1797,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1757
1797
|
"div",
|
|
1758
1798
|
{
|
|
1759
1799
|
className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
|
|
1760
|
-
style: { ...isEditor && { backgroundColor: area.color } },
|
|
1800
|
+
style: { ...isEditor && { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)` } },
|
|
1761
1801
|
onClick: handleBackdropClick,
|
|
1762
1802
|
onTouchEnd: handleBackdropClick,
|
|
1763
1803
|
children: /* @__PURE__ */ jsxs(
|
|
@@ -1769,8 +1809,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1769
1809
|
animationDuration: `${appearDurationMs}ms`,
|
|
1770
1810
|
animationTimingFunction: "ease",
|
|
1771
1811
|
animationFillMode: "both",
|
|
1772
|
-
...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
|
|
1773
|
-
"--splide-speed":
|
|
1812
|
+
...appear.type === "mix" && { animationDelay: `${backdropDurationMs / 2}ms` },
|
|
1813
|
+
"--splide-speed": slider.duration || "500ms"
|
|
1774
1814
|
},
|
|
1775
1815
|
children: [
|
|
1776
1816
|
/* @__PURE__ */ jsx(
|
|
@@ -1783,7 +1823,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1783
1823
|
className: styles.lightboxSplide,
|
|
1784
1824
|
options: {
|
|
1785
1825
|
arrows: false,
|
|
1786
|
-
speed:
|
|
1826
|
+
speed: slider.duration ? parseInt(slider.duration) : 500,
|
|
1787
1827
|
direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
|
|
1788
1828
|
pagination: false,
|
|
1789
1829
|
drag: triggers.type === "drag",
|
|
@@ -1794,9 +1834,9 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1794
1834
|
padding: 0,
|
|
1795
1835
|
rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
|
|
1796
1836
|
},
|
|
1797
|
-
style: { "--splide-speed":
|
|
1837
|
+
style: { "--splide-speed": slider.duration || "500ms" },
|
|
1798
1838
|
children: content.map((item, index) => {
|
|
1799
|
-
const positionStyles = getPositionStyles(layout.position, layout.offset);
|
|
1839
|
+
const positionStyles = getPositionStyles(layout.position, layout.offset, isEditor);
|
|
1800
1840
|
const imageStyle2 = slider.type === "scale" ? (() => {
|
|
1801
1841
|
const { transform, ...restStyles } = positionStyles;
|
|
1802
1842
|
return {
|
|
@@ -1809,9 +1849,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1809
1849
|
{
|
|
1810
1850
|
className: styles.imgWrapper,
|
|
1811
1851
|
onClick: handleImageWrapperClick,
|
|
1812
|
-
style: {
|
|
1813
|
-
padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
|
|
1814
|
-
},
|
|
1852
|
+
style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
|
|
1815
1853
|
children: /* @__PURE__ */ jsx(
|
|
1816
1854
|
"img",
|
|
1817
1855
|
{
|
|
@@ -1842,7 +1880,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1842
1880
|
{
|
|
1843
1881
|
className: styles.arrowInner,
|
|
1844
1882
|
style: {
|
|
1845
|
-
transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1883
|
+
transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1846
1884
|
},
|
|
1847
1885
|
onClick: (e) => {
|
|
1848
1886
|
handleArrowClick("-1");
|
|
@@ -1870,7 +1908,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1870
1908
|
{
|
|
1871
1909
|
className: styles.arrowInner,
|
|
1872
1910
|
style: {
|
|
1873
|
-
transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1911
|
+
transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
|
|
1874
1912
|
},
|
|
1875
1913
|
onClick: (e) => {
|
|
1876
1914
|
handleArrowClick("+1");
|
|
@@ -1891,7 +1929,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1891
1929
|
)
|
|
1892
1930
|
] }),
|
|
1893
1931
|
area.closeIconUrl && (() => {
|
|
1894
|
-
const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
|
|
1932
|
+
const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
|
|
1895
1933
|
const scaleTransform = `scale(${area.closeIconScale})`;
|
|
1896
1934
|
const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
|
|
1897
1935
|
return /* @__PURE__ */ jsx(
|
|
@@ -1912,9 +1950,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1912
1950
|
{
|
|
1913
1951
|
className: styles.caption,
|
|
1914
1952
|
style: {
|
|
1915
|
-
...getPositionStyles(caption2.alignment, caption2.offset),
|
|
1953
|
+
...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
|
|
1916
1954
|
["--link-hover-color"]: caption2.hover
|
|
1917
1955
|
},
|
|
1956
|
+
onClick: (e) => e.stopPropagation(),
|
|
1918
1957
|
children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
|
|
1919
1958
|
}
|
|
1920
1959
|
),
|
|
@@ -1932,9 +1971,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1932
1971
|
),
|
|
1933
1972
|
style: {
|
|
1934
1973
|
gap: `${thumbnail.grid.gap}px`,
|
|
1935
|
-
...
|
|
1936
|
-
...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
|
|
1937
|
-
...getPositionStyles(thumbnail.position, thumbnail.offset)
|
|
1974
|
+
...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
|
|
1938
1975
|
},
|
|
1939
1976
|
children: content.map((item, index) => {
|
|
1940
1977
|
const isActive = index === currentIndex;
|
|
@@ -1943,11 +1980,13 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1943
1980
|
{
|
|
1944
1981
|
className: styles.thumbItem,
|
|
1945
1982
|
style: {
|
|
1946
|
-
|
|
1947
|
-
...slider.direction === "
|
|
1948
|
-
...slider.direction === "
|
|
1949
|
-
|
|
1950
|
-
|
|
1983
|
+
...slider.direction === "horiz" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
|
|
1984
|
+
...slider.direction === "vert" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
|
|
1985
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.width}px` } : {},
|
|
1986
|
+
...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1)}px` : `${thumbnail.grid.height}px` } : {},
|
|
1987
|
+
transition: isActive ? "all 0.2s ease" : "none",
|
|
1988
|
+
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
1989
|
+
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
1951
1990
|
},
|
|
1952
1991
|
onClick: (e) => {
|
|
1953
1992
|
var _a;
|
|
@@ -1965,8 +2004,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1965
2004
|
objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
|
|
1966
2005
|
...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
|
|
1967
2006
|
...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
|
|
1968
|
-
...slider.direction === "horiz" ? { height: "100%" } : {}
|
|
1969
|
-
...slider.direction === "vert" ? { width: "100%" } : {}
|
|
2007
|
+
...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
|
|
1970
2008
|
}
|
|
1971
2009
|
}
|
|
1972
2010
|
)
|
|
@@ -2020,6 +2058,7 @@ const LightboxComponent = {
|
|
|
2020
2058
|
url: {
|
|
2021
2059
|
type: "string",
|
|
2022
2060
|
display: {
|
|
2061
|
+
mode: "cover",
|
|
2023
2062
|
type: "settings-image-input"
|
|
2024
2063
|
}
|
|
2025
2064
|
}
|
|
@@ -2092,14 +2131,6 @@ const LightboxComponent = {
|
|
|
2092
2131
|
type: "ratio-group"
|
|
2093
2132
|
},
|
|
2094
2133
|
enum: ["image", "50/50"]
|
|
2095
|
-
},
|
|
2096
|
-
duration: {
|
|
2097
|
-
type: "string",
|
|
2098
|
-
label: "T",
|
|
2099
|
-
display: {
|
|
2100
|
-
type: "step-selector"
|
|
2101
|
-
},
|
|
2102
|
-
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
2103
2134
|
}
|
|
2104
2135
|
}
|
|
2105
2136
|
},
|
|
@@ -2122,6 +2153,14 @@ const LightboxComponent = {
|
|
|
2122
2153
|
type: "ratio-group"
|
|
2123
2154
|
},
|
|
2124
2155
|
enum: ["horiz", "vert"]
|
|
2156
|
+
},
|
|
2157
|
+
duration: {
|
|
2158
|
+
type: "string",
|
|
2159
|
+
label: "T",
|
|
2160
|
+
display: {
|
|
2161
|
+
type: "step-selector"
|
|
2162
|
+
},
|
|
2163
|
+
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
2125
2164
|
}
|
|
2126
2165
|
}
|
|
2127
2166
|
},
|
|
@@ -2203,15 +2242,28 @@ const LightboxComponent = {
|
|
|
2203
2242
|
},
|
|
2204
2243
|
offset: {
|
|
2205
2244
|
type: "object",
|
|
2245
|
+
title: "Offset",
|
|
2206
2246
|
display: {
|
|
2207
|
-
type: "
|
|
2247
|
+
type: "group"
|
|
2208
2248
|
},
|
|
2209
2249
|
properties: {
|
|
2210
2250
|
x: {
|
|
2211
|
-
type: "number"
|
|
2251
|
+
type: "number",
|
|
2252
|
+
label: "X",
|
|
2253
|
+
scalingEnabled: true,
|
|
2254
|
+
display: {
|
|
2255
|
+
type: "numeric-input",
|
|
2256
|
+
visible: true
|
|
2257
|
+
}
|
|
2212
2258
|
},
|
|
2213
2259
|
y: {
|
|
2214
|
-
type: "number"
|
|
2260
|
+
type: "number",
|
|
2261
|
+
label: "Y",
|
|
2262
|
+
scalingEnabled: true,
|
|
2263
|
+
display: {
|
|
2264
|
+
type: "numeric-input",
|
|
2265
|
+
visible: true
|
|
2266
|
+
}
|
|
2215
2267
|
}
|
|
2216
2268
|
}
|
|
2217
2269
|
},
|
|
@@ -2236,7 +2288,7 @@ const LightboxComponent = {
|
|
|
2236
2288
|
scale: {
|
|
2237
2289
|
type: "number",
|
|
2238
2290
|
title: "Scale",
|
|
2239
|
-
min:
|
|
2291
|
+
min: 1,
|
|
2240
2292
|
max: 5,
|
|
2241
2293
|
step: 0.1,
|
|
2242
2294
|
display: {
|
|
@@ -2273,15 +2325,28 @@ const LightboxComponent = {
|
|
|
2273
2325
|
},
|
|
2274
2326
|
offset: {
|
|
2275
2327
|
type: "object",
|
|
2328
|
+
title: "Offset",
|
|
2276
2329
|
display: {
|
|
2277
|
-
type: "
|
|
2330
|
+
type: "group"
|
|
2278
2331
|
},
|
|
2279
2332
|
properties: {
|
|
2280
2333
|
x: {
|
|
2281
|
-
type: "number"
|
|
2334
|
+
type: "number",
|
|
2335
|
+
label: "X",
|
|
2336
|
+
scalingEnabled: true,
|
|
2337
|
+
display: {
|
|
2338
|
+
type: "numeric-input",
|
|
2339
|
+
visible: true
|
|
2340
|
+
}
|
|
2282
2341
|
},
|
|
2283
2342
|
y: {
|
|
2284
|
-
type: "number"
|
|
2343
|
+
type: "number",
|
|
2344
|
+
label: "Y",
|
|
2345
|
+
scalingEnabled: true,
|
|
2346
|
+
display: {
|
|
2347
|
+
type: "numeric-input",
|
|
2348
|
+
visible: true
|
|
2349
|
+
}
|
|
2285
2350
|
}
|
|
2286
2351
|
}
|
|
2287
2352
|
},
|
|
@@ -2327,16 +2392,29 @@ const LightboxComponent = {
|
|
|
2327
2392
|
}
|
|
2328
2393
|
},
|
|
2329
2394
|
offset: {
|
|
2395
|
+
title: "Offset",
|
|
2330
2396
|
type: "object",
|
|
2331
2397
|
display: {
|
|
2332
|
-
type: "
|
|
2398
|
+
type: "group"
|
|
2333
2399
|
},
|
|
2334
2400
|
properties: {
|
|
2335
2401
|
x: {
|
|
2336
|
-
type: "number"
|
|
2402
|
+
type: "number",
|
|
2403
|
+
label: "X",
|
|
2404
|
+
scalingEnabled: true,
|
|
2405
|
+
display: {
|
|
2406
|
+
type: "numeric-input",
|
|
2407
|
+
visible: true
|
|
2408
|
+
}
|
|
2337
2409
|
},
|
|
2338
2410
|
y: {
|
|
2339
|
-
type: "number"
|
|
2411
|
+
type: "number",
|
|
2412
|
+
label: "Y",
|
|
2413
|
+
scalingEnabled: true,
|
|
2414
|
+
display: {
|
|
2415
|
+
type: "numeric-input",
|
|
2416
|
+
visible: true
|
|
2417
|
+
}
|
|
2340
2418
|
}
|
|
2341
2419
|
}
|
|
2342
2420
|
},
|
|
@@ -2415,15 +2493,28 @@ const LightboxComponent = {
|
|
|
2415
2493
|
},
|
|
2416
2494
|
closeIconOffset: {
|
|
2417
2495
|
type: "object",
|
|
2496
|
+
title: "Offset",
|
|
2418
2497
|
display: {
|
|
2419
|
-
type: "
|
|
2498
|
+
type: "group"
|
|
2420
2499
|
},
|
|
2421
2500
|
properties: {
|
|
2422
2501
|
x: {
|
|
2423
|
-
type: "number"
|
|
2502
|
+
type: "number",
|
|
2503
|
+
label: "X",
|
|
2504
|
+
scalingEnabled: true,
|
|
2505
|
+
display: {
|
|
2506
|
+
type: "numeric-input",
|
|
2507
|
+
visible: true
|
|
2508
|
+
}
|
|
2424
2509
|
},
|
|
2425
2510
|
y: {
|
|
2426
|
-
type: "number"
|
|
2511
|
+
type: "number",
|
|
2512
|
+
label: "Y",
|
|
2513
|
+
scalingEnabled: true,
|
|
2514
|
+
display: {
|
|
2515
|
+
type: "numeric-input",
|
|
2516
|
+
visible: true
|
|
2517
|
+
}
|
|
2427
2518
|
}
|
|
2428
2519
|
}
|
|
2429
2520
|
}
|
|
@@ -2449,16 +2540,29 @@ const LightboxComponent = {
|
|
|
2449
2540
|
enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
|
|
2450
2541
|
},
|
|
2451
2542
|
offset: {
|
|
2543
|
+
title: "Offset",
|
|
2452
2544
|
type: "object",
|
|
2453
2545
|
display: {
|
|
2454
|
-
type: "
|
|
2546
|
+
type: "group"
|
|
2455
2547
|
},
|
|
2456
2548
|
properties: {
|
|
2457
2549
|
x: {
|
|
2458
|
-
type: "number"
|
|
2550
|
+
type: "number",
|
|
2551
|
+
label: "X",
|
|
2552
|
+
scalingEnabled: true,
|
|
2553
|
+
display: {
|
|
2554
|
+
type: "numeric-input",
|
|
2555
|
+
visible: true
|
|
2556
|
+
}
|
|
2459
2557
|
},
|
|
2460
2558
|
y: {
|
|
2461
|
-
type: "number"
|
|
2559
|
+
type: "number",
|
|
2560
|
+
label: "Y",
|
|
2561
|
+
scalingEnabled: true,
|
|
2562
|
+
display: {
|
|
2563
|
+
type: "numeric-input",
|
|
2564
|
+
visible: true
|
|
2565
|
+
}
|
|
2462
2566
|
}
|
|
2463
2567
|
}
|
|
2464
2568
|
},
|
|
@@ -2490,12 +2594,12 @@ const LightboxComponent = {
|
|
|
2490
2594
|
},
|
|
2491
2595
|
triggers: {
|
|
2492
2596
|
type: "click",
|
|
2493
|
-
switch: "image"
|
|
2494
|
-
duration: "2000ms"
|
|
2597
|
+
switch: "image"
|
|
2495
2598
|
},
|
|
2496
2599
|
slider: {
|
|
2497
2600
|
type: "fade",
|
|
2498
|
-
direction: "horiz"
|
|
2601
|
+
direction: "horiz",
|
|
2602
|
+
duration: "1000ms"
|
|
2499
2603
|
},
|
|
2500
2604
|
thumbnail: {
|
|
2501
2605
|
isActive: true,
|
|
@@ -2631,7 +2735,7 @@ const LightboxComponent = {
|
|
|
2631
2735
|
value: "click"
|
|
2632
2736
|
},
|
|
2633
2737
|
then: {
|
|
2634
|
-
name: "properties.lightboxBlock.properties.
|
|
2738
|
+
name: "properties.lightboxBlock.properties.slider.properties.duration.display.visible",
|
|
2635
2739
|
value: true
|
|
2636
2740
|
}
|
|
2637
2741
|
},
|
|
@@ -2641,7 +2745,7 @@ const LightboxComponent = {
|
|
|
2641
2745
|
value: "click"
|
|
2642
2746
|
},
|
|
2643
2747
|
then: {
|
|
2644
|
-
name: "properties.lightboxBlock.properties.
|
|
2748
|
+
name: "properties.lightboxBlock.properties.slider.properties.switch.display.visible",
|
|
2645
2749
|
value: true
|
|
2646
2750
|
}
|
|
2647
2751
|
},
|
|
@@ -2651,7 +2755,7 @@ const LightboxComponent = {
|
|
|
2651
2755
|
value: "drag"
|
|
2652
2756
|
},
|
|
2653
2757
|
then: {
|
|
2654
|
-
name: "properties.lightboxBlock.properties.
|
|
2758
|
+
name: "properties.lightboxBlock.properties.slider.properties.duration.display.visible",
|
|
2655
2759
|
value: false
|
|
2656
2760
|
}
|
|
2657
2761
|
},
|
|
@@ -2661,7 +2765,7 @@ const LightboxComponent = {
|
|
|
2661
2765
|
value: "drag"
|
|
2662
2766
|
},
|
|
2663
2767
|
then: {
|
|
2664
|
-
name: "properties.lightboxBlock.properties.
|
|
2768
|
+
name: "properties.lightboxBlock.properties.slider.properties.switch.display.visible",
|
|
2665
2769
|
value: false
|
|
2666
2770
|
}
|
|
2667
2771
|
}
|