@cntrl-site/components 0.1.0-alpha.27 → 0.1.0-alpha.29
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.css +1 -1
- package/dist/index.js +124 -80
- package/dist/index.mjs +124 -80
- package/package.json +1 -1
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:9997;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:9998}.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;max-width:100%;max-height:100%;width:auto;height:auto}.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}.Lightbox-module__caption___3e-22{z-index:9999;position:absolute;display:flex}.Lightbox-module__caption___3e-22:hover{color:var(--link-hover-color)!important}.Lightbox-module__captionBlock___7wXOq{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.Lightbox-module__captionTextWrapper___uDnh6{position:relative;width:100%;height:100%}.Lightbox-module__captionText___6zbmg{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}.Lightbox-module__captionText___6zbmg.Lightbox-module__active___u7Yu8{opacity:1}.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__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__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}@keyframes Lightbox-module__lbFadeOut___0pD7Q{0%{opacity:1}to{opacity:0}}.Lightbox-module__fadeOut___h2fpQ{animation-name:Lightbox-module__lbFadeOut___0pD7Q!important}@keyframes Lightbox-module__lbSlideOutLeft___Z6pdg{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes Lightbox-module__lbSlideOutRight___B5cYY{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes Lightbox-module__lbSlideOutTop___uZ10i{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes Lightbox-module__lbSlideOutBottom___GyYfC{0%{transform:translateY(0)}to{transform:translateY(100%)}}.Lightbox-module__slideOutLeft___J-eMU{animation-name:Lightbox-module__lbSlideOutLeft___Z6pdg!important}.Lightbox-module__slideOutRight___iZUQz{animation-name:Lightbox-module__lbSlideOutRight___B5cYY!important}.Lightbox-module__slideOutTop___3TXF9{animation-name:Lightbox-module__lbSlideOutTop___uZ10i!important}.Lightbox-module__slideOutBottom___SB5ws{animation-name:Lightbox-module__lbSlideOutBottom___GyYfC!important}.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:9997;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:9998}.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;max-width:100%;max-height:100%;width:auto;height:auto}.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}.Lightbox-module__caption___3e-22{z-index:9999;position:absolute;display:flex}.Lightbox-module__captionBlock___7wXOq{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.Lightbox-module__captionTextWrapper___uDnh6{position:relative;width:100%;height:100%}.Lightbox-module__captionText___6zbmg{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}.Lightbox-module__captionText___6zbmg.Lightbox-module__active___u7Yu8{opacity:1}.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__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__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}@keyframes Lightbox-module__lbFadeOut___0pD7Q{0%{opacity:1}to{opacity:0}}.Lightbox-module__fadeOut___h2fpQ{animation-name:Lightbox-module__lbFadeOut___0pD7Q!important}@keyframes Lightbox-module__lbSlideOutLeft___Z6pdg{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes Lightbox-module__lbSlideOutRight___B5cYY{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes Lightbox-module__lbSlideOutTop___uZ10i{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes Lightbox-module__lbSlideOutBottom___GyYfC{0%{transform:translateY(0)}to{transform:translateY(100%)}}.Lightbox-module__slideOutLeft___J-eMU{animation-name:Lightbox-module__lbSlideOutLeft___Z6pdg!important}.Lightbox-module__slideOutRight___iZUQz{animation-name:Lightbox-module__lbSlideOutRight___B5cYY!important}.Lightbox-module__slideOutTop___3TXF9{animation-name:Lightbox-module__lbSlideOutTop___uZ10i!important}.Lightbox-module__slideOutBottom___SB5ws{animation-name:Lightbox-module__lbSlideOutBottom___GyYfC!important}.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
|
@@ -1631,25 +1631,41 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
|
|
|
1631
1631
|
onClick: () => setOpen(true)
|
|
1632
1632
|
}
|
|
1633
1633
|
),
|
|
1634
|
-
/* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor })
|
|
1634
|
+
/* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor, activeEvent })
|
|
1635
1635
|
] });
|
|
1636
1636
|
}
|
|
1637
|
-
const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
1637
|
+
const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, portalId, isEditor }) => {
|
|
1638
1638
|
const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
|
|
1639
1639
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
1640
1640
|
const [splideKey, setSplideKey] = React.useState(0);
|
|
1641
1641
|
const [isClosing, setIsClosing] = React.useState(false);
|
|
1642
|
-
const [imageDimensions, setImageDimensions] = React.useState({});
|
|
1643
1642
|
const lightboxRef = React.useRef(null);
|
|
1644
1643
|
const prevSliderTypeRef = React.useRef(null);
|
|
1645
1644
|
const imageRef = React.useRef(null);
|
|
1646
|
-
const imgWrapperRef = React.useRef(null);
|
|
1647
1645
|
const isClosingRef = React.useRef(false);
|
|
1648
1646
|
const contentRef = React.useRef(null);
|
|
1649
1647
|
const animationEndHandlerRef = React.useRef(null);
|
|
1648
|
+
const appearAnimationEndHandlerRef = React.useRef(null);
|
|
1650
1649
|
const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
|
|
1651
1650
|
const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
|
|
1651
|
+
React.useEffect(() => {
|
|
1652
|
+
window.addEventListener("ArticleEditor.Layout:change", () => {
|
|
1653
|
+
var _a, _b;
|
|
1654
|
+
(_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
|
|
1655
|
+
});
|
|
1656
|
+
return () => {
|
|
1657
|
+
window.removeEventListener("ArticleEditor.Layout:change", () => {
|
|
1658
|
+
var _a, _b;
|
|
1659
|
+
(_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
|
|
1660
|
+
});
|
|
1661
|
+
};
|
|
1662
|
+
}, []);
|
|
1652
1663
|
const handleClose = React.useCallback(() => {
|
|
1664
|
+
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
|
1665
|
+
const colorAlpha = getColorAlpha(area.color);
|
|
1666
|
+
if (isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1667
|
+
document.body.style.backgroundColor = "";
|
|
1668
|
+
}
|
|
1653
1669
|
setIsClosing(true);
|
|
1654
1670
|
isClosingRef.current = true;
|
|
1655
1671
|
const handleAnimationEnd = (e) => {
|
|
@@ -1666,21 +1682,62 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1666
1682
|
animationEndHandlerRef.current = handleAnimationEnd;
|
|
1667
1683
|
contentRef.current.addEventListener("animationend", handleAnimationEnd);
|
|
1668
1684
|
}
|
|
1669
|
-
}, [onClose, appearDurationMs]);
|
|
1685
|
+
}, [onClose, appearDurationMs, area.color, isEditor]);
|
|
1670
1686
|
const handleBackdropClick = (e) => {
|
|
1671
|
-
if (!closeOnBackdropClick) return;
|
|
1672
1687
|
if (e.target === e.currentTarget) {
|
|
1673
1688
|
handleClose();
|
|
1674
1689
|
}
|
|
1675
1690
|
};
|
|
1676
1691
|
const handleImageWrapperClick = (e) => {
|
|
1677
|
-
|
|
1678
|
-
|
|
1692
|
+
var _a, _b;
|
|
1693
|
+
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1694
|
+
if (!rect) {
|
|
1695
|
+
if (e.target === e.currentTarget) {
|
|
1696
|
+
handleClose();
|
|
1697
|
+
}
|
|
1698
|
+
return;
|
|
1699
|
+
}
|
|
1700
|
+
let clientX;
|
|
1701
|
+
let clientY;
|
|
1702
|
+
if ("changedTouches" in e && e.changedTouches.length > 0) {
|
|
1703
|
+
clientX = e.changedTouches[0].clientX;
|
|
1704
|
+
clientY = e.changedTouches[0].clientY;
|
|
1705
|
+
} else if ("clientX" in e) {
|
|
1706
|
+
clientX = e.clientX;
|
|
1707
|
+
clientY = e.clientY;
|
|
1708
|
+
} else {
|
|
1709
|
+
return;
|
|
1710
|
+
}
|
|
1711
|
+
const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
|
|
1712
|
+
if (inside) {
|
|
1713
|
+
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1714
|
+
if (triggers.repeat === "close" && currentIndex === content.length - 1) {
|
|
1715
|
+
handleClose();
|
|
1716
|
+
} else {
|
|
1717
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
1718
|
+
}
|
|
1719
|
+
} else if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1720
|
+
const img2 = imageRef.current;
|
|
1721
|
+
if (img2) {
|
|
1722
|
+
const imgRect = img2.getBoundingClientRect();
|
|
1723
|
+
const clickX = clientX - imgRect.left;
|
|
1724
|
+
const clickY = clientY - imgRect.top;
|
|
1725
|
+
const imgWidth = imgRect.width;
|
|
1726
|
+
const imgHeight = imgRect.height;
|
|
1727
|
+
let dir;
|
|
1728
|
+
if (slider.direction === "horiz") {
|
|
1729
|
+
dir = clickX < imgWidth / 2 ? "-1" : "+1";
|
|
1730
|
+
} else {
|
|
1731
|
+
dir = clickY < imgHeight / 2 ? "-1" : "+1";
|
|
1732
|
+
}
|
|
1733
|
+
(_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
|
|
1734
|
+
}
|
|
1735
|
+
}
|
|
1736
|
+
} else {
|
|
1679
1737
|
handleClose();
|
|
1680
1738
|
}
|
|
1681
1739
|
};
|
|
1682
1740
|
const handleContentClick = (e) => {
|
|
1683
|
-
if (!closeOnBackdropClick) return;
|
|
1684
1741
|
const target = e.target;
|
|
1685
1742
|
const currentTarget = e.currentTarget;
|
|
1686
1743
|
if (target === currentTarget) {
|
|
@@ -1723,7 +1780,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1723
1780
|
}
|
|
1724
1781
|
};
|
|
1725
1782
|
React.useEffect(() => {
|
|
1726
|
-
if (!isOpen
|
|
1783
|
+
if (!isOpen) return;
|
|
1727
1784
|
const onKeyDown = (event) => {
|
|
1728
1785
|
if (event.key === "Escape") {
|
|
1729
1786
|
handleClose();
|
|
@@ -1741,7 +1798,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1741
1798
|
return () => {
|
|
1742
1799
|
window.removeEventListener("keydown", onKeyDown);
|
|
1743
1800
|
};
|
|
1744
|
-
}, [isOpen,
|
|
1801
|
+
}, [isOpen, handleClose, content.length]);
|
|
1745
1802
|
React.useEffect(() => {
|
|
1746
1803
|
if (isOpen) {
|
|
1747
1804
|
setCurrentIndex(0);
|
|
@@ -1761,73 +1818,38 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1761
1818
|
}
|
|
1762
1819
|
prevSliderTypeRef.current = slider.type;
|
|
1763
1820
|
}, [slider.type]);
|
|
1764
|
-
React.useEffect(() => {
|
|
1765
|
-
if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
|
|
1766
|
-
setImageDimensions({});
|
|
1767
|
-
return;
|
|
1768
|
-
}
|
|
1769
|
-
const img2 = imageRef.current;
|
|
1770
|
-
const wrapper2 = imgWrapperRef.current;
|
|
1771
|
-
const currentItem = content[currentIndex];
|
|
1772
|
-
if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
|
|
1773
|
-
setImageDimensions({});
|
|
1774
|
-
return;
|
|
1775
|
-
}
|
|
1776
|
-
const calculateDimensions = () => {
|
|
1777
|
-
if (!img2.naturalWidth || !img2.naturalHeight) return;
|
|
1778
|
-
const wrapperRect = wrapper2.getBoundingClientRect();
|
|
1779
|
-
const wrapperStyle = window.getComputedStyle(wrapper2);
|
|
1780
|
-
const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
|
|
1781
|
-
const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
|
|
1782
|
-
const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
|
|
1783
|
-
const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
|
|
1784
|
-
const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
|
|
1785
|
-
const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
|
|
1786
|
-
const containerRatio = contentWidth / contentHeight;
|
|
1787
|
-
const imgRatio = img2.naturalWidth / img2.naturalHeight;
|
|
1788
|
-
let width;
|
|
1789
|
-
let height;
|
|
1790
|
-
if (imgRatio > containerRatio) {
|
|
1791
|
-
width = contentWidth;
|
|
1792
|
-
height = contentWidth / imgRatio;
|
|
1793
|
-
} else {
|
|
1794
|
-
height = contentHeight;
|
|
1795
|
-
width = contentHeight * imgRatio;
|
|
1796
|
-
}
|
|
1797
|
-
setImageDimensions({ width, height });
|
|
1798
|
-
};
|
|
1799
|
-
if (img2.complete && img2.naturalWidth > 0) {
|
|
1800
|
-
calculateDimensions();
|
|
1801
|
-
} else {
|
|
1802
|
-
img2.onload = calculateDimensions;
|
|
1803
|
-
}
|
|
1804
|
-
const handleResize = () => calculateDimensions();
|
|
1805
|
-
window.addEventListener("resize", handleResize);
|
|
1806
|
-
return () => {
|
|
1807
|
-
window.removeEventListener("resize", handleResize);
|
|
1808
|
-
if (img2.onload) {
|
|
1809
|
-
img2.onload = null;
|
|
1810
|
-
}
|
|
1811
|
-
};
|
|
1812
|
-
}, [isOpen, currentIndex, content]);
|
|
1813
1821
|
React.useEffect(() => {
|
|
1814
1822
|
if (!isOpen) return;
|
|
1815
1823
|
const originalOverflow = document.body.style.overflow;
|
|
1816
1824
|
document.body.style.overflow = "hidden";
|
|
1817
1825
|
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
|
1818
|
-
|
|
1819
|
-
|
|
1826
|
+
const colorAlpha = getColorAlpha(area.color);
|
|
1827
|
+
const handleAppearAnimationEnd = (e) => {
|
|
1828
|
+
if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
|
|
1829
|
+
if (isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1830
|
+
document.body.style.backgroundColor = area.color;
|
|
1831
|
+
}
|
|
1832
|
+
if (contentRef.current && appearAnimationEndHandlerRef.current) {
|
|
1833
|
+
contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
|
|
1834
|
+
}
|
|
1835
|
+
appearAnimationEndHandlerRef.current = null;
|
|
1836
|
+
}
|
|
1837
|
+
};
|
|
1838
|
+
if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1839
|
+
appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
|
|
1840
|
+
contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
|
|
1820
1841
|
}
|
|
1821
1842
|
const preventScroll = (e) => e.preventDefault();
|
|
1822
1843
|
document.addEventListener("touchmove", preventScroll, { passive: false });
|
|
1823
1844
|
return () => {
|
|
1824
1845
|
document.body.style.overflow = originalOverflow;
|
|
1825
1846
|
document.removeEventListener("touchmove", preventScroll);
|
|
1826
|
-
if (
|
|
1827
|
-
|
|
1847
|
+
if (contentRef.current && appearAnimationEndHandlerRef.current) {
|
|
1848
|
+
contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
|
|
1849
|
+
appearAnimationEndHandlerRef.current = null;
|
|
1828
1850
|
}
|
|
1829
1851
|
};
|
|
1830
|
-
}, [isOpen]);
|
|
1852
|
+
}, [isOpen, area.color, isEditor]);
|
|
1831
1853
|
const handleArrowClick = (dir) => {
|
|
1832
1854
|
var _a;
|
|
1833
1855
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
|
|
@@ -1906,7 +1928,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1906
1928
|
return styles.fadeOut;
|
|
1907
1929
|
})();
|
|
1908
1930
|
React.useEffect(() => {
|
|
1909
|
-
if (!isOpen
|
|
1931
|
+
if (!isOpen) return;
|
|
1910
1932
|
const handleTouchEnd = (e) => {
|
|
1911
1933
|
if (isClosingRef.current) {
|
|
1912
1934
|
e.stopPropagation();
|
|
@@ -1918,7 +1940,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1918
1940
|
if (!rect) return;
|
|
1919
1941
|
const touch = e.changedTouches[0];
|
|
1920
1942
|
const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
|
|
1921
|
-
console.log("inside", rect.width, rect.height);
|
|
1922
1943
|
if (!inside) {
|
|
1923
1944
|
e.stopPropagation();
|
|
1924
1945
|
isClosingRef.current = true;
|
|
@@ -1936,7 +1957,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1936
1957
|
return () => {
|
|
1937
1958
|
document.removeEventListener("touchend", handleTouchEnd);
|
|
1938
1959
|
};
|
|
1939
|
-
}, [isOpen,
|
|
1960
|
+
}, [isOpen, handleClose, currentIndex]);
|
|
1940
1961
|
if (!isOpen && !isClosing) return null;
|
|
1941
1962
|
return reactDom.createPortal(
|
|
1942
1963
|
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1979,8 +2000,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1979
2000
|
animationTimingFunction: "ease",
|
|
1980
2001
|
animationFillMode: "both",
|
|
1981
2002
|
...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
|
|
1982
|
-
...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
|
|
1983
|
-
"--splide-speed": slider.duration || "500ms"
|
|
2003
|
+
...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
|
|
1984
2004
|
},
|
|
1985
2005
|
children: [
|
|
1986
2006
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2017,7 +2037,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2017
2037
|
return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2018
2038
|
"div",
|
|
2019
2039
|
{
|
|
2020
|
-
ref: index === currentIndex ? imgWrapperRef : null,
|
|
2021
2040
|
className: styles.imgWrapper,
|
|
2022
2041
|
onClick: handleImageWrapperClick,
|
|
2023
2042
|
style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
|
|
@@ -2032,14 +2051,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2032
2051
|
}),
|
|
2033
2052
|
src: item.image.url,
|
|
2034
2053
|
alt: item.image.name ?? "",
|
|
2035
|
-
onClick: onImageClick,
|
|
2054
|
+
onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
|
|
2036
2055
|
style: {
|
|
2037
2056
|
...imageStyle2,
|
|
2038
|
-
...item.image.objectFit === "contain"
|
|
2039
|
-
|
|
2040
|
-
height: `${imageDimensions.height}px`,
|
|
2041
|
-
maxWidth: "none",
|
|
2042
|
-
maxHeight: "none"
|
|
2057
|
+
...item.image.objectFit === "contain" ? {
|
|
2058
|
+
pointerEvents: "none"
|
|
2043
2059
|
} : {}
|
|
2044
2060
|
}
|
|
2045
2061
|
}
|
|
@@ -2154,6 +2170,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2154
2170
|
"data-styles": "caption",
|
|
2155
2171
|
className: styles.captionTextInner,
|
|
2156
2172
|
style: {
|
|
2173
|
+
"--link-hover-color": caption2.hover,
|
|
2157
2174
|
position: "relative"
|
|
2158
2175
|
},
|
|
2159
2176
|
children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
|
|
@@ -2231,6 +2248,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2231
2248
|
document.getElementById(portalId)
|
|
2232
2249
|
);
|
|
2233
2250
|
};
|
|
2251
|
+
const getColorAlpha = (color) => {
|
|
2252
|
+
const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
|
|
2253
|
+
if (rgbaMatch) {
|
|
2254
|
+
const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
|
|
2255
|
+
if (values.length === 4) {
|
|
2256
|
+
return values[3];
|
|
2257
|
+
}
|
|
2258
|
+
return 1;
|
|
2259
|
+
}
|
|
2260
|
+
const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
|
|
2261
|
+
if (hexMatch) {
|
|
2262
|
+
const alphaHex = hexMatch[1].substring(6, 8);
|
|
2263
|
+
return parseInt(alphaHex, 16) / 255;
|
|
2264
|
+
}
|
|
2265
|
+
if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
|
|
2266
|
+
return 1;
|
|
2267
|
+
}
|
|
2268
|
+
return 1;
|
|
2269
|
+
};
|
|
2234
2270
|
const LightboxComponent = {
|
|
2235
2271
|
element: LightboxGallery,
|
|
2236
2272
|
id: "lightbox",
|
|
@@ -2569,15 +2605,23 @@ const LightboxComponent = {
|
|
|
2569
2605
|
},
|
|
2570
2606
|
properties: {
|
|
2571
2607
|
top: {
|
|
2608
|
+
min: 0,
|
|
2609
|
+
step: 1,
|
|
2572
2610
|
type: "number"
|
|
2573
2611
|
},
|
|
2574
2612
|
left: {
|
|
2613
|
+
min: 0,
|
|
2614
|
+
step: 1,
|
|
2575
2615
|
type: "number"
|
|
2576
2616
|
},
|
|
2577
2617
|
right: {
|
|
2618
|
+
min: 0,
|
|
2619
|
+
step: 1,
|
|
2578
2620
|
type: "number"
|
|
2579
2621
|
},
|
|
2580
2622
|
bottom: {
|
|
2623
|
+
min: 0,
|
|
2624
|
+
step: 1,
|
|
2581
2625
|
type: "number"
|
|
2582
2626
|
}
|
|
2583
2627
|
}
|
|
@@ -2819,8 +2863,8 @@ const LightboxComponent = {
|
|
|
2819
2863
|
align: "center",
|
|
2820
2864
|
triggers: "clk",
|
|
2821
2865
|
grid: {
|
|
2822
|
-
height: 0.
|
|
2823
|
-
width: 0.
|
|
2866
|
+
height: 0.03,
|
|
2867
|
+
width: 0.03,
|
|
2824
2868
|
gap: 8e-3
|
|
2825
2869
|
},
|
|
2826
2870
|
offset: { x: 0, y: 0 },
|
|
@@ -2833,7 +2877,7 @@ const LightboxComponent = {
|
|
|
2833
2877
|
layout: {
|
|
2834
2878
|
position: "middle-center",
|
|
2835
2879
|
offset: { x: 0, y: 0 },
|
|
2836
|
-
padding: { top: 0, right: 0, bottom: 0, left: 0 }
|
|
2880
|
+
padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
|
|
2837
2881
|
},
|
|
2838
2882
|
controls: {
|
|
2839
2883
|
isActive: true,
|
package/dist/index.mjs
CHANGED
|
@@ -1629,25 +1629,41 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
|
|
|
1629
1629
|
onClick: () => setOpen(true)
|
|
1630
1630
|
}
|
|
1631
1631
|
),
|
|
1632
|
-
/* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor })
|
|
1632
|
+
/* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor, activeEvent })
|
|
1633
1633
|
] });
|
|
1634
1634
|
}
|
|
1635
|
-
const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
1635
|
+
const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, portalId, isEditor }) => {
|
|
1636
1636
|
const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
|
|
1637
1637
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
1638
1638
|
const [splideKey, setSplideKey] = React.useState(0);
|
|
1639
1639
|
const [isClosing, setIsClosing] = React.useState(false);
|
|
1640
|
-
const [imageDimensions, setImageDimensions] = React.useState({});
|
|
1641
1640
|
const lightboxRef = useRef(null);
|
|
1642
1641
|
const prevSliderTypeRef = useRef(null);
|
|
1643
1642
|
const imageRef = useRef(null);
|
|
1644
|
-
const imgWrapperRef = useRef(null);
|
|
1645
1643
|
const isClosingRef = useRef(false);
|
|
1646
1644
|
const contentRef = useRef(null);
|
|
1647
1645
|
const animationEndHandlerRef = useRef(null);
|
|
1646
|
+
const appearAnimationEndHandlerRef = useRef(null);
|
|
1648
1647
|
const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
|
|
1649
1648
|
const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
|
|
1649
|
+
useEffect(() => {
|
|
1650
|
+
window.addEventListener("ArticleEditor.Layout:change", () => {
|
|
1651
|
+
var _a, _b;
|
|
1652
|
+
(_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
|
|
1653
|
+
});
|
|
1654
|
+
return () => {
|
|
1655
|
+
window.removeEventListener("ArticleEditor.Layout:change", () => {
|
|
1656
|
+
var _a, _b;
|
|
1657
|
+
(_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
|
|
1658
|
+
});
|
|
1659
|
+
};
|
|
1660
|
+
}, []);
|
|
1650
1661
|
const handleClose = useCallback(() => {
|
|
1662
|
+
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
|
1663
|
+
const colorAlpha = getColorAlpha(area.color);
|
|
1664
|
+
if (isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1665
|
+
document.body.style.backgroundColor = "";
|
|
1666
|
+
}
|
|
1651
1667
|
setIsClosing(true);
|
|
1652
1668
|
isClosingRef.current = true;
|
|
1653
1669
|
const handleAnimationEnd = (e) => {
|
|
@@ -1664,21 +1680,62 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1664
1680
|
animationEndHandlerRef.current = handleAnimationEnd;
|
|
1665
1681
|
contentRef.current.addEventListener("animationend", handleAnimationEnd);
|
|
1666
1682
|
}
|
|
1667
|
-
}, [onClose, appearDurationMs]);
|
|
1683
|
+
}, [onClose, appearDurationMs, area.color, isEditor]);
|
|
1668
1684
|
const handleBackdropClick = (e) => {
|
|
1669
|
-
if (!closeOnBackdropClick) return;
|
|
1670
1685
|
if (e.target === e.currentTarget) {
|
|
1671
1686
|
handleClose();
|
|
1672
1687
|
}
|
|
1673
1688
|
};
|
|
1674
1689
|
const handleImageWrapperClick = (e) => {
|
|
1675
|
-
|
|
1676
|
-
|
|
1690
|
+
var _a, _b;
|
|
1691
|
+
const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
|
|
1692
|
+
if (!rect) {
|
|
1693
|
+
if (e.target === e.currentTarget) {
|
|
1694
|
+
handleClose();
|
|
1695
|
+
}
|
|
1696
|
+
return;
|
|
1697
|
+
}
|
|
1698
|
+
let clientX;
|
|
1699
|
+
let clientY;
|
|
1700
|
+
if ("changedTouches" in e && e.changedTouches.length > 0) {
|
|
1701
|
+
clientX = e.changedTouches[0].clientX;
|
|
1702
|
+
clientY = e.changedTouches[0].clientY;
|
|
1703
|
+
} else if ("clientX" in e) {
|
|
1704
|
+
clientX = e.clientX;
|
|
1705
|
+
clientY = e.clientY;
|
|
1706
|
+
} else {
|
|
1707
|
+
return;
|
|
1708
|
+
}
|
|
1709
|
+
const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
|
|
1710
|
+
if (inside) {
|
|
1711
|
+
if (triggers.type === "click" && triggers.switch === "image") {
|
|
1712
|
+
if (triggers.repeat === "close" && currentIndex === content.length - 1) {
|
|
1713
|
+
handleClose();
|
|
1714
|
+
} else {
|
|
1715
|
+
(_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
|
|
1716
|
+
}
|
|
1717
|
+
} else if (triggers.type === "click" && triggers.switch === "50/50") {
|
|
1718
|
+
const img2 = imageRef.current;
|
|
1719
|
+
if (img2) {
|
|
1720
|
+
const imgRect = img2.getBoundingClientRect();
|
|
1721
|
+
const clickX = clientX - imgRect.left;
|
|
1722
|
+
const clickY = clientY - imgRect.top;
|
|
1723
|
+
const imgWidth = imgRect.width;
|
|
1724
|
+
const imgHeight = imgRect.height;
|
|
1725
|
+
let dir;
|
|
1726
|
+
if (slider.direction === "horiz") {
|
|
1727
|
+
dir = clickX < imgWidth / 2 ? "-1" : "+1";
|
|
1728
|
+
} else {
|
|
1729
|
+
dir = clickY < imgHeight / 2 ? "-1" : "+1";
|
|
1730
|
+
}
|
|
1731
|
+
(_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
|
|
1732
|
+
}
|
|
1733
|
+
}
|
|
1734
|
+
} else {
|
|
1677
1735
|
handleClose();
|
|
1678
1736
|
}
|
|
1679
1737
|
};
|
|
1680
1738
|
const handleContentClick = (e) => {
|
|
1681
|
-
if (!closeOnBackdropClick) return;
|
|
1682
1739
|
const target = e.target;
|
|
1683
1740
|
const currentTarget = e.currentTarget;
|
|
1684
1741
|
if (target === currentTarget) {
|
|
@@ -1721,7 +1778,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1721
1778
|
}
|
|
1722
1779
|
};
|
|
1723
1780
|
useEffect(() => {
|
|
1724
|
-
if (!isOpen
|
|
1781
|
+
if (!isOpen) return;
|
|
1725
1782
|
const onKeyDown = (event) => {
|
|
1726
1783
|
if (event.key === "Escape") {
|
|
1727
1784
|
handleClose();
|
|
@@ -1739,7 +1796,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1739
1796
|
return () => {
|
|
1740
1797
|
window.removeEventListener("keydown", onKeyDown);
|
|
1741
1798
|
};
|
|
1742
|
-
}, [isOpen,
|
|
1799
|
+
}, [isOpen, handleClose, content.length]);
|
|
1743
1800
|
useEffect(() => {
|
|
1744
1801
|
if (isOpen) {
|
|
1745
1802
|
setCurrentIndex(0);
|
|
@@ -1759,73 +1816,38 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1759
1816
|
}
|
|
1760
1817
|
prevSliderTypeRef.current = slider.type;
|
|
1761
1818
|
}, [slider.type]);
|
|
1762
|
-
useEffect(() => {
|
|
1763
|
-
if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
|
|
1764
|
-
setImageDimensions({});
|
|
1765
|
-
return;
|
|
1766
|
-
}
|
|
1767
|
-
const img2 = imageRef.current;
|
|
1768
|
-
const wrapper2 = imgWrapperRef.current;
|
|
1769
|
-
const currentItem = content[currentIndex];
|
|
1770
|
-
if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
|
|
1771
|
-
setImageDimensions({});
|
|
1772
|
-
return;
|
|
1773
|
-
}
|
|
1774
|
-
const calculateDimensions = () => {
|
|
1775
|
-
if (!img2.naturalWidth || !img2.naturalHeight) return;
|
|
1776
|
-
const wrapperRect = wrapper2.getBoundingClientRect();
|
|
1777
|
-
const wrapperStyle = window.getComputedStyle(wrapper2);
|
|
1778
|
-
const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
|
|
1779
|
-
const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
|
|
1780
|
-
const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
|
|
1781
|
-
const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
|
|
1782
|
-
const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
|
|
1783
|
-
const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
|
|
1784
|
-
const containerRatio = contentWidth / contentHeight;
|
|
1785
|
-
const imgRatio = img2.naturalWidth / img2.naturalHeight;
|
|
1786
|
-
let width;
|
|
1787
|
-
let height;
|
|
1788
|
-
if (imgRatio > containerRatio) {
|
|
1789
|
-
width = contentWidth;
|
|
1790
|
-
height = contentWidth / imgRatio;
|
|
1791
|
-
} else {
|
|
1792
|
-
height = contentHeight;
|
|
1793
|
-
width = contentHeight * imgRatio;
|
|
1794
|
-
}
|
|
1795
|
-
setImageDimensions({ width, height });
|
|
1796
|
-
};
|
|
1797
|
-
if (img2.complete && img2.naturalWidth > 0) {
|
|
1798
|
-
calculateDimensions();
|
|
1799
|
-
} else {
|
|
1800
|
-
img2.onload = calculateDimensions;
|
|
1801
|
-
}
|
|
1802
|
-
const handleResize = () => calculateDimensions();
|
|
1803
|
-
window.addEventListener("resize", handleResize);
|
|
1804
|
-
return () => {
|
|
1805
|
-
window.removeEventListener("resize", handleResize);
|
|
1806
|
-
if (img2.onload) {
|
|
1807
|
-
img2.onload = null;
|
|
1808
|
-
}
|
|
1809
|
-
};
|
|
1810
|
-
}, [isOpen, currentIndex, content]);
|
|
1811
1819
|
useEffect(() => {
|
|
1812
1820
|
if (!isOpen) return;
|
|
1813
1821
|
const originalOverflow = document.body.style.overflow;
|
|
1814
1822
|
document.body.style.overflow = "hidden";
|
|
1815
1823
|
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
|
1816
|
-
|
|
1817
|
-
|
|
1824
|
+
const colorAlpha = getColorAlpha(area.color);
|
|
1825
|
+
const handleAppearAnimationEnd = (e) => {
|
|
1826
|
+
if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
|
|
1827
|
+
if (isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1828
|
+
document.body.style.backgroundColor = area.color;
|
|
1829
|
+
}
|
|
1830
|
+
if (contentRef.current && appearAnimationEndHandlerRef.current) {
|
|
1831
|
+
contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
|
|
1832
|
+
}
|
|
1833
|
+
appearAnimationEndHandlerRef.current = null;
|
|
1834
|
+
}
|
|
1835
|
+
};
|
|
1836
|
+
if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
|
|
1837
|
+
appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
|
|
1838
|
+
contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
|
|
1818
1839
|
}
|
|
1819
1840
|
const preventScroll = (e) => e.preventDefault();
|
|
1820
1841
|
document.addEventListener("touchmove", preventScroll, { passive: false });
|
|
1821
1842
|
return () => {
|
|
1822
1843
|
document.body.style.overflow = originalOverflow;
|
|
1823
1844
|
document.removeEventListener("touchmove", preventScroll);
|
|
1824
|
-
if (
|
|
1825
|
-
|
|
1845
|
+
if (contentRef.current && appearAnimationEndHandlerRef.current) {
|
|
1846
|
+
contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
|
|
1847
|
+
appearAnimationEndHandlerRef.current = null;
|
|
1826
1848
|
}
|
|
1827
1849
|
};
|
|
1828
|
-
}, [isOpen]);
|
|
1850
|
+
}, [isOpen, area.color, isEditor]);
|
|
1829
1851
|
const handleArrowClick = (dir) => {
|
|
1830
1852
|
var _a;
|
|
1831
1853
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
|
|
@@ -1904,7 +1926,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1904
1926
|
return styles.fadeOut;
|
|
1905
1927
|
})();
|
|
1906
1928
|
useEffect(() => {
|
|
1907
|
-
if (!isOpen
|
|
1929
|
+
if (!isOpen) return;
|
|
1908
1930
|
const handleTouchEnd = (e) => {
|
|
1909
1931
|
if (isClosingRef.current) {
|
|
1910
1932
|
e.stopPropagation();
|
|
@@ -1916,7 +1938,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1916
1938
|
if (!rect) return;
|
|
1917
1939
|
const touch = e.changedTouches[0];
|
|
1918
1940
|
const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
|
|
1919
|
-
console.log("inside", rect.width, rect.height);
|
|
1920
1941
|
if (!inside) {
|
|
1921
1942
|
e.stopPropagation();
|
|
1922
1943
|
isClosingRef.current = true;
|
|
@@ -1934,7 +1955,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1934
1955
|
return () => {
|
|
1935
1956
|
document.removeEventListener("touchend", handleTouchEnd);
|
|
1936
1957
|
};
|
|
1937
|
-
}, [isOpen,
|
|
1958
|
+
}, [isOpen, handleClose, currentIndex]);
|
|
1938
1959
|
if (!isOpen && !isClosing) return null;
|
|
1939
1960
|
return createPortal(
|
|
1940
1961
|
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1977,8 +1998,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
1977
1998
|
animationTimingFunction: "ease",
|
|
1978
1999
|
animationFillMode: "both",
|
|
1979
2000
|
...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
|
|
1980
|
-
...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
|
|
1981
|
-
"--splide-speed": slider.duration || "500ms"
|
|
2001
|
+
...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
|
|
1982
2002
|
},
|
|
1983
2003
|
children: [
|
|
1984
2004
|
/* @__PURE__ */ jsx(
|
|
@@ -2015,7 +2035,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2015
2035
|
return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
|
|
2016
2036
|
"div",
|
|
2017
2037
|
{
|
|
2018
|
-
ref: index === currentIndex ? imgWrapperRef : null,
|
|
2019
2038
|
className: styles.imgWrapper,
|
|
2020
2039
|
onClick: handleImageWrapperClick,
|
|
2021
2040
|
style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
|
|
@@ -2030,14 +2049,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2030
2049
|
}),
|
|
2031
2050
|
src: item.image.url,
|
|
2032
2051
|
alt: item.image.name ?? "",
|
|
2033
|
-
onClick: onImageClick,
|
|
2052
|
+
onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
|
|
2034
2053
|
style: {
|
|
2035
2054
|
...imageStyle2,
|
|
2036
|
-
...item.image.objectFit === "contain"
|
|
2037
|
-
|
|
2038
|
-
height: `${imageDimensions.height}px`,
|
|
2039
|
-
maxWidth: "none",
|
|
2040
|
-
maxHeight: "none"
|
|
2055
|
+
...item.image.objectFit === "contain" ? {
|
|
2056
|
+
pointerEvents: "none"
|
|
2041
2057
|
} : {}
|
|
2042
2058
|
}
|
|
2043
2059
|
}
|
|
@@ -2152,6 +2168,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2152
2168
|
"data-styles": "caption",
|
|
2153
2169
|
className: styles.captionTextInner,
|
|
2154
2170
|
style: {
|
|
2171
|
+
"--link-hover-color": caption2.hover,
|
|
2155
2172
|
position: "relative"
|
|
2156
2173
|
},
|
|
2157
2174
|
children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
|
|
@@ -2229,6 +2246,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
|
|
|
2229
2246
|
document.getElementById(portalId)
|
|
2230
2247
|
);
|
|
2231
2248
|
};
|
|
2249
|
+
const getColorAlpha = (color) => {
|
|
2250
|
+
const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
|
|
2251
|
+
if (rgbaMatch) {
|
|
2252
|
+
const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
|
|
2253
|
+
if (values.length === 4) {
|
|
2254
|
+
return values[3];
|
|
2255
|
+
}
|
|
2256
|
+
return 1;
|
|
2257
|
+
}
|
|
2258
|
+
const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
|
|
2259
|
+
if (hexMatch) {
|
|
2260
|
+
const alphaHex = hexMatch[1].substring(6, 8);
|
|
2261
|
+
return parseInt(alphaHex, 16) / 255;
|
|
2262
|
+
}
|
|
2263
|
+
if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
|
|
2264
|
+
return 1;
|
|
2265
|
+
}
|
|
2266
|
+
return 1;
|
|
2267
|
+
};
|
|
2232
2268
|
const LightboxComponent = {
|
|
2233
2269
|
element: LightboxGallery,
|
|
2234
2270
|
id: "lightbox",
|
|
@@ -2567,15 +2603,23 @@ const LightboxComponent = {
|
|
|
2567
2603
|
},
|
|
2568
2604
|
properties: {
|
|
2569
2605
|
top: {
|
|
2606
|
+
min: 0,
|
|
2607
|
+
step: 1,
|
|
2570
2608
|
type: "number"
|
|
2571
2609
|
},
|
|
2572
2610
|
left: {
|
|
2611
|
+
min: 0,
|
|
2612
|
+
step: 1,
|
|
2573
2613
|
type: "number"
|
|
2574
2614
|
},
|
|
2575
2615
|
right: {
|
|
2616
|
+
min: 0,
|
|
2617
|
+
step: 1,
|
|
2576
2618
|
type: "number"
|
|
2577
2619
|
},
|
|
2578
2620
|
bottom: {
|
|
2621
|
+
min: 0,
|
|
2622
|
+
step: 1,
|
|
2579
2623
|
type: "number"
|
|
2580
2624
|
}
|
|
2581
2625
|
}
|
|
@@ -2817,8 +2861,8 @@ const LightboxComponent = {
|
|
|
2817
2861
|
align: "center",
|
|
2818
2862
|
triggers: "clk",
|
|
2819
2863
|
grid: {
|
|
2820
|
-
height: 0.
|
|
2821
|
-
width: 0.
|
|
2864
|
+
height: 0.03,
|
|
2865
|
+
width: 0.03,
|
|
2822
2866
|
gap: 8e-3
|
|
2823
2867
|
},
|
|
2824
2868
|
offset: { x: 0, y: 0 },
|
|
@@ -2831,7 +2875,7 @@ const LightboxComponent = {
|
|
|
2831
2875
|
layout: {
|
|
2832
2876
|
position: "middle-center",
|
|
2833
2877
|
offset: { x: 0, y: 0 },
|
|
2834
|
-
padding: { top: 0, right: 0, bottom: 0, left: 0 }
|
|
2878
|
+
padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
|
|
2835
2879
|
},
|
|
2836
2880
|
controls: {
|
|
2837
2881
|
isActive: true,
|