@cntrl-site/components 0.1.0-22 → 0.1.0-24
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 +135 -48
- package/dist/index.mjs +135 -48
- 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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{position:absolute;display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;width:100%;height:100%;overflow:hidden}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;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)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbImage___OJ19m{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___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}.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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{position:absolute;display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;width:100%;height:100%;overflow:hidden}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;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)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbImage___OJ19m{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___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}.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
|
@@ -1450,6 +1450,7 @@ const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
|
|
|
1450
1450
|
const contain = "LightBox-module__contain___8-yaS";
|
|
1451
1451
|
const cover = "LightBox-module__cover___hNvOG";
|
|
1452
1452
|
const caption = "LightBox-module__caption___b6L2I";
|
|
1453
|
+
const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
|
|
1453
1454
|
const arrow = "LightBox-module__arrow___iz38X";
|
|
1454
1455
|
const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
|
|
1455
1456
|
const nextArrow = "LightBox-module__nextArrow___zkAQN";
|
|
@@ -1469,6 +1470,7 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
|
|
|
1469
1470
|
const slideInRight = "LightBox-module__slideInRight___S-pPp";
|
|
1470
1471
|
const slideInTop = "LightBox-module__slideInTop___DFdAj";
|
|
1471
1472
|
const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
|
|
1473
|
+
const scaleSlide = "LightBox-module__scaleSlide___vZriG";
|
|
1472
1474
|
const styles = {
|
|
1473
1475
|
backdropStyle,
|
|
1474
1476
|
contentStyle,
|
|
@@ -1477,6 +1479,7 @@ const styles = {
|
|
|
1477
1479
|
contain,
|
|
1478
1480
|
cover,
|
|
1479
1481
|
caption,
|
|
1482
|
+
lightboxSplide,
|
|
1480
1483
|
arrow,
|
|
1481
1484
|
arrowVertical,
|
|
1482
1485
|
nextArrow,
|
|
@@ -1495,30 +1498,31 @@ const styles = {
|
|
|
1495
1498
|
slideInLeft,
|
|
1496
1499
|
slideInRight,
|
|
1497
1500
|
slideInTop,
|
|
1498
|
-
slideInBottom
|
|
1501
|
+
slideInBottom,
|
|
1502
|
+
scaleSlide
|
|
1499
1503
|
};
|
|
1500
1504
|
const getPositionStyles = (position, offset) => {
|
|
1501
1505
|
const styles2 = {};
|
|
1502
1506
|
const [vertical, horizontal] = position.split("-");
|
|
1503
1507
|
if (vertical === "top") {
|
|
1504
|
-
styles2.top =
|
|
1508
|
+
styles2.top = "0";
|
|
1505
1509
|
styles2.bottom = "auto";
|
|
1506
1510
|
} else if (vertical === "middle") {
|
|
1507
1511
|
styles2.top = "50%";
|
|
1508
1512
|
styles2.bottom = "auto";
|
|
1509
1513
|
} else if (vertical === "bottom") {
|
|
1510
1514
|
styles2.top = "auto";
|
|
1511
|
-
styles2.bottom =
|
|
1515
|
+
styles2.bottom = "0";
|
|
1512
1516
|
}
|
|
1513
1517
|
if (horizontal === "left") {
|
|
1514
|
-
styles2.left =
|
|
1518
|
+
styles2.left = "0";
|
|
1515
1519
|
styles2.right = "auto";
|
|
1516
1520
|
} else if (horizontal === "center") {
|
|
1517
1521
|
styles2.left = "50%";
|
|
1518
1522
|
styles2.right = "auto";
|
|
1519
1523
|
} else if (horizontal === "right") {
|
|
1520
1524
|
styles2.left = "auto";
|
|
1521
|
-
styles2.right =
|
|
1525
|
+
styles2.right = "0";
|
|
1522
1526
|
}
|
|
1523
1527
|
if (vertical === "middle" && horizontal === "center") {
|
|
1524
1528
|
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
@@ -1526,6 +1530,8 @@ const getPositionStyles = (position, offset) => {
|
|
|
1526
1530
|
styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
|
|
1527
1531
|
} else if (horizontal === "center") {
|
|
1528
1532
|
styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
|
|
1533
|
+
} else {
|
|
1534
|
+
styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
|
|
1529
1535
|
}
|
|
1530
1536
|
return styles2;
|
|
1531
1537
|
};
|
|
@@ -1556,6 +1562,7 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
|
|
|
1556
1562
|
const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
|
|
1557
1563
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
1558
1564
|
const lightboxRef = React.useRef(null);
|
|
1565
|
+
const resizeObserverRef = React.useRef(null);
|
|
1559
1566
|
const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
|
|
1560
1567
|
const handleBackdropClick = (e) => {
|
|
1561
1568
|
if (!closeOnBackdropClick) return;
|
|
@@ -1615,6 +1622,49 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1615
1622
|
React.useEffect(() => {
|
|
1616
1623
|
if (isOpen) setCurrentIndex(0);
|
|
1617
1624
|
}, [isOpen]);
|
|
1625
|
+
React.useEffect(() => {
|
|
1626
|
+
if (!isOpen) return;
|
|
1627
|
+
if (resizeObserverRef.current) {
|
|
1628
|
+
resizeObserverRef.current.disconnect();
|
|
1629
|
+
resizeObserverRef.current = null;
|
|
1630
|
+
}
|
|
1631
|
+
const timeoutId = setTimeout(() => {
|
|
1632
|
+
const activeSlide = document.querySelector(".splide__slide.is-active");
|
|
1633
|
+
if (!activeSlide) return;
|
|
1634
|
+
const img2 = activeSlide.querySelector("img");
|
|
1635
|
+
const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
|
|
1636
|
+
if (!img2 || !container) return;
|
|
1637
|
+
const updateImageSize = () => {
|
|
1638
|
+
if (!img2.naturalWidth || !img2.naturalHeight) return;
|
|
1639
|
+
const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
|
|
1640
|
+
const containerWidth = container.clientWidth;
|
|
1641
|
+
const containerHeight = container.clientHeight;
|
|
1642
|
+
const containerAspectRatio = containerWidth / containerHeight;
|
|
1643
|
+
if (imageAspectRatio > containerAspectRatio) {
|
|
1644
|
+
img2.style.width = "100%";
|
|
1645
|
+
} else {
|
|
1646
|
+
img2.style.height = "100%";
|
|
1647
|
+
}
|
|
1648
|
+
};
|
|
1649
|
+
if (img2.complete) {
|
|
1650
|
+
updateImageSize();
|
|
1651
|
+
} else {
|
|
1652
|
+
img2.onload = updateImageSize;
|
|
1653
|
+
}
|
|
1654
|
+
resizeObserverRef.current = new ResizeObserver(() => {
|
|
1655
|
+
updateImageSize();
|
|
1656
|
+
});
|
|
1657
|
+
resizeObserverRef.current.observe(container);
|
|
1658
|
+
resizeObserverRef.current.observe(img2);
|
|
1659
|
+
}, 0);
|
|
1660
|
+
return () => {
|
|
1661
|
+
clearTimeout(timeoutId);
|
|
1662
|
+
if (resizeObserverRef.current) {
|
|
1663
|
+
resizeObserverRef.current.disconnect();
|
|
1664
|
+
resizeObserverRef.current = null;
|
|
1665
|
+
}
|
|
1666
|
+
};
|
|
1667
|
+
}, [isOpen, currentIndex, content]);
|
|
1618
1668
|
const handleArrowClick = (dir) => {
|
|
1619
1669
|
var _a;
|
|
1620
1670
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
|
|
@@ -1623,6 +1673,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1623
1673
|
const appearClass = (() => {
|
|
1624
1674
|
if (appear.type === "fade in") return styles.fadeIn;
|
|
1625
1675
|
if (appear.type === "slide in") {
|
|
1676
|
+
return "";
|
|
1677
|
+
}
|
|
1678
|
+
if (appear.type === "mix") return styles.fadeIn;
|
|
1679
|
+
return styles.fadeIn;
|
|
1680
|
+
})();
|
|
1681
|
+
const backdropAppearClass = (() => {
|
|
1682
|
+
if (appear.type === "fade in") return styles.fadeIn;
|
|
1683
|
+
if (appear.type === "slide in" || appear.type === "mix") {
|
|
1626
1684
|
switch (appear.direction) {
|
|
1627
1685
|
case "left":
|
|
1628
1686
|
return styles.slideInLeft;
|
|
@@ -1643,7 +1701,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1643
1701
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1644
1702
|
"div",
|
|
1645
1703
|
{
|
|
1646
|
-
className: cn(styles.backdropStyle,
|
|
1704
|
+
className: cn(styles.backdropStyle, backdropAppearClass),
|
|
1647
1705
|
style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
|
|
1648
1706
|
onClick: handleBackdropClick,
|
|
1649
1707
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1655,6 +1713,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1655
1713
|
animationDuration: `${appearDurationMs}ms`,
|
|
1656
1714
|
animationTimingFunction: "ease",
|
|
1657
1715
|
animationFillMode: "both",
|
|
1716
|
+
...appear.type === "mix" && { animationDelay: "0.5s" },
|
|
1658
1717
|
"--splide-speed": triggers.duration || "500ms"
|
|
1659
1718
|
},
|
|
1660
1719
|
children: [
|
|
@@ -1665,6 +1724,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1665
1724
|
setCurrentIndex(splide.index);
|
|
1666
1725
|
},
|
|
1667
1726
|
ref: lightboxRef,
|
|
1727
|
+
className: styles.lightboxSplide,
|
|
1668
1728
|
options: {
|
|
1669
1729
|
arrows: false,
|
|
1670
1730
|
speed: triggers.duration ? parseInt(triggers.duration) : 500,
|
|
@@ -1678,23 +1738,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1678
1738
|
padding: 0,
|
|
1679
1739
|
rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
|
|
1680
1740
|
},
|
|
1681
|
-
style: {
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1741
|
+
style: { "--splide-speed": triggers.duration || "500ms" },
|
|
1742
|
+
children: content.map((item, index) => {
|
|
1743
|
+
const positionStyles = getPositionStyles(layout.position, layout.offset);
|
|
1744
|
+
const imageStyle2 = slider.type === "scale" ? (() => {
|
|
1745
|
+
const { transform, ...restStyles } = positionStyles;
|
|
1746
|
+
return {
|
|
1747
|
+
...restStyles,
|
|
1748
|
+
"--position-transform": transform || "none"
|
|
1749
|
+
};
|
|
1750
|
+
})() : positionStyles;
|
|
1751
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1752
|
+
"div",
|
|
1753
|
+
{
|
|
1754
|
+
className: styles.imgWrapper,
|
|
1755
|
+
onClick: handleImageWrapperClick,
|
|
1756
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1757
|
+
"img",
|
|
1758
|
+
{
|
|
1759
|
+
className: cn(styles.imageStyle, {
|
|
1760
|
+
[styles.contain]: item.image.objectFit === "contain",
|
|
1761
|
+
[styles.cover]: item.image.objectFit === "cover",
|
|
1762
|
+
[styles.scaleSlide]: slider.type === "scale"
|
|
1763
|
+
}),
|
|
1764
|
+
src: item.image.url,
|
|
1765
|
+
alt: item.image.name ?? "",
|
|
1766
|
+
onClick: onImageClick,
|
|
1767
|
+
style: imageStyle2
|
|
1768
|
+
}
|
|
1769
|
+
)
|
|
1770
|
+
}
|
|
1771
|
+
) }, index);
|
|
1772
|
+
})
|
|
1698
1773
|
}
|
|
1699
1774
|
),
|
|
1700
1775
|
controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1922,8 +1997,8 @@ const LightboxComponent = {
|
|
|
1922
1997
|
type: "string",
|
|
1923
1998
|
title: "FROM",
|
|
1924
1999
|
display: {
|
|
1925
|
-
|
|
1926
|
-
|
|
2000
|
+
type: "direction-control",
|
|
2001
|
+
visible: false
|
|
1927
2002
|
},
|
|
1928
2003
|
enum: ["top", "left", "right", "bottom"]
|
|
1929
2004
|
},
|
|
@@ -1953,8 +2028,8 @@ const LightboxComponent = {
|
|
|
1953
2028
|
switch: {
|
|
1954
2029
|
type: "string",
|
|
1955
2030
|
display: {
|
|
1956
|
-
|
|
1957
|
-
|
|
2031
|
+
type: "ratio-group",
|
|
2032
|
+
visible: false
|
|
1958
2033
|
},
|
|
1959
2034
|
enum: ["image", "50/50"]
|
|
1960
2035
|
},
|
|
@@ -1962,8 +2037,8 @@ const LightboxComponent = {
|
|
|
1962
2037
|
type: "string",
|
|
1963
2038
|
label: "T",
|
|
1964
2039
|
display: {
|
|
1965
|
-
|
|
1966
|
-
|
|
2040
|
+
type: "step-selector",
|
|
2041
|
+
visible: false
|
|
1967
2042
|
},
|
|
1968
2043
|
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
1969
2044
|
}
|
|
@@ -2046,7 +2121,8 @@ const LightboxComponent = {
|
|
|
2046
2121
|
type: "number",
|
|
2047
2122
|
label: "H",
|
|
2048
2123
|
display: {
|
|
2049
|
-
type: "numeric-input"
|
|
2124
|
+
type: "numeric-input",
|
|
2125
|
+
visible: false
|
|
2050
2126
|
}
|
|
2051
2127
|
},
|
|
2052
2128
|
width: {
|
|
@@ -2370,6 +2446,7 @@ const LightboxComponent = {
|
|
|
2370
2446
|
triggers: "clk",
|
|
2371
2447
|
grid: {
|
|
2372
2448
|
height: 60,
|
|
2449
|
+
width: 60,
|
|
2373
2450
|
gap: 8
|
|
2374
2451
|
},
|
|
2375
2452
|
offset: { x: 0, y: 0 },
|
|
@@ -2431,22 +2508,22 @@ const LightboxComponent = {
|
|
|
2431
2508
|
},
|
|
2432
2509
|
{
|
|
2433
2510
|
if: {
|
|
2434
|
-
name: "
|
|
2435
|
-
value: "
|
|
2511
|
+
name: "slider.direction",
|
|
2512
|
+
value: "vert"
|
|
2436
2513
|
},
|
|
2437
2514
|
then: {
|
|
2438
|
-
name: "properties.lightboxBlock.properties.
|
|
2439
|
-
value:
|
|
2515
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
|
|
2516
|
+
value: true
|
|
2440
2517
|
}
|
|
2441
2518
|
},
|
|
2442
2519
|
{
|
|
2443
2520
|
if: {
|
|
2444
|
-
name: "
|
|
2445
|
-
value: "
|
|
2521
|
+
name: "slider.direction",
|
|
2522
|
+
value: "horiz"
|
|
2446
2523
|
},
|
|
2447
2524
|
then: {
|
|
2448
|
-
name: "properties.lightboxBlock.properties.
|
|
2449
|
-
value:
|
|
2525
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
|
|
2526
|
+
value: true
|
|
2450
2527
|
}
|
|
2451
2528
|
},
|
|
2452
2529
|
{
|
|
@@ -2455,48 +2532,58 @@ const LightboxComponent = {
|
|
|
2455
2532
|
value: "vert"
|
|
2456
2533
|
},
|
|
2457
2534
|
then: {
|
|
2458
|
-
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.
|
|
2459
|
-
value:
|
|
2535
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
|
|
2536
|
+
value: false
|
|
2460
2537
|
}
|
|
2461
2538
|
},
|
|
2462
2539
|
{
|
|
2463
2540
|
if: {
|
|
2464
2541
|
name: "slider.direction",
|
|
2465
|
-
value: "
|
|
2542
|
+
value: "horiz"
|
|
2466
2543
|
},
|
|
2467
2544
|
then: {
|
|
2468
|
-
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.
|
|
2545
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
|
|
2469
2546
|
value: false
|
|
2470
2547
|
}
|
|
2471
2548
|
},
|
|
2472
2549
|
{
|
|
2473
2550
|
if: {
|
|
2474
2551
|
name: "appear.type",
|
|
2475
|
-
value: "
|
|
2552
|
+
value: "mix"
|
|
2476
2553
|
},
|
|
2477
2554
|
then: {
|
|
2478
2555
|
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2479
|
-
value:
|
|
2556
|
+
value: true
|
|
2557
|
+
}
|
|
2558
|
+
},
|
|
2559
|
+
{
|
|
2560
|
+
if: {
|
|
2561
|
+
name: "appear.type",
|
|
2562
|
+
value: "slide in"
|
|
2563
|
+
},
|
|
2564
|
+
then: {
|
|
2565
|
+
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2566
|
+
value: true
|
|
2480
2567
|
}
|
|
2481
2568
|
},
|
|
2482
2569
|
{
|
|
2483
2570
|
if: {
|
|
2484
2571
|
name: "triggers.type",
|
|
2485
|
-
value: "
|
|
2572
|
+
value: "click"
|
|
2486
2573
|
},
|
|
2487
2574
|
then: {
|
|
2488
2575
|
name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
|
|
2489
|
-
value:
|
|
2576
|
+
value: true
|
|
2490
2577
|
}
|
|
2491
2578
|
},
|
|
2492
2579
|
{
|
|
2493
2580
|
if: {
|
|
2494
2581
|
name: "triggers.type",
|
|
2495
|
-
value: "
|
|
2582
|
+
value: "click"
|
|
2496
2583
|
},
|
|
2497
2584
|
then: {
|
|
2498
2585
|
name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
|
|
2499
|
-
value:
|
|
2586
|
+
value: true
|
|
2500
2587
|
}
|
|
2501
2588
|
}
|
|
2502
2589
|
]
|
package/dist/index.mjs
CHANGED
|
@@ -1448,6 +1448,7 @@ const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
|
|
|
1448
1448
|
const contain = "LightBox-module__contain___8-yaS";
|
|
1449
1449
|
const cover = "LightBox-module__cover___hNvOG";
|
|
1450
1450
|
const caption = "LightBox-module__caption___b6L2I";
|
|
1451
|
+
const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
|
|
1451
1452
|
const arrow = "LightBox-module__arrow___iz38X";
|
|
1452
1453
|
const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
|
|
1453
1454
|
const nextArrow = "LightBox-module__nextArrow___zkAQN";
|
|
@@ -1467,6 +1468,7 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
|
|
|
1467
1468
|
const slideInRight = "LightBox-module__slideInRight___S-pPp";
|
|
1468
1469
|
const slideInTop = "LightBox-module__slideInTop___DFdAj";
|
|
1469
1470
|
const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
|
|
1471
|
+
const scaleSlide = "LightBox-module__scaleSlide___vZriG";
|
|
1470
1472
|
const styles = {
|
|
1471
1473
|
backdropStyle,
|
|
1472
1474
|
contentStyle,
|
|
@@ -1475,6 +1477,7 @@ const styles = {
|
|
|
1475
1477
|
contain,
|
|
1476
1478
|
cover,
|
|
1477
1479
|
caption,
|
|
1480
|
+
lightboxSplide,
|
|
1478
1481
|
arrow,
|
|
1479
1482
|
arrowVertical,
|
|
1480
1483
|
nextArrow,
|
|
@@ -1493,30 +1496,31 @@ const styles = {
|
|
|
1493
1496
|
slideInLeft,
|
|
1494
1497
|
slideInRight,
|
|
1495
1498
|
slideInTop,
|
|
1496
|
-
slideInBottom
|
|
1499
|
+
slideInBottom,
|
|
1500
|
+
scaleSlide
|
|
1497
1501
|
};
|
|
1498
1502
|
const getPositionStyles = (position, offset) => {
|
|
1499
1503
|
const styles2 = {};
|
|
1500
1504
|
const [vertical, horizontal] = position.split("-");
|
|
1501
1505
|
if (vertical === "top") {
|
|
1502
|
-
styles2.top =
|
|
1506
|
+
styles2.top = "0";
|
|
1503
1507
|
styles2.bottom = "auto";
|
|
1504
1508
|
} else if (vertical === "middle") {
|
|
1505
1509
|
styles2.top = "50%";
|
|
1506
1510
|
styles2.bottom = "auto";
|
|
1507
1511
|
} else if (vertical === "bottom") {
|
|
1508
1512
|
styles2.top = "auto";
|
|
1509
|
-
styles2.bottom =
|
|
1513
|
+
styles2.bottom = "0";
|
|
1510
1514
|
}
|
|
1511
1515
|
if (horizontal === "left") {
|
|
1512
|
-
styles2.left =
|
|
1516
|
+
styles2.left = "0";
|
|
1513
1517
|
styles2.right = "auto";
|
|
1514
1518
|
} else if (horizontal === "center") {
|
|
1515
1519
|
styles2.left = "50%";
|
|
1516
1520
|
styles2.right = "auto";
|
|
1517
1521
|
} else if (horizontal === "right") {
|
|
1518
1522
|
styles2.left = "auto";
|
|
1519
|
-
styles2.right =
|
|
1523
|
+
styles2.right = "0";
|
|
1520
1524
|
}
|
|
1521
1525
|
if (vertical === "middle" && horizontal === "center") {
|
|
1522
1526
|
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
@@ -1524,6 +1528,8 @@ const getPositionStyles = (position, offset) => {
|
|
|
1524
1528
|
styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
|
|
1525
1529
|
} else if (horizontal === "center") {
|
|
1526
1530
|
styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
|
|
1531
|
+
} else {
|
|
1532
|
+
styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
|
|
1527
1533
|
}
|
|
1528
1534
|
return styles2;
|
|
1529
1535
|
};
|
|
@@ -1554,6 +1560,7 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
|
|
|
1554
1560
|
const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
|
|
1555
1561
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
1556
1562
|
const lightboxRef = useRef(null);
|
|
1563
|
+
const resizeObserverRef = useRef(null);
|
|
1557
1564
|
const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
|
|
1558
1565
|
const handleBackdropClick = (e) => {
|
|
1559
1566
|
if (!closeOnBackdropClick) return;
|
|
@@ -1613,6 +1620,49 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1613
1620
|
useEffect(() => {
|
|
1614
1621
|
if (isOpen) setCurrentIndex(0);
|
|
1615
1622
|
}, [isOpen]);
|
|
1623
|
+
useEffect(() => {
|
|
1624
|
+
if (!isOpen) return;
|
|
1625
|
+
if (resizeObserverRef.current) {
|
|
1626
|
+
resizeObserverRef.current.disconnect();
|
|
1627
|
+
resizeObserverRef.current = null;
|
|
1628
|
+
}
|
|
1629
|
+
const timeoutId = setTimeout(() => {
|
|
1630
|
+
const activeSlide = document.querySelector(".splide__slide.is-active");
|
|
1631
|
+
if (!activeSlide) return;
|
|
1632
|
+
const img2 = activeSlide.querySelector("img");
|
|
1633
|
+
const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
|
|
1634
|
+
if (!img2 || !container) return;
|
|
1635
|
+
const updateImageSize = () => {
|
|
1636
|
+
if (!img2.naturalWidth || !img2.naturalHeight) return;
|
|
1637
|
+
const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
|
|
1638
|
+
const containerWidth = container.clientWidth;
|
|
1639
|
+
const containerHeight = container.clientHeight;
|
|
1640
|
+
const containerAspectRatio = containerWidth / containerHeight;
|
|
1641
|
+
if (imageAspectRatio > containerAspectRatio) {
|
|
1642
|
+
img2.style.width = "100%";
|
|
1643
|
+
} else {
|
|
1644
|
+
img2.style.height = "100%";
|
|
1645
|
+
}
|
|
1646
|
+
};
|
|
1647
|
+
if (img2.complete) {
|
|
1648
|
+
updateImageSize();
|
|
1649
|
+
} else {
|
|
1650
|
+
img2.onload = updateImageSize;
|
|
1651
|
+
}
|
|
1652
|
+
resizeObserverRef.current = new ResizeObserver(() => {
|
|
1653
|
+
updateImageSize();
|
|
1654
|
+
});
|
|
1655
|
+
resizeObserverRef.current.observe(container);
|
|
1656
|
+
resizeObserverRef.current.observe(img2);
|
|
1657
|
+
}, 0);
|
|
1658
|
+
return () => {
|
|
1659
|
+
clearTimeout(timeoutId);
|
|
1660
|
+
if (resizeObserverRef.current) {
|
|
1661
|
+
resizeObserverRef.current.disconnect();
|
|
1662
|
+
resizeObserverRef.current = null;
|
|
1663
|
+
}
|
|
1664
|
+
};
|
|
1665
|
+
}, [isOpen, currentIndex, content]);
|
|
1616
1666
|
const handleArrowClick = (dir) => {
|
|
1617
1667
|
var _a;
|
|
1618
1668
|
(_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
|
|
@@ -1621,6 +1671,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1621
1671
|
const appearClass = (() => {
|
|
1622
1672
|
if (appear.type === "fade in") return styles.fadeIn;
|
|
1623
1673
|
if (appear.type === "slide in") {
|
|
1674
|
+
return "";
|
|
1675
|
+
}
|
|
1676
|
+
if (appear.type === "mix") return styles.fadeIn;
|
|
1677
|
+
return styles.fadeIn;
|
|
1678
|
+
})();
|
|
1679
|
+
const backdropAppearClass = (() => {
|
|
1680
|
+
if (appear.type === "fade in") return styles.fadeIn;
|
|
1681
|
+
if (appear.type === "slide in" || appear.type === "mix") {
|
|
1624
1682
|
switch (appear.direction) {
|
|
1625
1683
|
case "left":
|
|
1626
1684
|
return styles.slideInLeft;
|
|
@@ -1641,7 +1699,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1641
1699
|
/* @__PURE__ */ jsx(
|
|
1642
1700
|
"div",
|
|
1643
1701
|
{
|
|
1644
|
-
className: cn(styles.backdropStyle,
|
|
1702
|
+
className: cn(styles.backdropStyle, backdropAppearClass),
|
|
1645
1703
|
style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
|
|
1646
1704
|
onClick: handleBackdropClick,
|
|
1647
1705
|
children: /* @__PURE__ */ jsxs(
|
|
@@ -1653,6 +1711,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1653
1711
|
animationDuration: `${appearDurationMs}ms`,
|
|
1654
1712
|
animationTimingFunction: "ease",
|
|
1655
1713
|
animationFillMode: "both",
|
|
1714
|
+
...appear.type === "mix" && { animationDelay: "0.5s" },
|
|
1656
1715
|
"--splide-speed": triggers.duration || "500ms"
|
|
1657
1716
|
},
|
|
1658
1717
|
children: [
|
|
@@ -1663,6 +1722,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1663
1722
|
setCurrentIndex(splide.index);
|
|
1664
1723
|
},
|
|
1665
1724
|
ref: lightboxRef,
|
|
1725
|
+
className: styles.lightboxSplide,
|
|
1666
1726
|
options: {
|
|
1667
1727
|
arrows: false,
|
|
1668
1728
|
speed: triggers.duration ? parseInt(triggers.duration) : 500,
|
|
@@ -1676,23 +1736,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1676
1736
|
padding: 0,
|
|
1677
1737
|
rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
|
|
1678
1738
|
},
|
|
1679
|
-
style: {
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1739
|
+
style: { "--splide-speed": triggers.duration || "500ms" },
|
|
1740
|
+
children: content.map((item, index) => {
|
|
1741
|
+
const positionStyles = getPositionStyles(layout.position, layout.offset);
|
|
1742
|
+
const imageStyle2 = slider.type === "scale" ? (() => {
|
|
1743
|
+
const { transform, ...restStyles } = positionStyles;
|
|
1744
|
+
return {
|
|
1745
|
+
...restStyles,
|
|
1746
|
+
"--position-transform": transform || "none"
|
|
1747
|
+
};
|
|
1748
|
+
})() : positionStyles;
|
|
1749
|
+
return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
|
|
1750
|
+
"div",
|
|
1751
|
+
{
|
|
1752
|
+
className: styles.imgWrapper,
|
|
1753
|
+
onClick: handleImageWrapperClick,
|
|
1754
|
+
children: /* @__PURE__ */ jsx(
|
|
1755
|
+
"img",
|
|
1756
|
+
{
|
|
1757
|
+
className: cn(styles.imageStyle, {
|
|
1758
|
+
[styles.contain]: item.image.objectFit === "contain",
|
|
1759
|
+
[styles.cover]: item.image.objectFit === "cover",
|
|
1760
|
+
[styles.scaleSlide]: slider.type === "scale"
|
|
1761
|
+
}),
|
|
1762
|
+
src: item.image.url,
|
|
1763
|
+
alt: item.image.name ?? "",
|
|
1764
|
+
onClick: onImageClick,
|
|
1765
|
+
style: imageStyle2
|
|
1766
|
+
}
|
|
1767
|
+
)
|
|
1768
|
+
}
|
|
1769
|
+
) }, index);
|
|
1770
|
+
})
|
|
1696
1771
|
}
|
|
1697
1772
|
),
|
|
1698
1773
|
controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1920,8 +1995,8 @@ const LightboxComponent = {
|
|
|
1920
1995
|
type: "string",
|
|
1921
1996
|
title: "FROM",
|
|
1922
1997
|
display: {
|
|
1923
|
-
|
|
1924
|
-
|
|
1998
|
+
type: "direction-control",
|
|
1999
|
+
visible: false
|
|
1925
2000
|
},
|
|
1926
2001
|
enum: ["top", "left", "right", "bottom"]
|
|
1927
2002
|
},
|
|
@@ -1951,8 +2026,8 @@ const LightboxComponent = {
|
|
|
1951
2026
|
switch: {
|
|
1952
2027
|
type: "string",
|
|
1953
2028
|
display: {
|
|
1954
|
-
|
|
1955
|
-
|
|
2029
|
+
type: "ratio-group",
|
|
2030
|
+
visible: false
|
|
1956
2031
|
},
|
|
1957
2032
|
enum: ["image", "50/50"]
|
|
1958
2033
|
},
|
|
@@ -1960,8 +2035,8 @@ const LightboxComponent = {
|
|
|
1960
2035
|
type: "string",
|
|
1961
2036
|
label: "T",
|
|
1962
2037
|
display: {
|
|
1963
|
-
|
|
1964
|
-
|
|
2038
|
+
type: "step-selector",
|
|
2039
|
+
visible: false
|
|
1965
2040
|
},
|
|
1966
2041
|
enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
|
|
1967
2042
|
}
|
|
@@ -2044,7 +2119,8 @@ const LightboxComponent = {
|
|
|
2044
2119
|
type: "number",
|
|
2045
2120
|
label: "H",
|
|
2046
2121
|
display: {
|
|
2047
|
-
type: "numeric-input"
|
|
2122
|
+
type: "numeric-input",
|
|
2123
|
+
visible: false
|
|
2048
2124
|
}
|
|
2049
2125
|
},
|
|
2050
2126
|
width: {
|
|
@@ -2368,6 +2444,7 @@ const LightboxComponent = {
|
|
|
2368
2444
|
triggers: "clk",
|
|
2369
2445
|
grid: {
|
|
2370
2446
|
height: 60,
|
|
2447
|
+
width: 60,
|
|
2371
2448
|
gap: 8
|
|
2372
2449
|
},
|
|
2373
2450
|
offset: { x: 0, y: 0 },
|
|
@@ -2429,22 +2506,22 @@ const LightboxComponent = {
|
|
|
2429
2506
|
},
|
|
2430
2507
|
{
|
|
2431
2508
|
if: {
|
|
2432
|
-
name: "
|
|
2433
|
-
value: "
|
|
2509
|
+
name: "slider.direction",
|
|
2510
|
+
value: "vert"
|
|
2434
2511
|
},
|
|
2435
2512
|
then: {
|
|
2436
|
-
name: "properties.lightboxBlock.properties.
|
|
2437
|
-
value:
|
|
2513
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
|
|
2514
|
+
value: true
|
|
2438
2515
|
}
|
|
2439
2516
|
},
|
|
2440
2517
|
{
|
|
2441
2518
|
if: {
|
|
2442
|
-
name: "
|
|
2443
|
-
value: "
|
|
2519
|
+
name: "slider.direction",
|
|
2520
|
+
value: "horiz"
|
|
2444
2521
|
},
|
|
2445
2522
|
then: {
|
|
2446
|
-
name: "properties.lightboxBlock.properties.
|
|
2447
|
-
value:
|
|
2523
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
|
|
2524
|
+
value: true
|
|
2448
2525
|
}
|
|
2449
2526
|
},
|
|
2450
2527
|
{
|
|
@@ -2453,48 +2530,58 @@ const LightboxComponent = {
|
|
|
2453
2530
|
value: "vert"
|
|
2454
2531
|
},
|
|
2455
2532
|
then: {
|
|
2456
|
-
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.
|
|
2457
|
-
value:
|
|
2533
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
|
|
2534
|
+
value: false
|
|
2458
2535
|
}
|
|
2459
2536
|
},
|
|
2460
2537
|
{
|
|
2461
2538
|
if: {
|
|
2462
2539
|
name: "slider.direction",
|
|
2463
|
-
value: "
|
|
2540
|
+
value: "horiz"
|
|
2464
2541
|
},
|
|
2465
2542
|
then: {
|
|
2466
|
-
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.
|
|
2543
|
+
name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
|
|
2467
2544
|
value: false
|
|
2468
2545
|
}
|
|
2469
2546
|
},
|
|
2470
2547
|
{
|
|
2471
2548
|
if: {
|
|
2472
2549
|
name: "appear.type",
|
|
2473
|
-
value: "
|
|
2550
|
+
value: "mix"
|
|
2474
2551
|
},
|
|
2475
2552
|
then: {
|
|
2476
2553
|
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2477
|
-
value:
|
|
2554
|
+
value: true
|
|
2555
|
+
}
|
|
2556
|
+
},
|
|
2557
|
+
{
|
|
2558
|
+
if: {
|
|
2559
|
+
name: "appear.type",
|
|
2560
|
+
value: "slide in"
|
|
2561
|
+
},
|
|
2562
|
+
then: {
|
|
2563
|
+
name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
|
|
2564
|
+
value: true
|
|
2478
2565
|
}
|
|
2479
2566
|
},
|
|
2480
2567
|
{
|
|
2481
2568
|
if: {
|
|
2482
2569
|
name: "triggers.type",
|
|
2483
|
-
value: "
|
|
2570
|
+
value: "click"
|
|
2484
2571
|
},
|
|
2485
2572
|
then: {
|
|
2486
2573
|
name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
|
|
2487
|
-
value:
|
|
2574
|
+
value: true
|
|
2488
2575
|
}
|
|
2489
2576
|
},
|
|
2490
2577
|
{
|
|
2491
2578
|
if: {
|
|
2492
2579
|
name: "triggers.type",
|
|
2493
|
-
value: "
|
|
2580
|
+
value: "click"
|
|
2494
2581
|
},
|
|
2495
2582
|
then: {
|
|
2496
2583
|
name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
|
|
2497
|
-
value:
|
|
2584
|
+
value: true
|
|
2498
2585
|
}
|
|
2499
2586
|
}
|
|
2500
2587
|
]
|