@divclass/lightbox 1.0.2 → 1.1.3
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/CHANGELOG.md +10 -0
- package/README.md +6 -11
- package/dist/divclass-lightbox.css +1 -1
- package/dist/divclass-lightbox.esm.js +2 -2
- package/dist/divclass-lightbox.umd.js +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
## [1.1.2] - 2026-05-21
|
|
6
|
+
### Added
|
|
7
|
+
- **Image zoom functionality**
|
|
8
|
+
- +/- zoom control buttons
|
|
9
|
+
- Single click on image to zoom in
|
|
10
|
+
- Drag support to move zoomed image
|
|
11
|
+
- Smooth zoom animation
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
5
15
|
## [1.0.2] - 2026-03-13
|
|
6
16
|
### Added
|
|
7
17
|
- Initial release of **Divclass Lightbox**
|
package/README.md
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@divclass/lightbox)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Modern lightweight lightbox for images and inline content.
|
|
6
6
|
Supports **smart zoom animations, virtual slides, swipe & drag gestures**, and works on **all modern browsers and touch devices**.
|
|
7
|
-
|
|
8
|
-
[Live Demo](https://lightbox.divclass.org)
|
|
7
|
+
|
|
8
|
+
[🌍 Live Demo](https://lightbox.divclass.org)
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
12
|
## 🌟 Key Features
|
|
13
13
|
|
|
14
|
-
* **
|
|
14
|
+
* **38 KB** (≈**13 KB gzipped**) — extremely lightweight
|
|
15
15
|
Full-featured lightbox without heavy dependencies.
|
|
16
16
|
* **Virtual Slides**
|
|
17
17
|
Only **3 DOM nodes** exist at a time for optimal performance.
|
|
@@ -31,6 +31,7 @@ Supports **smart zoom animations, virtual slides, swipe & drag gestures**, and w
|
|
|
31
31
|
Display any HTML content and even open nested modals.
|
|
32
32
|
* **Smart Image Preloading**
|
|
33
33
|
Smooth navigation with optimized image loading.
|
|
34
|
+
* **Image Zoom** with +/- buttons, single click and drag
|
|
34
35
|
* **Keyboard Navigation**
|
|
35
36
|
* **Global Controls**
|
|
36
37
|
- `DivclassLightbox.closeAll()`
|
|
@@ -39,13 +40,6 @@ Supports **smart zoom animations, virtual slides, swipe & drag gestures**, and w
|
|
|
39
40
|
|
|
40
41
|
---
|
|
41
42
|
|
|
42
|
-
## 🌍 Demo
|
|
43
|
-
|
|
44
|
-
https://lightbox.divclass.org
|
|
45
|
-
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
|
|
49
43
|
## 📦 Installation
|
|
50
44
|
|
|
51
45
|
## Install via npm
|
|
@@ -226,6 +220,7 @@ DivclassLightbox.show({
|
|
|
226
220
|
| icon | string | SVG | Close button icon |
|
|
227
221
|
| thumbnailsIcon | string | SVG | Thumbnails toggle icon |
|
|
228
222
|
| arrowIcon | string | SVG | Arrow navigation icon |
|
|
223
|
+
| maxZoom | number | 3 | Maximum zoom level |
|
|
229
224
|
| showThumbnailsOnOpen | boolean | `true` | Show thumbnails when gallery opens |
|
|
230
225
|
| backdropClick | "close" \| false | `"close"` | Close modal when clicking backdrop (inline only) |
|
|
231
226
|
| closeExisting | boolean | `false` | Closes any currently open lightbox before opening a new one. |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spinnerRotate{to{transform:rotate(1turn)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.4) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-40px,0) translateZ(0)}to{opacity:1;transform:translateZ(0) translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,40px,0) translateZ(0)}to{opacity:1;transform:translateZ(0) translateZ(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dc-lightbox__close{align-items:center;-moz-appearance:button;appearance:button;-webkit-appearance:button;background:var(--dc-lightbox-btn-bg);border:0;border-radius:0;box-shadow:none;color:var(--dc-lightbox-btn-color);cursor:pointer;display:flex;flex-direction:row;flex-wrap:nowrap;height:var(--dc-lightbox-btn-width);justify-content:center;line-height:1;margin:0;padding:calc(var(--dc-lightbox-btn-width)/5);position:absolute;right:0;text-decoration:none;top:0;width:var(--dc-lightbox-btn-width);z-index:5}.dc-lightbox__close svg{display:block;height:auto;width:100%}.dc-lightbox__close svg path{transition:color .2s ease}.dc-lightbox__close:hover{color:#000}html.dc-lightbox-scroll{scrollbar-gutter:stable}body.body--hidden{overflow:hidden!important}.dc-lightbox,.dc-lightbox *,.dc-lightbox:after,.dc-lightbox:before{box-sizing:border-box}.dc-lightbox{--animationDuration:600ms;--animationEffect:fadeInDown;--imageInitPosition:-40px;--dc-lightbox-bg:#fff;--dc-lightbox-radius:4px;--dc-lightbox-overlay:rgba(0,0,0,.88);--dc-lightbox-size:16px;--dc-lightbox-padding:40px;--dc-lightbox-btn-width:40px;--dc-lightbox-btn-bg:#fff;--dc-lightbox-btn-color:#4e4e4e;--dc-lightbox-btn-toolbar-width:44px;--dc-lightbox-btn-toolbar-bg:rgba(0,0,0,.4);--dc-lightbox-info-height:100px;--dc-lightbox-thumbnails-height:100px;--slideChangeDuration:320ms;--slideOffset:0.1;align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;height:100%;justify-content:flex-start;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;touch-action:none;transform:translateZ(0);visibility:hidden;width:100%;z-index:-1;-webkit-tap-highlight-color:transparent}.dc-lightbox__inner,.dc-lightbox__slide-content,.dc-lightbox__toolbar{animation-direction:normal;animation-duration:var(--animationDuration);animation-fill-mode:forwards;opacity:0}.dc-lightbox__overlay{backface-visibility:hidden;background:var(--dc-lightbox-overlay);height:100%;left:0;position:fixed;top:0;width:100%;-webkit-tap-highlight-color:transparent;opacity:.007;transform:translateZ(0);transition:opacity var(--animationDuration) cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:0}.dc-lightbox__overlay--prevent-anim{transition:none}.dc-lightbox__overlay--show{opacity:1}.dc-lightbox__toolbar{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;left:0;padding:8px;position:absolute;top:0;width:100%;z-index:10}.dc-lightbox__toolbar [class*=__button-close],.dc-lightbox__toolbar [class*=__button-thumbnails]{-moz-appearance:button;appearance:button;-webkit-appearance:button;background:var(--dc-lightbox-btn-toolbar-bg);border:0;border-radius:0;box-shadow:none;color:#ddd;cursor:pointer;display:block;height:var(--dc-lightbox-btn-toolbar-width);line-height:1;margin:0;overflow:hidden;padding:calc(var(--dc-lightbox-btn-toolbar-width)/5);position:relative;transition:background-color .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--dc-lightbox-btn-toolbar-width)}.dc-lightbox__toolbar [class*=__button-close] svg,.dc-lightbox__toolbar [class*=__button-thumbnails] svg{height:auto;max-height:100%;max-width:100%;width:100%}.dc-lightbox__toolbar [class*=__button-close] svg path,.dc-lightbox__toolbar [class*=__button-thumbnails] svg path{transition:color .2s ease}.dc-lightbox__toolbar [class*=__button-close]:hover,.dc-lightbox__toolbar [class*=__button-thumbnails]:hover{background-color:rgba(0,0,0,.8);color:#fff}.dc-lightbox__toolbar [class*=__button-close]{padding:5px}.dc-lightbox__counter{align-items:center;color:#ddd;display:flex;flex-wrap:nowrap;font-family:arial;font-size:14px;line-height:1;margin-right:auto;padding-left:14px;padding-top:0;text-shadow:0 1px 2px rgba(0,0,0,.6)}.dc-lightbox__counter-current{align-items:center;display:flex;flex-wrap:nowrap;margin-right:4px;position:relative}.dc-lightbox__counter-current:after{content:"/";margin-left:4px}.dc-lightbox__wrapper{align-items:center;display:flex;flex-direction:row;flex-grow:1;flex-wrap:nowrap;height:100%;justify-content:center;position:relative;width:100%}.dc-lightbox__wrapper:not(.dc-lightbox__wrapper--slider){overflow:auto;padding-bottom:20px;padding-top:20px}.dc-lightbox__wrapper--slider{align-items:flex-start;justify-content:flex-start;overflow:hidden}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__wrapper--has-thumbnails .dc-lightbox__thumbnails{opacity:1;transform:translateY(0)}.dc-lightbox__wrapper--has-thumbnails .dc-lightbox__arrow{transform:translateY(calc(var(--dc-lightbox-thumbnails-height)*-1/2))}.dc-lightbox__thumbnails{background:rgba(0,0,0,.5);bottom:0;content-visibility:auto;height:var(--dc-lightbox-thumbnails-height);left:0;opacity:0;position:absolute;transform:translateY(100%);transition:transform .24s cubic-bezier(.4,0,.22,1),opacity .7s cubic-bezier(.4,0,.22,1);width:100%;will-change:transform;z-index:30}.dc-lightbox--closing .dc-lightbox__thumbnails,.dc-lightbox__thumbnails--hide{pointer-events:none;transform:translateY(100%)!important}.dc-lightbox__thumbnails-viewport{align-items:center;cursor:grab;display:flex;height:100%;justify-content:flex-start;width:100%}.dc-lightbox__thumbnails-viewport img{-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__thumbnails-slider{align-items:center;display:inline-flex;flex-wrap:nowrap;padding-left:28px;padding-right:28px;touch-action:none;transform:translateZ(0);transition:transform .34s cubic-bezier(.4,0,.22,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.dc-lightbox__thumbnails-slide{border-radius:4px;cursor:pointer;height:72px;overflow:hidden;position:relative;transition:all .34s cubic-bezier(.4,0,.22,1);width:48px}.dc-lightbox__thumbnails-slide+.dc-lightbox__thumbnails-slide{margin-left:8px}.dc-lightbox__thumbnails-slide:before{background:#000;border-radius:4px;content:"";display:block;height:100%;left:0;opacity:.28;position:absolute;top:0;width:100%;z-index:1}.dc-lightbox__thumbnails-slide:not(.dc-lightbox__thumbnails-slide--active){transform:translateX(-20px) translateZ(0)}.dc-lightbox__thumbnails-slide--active{transform:translateZ(0);width:100px}.dc-lightbox__thumbnails-slide--active~.dc-lightbox__thumbnails-slide{transform:translateX(20px) translateZ(0)}.dc-lightbox__thumbnails-slide--active:before,.dc-lightbox__thumbnails-slide:hover:before{opacity:0}.dc-lightbox__thumbnails-slide img{height:100px;left:50%;max-width:none!important;-o-object-fit:cover;object-fit:cover;top:50%;transform:translate(-50%,-50%);transform-origin:center;width:100px}.dc-lightbox__arrow,.dc-lightbox__thumbnails-slide img{border-radius:4px;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__arrow{align-items:center;background-color:rgba(0,0,0,.3);bottom:0;color:#ddd;cursor:pointer;display:flex;height:56px;justify-content:center;margin-bottom:auto;margin-top:auto;opacity:0;top:0;transition:all .24s ease;width:40px;z-index:21}.dc-lightbox__arrow--prev{left:20px}.dc-lightbox__arrow--next{right:20px}.dc-lightbox__arrow--next svg{transform:scaleX(-1)}.dc-lightbox__arrow svg{height:24px;width:24px}.dc-lightbox__arrow svg path{transition:color .2s ease}.dc-lightbox__arrow:hover{background-color:rgba(0,0,0,.8);color:#fff}.dc-lightbox__inner,.dc-lightbox__slide{outline:none;position:relative}.dc-lightbox__inner>*,.dc-lightbox__slide>*{max-width:100%!important}.dc-lightbox__slides{align-items:stretch;display:flex;flex-direction:row;flex-grow:1;flex-wrap:nowrap;height:100%;justify-content:flex-start;overflow:visible!important;position:relative;transition:all var(--slideChangeDuration) cubic-bezier(.4,0,.22,1);width:100%}.dc-lightbox__wrapper--has-thumbnails .dc-lightbox__slides{height:calc(100% - var(--dc-lightbox-thumbnails-height))!important}.dc-lightbox__slides.to-right{transform:translate3d(calc(100%*var(--slideOffset) + 100%),0,0)!important}.dc-lightbox__slides.to-left{transform:translate3d(calc(-100%*var(--slideOffset) - 100%),0,0)!important}.dc-lightbox__slide{align-items:center;background:transparent;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:nowrap;height:100%;justify-content:flex-end;max-width:100%!important;padding:0;width:100%}.dc-lightbox__slide--next,.dc-lightbox__slide--prev{content-visibility:auto;left:0;position:absolute;top:0}.dc-lightbox__slide--next .dc-lightbox__info,.dc-lightbox__slide--prev .dc-lightbox__info{opacity:0!important}.dc-lightbox__slide--prev{transform:translate3d(calc(-100%*var(--slideOffset) - 100%),0,0)}.dc-lightbox__slide--next{transform:translate3d(calc(100%*var(--slideOffset) + 100%),0,0)}.dc-lightbox__viewport{align-items:center;display:flex;flex:1 1 0%;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;width:100%}.dc-lightbox__slide-content,.dc-lightbox__viewport{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__slide-content{backface-visibility:hidden;touch-action:none;transform:translateZ(0);z-index:2}.dc-lightbox__slide-content--prevent-anim{animation:none!important}.dc-lightbox__slide-content img{backface-visibility:hidden;display:block;height:auto;max-height:100%;max-width:100%;pointer-events:none;transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.dc-lightbox__crbr,.dc-lightbox__crimg,.dc-lightbox__crtl,.dc-lightbox__slide-content{align-items:center;backface-visibility:hidden;display:flex;flex:1 1 0;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;width:100%}.dc-lightbox__spinner{animation:spinnerRotate 1s linear infinite;background:transparent;border:4px solid;border-color:#ddd #ddd #fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}.dc-lightbox__img-placeholder{-o-object-fit:cover;object-fit:cover;pointer-events:none;position:absolute;transform:translateZ(0);z-index:1}.dc-lightbox__inner{background:var(--dc-lightbox-bg);border-radius:var(--dc-lightbox-radius);font-size:var(--dc-lightbox-size);margin:auto;max-width:calc(100% - 30px)!important;overflow:hidden;padding:var(--dc-lightbox-padding)}.dc-lightbox__inner>:not(button){outline:none}.dc-lightbox__close--fixed{position:fixed;right:0;top:0}.dc-lightbox__info{box-sizing:border-box;color:#d3d3d3;font-family:arial;font-size:16px;height:var(--dc-lightbox-info-height);line-height:1.4;opacity:0;overflow:visible;text-align:center;transform:translateY(calc(100% - var(--dc-lightbox-info-height)));-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:20}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__info{opacity:1}.dc-lightbox__info{bottom:0;left:0;position:absolute;transition:opacity .24s ease}.dc-lightbox__info:after{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 90%,rgba(0,0,0,.5));bottom:0;content:"";display:block;height:50px;left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:1}.dc-lightbox:not(.dc-lightbox--animating) .dc-lightbox__info:hover .dc-lightbox__caption{background-color:rgba(0,0,0,.88);transform:translateY(calc(-100% + 3px + var(--dc-lightbox-info-height)))}.dc-lightbox:not(.dc-lightbox--animating) .dc-lightbox__info:hover:after{opacity:0}.dc-lightbox__info--hide{opacity:0!important;overflow:hidden;pointer-events:none}.dc-lightbox__caption{align-items:center;background-color:rgba(0,0,0,.5);box-sizing:border-box;display:flex;max-height:37vh;min-height:var(--dc-lightbox-info-height);overflow:auto;padding:24px 16px;scrollbar-color:#31334d #141827;transition:transform .2s ease;width:100%}.dc-lightbox__caption-data{margin-bottom:auto;margin-top:auto;width:100%}.dc-lightbox__caption-data>:first-child{margin-top:0}.dc-lightbox__caption-data>:last-child{margin-bottom:0}.dc-lightbox__close-area{height:100%;left:0;position:absolute;top:0;width:100%}.dc-lightbox--visible{display:flex!important;opacity:1;pointer-events:auto;visibility:visible;z-index:100000}.dc-lightbox--closing .dc-lightbox__toolbar{animation-direction:reverse;animation-name:fadeIn}.dc-lightbox--closing .dc-lightbox__inner,.dc-lightbox--closing .dc-lightbox__slide-content{animation-direction:reverse;animation-duration:calc(var(--animationDuration)/1.8)!important;animation-name:var(--animationEffect)}.dc-lightbox--closing.dc-lightbox--scale-to-origin-out .dc-lightbox__slide-content{animation:none;left:0;opacity:1;position:absolute;top:0}.dc-lightbox--closing.dc-lightbox--scale-to-origin-out .dc-lightbox__slide-content img{height:100%;width:100%}.dc-lightbox--opened .dc-lightbox__toolbar{animation-name:fadeIn}.dc-lightbox--opened .dc-lightbox__inner,.dc-lightbox--opened .dc-lightbox__slide-content{animation-duration:calc(var(--animationDuration)*.7)!important;animation-name:var(--animationEffect)}.dc-lightbox--opened .dc-lightbox__slide{overflow:hidden}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__arrow{opacity:1}.dc-lightbox--opened .dc-lightbox__wrapper--slider .dc-lightbox__slide--has-spinner .dc-lightbox__slide-content{animation:none;opacity:1}.dc-lightbox--opened .dc-lightbox__wrapper--slider .dc-lightbox__slide--has-spinner .dc-lightbox__slide-content img{opacity:0}.dc-lightbox--opened.dc-lightbox--scale-from-origin-in .dc-lightbox__slide-content{left:0;position:absolute;top:0;-webkit-font-smoothing:antialiased}.dc-lightbox--opened.dc-lightbox--scale-from-origin-in .dc-lightbox__slide-content img{height:100%;width:100%}.dc-lightbox--animating .dc-lightbox__info{overflow:hidden!important}.dc-lightbox--animating.dc-lightbox--opened .dc-lightbox__slide{overflow:visible}.dc-lightbox--animating.dc-lightbox--opened .dc-lightbox__inner{will-change:transform,opacity}.dc-lightbox--animating .dc-lightbox__overlay{will-change:opacity}.dc-lightbox--animating .dc-lightbox__crbr,.dc-lightbox--animating .dc-lightbox__crimg,.dc-lightbox--animating .dc-lightbox__crtl{will-change:transform}.dc-lightbox--scaled-from-origin .dc-lightbox__slide-content{animation:none;opacity:1;transform-origin:0 0}.dc-lightbox--gallery .dc-lightbox__slide{opacity:1;transform-origin:0 0}.dc-lightbox--gallery .dc-lightbox__slide-content{animation:none;opacity:1}.dc-lightbox__img-large{transition:opacity .1s ease-in-out!important;z-index:2}.dc-lightbox__img-large--loading{left:0;opacity:0!important;position:absolute!important;top:0}.dc-lightbox__img-large--loaded{opacity:1!important}.dc-lightbox__img-small{height:100%!important;width:100%!important}@supports (scrollbar-gutter:stable){.dc-lightbox__caption{scrollbar-gutter:stable}}@media (max-width:768px){.dc-lightbox__thumbnails-slider{padding-left:20px;padding-right:20px}.dc-lightbox__thumbnails-slide:not(.dc-lightbox__thumbnails-slide--active){transform:translateX(-12px) translateZ(0)}.dc-lightbox__thumbnails-slide--active~.dc-lightbox__thumbnails-slide{transform:translateX(12px) translateZ(0)}}@media (pointer:fine){.dc-lightbox__caption{scrollbar-width:thin}}
|
|
1
|
+
@keyframes spinnerRotate{to{transform:rotate(1turn)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.4) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-40px,0) translateZ(0)}to{opacity:1;transform:translateZ(0) translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,40px,0) translateZ(0)}to{opacity:1;transform:translateZ(0) translateZ(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dc-lightbox__close{align-items:center;-moz-appearance:button;appearance:button;-webkit-appearance:button;background:var(--dc-lightbox-btn-bg);border:0;border-radius:0;box-shadow:none;color:var(--dc-lightbox-btn-color);cursor:pointer;display:flex;flex-direction:row;flex-wrap:nowrap;height:var(--dc-lightbox-btn-width);justify-content:center;line-height:1;margin:0;padding:calc(var(--dc-lightbox-btn-width)/5);position:absolute;right:0;text-decoration:none;top:0;width:var(--dc-lightbox-btn-width);z-index:5}.dc-lightbox__close svg{display:block;height:auto;width:100%}.dc-lightbox__close svg path{transition:color .2s ease}.dc-lightbox__close:hover{color:#000}html.dc-lightbox-scroll{scrollbar-gutter:stable}body.body--hidden{overflow:hidden!important}.dc-lightbox,.dc-lightbox *,.dc-lightbox:after,.dc-lightbox:before{box-sizing:border-box}.dc-lightbox{--animationDuration:600ms;--animationEffect:fadeInDown;--imageInitPosition:-40px;--dc-lightbox-bg:#fff;--dc-lightbox-radius:4px;--dc-lightbox-overlay:rgba(0,0,0,.88);--dc-lightbox-size:16px;--dc-lightbox-padding:40px;--dc-lightbox-btn-width:40px;--dc-lightbox-btn-bg:#fff;--dc-lightbox-btn-color:#4e4e4e;--dc-lightbox-btn-toolbar-width:44px;--dc-lightbox-btn-toolbar-bg:rgba(0,0,0,.4);--dc-lightbox-info-height:100px;--dc-lightbox-thumbnails-height:100px;--slideChangeDuration:320ms;--slideOffset:0.1;align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;height:100%;justify-content:flex-start;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;touch-action:none;transform:translateZ(0);visibility:hidden;width:100%;z-index:-1;-webkit-tap-highlight-color:transparent}.dc-lightbox__inner,.dc-lightbox__slide-content,.dc-lightbox__toolbar{animation-direction:normal;animation-duration:var(--animationDuration);animation-fill-mode:forwards;opacity:0}.dc-lightbox__overlay{backface-visibility:hidden;background:var(--dc-lightbox-overlay);height:100%;left:0;position:fixed;top:0;width:100%;-webkit-tap-highlight-color:transparent;opacity:.007;transform:translateZ(0);transition:opacity var(--animationDuration) cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:0}.dc-lightbox__overlay--prevent-anim{transition:none}.dc-lightbox__overlay--show{opacity:1}.dc-lightbox__toolbar{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;left:0;padding:8px;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.dc-lightbox__toolbar [class*=__button-close],.dc-lightbox__toolbar [class*=__button-thumbnails],.dc-lightbox__toolbar [class*=__button-zoom]{-moz-appearance:button;appearance:button;-webkit-appearance:button;background:var(--dc-lightbox-btn-toolbar-bg);border:0;border-radius:0;box-shadow:none;color:#ddd;cursor:pointer;display:block;height:var(--dc-lightbox-btn-toolbar-width);line-height:1;margin:0;overflow:hidden;padding:calc(var(--dc-lightbox-btn-toolbar-width)/5);pointer-events:auto;position:relative;transition:background-color .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--dc-lightbox-btn-toolbar-width)}.dc-lightbox__toolbar [class*=__button-close] svg,.dc-lightbox__toolbar [class*=__button-thumbnails] svg,.dc-lightbox__toolbar [class*=__button-zoom] svg{height:auto;max-height:100%;max-width:100%;width:100%}.dc-lightbox__toolbar [class*=__button-close] svg path,.dc-lightbox__toolbar [class*=__button-thumbnails] svg path,.dc-lightbox__toolbar [class*=__button-zoom] svg path{transition:color .2s ease}.dc-lightbox__toolbar [class*=__button-close]:hover,.dc-lightbox__toolbar [class*=__button-thumbnails]:hover,.dc-lightbox__toolbar [class*=__button-zoom]:hover{background-color:rgba(0,0,0,.8);color:#fff}.dc-lightbox__toolbar [class*=__button-close]{padding:5px}.dc-lightbox__toolbar .dc-lightbox__button-zoom-line{transform-origin:center}.dc-lightbox__toolbar .dc-lightbox__button-zoom--in .dc-lightbox__button-zoom-line{opacity:0}.dc-lightbox__toolbar .dc-lightbox__button-zoom--disabled{opacity:.5!important;pointer-events:none!important}.dc-lightbox__counter{align-items:center;color:#ddd;display:flex;flex-wrap:nowrap;font-family:arial;font-size:14px;line-height:1;margin-right:auto;padding-left:14px;padding-top:0;pointer-events:auto;text-shadow:0 1px 2px rgba(0,0,0,.6)}.dc-lightbox__counter-current{align-items:center;display:flex;flex-wrap:nowrap;margin-right:4px;position:relative}.dc-lightbox__counter-current:after{content:"/";margin-left:4px}.dc-lightbox__wrapper{align-items:center;display:flex;flex-direction:row;flex-grow:1;flex-wrap:nowrap;height:100%;justify-content:center;position:relative;width:100%}.dc-lightbox__wrapper:not(.dc-lightbox__wrapper--slider){overflow:auto;padding-bottom:20px;padding-top:20px}.dc-lightbox__wrapper--slider{align-items:flex-start;justify-content:flex-start;overflow:hidden}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__wrapper--has-thumbnails .dc-lightbox__thumbnails{opacity:1;transform:translateY(0)}.dc-lightbox__wrapper--has-thumbnails .dc-lightbox__arrow{transform:translateY(calc(var(--dc-lightbox-thumbnails-height)*-1/2))}.dc-lightbox__thumbnails{background:rgba(0,0,0,.5);bottom:0;content-visibility:auto;height:var(--dc-lightbox-thumbnails-height);left:0;opacity:0;position:absolute;transform:translateY(100%);transition:transform .24s cubic-bezier(.4,0,.22,1),opacity .7s cubic-bezier(.4,0,.22,1);width:100%;will-change:transform;z-index:30}.dc-lightbox--closing .dc-lightbox__thumbnails,.dc-lightbox__thumbnails--hide{pointer-events:none;transform:translateY(100%)!important}.dc-lightbox__thumbnails-viewport{align-items:center;cursor:grab;display:flex;height:100%;justify-content:flex-start;width:100%}.dc-lightbox__thumbnails-viewport img{-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__thumbnails-slider{align-items:center;display:inline-flex;flex-wrap:nowrap;padding-left:32px;padding-right:32px;touch-action:none;transform:translateZ(0);transition:transform .34s cubic-bezier(.4,0,.22,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.dc-lightbox__thumbnails-slide{border-radius:4px;cursor:pointer;height:72px;overflow:hidden;position:relative;transition:all .34s cubic-bezier(.4,0,.22,1);width:100px}.dc-lightbox__thumbnails-slide+.dc-lightbox__thumbnails-slide{margin-left:8px}.dc-lightbox__thumbnails-slide:before{background:#000;border-radius:4px;content:"";display:block;height:100%;left:0;opacity:.28;position:absolute;top:0;width:100%;z-index:1}.dc-lightbox__thumbnails-slide:not(.dc-lightbox__thumbnails-slide--active){transform:translateX(-24px) translateZ(0)}.dc-lightbox__thumbnails-slide--active{transform:translateZ(0)}.dc-lightbox__thumbnails-slide--active~.dc-lightbox__thumbnails-slide{transform:translateX(24px) translateZ(0)}.dc-lightbox__thumbnails-slide--active:before,.dc-lightbox__thumbnails-slide:hover:before{opacity:0}.dc-lightbox__thumbnails-slide img{height:100px;left:50%;max-width:none!important;-o-object-fit:cover;object-fit:cover;top:50%;transform:translate(-50%,-50%);transform-origin:center;width:100px}.dc-lightbox__arrow,.dc-lightbox__thumbnails-slide img{border-radius:4px;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__arrow{align-items:center;background-color:rgba(0,0,0,.3);bottom:0;color:#ddd;cursor:pointer;display:flex;height:56px;justify-content:center;margin-bottom:auto;margin-top:auto;opacity:0;top:0;transition:all .24s ease;width:40px;z-index:21}.dc-lightbox__arrow--prev{left:20px}.dc-lightbox__arrow--next{right:20px}.dc-lightbox__arrow--next svg{transform:scaleX(-1)}.dc-lightbox__arrow svg{height:24px;width:24px}.dc-lightbox__arrow svg path{transition:color .2s ease}.dc-lightbox__arrow:hover{background-color:rgba(0,0,0,.8);color:#fff}.dc-lightbox__inner,.dc-lightbox__slide{outline:none;position:relative}.dc-lightbox__inner>*,.dc-lightbox__slide>*{max-width:100%!important}.dc-lightbox__slides{align-items:stretch;display:flex;flex-direction:row;flex-grow:1;flex-wrap:nowrap;height:100%;justify-content:flex-start;overflow:visible!important;position:relative;transition:all var(--slideChangeDuration) cubic-bezier(.4,0,.22,1);width:100%}.dc-lightbox__wrapper--has-thumbnails .dc-lightbox__slides{height:calc(100% - var(--dc-lightbox-thumbnails-height))!important}.dc-lightbox__slides.to-right{transform:translate3d(calc(100%*var(--slideOffset) + 100%),0,0)!important}.dc-lightbox__slides.to-left{transform:translate3d(calc(-100%*var(--slideOffset) - 100%),0,0)!important}.dc-lightbox__slide{align-items:center;background:transparent;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:nowrap;height:100%;justify-content:flex-end;max-width:100%!important;padding:0;width:100%}.dc-lightbox__slide--next,.dc-lightbox__slide--prev{content-visibility:auto;left:0;position:absolute;top:0}.dc-lightbox__slide--next .dc-lightbox__info,.dc-lightbox__slide--prev .dc-lightbox__info{opacity:0!important}.dc-lightbox__slide--prev{transform:translate3d(calc(-100%*var(--slideOffset) - 100%),0,0)}.dc-lightbox__slide--next{transform:translate3d(calc(100%*var(--slideOffset) + 100%),0,0)}.dc-lightbox__viewport{align-items:center;cursor:grab;display:flex;flex:1 1 0%;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.dc-lightbox__viewport:has(.dc-lightbox__img-grabbing){cursor:grabbing}.dc-lightbox__viewport:has(.dc-lightbox__slide-content--zoomIn):not(:has(.dc-lightbox__img-grabbing)){cursor:default}.dc-lightbox__slide-content{backface-visibility:hidden;cursor:grab;touch-action:none;transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.dc-lightbox__slide-content--prevent-anim{animation:none!important}.dc-lightbox__slide-content img{backface-visibility:hidden;display:block;height:auto;max-height:100%;max-width:100%;pointer-events:none;transform:translateZ(0);width:auto;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dc-lightbox__slide-content--zoomIn{cursor:default}.dc-lightbox__slide-content--zoomIn img{transition:transform .34s cubic-bezier(.4,0,.22,1)}.dc-lightbox__crbr,.dc-lightbox__crimg,.dc-lightbox__crtl,.dc-lightbox__slide-content{align-items:center;backface-visibility:hidden;display:flex;flex:1 1 0;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;width:100%}.dc-lightbox__spinner{animation:spinnerRotate 1s linear infinite;background:transparent;border:4px solid;border-color:#ddd #ddd #fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}.dc-lightbox__img-placeholder{-o-object-fit:cover;object-fit:cover;pointer-events:none;position:absolute;transform:translateZ(0);z-index:1}.dc-lightbox__inner{background:var(--dc-lightbox-bg);border-radius:var(--dc-lightbox-radius);font-size:var(--dc-lightbox-size);margin:auto;max-width:calc(100% - 30px)!important;overflow:hidden;padding:var(--dc-lightbox-padding)}.dc-lightbox__inner>:not(button){outline:none}.dc-lightbox__close--fixed{position:fixed;right:0;top:0}.dc-lightbox__info{box-sizing:border-box;color:#d3d3d3;font-family:arial;font-size:16px;height:var(--dc-lightbox-info-height);line-height:1.4;opacity:0;overflow:visible;text-align:center;transform:translateY(calc(100% - var(--dc-lightbox-info-height)));-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:20}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__info{opacity:1}.dc-lightbox__info{bottom:0;left:0;position:absolute;transition:opacity .24s ease}.dc-lightbox__info:after{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 90%,rgba(0,0,0,.5));bottom:0;content:"";display:block;height:50px;left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:1}.dc-lightbox:not(.dc-lightbox--animating) .dc-lightbox__info:hover .dc-lightbox__caption{background-color:rgba(0,0,0,.88);transform:translateY(calc(-100% + 3px + var(--dc-lightbox-info-height)))}.dc-lightbox:not(.dc-lightbox--animating) .dc-lightbox__info:hover:after{opacity:0}.dc-lightbox__info--hide{opacity:0!important;overflow:hidden;pointer-events:none}.dc-lightbox__caption{align-items:center;background-color:rgba(0,0,0,.5);box-sizing:border-box;display:flex;max-height:37vh;min-height:var(--dc-lightbox-info-height);overflow:auto;padding:24px 16px;scrollbar-color:#31334d #141827;transition:transform .2s ease;width:100%}.dc-lightbox__caption-data{margin-bottom:auto;margin-top:auto;width:100%}.dc-lightbox__caption-data>:first-child{margin-top:0}.dc-lightbox__caption-data>:last-child{margin-bottom:0}.dc-lightbox__close-area{height:100%;left:0;position:absolute;top:0;width:100%}.dc-lightbox--visible{display:flex!important;opacity:1;pointer-events:auto;visibility:visible;z-index:100000}.dc-lightbox--closing .dc-lightbox__toolbar{animation-direction:reverse;animation-name:fadeIn}.dc-lightbox--closing .dc-lightbox__inner,.dc-lightbox--closing .dc-lightbox__slide-content{animation-direction:reverse;animation-duration:calc(var(--animationDuration)/1.8)!important;animation-name:var(--animationEffect)}.dc-lightbox--closing.dc-lightbox--scale-to-origin-out .dc-lightbox__slide-content{animation:none;left:0;opacity:1;position:absolute;top:0}.dc-lightbox--closing.dc-lightbox--scale-to-origin-out .dc-lightbox__slide-content.dc-lightbox__slide-content--zoomIn img{transform:scale(1)!important}.dc-lightbox--closing.dc-lightbox--scale-to-origin-out .dc-lightbox__slide-content img{height:100%;transition:none!important;width:100%}.dc-lightbox--opened .dc-lightbox__toolbar{animation-name:fadeIn}.dc-lightbox--opened .dc-lightbox__inner,.dc-lightbox--opened .dc-lightbox__slide-content{animation-duration:calc(var(--animationDuration)*.7)!important;animation-name:var(--animationEffect)}.dc-lightbox--opened .dc-lightbox__slide{overflow:hidden}.dc-lightbox--opened:not(.dc-lightbox--animating) .dc-lightbox__arrow{opacity:1}.dc-lightbox--opened .dc-lightbox__wrapper--slider .dc-lightbox__slide--has-spinner .dc-lightbox__slide-content{animation:none;opacity:1}.dc-lightbox--opened .dc-lightbox__wrapper--slider .dc-lightbox__slide--has-spinner .dc-lightbox__slide-content img{opacity:0}.dc-lightbox--opened.dc-lightbox--scale-from-origin-in .dc-lightbox__slide-content{left:0;position:absolute;top:0;-webkit-font-smoothing:antialiased}.dc-lightbox--opened.dc-lightbox--scale-from-origin-in .dc-lightbox__slide-content img{height:100%;width:100%}.dc-lightbox--animating .dc-lightbox__info{overflow:hidden!important}.dc-lightbox--animating.dc-lightbox--opened .dc-lightbox__slide{overflow:visible}.dc-lightbox--animating.dc-lightbox--opened .dc-lightbox__inner{will-change:transform,opacity}.dc-lightbox--animating .dc-lightbox__overlay{will-change:opacity}.dc-lightbox--animating .dc-lightbox__crbr,.dc-lightbox--animating .dc-lightbox__crimg,.dc-lightbox--animating .dc-lightbox__crtl{will-change:transform}.dc-lightbox--scaled-from-origin .dc-lightbox__slide-content{animation:none;opacity:1;transform-origin:0 0}.dc-lightbox--gallery .dc-lightbox__slide{opacity:1;transform-origin:0 0}.dc-lightbox--gallery .dc-lightbox__slide-content{animation:none;opacity:1}.dc-lightbox__img-large{transition:opacity .1s ease-in-out;z-index:2}.dc-lightbox__img-large--loading{left:0;opacity:0!important;position:absolute!important;top:0}.dc-lightbox__img-large--loaded{opacity:1!important}.dc-lightbox__img-small{height:100%!important;width:100%!important}.dc-lightbox__img-zoomable{cursor:zoom-in;pointer-events:auto!important}.dc-lightbox__slide-content--zoomIn .dc-lightbox__img-zoomable{cursor:grab}.dc-lightbox__slide-content--zoomIn .dc-lightbox__img-grabbing{cursor:grabbing}@supports (scrollbar-gutter:stable){.dc-lightbox__caption{scrollbar-gutter:stable}}@media (max-width:768px){.dc-lightbox__thumbnails-slider{padding-left:22px;padding-right:22px}.dc-lightbox__thumbnails-slide:not(.dc-lightbox__thumbnails-slide--active){transform:translateX(-14px) translateZ(0)}.dc-lightbox__thumbnails-slide--active~.dc-lightbox__thumbnails-slide{transform:translateX(14px) translateZ(0)}}@media (pointer:fine){.dc-lightbox__caption{scrollbar-width:thin}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @divclass/lightbox v1.
|
|
2
|
+
* @divclass/lightbox v1.1.3 | May 22nd 2026
|
|
3
3
|
* Source: https://github.com/divclass-org/lightbox.git
|
|
4
4
|
* Homepage: https://lightbox.divclass.org/
|
|
5
5
|
* (c) 2026 Taras Bilinskyi | Released under the MIT License
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
class t{constructor(){this.events={}}on(t,i){return this.events[t]||(this.events[t]=[]),this.events[t].push(i),this}off(t,i){return this.events[t]?(this.events[t]=this.events[t].filter(t=>t!==i),this):this}once(t,i){const e=(...n)=>{this.off(t,e),i(...n)};return this.on(t,e),this}emit(t,...i){return this.events[t]&&[...this.events[t]].forEach(t=>t(...i)),this}clear(){this.events={}}}class i{constructor(t={},i=null){this.data=t,this.events=i}set(t,i){const e=this.data[t];e!==i&&(this.data[t]=i,this.events&&(this.events.emit(`state:${t}`,i,e),this.events.emit("state:change",t,i,e)))}get(t){return this.data[t]}merge(t,i=!0){const e={...this.data};this.data={...this.data,...t},!i&&this.events&&this.events.emit("state:change","multiple",this.data,e)}}const e={icon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M6 6L18 18M18 6L6 18"/></svg>',thumbnailsIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><rect x="3" y="17" width="4" height="4" rx="1"/><rect x="10" y="17" width="4" height="4" rx="1"/><rect x="17" y="17" width="4" height="4" rx="1"/></svg>',showThumbnailsOnOpen:!0,arrowIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4L7 12L15 20"/></svg>',backdropClick:"close",closeExisting:!1,parentContainer:"body",hideScrollbar:!0,effect:"fadeInDown",zoomImageFromOrigin:!0,animationDuration:400,autoClose:!1,type:"inline",caption:!1,slideChangeDuration:280,slideOffset:.1,beforeLayoutOpen:()=>{},layoutReady:()=>{},layoutOpened:()=>{},beforeLayoutClose:()=>{},layoutClosed:()=>{},extensions:{}},n="data-close",s="data-type",l="data-caption",o="data-gallery",a="prev",r="next",c="active",h={fallbackBase64:"data:image/svg+xml;base64,"+btoa('\n <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">\n <rect width="100%" height="100%" fill="#ddd"/>\n </svg>\n '),openedCounter:0,timer:[0],backdrop_actions:["close"],openEffects:["fadeInDown","fadeIn","fadeInUp","zoomIn"],closeAllPopup:"close-all",timingFunc:"cubic-bezier(0.4, 0, 0.22, 1)",timingFuncInvert:"cubic-bezier(0.78, 0, 0.6, 1)"},u="body--hidden",d="dc-lightbox",m="dc-lightbox--visible",f="dc-lightbox--animating",g="dc-lightbox--opened",p="dc-lightbox--closing",b="dc-lightbox--gallery",w="dc-lightbox--scale-from-origin-in",_="dc-lightbox--scale-to-origin-out",x="dc-lightbox--scaled-from-origin",y="dc-lightbox__close-area",v="dc-lightbox__wrapper",$="dc-lightbox__overlay",M="dc-lightbox__overlay--show",T="dc-lightbox__overlay--prevent-anim",k="dc-lightbox__viewport",I="dc-lightbox__thumbnails",A="dc-lightbox__thumbnails--hide",C="dc-lightbox__thumbnails-viewport",O="dc-lightbox__thumbnails-slider",F="dc-lightbox__thumbnails-slide",P="dc-lightbox__thumbnails-slide--active",q="dc-lightbox__toolbar",S="dc-lightbox__counter",D="dc-lightbox__counter-current",L="dc-lightbox__counter-all",R="dc-lightbox__button-close",E="dc-lightbox__button-thumbnails",j="dc-lightbox__wrapper--slider",z="dc-lightbox__wrapper--has-thumbnails",N="dc-lightbox__arrow",B="dc-lightbox__slides",H="dc-lightbox__slide",G="dc-lightbox__slide--active",K="dc-lightbox__slide--prev",U="dc-lightbox__slide--next",W="dc-lightbox__slide--has-spinner",X="dc-lightbox__spinner",V="dc-lightbox__slide-content",J="dc-lightbox__img-large",Q="dc-lightbox__img-large--loading",Y="dc-lightbox__img-large--loaded",Z="dc-lightbox__img-small",tt="dc-lightbox__slide-content--prevent-anim",it="dc-lightbox__img-placeholder",et="dc-lightbox__info",nt="dc-lightbox__info--hide",st="dc-lightbox__caption",lt="dc-lightbox__caption-data",ot="dc-lightbox__crtl",at="dc-lightbox__crbr",rt="dc-lightbox__crimg",ct="dc-lightbox__inner",ht="dc-lightbox__close";function ut(t,i="",e=null,n=null){const s=document.createElement(t);i&&(s.className=i),n&&Object.entries(n).forEach(([t,i])=>{!1===i||null===i?s.removeAttribute(t):s.setAttribute(t,String(i))});const l=t=>{t instanceof Node?s.append(t):null!=t&&s.insertAdjacentHTML("beforeend",String(t))};return Array.isArray(e)?e.forEach(l):l(e),s}function dt(t,i){const e={...t};return i&&"object"==typeof i&&Object.keys(i).forEach(n=>{i[n]&&"object"==typeof i[n]&&!Array.isArray(i[n])?e[n]=dt(t[n]||{},i[n]):e[n]=i[n]}),e}const mt=new WeakMap,ft=new Map,gt=new Map,pt=new Map;let bt=!1,wt=!1;class _t{constructor(n,s={}){if(s.src){const t=s.src;if(ft.has(t))return ft.get(t);ft.set(s.src,this)}else{if(mt.has(n))return mt.get(n);mt.set(n,this)}this.el=n,this.options=dt(e,s),this.events=new t,this.state=new i({active:!1},this.events),this.extensions={};let l=n.getAttribute("href")||n.getAttribute("data-src")||"",a=this.t(l,n),r=null;"inline"===a&&(r=document.querySelector(l)),this.targetData={href:l,type:a,id:r?.getAttribute("id")||"",style:r?.getAttribute("style")||"",class:r?.getAttribute("class")||"",timer:h.timer};let c=n.getAttribute(o);if(this.galleryName=c&&"image"===a?c:null,this.galleryData=null,this.galleryName){this.smallSrc=this.el?.querySelector("img")?.src||this.targetData?.href||!1,pt.has(this.galleryName)||pt.set(this.galleryName,{instances:[],urls:[],count:0,l:[]});const t=pt.get(this.galleryName);if(t&&(this.galleryData=t,t.instances.push(this),this.smallSrc)){t.urls.push(this.smallSrc);const i=document.createElement("img");i.src=this.smallSrc,i.loading="eager",i.decoding="async",i.alt="",t.l.push(i),t.count++}}this.clickedImgRect=null}init(){if(this.state.get("active"))return;if(this.state.set("active",!0),this.options.silent)this.o();else{let t=this.el;this.h=new Map;const i=this.u.bind(this,t);this.h.set(t,i),t.addEventListener("click",i)}this.emit("before:mount"),this.options.extensions&&this.mount(this.options.extensions),this.emit("mounted"),this.m=new MutationObserver(t=>{t.forEach(t=>{t.removedNodes.forEach(t=>{(t===this.el||t.contains(this.el))&&this.destroy()})})});const t=this.el.parentElement||document.body;this.m.observe(t,{childList:!0})}p(t,i){i.preventDefault();let e=this.targetData;e.timer[0]&&clearTimeout(e.timer[0]);t.getAttribute(n)===h.closeAllPopup||this.options.closeExisting?xt.closeAll():this.closeModal()}async closeModal(){let t=this.options,i=this.targetData;if(!this.state.get("opened"))return;const{animationDuration:e}=t,{type:n}=i;if(i.readyLayout&&!i.readyLayout.classList.contains(p)){this.state.set("layout-ready",!1),bt=!0;let s=null,l=i.readyLayout.querySelector(`.${$}`);const o=()=>new Promise(requestAnimationFrame);"image"===i.type&&(s=i.readyLayout.querySelector(`.${G} .${V}`),s&&(s.classList.remove(tt),l.classList.remove(T)),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)),l.classList.remove(M),this.emit("beforeLayoutClose",{modalRef:i.readyLayout}),i.readyLayout.classList.remove(g),i.readyLayout.classList.remove(b),i.readyLayout.offsetWidth,i.readyLayout.classList.add(f,p);const a=this.el?.querySelector("img")?.getBoundingClientRect()||null;a||i.readyLayout.classList.remove(x);const r=()=>{c&&clearTimeout(c),i.readyLayout&&i.readyLayout.classList.remove(m,p,f);let e=null;"image"!==n?e=this._():this.el&&(e=this.el),"image"===n&&(i.originTarget?.remove(),i.originTarget=null,t.silent&&(this.caption&&(this.caption=null),this.options?.caption&&(this.options.caption=null),this.el=null)),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),xt.$&&(xt.$.forEach((t,i)=>{i.removeEventListener("click",t)}),xt.$.clear()),i.readyLayout?.remove(),i.readyLayout=null,this.placeholder&&(this.placeholder?.remove(),this.placeholder=null),this.emit("layoutClosed",{modalRef:e}),this.state.set("opened",!1),this.openedNumb=0,xt.hasAnyOpen||(xt.M(),document.documentElement.classList.remove("dc-lightbox-scroll"))};let c=0;if(t.zoomImageFromOrigin&&!t.silent&&a&&"image"===i.type){let t=s?.querySelector("img")?.getBoundingClientRect()||null,n=null;if(t&&(n=this.T(a,t),s.style.width=`${t.width}px`,s.style.height=`${t.height}px`,s.style.transform=`translate3d(${t.left}px, ${t.top}px, 0px)`),i.readyLayout.classList.add(_),await o(),await o(),n&&!n.isRatioCorrect){let i=s.querySelector("."+ot),e=s.querySelector("."+at),l=e.querySelector("."+rt);this.k(a,t,n.scale,i,e,l),await o(),await o()}t&&(s.style.transition=`transform ${e}ms ${h.timingFunc}`,s.style.transform=`translate3d(${n.x}px, ${n.y}px, 0px) scale(${n.scale})`),s.addEventListener("transitionend",r,{once:!0}),c=setTimeout(()=>{r()},e+1e3)}else setTimeout(()=>{r()},e)}}u(t,i){i.preventDefault();const e=t.querySelector("img");this.clickedImgRect=e?e.getBoundingClientRect():null,this.o()}async I(t){return new Promise((i,e)=>{const n=new Image;let s;const l=()=>{s&&clearInterval(s)},o=()=>{l(),i({width:n.naturalWidth,height:n.naturalHeight,imgElement:n})};if(n.onload=o,n.onerror=()=>{l(),e(new Error(`Не вдалося завантажити: ${t}`))},n.loading="eager",n.decoding="async",n.src=t,n.complete&&n.naturalWidth)return o();s=setInterval(()=>{n.naturalWidth&&n.naturalHeight&&o()},10)})}async o(){xt.A();let t=this.options,i=this.targetData,{parentContainer:e,hideScrollbar:n,autoClose:s,animationDuration:l,zoomImageFromOrigin:o,silent:c}=t;const{href:u,type:d}=i,{clickedImgRect:p}=this;if(i.originTarget=this.C(u,d),u&&i.originTarget){let u=this.O();if(!this.state.get("layout-ready"))return;if(u instanceof Node){document.querySelector(e).append(u),xt.hasAnyOpen||n&&xt.F(),xt.P(t,u,d,p);let b=this.existGallery,_=u.querySelector("."+$);if(bt=!1,"image"===d){let t=xt.q(u),i=u.querySelectorAll("."+N);i.length&&(xt.$=new Map,i.forEach(t=>{const i=xt.S.bind(this,{arrow:t,isClick:!0});xt.$.set(t,i),t.addEventListener("click",i)}));let e=t.querySelector("img"),n=o&&!c&&p,s=-1;if(n){let i=e.src;gt.has(i)&&(e.src=gt.get(i).src);let o=this.el.querySelector("img").cloneNode(!0),c=await xt.D(t,"show",n,this.el,this.clickedImgRect,!0);await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),u.classList.add(m),setTimeout(()=>{_.classList.add(M)},7);const{width:d,height:g}=await this.I(e.src);if(d&&g){let n=xt.L(d,g,t);e.classList.add(J,Q),e.style.width=n.width+"px",e.style.height=n.height+"px",o.classList.add(Z);let m=this.T(p,n),_=null,y=null,v=null;m.isRatioCorrect?t.append(o):(_=ut("div",ot),y=ut("div",at),v=ut("div",rt),v.append(e,o),_.append(v),y.append(_),t.append(y),this.k(p,n,m.scale,_,y,v)),t.style.width=`${n.width}px`,t.style.height=`${n.height}px`,t.style.transform=`translate3d(${m.x}px, ${m.y}px, 0px) scale(${m.scale})`,t.style.transformOrigin="0 0",u.classList.add(w,x),t.offsetWidth,m.isRatioCorrect||[_,y,v].forEach(t=>{t.style.transition=`transform ${l-.25*l}ms ${h.timingFunc}`}),t.style.transition=`transform ${l}ms ${h.timingFunc}`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.transform=`translate3d(${n.left}px, ${n.top}px, 0) scale(1)`,m.isRatioCorrect||[_,y,v].forEach(t=>{t.style.transform="translate3d(0,0,0)"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.remove(),c=null})});const d=async n=>{if(n.target===t&&"transform"===n.propertyName){if(t.removeEventListener("transitionend",d),!gt.has(i))try{await e.decode()}catch(n){await new Promise((t,i)=>{e.complete?t():(e.addEventListener("load",t,{once:!0}),e.addEventListener("error",i,{once:!0}))})}m.isRatioCorrect||[_,y,v].forEach(t=>{t.style.transition=`transform ${l}ms ${h.timingFuncInvert}`});let c=!1,g=0;requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.classList.add(Y);const i=n=>{if(n.target===e&&"opacity"===n.propertyName&&!c&&(c=!0,clearTimeout(g),g=null,o.src="",o.remove(),e.classList.remove(Q),e.removeAttribute("style"),e.removeEventListener("transitionend",i),t.removeAttribute("style"),u.classList.remove(w),gt.set(e.src,e),xt.R(gt,3),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.j(t),b&&(this.N(u),s=this.galleryData.instances.indexOf(this),-1!==s))){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{xt.B({...i,direction:t,i:t===a?s-1:s+1})}),wt=!0}};e.addEventListener("transitionend",i),g=setTimeout(()=>{i({target:e,propertyName:"opacity"})},2500)})}),u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})}};t.addEventListener("transitionend",d)})})}}else{const i=i=>{p||(i.style.opacity=1),xt.D(t,"hide",!1,null,null,!1),setTimeout(()=>{if(u.classList.remove(f),o&&u.classList.add(x),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.emit("layoutOpened",{modalRef:u}),this.j(t),b&&(this.N(u),s=this.galleryData.instances.indexOf(this),-1!==s)){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{xt.B({...i,direction:t,i:t===a?s-1:s+1})}),wt=!0}},l)};u.classList.add(m),setTimeout(()=>{_.classList.add(M)},1),this.H(e,(i,e)=>{xt.D(t,i,n,this.el,this.clickedImgRect,e)}).then(async()=>{await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),i(e)})}}else u.classList.add(m),setTimeout(()=>{_.classList.add(M)},1);this.emit("layoutReady",{modalRef:u}),u.classList.add(g,f),i.readyLayout=u,setTimeout(()=>{"image"!==d&&(this.state.set("opened",!0),this.openedNumb=++h.openedCounter,u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})),this.G(),t&&s&&(i.timer[0]=setTimeout(()=>{this.closeModal()},s))},l)}}}O(){let t=this.targetData;const{id:i,style:e,class:n,type:s}=t;this.emit("beforeLayoutOpen",{modalRef:t.originTarget});let l=document.createElement("div"),o=this.K();if(l.append(o),l.classList.add(d),"image"!==s){const t=l.querySelector(`.${ct}`);t&&Array.from(t.children).filter(t=>!t.classList.contains(ht)).forEach(t=>{i&&(t.id=i),e&&t.setAttribute("style",e),n&&(t.className=n),t.style.display="block"})}return this.state.set("layout-ready",!0),l}K(){const t=this.targetData,{type:i,id:e}=t,{backdropClick:s,icon:l,thumbnailsIcon:o,showThumbnailsOnOpen:a,zoomImageFromOrigin:r}=this.options,c=document.createDocumentFragment();["id","style","class"].forEach(i=>t.originTarget.removeAttribute(i));const u=s&&Array.isArray(h.backdrop_actions)&&h.backdrop_actions.includes(s)?s:null,d=u&&"image"!==i?{[n]:u}:null;if("image"===i){let i=ut("div",q,[ut("button",R,l,{[n]:""})]),e=ut("div",$),s=ut("div",`${v} ${j}`,null,d),h=ut("div",B),u=ut("div",`${H} ${G}`,null,d);h.append(u);let m=ut("div",k,null),f=ut("div",V);t.originTarget instanceof Node?(r&&(t.originTarget.style.opacity=0),f.append(t.originTarget)):f.innerHTML=t.originTarget,m.append(f),u.append(m),this.U(u),s.append(h);if(this.existGallery){const t=this.galleryData.instances.indexOf(this);let e=ut("div",S),n=ut("span",D,t+1),l=ut("span",L,this.galleryData.count);e.append(n,l),i.prepend(e);let r=ut("div",`${H} ${K}`,null,d),c=ut("div",`${H} ${U}`,null,d);h.prepend(r),h.append(c),s.prepend(ut("div",`${N} ${N}--prev`,this.options.arrowIcon)),s.append(ut("div",`${N} ${N}--next`,this.options.arrowIcon));let u=ut("button",E,o);e.after(u);let m=ut("div",I),f=ut("div",C),g=ut("div",O);f.append(g),m.append(f),s.append(m);const p=localStorage.getItem("dcThumbnails");(null!==p?"true"===p:a)&&s.classList.add(z),u.addEventListener("click",()=>{const t=s.classList.toggle(z);localStorage.setItem("dcThumbnails",t)})}return c.append(i,e,s),c}let m=ut("div",$),f=ut("div",v),g=ut("span",y,null,d),p=ut("div",ct),b=ut("button",ht,l,{[n]:""});return p.append(b),t.originTarget instanceof Node?(this.placeholder=document.createComment(`placeholder-for-${e||"element"}`),t.originTarget.before(this.placeholder),p.append(t.originTarget)):p.innerHTML+=t.originTarget,f.append(g,p),c.append(m,f),c}_(){if(this.placeholder?.parentNode){let t=this.targetData.readyLayout.querySelector("#"+this.targetData.id);if(t)return t.style.display="none",this.placeholder.replaceWith(t),t}return!1}C(t,i=this.options.type){return"image"===i?this.W(t):this.X(t)}W(t){if(!t)return!1;let i=document.createElement("img");return i.src=t,i.alt="",i}V(){let t=this.options.caption;if(this.el){const i=this.el.getAttribute(l);i&&"false"!==i&&(t=i)}return t&&(t=t.trim()),t}X(t){if(!t||!t.startsWith("#")||t.length<=1)return!1;const i=document.querySelector(t);return!!i&&(!this.state.get("opened")&&i)}t(t,i=null){if(i){const t=i.getAttribute(s);if(t&&"false"!==t)return t}let e=this?.options?.type||"inline";return t&&/(^data:image\/[a-z0-9+\/=]*,)|\.(jpe?g|gif|png|bmp|webp|svg|ico)([\?#].*)?$/i.test(t)&&(e="image"),e}mount(t){for(const[i,e]of Object.entries(t)){let t=e;if("object"==typeof t&&null!==t&&("function"==typeof t[i]?t=t[i]:"function"==typeof t.default&&(t=t.default)),"function"!=typeof t)continue;const n=new t(this);this.extensions[i]=n,"function"==typeof n.mount&&n.mount()}}on(t,i){return this.events.on(t,i),this}off(t,i){return this.events.off(t,i),this}emit(t,i){return this.events.emit(t,i),this}destroy(){this.state.get("active")&&(this.emit("before:destroy"),this.m&&(this.m.disconnect(),this.m=null),Object.keys(this.extensions).forEach(t=>{this.extensions[t].destroy?.(),this.extensions[t]=null}),this.extensions={},this.el&&(mt.delete(this.el),xt.instances.delete(this),this.el=null),this.targetData&&(this.targetData=null),this.placeholder&&(this.placeholder=null),this.openedNumb&&(this.openedNumb=null),this.galleryData&&(pt.delete(this.galleryName),this.galleryData=null),gt&>.clear(),this?.options?.src&&ft.delete(this.options.src),this.h&&(this.h.forEach((t,i)=>{i.removeEventListener("click",t)}),this.h.clear()),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),h.openedCounter=0,this.state.set("active",!1),this.state.set("layout-ready",!1),this.emit("destroyed"),this.events.clear())}k(t,i,e,n,s,l){const o=2*e,a=.5*i.width-t.width/o,r=.5*i.height-t.height/o,c=(t,i,e)=>{const n=Math.round(1e4*i)/1e4,s=Math.round(1e4*e)/1e4;t.style.transform=`translate3d(${n}px, ${s}px, 0)`};c(n,2*a,2*r),c(s,-a,-r),c(l,-a,-r)}T(t,i){if(!t||!i)return;const e=t.width/i.width,n=t.height/i.height,s=e.toFixed(2)===n.toFixed(2),l=Math.max(e,n);return{isRatioCorrect:s,scale:l,x:.5*t.width+t.left-i.width*l*.5,y:.5*t.height+t.top-i.height*l*.5}}H(t,i){const e=!t.complete||0===t.naturalWidth;let n=!1;const s=(t=!1)=>{n||(n=!0,i("show",t))};return(e?new Promise(i=>{s(),t.addEventListener("load",i,{once:!0}),t.addEventListener("error",i,{once:!0})}):Promise.resolve()).then(()=>{if(t.decode)return s(!0),t.decode().catch(t=>{})}).finally(()=>{})}G(){let t=this.targetData.readyLayout.querySelectorAll(`[${n}]`);t.length&&(this.v=new Map,t.forEach(t=>{const i=this.p.bind(this,t);this.v.set(t,i),t.addEventListener("click",i)}))}U(t){const i=this.V();if(t?.querySelector("."+et)?.remove(),i){this.caption=i;const e=ut("div",et),n=ut("div",st),s=ut("div",lt,i);n.append(s),e.append(n),t.append(e),e.addEventListener("click",t=>{t.stopPropagation()})}}j(t){let i={activeSlide:t.closest("."+G),pSlide:null,nSlide:null},e=t.closest("."+k),n=null,s=!0,l=null,o=!0,c=0,u=0,d=null,m=0,f=0,g=!1,p=!1;let b=this.options.animationDuration||100,w=this.options.zoomImageFromOrigin,_=null,x=null,y=!1,v=!1,M=null,C=null,O=null,F=!1,P=!1,q=null,S=null,D=0,L=0,R=0,E=null,j=t.closest("."+B);const H=b=>{if(b.pointerId===E&&g){if(g=!1,j.style.transition="","x"===d){const t=f-u;D=Math.max(-1.5,Math.min(1.5,D)),D*=.95;const i=.18*M,e=.35,n=t+D*M*.35;if(p&&_&&(Math.abs(n)>i||Math.abs(D)>e)){const t=this.state.get("opened"),i=n>0?a:r;let e=document.querySelector("."+N+"--"+i);e&&t&&xt.S.call(this,{arrow:e,isClick:!1})}else p&&(j.style.transform="",setTimeout(()=>{j.style.willChange="auto"},this.options.slideChangeDuration))}if("y"===d){const a=m-c,r=Math.min(100,.2*q);p&&Math.abs(a)>r?(C.style.opacity=0,C=null,w||(t.style.opacity=0),bt=!0,this.closeModal()):p&&(t.style.transition=`transform 0.3s ${h.timingFunc}`,t.style.transform="",C.style.transition=`opacity 0.3s ${h.timingFunc}`,C.style.opacity=1,S=setTimeout(()=>{t.style.transition="",C.style.transition="",C.style.opacity="",C.classList.remove(T),t.style.willChange="",n&&(n.classList.remove(nt),s=!0),l&&(l.classList.remove(A),o=!0,i.activeSlide.style.overflow="",e.style.overflow=""),n=null,l=null},300),w||(t.style.animation="",t.classList.add(tt)))}c=0,u=0,m=0,f=0,M=null,q=null,p=!1,d=null,e.releasePointerCapture(E),E=null}},K=(t,i)=>{if(d)return d;const e=Math.abs(t),n=Math.abs(i);return e<24&&n<24?null:(d=e>n?"x":"y",d)};e.addEventListener("pointerdown",e=>{if(null!==E)return;E=e.pointerId,this.state.get("layout-ready")&&(S&&clearTimeout(S),c=e.clientY,u=e.clientX,m=c,f=u,M=document.documentElement.clientWidth,q=document.documentElement.clientHeight,_=this.existGallery,C=this.targetData.readyLayout.querySelector("."+$),C.style.willChange="opacity",C.classList.add(T),d=null,g=!0,p=!1,n=i.activeSlide.querySelector("."+et),l=i.activeSlide.closest("."+z)?.querySelector("."+I),w?(t.style.transition="",t.style.willChange="transform"):(t.style.opacity=1,t.style.transition=`opacity ${b}ms ${h.timingFunc}`,t.style.willChange="transform, opacity"),_&&(i.pSlide=xt.J(this,a),i.nSlide=xt.J(this,r)),j.style.transition="none",j.style.willChange="transform")}),e.addEventListener("pointermove",a=>{if(a.pointerId!==E)return;if(!g)return;m=a.clientY,f=a.clientX;const r=m-c,h=f-u;if(K(h,r),"x"===d){const i=performance.now();if(D=(f-L)/(i-R),L=f,R=i,!p){if(Math.abs(h)<20)return;p=!0,x=h>0?1:-1,t.style.willChange=""}const e=h-20*x;e>0&&!y?(y=!0,v=!1):e<0&&!v&&(v=!0,y=!1);const n=e/M*100;j.style.transform=`translate3d(${n}%, 0, 0)`}if("y"===d){if(!p){if(Math.abs(r)<40)return;p=!0,j.style.willChange="",O=r>0?1:-1}const a=r-40*O;a>0&&!P?(P=!0,F=!1):a<0&&!F&&(F=!0,P=!1);const c=a/q*100,h=Math.abs(c+(P?-100:100));C.style.opacity=h+"%",w&&this.clickedImgRect||(t.style.animation="none"),t.style.transform=`translate3d(0, ${a}px, 0)`,n&&s&&(s=!1,n.classList.add(nt)),l&&o&&(o=!1,l.classList.add(A),i.activeSlide.style.overflow="visible",e.style.overflow="visible")}p&&e.setPointerCapture(E),a.cancelable&&a.preventDefault()}),e.addEventListener("pointerup",H),e.addEventListener("pointercancel",H)}get existGallery(){return this.galleryData?.urls.length>1||!1}N(t){if(this.existGallery){let i=this.galleryData,e=t,n=t.querySelector("."+I),s=e.querySelector("."+C),l=e.querySelector("."+O),o=null,c=i.instances.indexOf(this);if(this.galleryData.l.length>1){const t=document.createDocumentFragment();this.galleryData.l.forEach((i,e)=>{let n=document.createElement("div");n.className=F,n.dataset.index=e,n.appendChild(i.cloneNode(!0)),t.appendChild(n)}),l.appendChild(t)}o=l.querySelectorAll("."+F),n.addEventListener("click",t=>{if(t.target.closest(`.${P}`))return;const i=t.target.closest(`.${F}`);if(!i)return;const e=i.parentNode.children;let n=-1,o=null,c=0;for(const t of e)t.classList.contains(P)&&(n=c),c++;if(o=this.galleryData.instances[n],!o||!o.state.get("opened")||!wt)return;l.style.transition="",e[n].classList.remove(P),i.classList.add(P);let h=parseInt(i.getAttribute("data-index")),u=h>n?r:a,d=document.querySelector("."+N+"--"+u);xt.S.call(o,{arrow:d,isClick:!1,isThumbnailClick:!0,targetIndex:h}),xt.Y({viewportThumbnail:s,sliderThumbnails:l,activeThumbnail:i})});const h=n.querySelector("."+C);if(xt.Z(h),-1!==c){const t=o[c];t&&(t.classList.add(P),xt.Y({viewportThumbnail:s,sliderThumbnails:l,activeThumbnail:t,silent:!0}))}}}}class xt{static instances=new Map;static Extensions={};constructor(t=null,i={}){let e=null;if(null===t){i.silent=!0;let t=ut("a","","",{href:i?.src||"",caption:i?.caption||""});e=xt.tt(t)}else e=xt.tt(t);if(!e.length)return null;const n=e.map(e=>{if(null===t){let t=i?.src||"";if(ft.has(t))return ft.get(t)}else if(mt.has(e))return mt.get(e);const n=new _t(e,i);return xt.instances.set(n,n),n}),s=1===n.length?n[0]:n;return Array.isArray(s)&&(s.on=(t,i)=>(s.forEach(e=>e.on(t,i)),s)),setTimeout(()=>{Array.isArray(s)?s.forEach(t=>t.init()):s.init()},0),s}static tt(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:Array.isArray(t)?t.filter(t=>t instanceof HTMLElement):[]}static destroyAll(){Array.from(this.instances.values()).forEach(t=>{t.destroy()}),this.instances.clear()}static closeAll(){this.allOpened.forEach(t=>{t.closeModal()}),h.openedCounter=0}static get allOpened(){return Array.from(this.instances.values()).filter(t=>t.state.get("opened")).sort((t,i)=>i.openedNumb-t.openedNumb)}static get hasAnyOpen(){for(const t of this.instances.values())if(t.state.get("opened"))return!0;return!1}static get lastOpenedInstance(){let t=null,i=-1;for(const e of this.instances.values())e.state.get("opened")&&e.openedNumb>i&&(i=e.openedNumb,t=e);return t}static P(t,i,e,n){let{animationDuration:s=0,effect:l="fadeInDown",zoomImageFromOrigin:o}=t;o&&!t.silent&&"image"===e&&n&&(l="fadeIn");const a=h.openEffects.includes(l)?l:"fadeInDown",r={fadeInDown:-40,fadeInUp:40}[a]??0,c={"--animationDuration":`${Number(s)||0}ms`,"--animationEffect":a,"--imageInitPosition":`${r}px`,"--slideChangeDuration":t.slideChangeDuration+"ms","--slideOffset":t.slideOffset};Object.entries(c).forEach(([t,e])=>{i.style.setProperty(t,e)})}static async it(t){await new Promise((i,e)=>{t.complete?i():(t.addEventListener("load",i,{once:!0}),t.addEventListener("error",e,{once:!0}))});try{await t.decode()}catch(t){}return t}static async D(t,i="show",e=!0,n=null,s=null,l=!1){const o="."+X,a="."+it,r="."+H,c=t.querySelector(o),h=t.closest(r),u=e&&n&&s;if("show"===i){if(!l&&!c&&(t.append(ut("div",X)),h?.classList.add(W)),u){const i=h?.querySelector(a);if(!i){const i=n.querySelector("img");if(i){const e=i.cloneNode(!1);return Object.assign(e.style,{width:s.width+"px",height:s.height+"px",top:s.top+"px",left:s.left+"px"}),e.classList.add(it),t.before(e),await xt.it(e)}}}}else if("hide"===i){const t=h?.querySelector(a);t&&setTimeout(()=>{t.remove()},4),c?.remove(),h?.classList.remove(W)}}static show(t){if(t?.src||"")return new xt(null,t)}static J(t,i){const e={[a]:K,[r]:U,[c]:G}[i];return t.targetData.readyLayout.querySelector(`.${e}`)}static async B(t={}){const{gallery:i,i:e=0,direction:n="next",instance:s}=t;bt=!1;const l=i[(e+i.length)%i.length];if(!s.targetData.readyLayout)return;let o=xt.J(s,n);o.innerHTML="";let a=ut("div",k),r=ut("div",V);a.append(r),o.append(a),xt.D(r,"show",!1,null,null,!1);let c=await(u=l.targetData.href,gt.has(u)?Promise.resolve(gt.get(u)):new Promise(t=>{const i=async()=>{try{const i=await async function(t){if(gt.has(t))return gt.get(t);const i=new Image;if(await new Promise((e,n)=>{i.onload=e,i.onerror=n,i.loading="eager",i.decoding="async",i.src=t}),i.decode)try{await i.decode()}catch(t){}return gt.set(t,i),xt.R(gt,3),i}(u);t(i)}catch(i){t(null)}};"requestIdleCallback"in window?requestIdleCallback(i,{timeout:200}):setTimeout(i,0)}));var u;let d=c.cloneNode(!1);return d&&d.decode&&d.decode().then(()=>{xt.D(r,"hide",!1,null,null,!1)}).catch(()=>{xt.D(r,"hide",!1,null,null,!1)}),bt?void 0:(r.append(d),new Promise(t=>{let i=null,e=null,n=null;const s=xt.L(d.naturalWidth,d.naturalHeight,d.parentElement),o=l.el.querySelector("img")?.getBoundingClientRect();let a=l.T(o,s);a?.isRatioCorrect||(i=ut("div",ot),e=ut("div",at),n=ut("div",rt),n.append(d),i.append(n),e.append(i),[i,e,n].forEach(t=>{t.style.transform="translate3d(0, 0, 0)",t.style.transition=`transform ${l.options.animationDuration}ms ${h.timingFuncInvert}`}),r.append(e)),t()}))}static S(t,i){let{arrow:e,isClick:n,isThumbnailClick:s=!1,targetIndex:l=-1}=t;!0===n&&(i.preventDefault(),i.stopPropagation());let o=!!e.classList.contains(`${N}--${r}`),h=this.galleryData.instances;const u=h.findIndex(t=>t.state.get("opened")),d=-1!==u?h[u]:null;if(!d)return;if(!wt)return;wt=!1;let m=d.state.get("layout-ready");if(-1!==u&&m){d.state.set("layout-ready",!1),d.state.set("opened",!1),d.openedNumb=0,d.targetData.readyLayout.classList.add(b);let t=xt.J(d,a),i=xt.J(d,r),e=xt.J(d,c),n=null,m=null,f=null,g=!0,p=null;if(s&&-1!==l){if(f=l,n=h[f],g=1===Math.abs(u-l),!g){let t=o?r:a;p=xt.B({gallery:h,instance:d,direction:t,i:f})}}else m=o?1:-1,f=(u+m+h.length)%h.length,n=h[f];const w=o?i:t;w.style.visibility="visible";const _=o?t:i;let x=null;x=""+(o?"to-left":"to-right");let y=e.closest("."+B);if(y.style.willChange="transform",!s){let t=document.querySelector("."+I);if(t){let i=t.querySelector("."+C),e=t.querySelector("."+O),n=e.querySelectorAll("."+F),s=n[f];for(const t of n)t.classList.remove(P);s.classList.add(P),xt.Y({viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:s})}}const v=async t=>{if(t.target===y&&"transform"===t.propertyName){y.style.transition="none",y.style.transform="",y.classList.remove("to-left","to-right"),n.targetData.readyLayout=d.targetData.readyLayout,n.state.set("layout-ready",!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y.style.transition="",n.state.set("opened",!0),n.openedNumb=1})}),n.G(),d.v&&(d.v.forEach((t,i)=>{i.removeEventListener("click",t)}),d.v.clear()),d.targetData.originTarget?.remove(),d.targetData.originTarget=null,d.targetData.readyLayout=null;const t={next:U,prev:K};let i=`${H} ${t[o?a:r]}`,s=`${H} ${t[o?r:a]}`,l=`${H} ${G}`;const c=(t,i)=>{t.className=i,t.innerHTML="",t.style.transform="",t.style.visibility=""};c(e,i),w.className=l,w.style.transform="",w.style.visibility="",y.removeEventListener("transitionend",v),c(_,s),document.querySelector("."+D).innerText=+f+1,xt.q(n.targetData.readyLayout);let u=n.targetData.readyLayout.querySelector(`.${V}`);n.j(u);const m=[a,r],b={gallery:h,instance:n};g||await p,m.forEach(t=>{xt.B({...b,direction:t,i:t===a?f-1:f+1})}),wt=!0}};requestAnimationFrame(()=>{y.classList.add(x),n.U(w)}),y.addEventListener("transitionend",v)}}static A(t=!1){this.et||(document.addEventListener("keydown",t=>{let i=t.key;if("Escape"===i){const t=this.lastOpenedInstance;t&&(t?.options?.closeExisting?xt.closeAll():t.closeModal())}if("ArrowLeft"===i||"ArrowRight"===i){const t=this.lastOpenedInstance;let e="ArrowLeft"===i?a:r,n=document.querySelector("."+N+"--"+e);n&&t&&xt.S.call(t,{arrow:n,isClick:!1})}}),this.et=!0)}static F(){const t=document.documentElement.scrollHeight>window.innerHeight;document.body.classList.contains(u)||(document.body.classList.add(u),t?document.documentElement.classList.add("dc-lightbox-scroll"):document.documentElement.classList.remove("dc-lightbox-scroll"))}static M(){document.body.classList.remove(u)}static q(t){const i=t.querySelector("."+G+" ."+V);return i?(i.addEventListener("click",function(t){t.stopPropagation()}),i):null}static Y(t){const{viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:n,silent:s=!1}=t,l=i.clientWidth,o=e.scrollWidth,a=window.getComputedStyle(e),r=new DOMMatrixReadOnly(a.transform).m41;if(e.style.transition=s?"none":"",o<=l){const t=(l-o)/2;return void(e.style.transform=`translateX(${t}px)`)}const c=l/2,h=n.offsetLeft+n.offsetWidth/2,u=h+r;let d=r;(u<.3*l||u>.7*l)&&(d=c-h);const m=l-o;d=Math.max(m,Math.min(0,d)),Math.abs(d-r)<1||(e.style.transform=`translateX(${d}px)`)}static Z(t){const i=t.querySelector("."+O);if(!i)return;let e=0,n=0,s=0,l=!1,o=!1,a=0,r=null;let c=null,h=0,u=0,d=0,m=null;const f=()=>{const t=window.getComputedStyle(i);let e;if(window.DOMMatrix)e=new DOMMatrixReadOnly(t.transform);else{if(!window.WebKitCSSMatrix)return 0;e=new WebKitCSSMatrix(t.transform)}return e.m41},g=()=>{let t=f();const{min:e,max:n}=(()=>{const t=i.scrollWidth;if(t<=r){const i=(r-t)/2;return{min:i,max:i}}return{min:Math.min(0,r-t),max:0}})();h=Math.max(-60,Math.min(60,h));const s=()=>{if(t+=h,h*=.96,t>n&&(t=n),t<e&&(t=e),i.style.transform=`translate3d(${t}px,0,0)`,Math.abs(h)>.1&&t>e&&t<n)m=requestAnimationFrame(s);else{const s=Math.max(e,Math.min(n,t));i.style.transition="",s!==t&&(i.style.transform=`translate3d(${s}px,0,0)`),m=null}};m=requestAnimationFrame(s)},p=i=>{if(i.pointerId===c&&l){l=!1,o&&g(),o=!1;try{t.releasePointerCapture(c)}catch(t){}c=null}};let b={passive:!1};t.addEventListener("pointerdown",g=>{null===c&&(m&&cancelAnimationFrame(m),m=null,"touch"===g.pointerType&&!1===g.isPrimary||(c=g.pointerId,e=g.clientX,n=e,u=e,d=performance.now(),r=t.clientWidth,s=f(),h=0,l=!0,o=!1,a=0,i.style.transition=""))},b),t.addEventListener("pointermove",r=>{if(r.pointerId!==c||!l)return;n=r.clientX;const m=n-e;if(!o){if(Math.abs(m)<20)return;o=!0,a=m>0?1:-1,t.setPointerCapture(c),i.style.transition="none"}const f=s+(m-20*a);i.style.transform=`translate3d(${f}px,0,0)`;const g=performance.now(),p=g-d;p>0&&(h=(n-u)/p*16.67),u=n,d=g,r.cancelable&&r.preventDefault()},b),t.addEventListener("pointerup",p,b),t.addEventListener("pointercancel",p,b)}static R(t,i){for(;t.size>i;){const i=t.keys().next().value;t.delete(i)}}static L(t,i,e){const n=i/t,s=e.getBoundingClientRect();let l=s.width,o=l*n;o>s.height&&(o=s.height,l=o/n);return{width:l,height:o,left:s.left+(s.width-l)/2,top:s.top+(s.height-o)/2}}}export{xt as default};
|
|
8
|
+
class t{constructor(){this.events={}}on(t,i){return this.events[t]||(this.events[t]=[]),this.events[t].push(i),this}off(t,i){return this.events[t]?(this.events[t]=this.events[t].filter(t=>t!==i),this):this}once(t,i){const e=(...n)=>{this.off(t,e),i(...n)};return this.on(t,e),this}emit(t,...i){return this.events[t]&&[...this.events[t]].forEach(t=>t(...i)),this}clear(){this.events={}}}class i{constructor(t={},i=null){this.data=t,this.events=i}set(t,i){const e=this.data[t];e!==i&&(this.data[t]=i,this.events&&(this.events.emit(`state:${t}`,i,e),this.events.emit("state:change",t,i,e)))}get(t){return this.data[t]}merge(t,i=!0){const e={...this.data};this.data={...this.data,...t},!i&&this.events&&this.events.emit("state:change","multiple",this.data,e)}}const e={icon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M6 6L18 18M18 6L6 18"/></svg>',iconZoom:'<svg class="icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><circle cx="5.5" cy="5.5" r="5"></circle><path d="M3.5 5.5h4"></path><path class="dc-lightbox__button-zoom-line" d="M5.5 3.5v4"></path><path d="M14.5 14.5l-5.367-5.367"></path></g></svg>',maxZoom:3,thumbnailsIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><rect x="3" y="17" width="4" height="4" rx="1"/><rect x="10" y="17" width="4" height="4" rx="1"/><rect x="17" y="17" width="4" height="4" rx="1"/></svg>',showThumbnailsOnOpen:!0,arrowIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4L7 12L15 20"/></svg>',backdropClick:"close",closeExisting:!1,parentContainer:"body",hideScrollbar:!0,effect:"fadeInDown",zoomImageFromOrigin:!0,animationDuration:400,autoClose:!1,type:"inline",caption:!1,slideChangeDuration:280,slideOffset:.1,beforeLayoutOpen:()=>{},layoutReady:()=>{},layoutOpened:()=>{},beforeLayoutClose:()=>{},layoutClosed:()=>{},extensions:{}},n="data-close",s="data-type",o="data-caption",l="data-gallery",a="prev",r="next",c="active",h={fallbackBase64:"data:image/svg+xml;base64,"+btoa('\n <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">\n <rect width="100%" height="100%" fill="#ddd"/>\n </svg>\n '),openedCounter:0,timer:[0],backdrop_actions:["close"],openEffects:["fadeInDown","fadeIn","fadeInUp","zoomIn"],closeAllPopup:"close-all",timingFunc:"cubic-bezier(0.4, 0, 0.22, 1)",timingFuncInvert:"cubic-bezier(0.78, 0, 0.6, 1)"},u="body--hidden",d="dc-lightbox",m="dc-lightbox--visible",f="dc-lightbox--animating",g="dc-lightbox--opened",p="dc-lightbox--closing",x="dc-lightbox--gallery",b="dc-lightbox--scale-from-origin-in",_="dc-lightbox--scale-to-origin-out",w="dc-lightbox--scaled-from-origin",y="dc-lightbox__close-area",v="dc-lightbox__wrapper",M="dc-lightbox__overlay",$="dc-lightbox__overlay--show",T="dc-lightbox__overlay--prevent-anim",k="dc-lightbox__viewport",A="dc-lightbox__thumbnails",C="dc-lightbox__thumbnails--hide",I="dc-lightbox__thumbnails-viewport",O="dc-lightbox__thumbnails-slider",F="dc-lightbox__thumbnails-slide",q="dc-lightbox__thumbnails-slide--active",D="dc-lightbox__toolbar",P="dc-lightbox__counter",S="dc-lightbox__counter-current",z="dc-lightbox__counter-all",L="dc-lightbox__button-close",R="dc-lightbox__button-zoom",j="dc-lightbox__button-zoom--in",E="dc-lightbox__button-zoom--disabled",X="dc-lightbox__button-thumbnails",Y="dc-lightbox__wrapper--slider",B="dc-lightbox__wrapper--has-thumbnails",N="dc-lightbox__arrow",Z="dc-lightbox__slides",H="dc-lightbox__slide",G="dc-lightbox__slide--active",U="dc-lightbox__slide--prev",K="dc-lightbox__slide--next",V="dc-lightbox__slide--has-spinner",W="dc-lightbox__spinner",J="dc-lightbox__slide-content",Q="dc-lightbox__img-large",tt="dc-lightbox__img-large--loading",it="dc-lightbox__img-large--loaded",et="dc-lightbox__img-zoomable",nt="dc-lightbox__img-grabbing",st="dc-lightbox__slide-content--zoomIn",ot="dc-lightbox__img-small",lt="dc-lightbox__slide-content--prevent-anim",at="dc-lightbox__img-placeholder",rt="dc-lightbox__info",ct="dc-lightbox__info--hide",ht="dc-lightbox__caption",ut="dc-lightbox__caption-data",dt="dc-lightbox__crtl",mt="dc-lightbox__crbr",ft="dc-lightbox__crimg",gt="dc-lightbox__inner",pt="dc-lightbox__close";function xt(t,i="",e=null,n=null){const s=document.createElement(t);i&&(s.className=i),n&&Object.entries(n).forEach(([t,i])=>{!1===i||null===i?s.removeAttribute(t):s.setAttribute(t,String(i))});const o=t=>{t instanceof Node?s.append(t):null!=t&&s.insertAdjacentHTML("beforeend",String(t))};return Array.isArray(e)?e.forEach(o):o(e),s}function bt(t,i){const e={...t};return i&&"object"==typeof i&&Object.keys(i).forEach(n=>{i[n]&&"object"==typeof i[n]&&!Array.isArray(i[n])?e[n]=bt(t[n]||{},i[n]):e[n]=i[n]}),e}const _t=new WeakMap,wt=new Map,yt=new Map,vt=new Map;let Mt=!1,$t=!1;class Tt{constructor(n,s={}){if(s.src){const t=s.src;if(wt.has(t))return wt.get(t);wt.set(s.src,this)}else{if(_t.has(n))return _t.get(n);_t.set(n,this)}this.el=n,this.options=bt(e,s),this.events=new t,this.state=new i({active:!1},this.events),this.extensions={};let o=n.getAttribute("href")||n.getAttribute("data-src")||"",a=this.t(o,n),r=null;"inline"===a&&(r=document.querySelector(o)),this.targetData={href:o,type:a,id:r?.getAttribute("id")||"",style:r?.getAttribute("style")||"",class:r?.getAttribute("class")||"",timer:h.timer};let c=n.getAttribute(l);if(this.galleryName=c&&"image"===a?c:null,this.galleryData=null,this.galleryName){this.smallSrc=this.el?.querySelector("img")?.src||this.targetData?.href||!1,vt.has(this.galleryName)||vt.set(this.galleryName,{instances:[],urls:[],count:0,o:[]});const t=vt.get(this.galleryName);if(t&&(this.galleryData=t,t.instances.push(this),this.smallSrc)){t.urls.push(this.smallSrc);const i=document.createElement("img");i.src=this.smallSrc,i.loading="eager",i.decoding="async",i.alt="",t.o.push(i),t.count++}}this.clickedImgRect=null}init(){if(this.state.get("active"))return;if(this.state.set("active",!0),this.options.silent)this.l();else{let t=this.el;this.h=new Map;const i=this.u.bind(this,t);this.h.set(t,i),t.addEventListener("click",i)}this.emit("before:mount"),this.options.extensions&&this.mount(this.options.extensions),this.emit("mounted"),this.m=new MutationObserver(t=>{t.forEach(t=>{t.removedNodes.forEach(t=>{(t===this.el||t.contains(this.el))&&this.destroy()})})});const t=this.el.parentElement||document.body;this.m.observe(t,{childList:!0})}p(t,i){i.preventDefault();let e=this.targetData;e.timer[0]&&clearTimeout(e.timer[0]);t.getAttribute(n)===h.closeAllPopup||this.options.closeExisting?kt.closeAll():this.closeModal()}async closeModal(){let t=this.options,i=this.targetData;if(!this.state.get("opened"))return;const{animationDuration:e}=t,{type:n}=i;if(i.readyLayout&&!i.readyLayout.classList.contains(p)){this.state.set("layout-ready",!1),Mt=!0;let s=null,o=i.readyLayout.querySelector(`.${M}`);const l=()=>new Promise(requestAnimationFrame);"image"===i.type&&(s=i.readyLayout.querySelector(`.${G} .${J}`),s&&(s.classList.remove(lt),o.classList.remove(T)),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)),o.classList.remove($),this.emit("beforeLayoutClose",{modalRef:i.readyLayout}),i.readyLayout.classList.remove(g),i.readyLayout.classList.remove(x),i.readyLayout.offsetWidth,i.readyLayout.classList.add(f,p);const a=this.el?.querySelector("img")?.getBoundingClientRect()||null;a||i.readyLayout.classList.remove(w);const r=()=>{c&&clearTimeout(c),i.readyLayout&&i.readyLayout.classList.remove(m,p,f);let e=null;"image"!==n?e=this._():this.el&&(e=this.el),"image"===n&&(i.originTarget?.remove(),i.originTarget=null,t.silent&&(this.caption&&(this.caption=null),this.options?.caption&&(this.options.caption=null),this.el=null)),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),kt.M&&(kt.M.forEach((t,i)=>{i.removeEventListener("click",t)}),kt.M.clear()),i.readyLayout?.remove(),i.readyLayout=null,this.placeholder&&(this.placeholder?.remove(),this.placeholder=null),this.emit("layoutClosed",{modalRef:e}),this.state.set("opened",!1),this.openedNumb=0,kt.hasAnyOpen||(kt.$(),document.documentElement.classList.remove("dc-lightbox-scroll"))};let c=0;if(t.zoomImageFromOrigin&&!t.silent&&a&&"image"===i.type){let t=s?.querySelector("img")?.getBoundingClientRect()||null,n=null;if(t&&(n=this.T(a,t),s.style.width=`${t.width}px`,s.style.height=`${t.height}px`,s.style.transform=`translate3d(${t.left}px, ${t.top}px, 0px)`),i.readyLayout.classList.add(_),await l(),await l(),n&&!n.isRatioCorrect){let i=s.querySelector("."+dt),e=s.querySelector("."+mt),o=e.querySelector("."+ft);this.k(a,t,n.scale,i,e,o),await l(),await l()}t&&(s.style.transition=`transform ${e}ms ${h.timingFunc}`,s.style.transform=`translate3d(${n.x}px, ${n.y}px, 0px) scale(${n.scale})`),s.addEventListener("transitionend",r,{once:!0}),c=setTimeout(()=>{r()},e+1e3)}else setTimeout(()=>{r()},e)}}u(t,i){i.preventDefault();const e=t.querySelector("img");this.clickedImgRect=e?e.getBoundingClientRect():null,this.l()}async A(t){return new Promise((i,e)=>{const n=new Image;let s;const o=()=>{s&&clearInterval(s)},l=()=>{o(),i({width:n.naturalWidth,height:n.naturalHeight,imgElement:n})};if(n.onload=l,n.onerror=()=>{o(),e(new Error(`Не вдалося завантажити: ${t}`))},n.loading="eager",n.decoding="async",n.src=t,n.complete&&n.naturalWidth)return l();s=setInterval(()=>{n.naturalWidth&&n.naturalHeight&&l()},10)})}async l(){kt.C();let t=this.options,i=this.targetData,{parentContainer:e,hideScrollbar:n,autoClose:s,animationDuration:o,zoomImageFromOrigin:l,silent:c}=t;const{href:u,type:d}=i,{clickedImgRect:p}=this;if(i.originTarget=this.I(u,d),u&&i.originTarget){let u=this.O();if(!this.state.get("layout-ready"))return;if(u instanceof Node){document.querySelector(e).append(u),kt.hasAnyOpen||n&&kt.F(),kt.q(t,u,d,p);let x=this.existGallery,_=u.querySelector("."+M);if(Mt=!1,"image"===d){let t=kt.D(u),i=u.querySelectorAll("."+N);i.length&&(kt.M=new Map,i.forEach(t=>{const i=kt.P.bind(this,{arrow:t,isClick:!0});kt.M.set(t,i),t.addEventListener("click",i)}));let e=t.querySelector("img"),n=l&&!c&&p,s=-1;if(n){let i=e.src;yt.has(i)&&(e.src=yt.get(i).src);let l=this.el.querySelector("img").cloneNode(!0),c=await kt.S(t,"show",n,this.el,this.clickedImgRect,!0);await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),u.classList.add(m),setTimeout(()=>{_.classList.add($)},7);const{width:d,height:g}=await this.A(e.src);if(d&&g){let n=kt.L(d,g,t),m=this.R(d,n.width,e);this.j(u,m),e.classList.add(Q,tt),e.style.width=n.width+"px",e.style.height=n.height+"px",l.classList.add(ot);let _=this.T(p,n),y=null,v=null,M=null;_.isRatioCorrect?t.append(l):(y=xt("div",dt),v=xt("div",mt),M=xt("div",ft),M.append(e,l),y.append(M),v.append(y),t.append(v),this.k(p,n,_.scale,y,v,M)),t.style.width=`${n.width}px`,t.style.height=`${n.height}px`,t.style.transform=`translate3d(${_.x}px, ${_.y}px, 0px) scale(${_.scale})`,t.style.transformOrigin="0 0",u.classList.add(b,w),t.offsetWidth,_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transition=`transform ${o-.25*o}ms ${h.timingFunc}`}),t.style.transition=`transform ${o}ms ${h.timingFunc}`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.transform=`translate3d(${n.left}px, ${n.top}px, 0) scale(1)`,_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transform="translate3d(0,0,0)"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.remove(),c=null})});const d=async n=>{if(n.target===t&&"transform"===n.propertyName){if(t.removeEventListener("transitionend",d),!yt.has(i))try{await e.decode()}catch(n){await new Promise((t,i)=>{e.complete?t():(e.addEventListener("load",t,{once:!0}),e.addEventListener("error",i,{once:!0}))})}_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transition=`transform ${o}ms ${h.timingFuncInvert}`});let c=!1,m=0;requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.classList.add(it);const i=n=>{if(n.target===e&&"opacity"===n.propertyName&&!c&&(c=!0,clearTimeout(m),m=null,l.src="",l.remove(),e.classList.remove(tt),e.removeAttribute("style"),e.removeEventListener("transitionend",i),t.removeAttribute("style"),u.classList.remove(b),yt.set(e.src,e),kt.X(yt,3),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.Y(t),x&&(this.B(u),s=this.galleryData.instances.indexOf(this),-1!==s))){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{kt.N({...i,direction:t,i:t===a?s-1:s+1})}),$t=!0}};e.addEventListener("transitionend",i),m=setTimeout(()=>{i({target:e,propertyName:"opacity"})},2500)})}),u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})}};t.addEventListener("transitionend",d)})})}}else{const i=i=>{p||(i.style.opacity=1),kt.S(t,"hide",!1,null,null,!1);let e=i.getBoundingClientRect(),n=this.R(i.naturalWidth,e.width,i);this.j(u,n),setTimeout(()=>{if(u.classList.remove(f),l&&u.classList.add(w),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.emit("layoutOpened",{modalRef:u}),this.Y(t),x&&(this.B(u),s=this.galleryData.instances.indexOf(this),-1!==s)){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{kt.N({...i,direction:t,i:t===a?s-1:s+1})}),$t=!0}},o)};u.classList.add(m),setTimeout(()=>{_.classList.add($)},1),this.Z(e,(i,e)=>{kt.S(t,i,n,this.el,this.clickedImgRect,e)}).then(async()=>{await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),i(e)})}}else u.classList.add(m),setTimeout(()=>{_.classList.add($)},1);this.emit("layoutReady",{modalRef:u}),u.classList.add(g,f),i.readyLayout=u,setTimeout(()=>{"image"!==d&&(this.state.set("opened",!0),this.openedNumb=++h.openedCounter,u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})),this.H(),t&&s&&(i.timer[0]=setTimeout(()=>{this.closeModal()},s))},o)}}}O(){let t=this.targetData;const{id:i,style:e,class:n,type:s}=t;this.emit("beforeLayoutOpen",{modalRef:t.originTarget});let o=document.createElement("div"),l=this.G();if(o.append(l),o.classList.add(d),"image"!==s){const t=o.querySelector(`.${gt}`);t&&Array.from(t.children).filter(t=>!t.classList.contains(pt)).forEach(t=>{i&&(t.id=i),e&&t.setAttribute("style",e),n&&(t.className=n),t.style.display="block"})}return this.state.set("layout-ready",!0),o}G(){const t=this.targetData,{type:i,id:e}=t,{backdropClick:s,icon:o,iconZoom:l,thumbnailsIcon:a,showThumbnailsOnOpen:r,zoomImageFromOrigin:c}=this.options,u=document.createDocumentFragment();["id","style","class"].forEach(i=>t.originTarget.removeAttribute(i));const d=s&&Array.isArray(h.backdrop_actions)&&h.backdrop_actions.includes(s)?s:null,m=d&&"image"!==i?{[n]:d}:null;if("image"===i){let i=xt("button",R,l),e=xt("div",D,[i,xt("button",L,o,{[n]:""})]);i.addEventListener("click",t=>{this.U(t,t.currentTarget,!1)});let s=xt("div",M),h=xt("div",`${v} ${Y}`,null,m),d=xt("div",Z),f=xt("div",`${H} ${G}`,null,m);d.append(f);let g=xt("div",k,null),p=xt("div",J);t.originTarget instanceof Node?(c&&(t.originTarget.style.opacity=0),p.append(t.originTarget)):p.innerHTML=t.originTarget,g.append(p),f.append(g),this.K(f),h.append(d);if(this.existGallery){const t=this.galleryData.instances.indexOf(this);let i=xt("div",P),n=xt("span",S,t+1),s=xt("span",z,this.galleryData.count);i.append(n,s),e.prepend(i);let o=xt("div",`${H} ${U}`,null,m),l=xt("div",`${H} ${K}`,null,m);d.prepend(o),d.append(l),h.prepend(xt("div",`${N} ${N}--prev`,this.options.arrowIcon)),h.append(xt("div",`${N} ${N}--next`,this.options.arrowIcon));let c=xt("button",X,a);i.after(c);let u=xt("div",A),f=xt("div",I),g=xt("div",O);f.append(g),u.append(f),h.append(u);const p=localStorage.getItem("dcThumbnails");(null!==p?"true"===p:r)&&h.classList.add(B),c.addEventListener("click",()=>{const t=h.classList.toggle(B);localStorage.setItem("dcThumbnails",t)})}return u.append(e,s,h),u}let f=xt("div",M),g=xt("div",v),p=xt("span",y,null,m),x=xt("div",gt),b=xt("button",pt,o,{[n]:""});return x.append(b),t.originTarget instanceof Node?(this.placeholder=document.createComment(`placeholder-for-${e||"element"}`),t.originTarget.before(this.placeholder),x.append(t.originTarget)):x.innerHTML+=t.originTarget,g.append(p,x),u.append(f,g),u}_(){if(this.placeholder?.parentNode){let t=this.targetData.readyLayout.querySelector("#"+this.targetData.id);if(t)return t.style.display="none",this.placeholder.replaceWith(t),t}return!1}I(t,i=this.options.type){return"image"===i?this.V(t):this.W(t)}R(t,i,e=null){const n=t/i;let s=Math.min(n,this.options.maxZoom)>1;return s&&e&&(e.classList.add(et),e.setAttribute("draggable","false")),s}j(t,i){if(!t)return;const e=t.querySelector("."+R);e&&(e.classList.remove(j),e.classList.toggle(E,!i))}J(t,i,e){return Math.max(i,Math.min(e,t))}tt(t,i){const e=getComputedStyle(t),n=new DOMMatrix(e.transform),{minX:s,maxX:o,minY:l,maxY:a}=i,r=this.J(n.m41,s,o),c=this.J(n.m42,l,a);if(n.m41===r&&n.m42===c)return;t.style.transition="transform 0.48s cubic-bezier(0.25, 0.82, 0.15, 1)",t.style.transform=`translate3d(${Math.round(r)}px, ${Math.round(c)}px, 0) scale(${n.a})`;const h=()=>{t.style.transition="",t.removeEventListener("transitionend",h)};t.addEventListener("transitionend",h)}U(t,i,e=!0){let n=kt.lastOpenedInstance;if(!n)return;let s=n.state.get("opened"),o=n.targetData.readyLayout.querySelector(`.${G} .${J} img`);if(s&&o){let s=n.options.maxZoom,l=o.getBoundingClientRect(),a=l.width,r=o.naturalWidth/a,c=Math.min(r,s);if(c){let s=o.closest("."+J);const a=s.classList.contains(st),r=t=>{if(t.target!==o||"transform"!==t.propertyName)return;o.removeEventListener("transitionend",r);let i=o.getBoundingClientRect(),e=Math.round(i.width),s=Math.round(i.height),l=0,a=0;const h=getComputedStyle(o).transform;if(h&&"none"!==h){const t=new DOMMatrixReadOnly(h);l=t.m41,a=t.m42}l=Math.round(l),a=Math.round(a),o.style.willChange="transform",o.style.transition="none",o.style.width=e+"px",o.style.height=s+"px",o.style.maxWidth="none",o.style.maxHeight="none",o.style.transform=`translate(${l}px, ${a}px) scale(1)`,n.targetData.imgScaleVal=c,requestAnimationFrame(()=>{requestAnimationFrame(()=>{o.style.transition=""})})},h=t=>{t.target===o&&"transform"===t.propertyName&&(s.classList.remove(st),i.classList.remove(j),o.classList.remove(nt),o.style.transformOrigin="center center",o.style.width="",o.style.height="",o.style.maxWidth="",o.style.maxHeight="",o.style.transform="",o.style.willChange="",o.removeEventListener("transitionend",h))};if(a||n.targetData.imgScaleVal)n.targetData.imgScaleVal&&(o.style.transition="",o.style.transform=`scale(${1/n.targetData.imgScaleVal})`,n.targetData.imgScaleVal=!1,n.it(),o.addEventListener("transitionend",h));else if(c>1){if(i.classList.add(j),s.classList.add(st),e){const i=window.innerWidth,e=window.innerHeight,n=l.left+l.width/2,s=l.top+l.height/2,a=t.clientX-n,r=t.clientY-s;let h=-a*(c-1),u=-r*(c-1);const d=l.width*c,m=l.height*c,f=Math.max(0,(d-i)/2),g=Math.max(0,(m-e)/2);h=Math.max(-f,Math.min(f,h)),u=Math.max(-g,Math.min(g,u)),o.style.transform=`translate(${Math.round(h)}px, ${Math.round(u)}px) scale(${c})`}else o.style.transform=`scale(${c})`;o.addEventListener("transitionend",r),o.style.transformOrigin=""}}}return!1}V(t){if(!t)return!1;let i=document.createElement("img");return i.src=t,i.alt="",i}et(){let t=this.options.caption;if(this.el){const i=this.el.getAttribute(o);i&&"false"!==i&&(t=i)}return t&&(t=t.trim()),t}W(t){if(!t||!t.startsWith("#")||t.length<=1)return!1;const i=document.querySelector(t);return!!i&&(!this.state.get("opened")&&i)}t(t,i=null){if(i){const t=i.getAttribute(s);if(t&&"false"!==t)return t}let e=this?.options?.type||"inline";return t&&/(^data:image\/[a-z0-9+\/=]*,)|\.(jpe?g|gif|png|bmp|webp|svg|ico)([\?#].*)?$/i.test(t)&&(e="image"),e}mount(t){for(const[i,e]of Object.entries(t)){let t=e;if("object"==typeof t&&null!==t&&("function"==typeof t[i]?t=t[i]:"function"==typeof t.default&&(t=t.default)),"function"!=typeof t)continue;const n=new t(this);this.extensions[i]=n,"function"==typeof n.mount&&n.mount()}}on(t,i){return this.events.on(t,i),this}off(t,i){return this.events.off(t,i),this}emit(t,i){return this.events.emit(t,i),this}destroy(){this.state.get("active")&&(this.emit("before:destroy"),this.m&&(this.m.disconnect(),this.m=null),Object.keys(this.extensions).forEach(t=>{this.extensions[t].destroy?.(),this.extensions[t]=null}),this.extensions={},this.el&&(_t.delete(this.el),kt.instances.delete(this),this.el=null),this.targetData&&(this.targetData=null),this.placeholder&&(this.placeholder=null),this.openedNumb&&(this.openedNumb=null),this.galleryData&&(vt.delete(this.galleryName),this.galleryData=null),yt&&yt.clear(),this?.options?.src&&wt.delete(this.options.src),this.h&&(this.h.forEach((t,i)=>{i.removeEventListener("click",t)}),this.h.clear()),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),h.openedCounter=0,this.state.set("active",!1),this.state.set("layout-ready",!1),this.emit("destroyed"),this.events.clear())}k(t,i,e,n,s,o){const l=2*e,a=.5*i.width-t.width/l,r=.5*i.height-t.height/l,c=(t,i,e)=>{const n=Math.round(1e4*i)/1e4,s=Math.round(1e4*e)/1e4;t.style.transform=`translate3d(${n}px, ${s}px, 0)`};c(n,2*a,2*r),c(s,-a,-r),c(o,-a,-r)}T(t,i){if(!t||!i)return;const e=t.width/i.width,n=t.height/i.height,s=e.toFixed(2)===n.toFixed(2),o=Math.max(e,n);return{isRatioCorrect:s,scale:o,x:.5*t.width+t.left-i.width*o*.5,y:.5*t.height+t.top-i.height*o*.5}}Z(t,i){const e=!t.complete||0===t.naturalWidth;let n=!1;const s=(t=!1)=>{n||(n=!0,i("show",t))};return(e?new Promise(i=>{s(),t.addEventListener("load",i,{once:!0}),t.addEventListener("error",i,{once:!0})}):Promise.resolve()).then(()=>{if(t.decode)return s(!0),t.decode().catch(t=>{})}).finally(()=>{})}H(){let t=this.targetData.readyLayout.querySelectorAll(`[${n}]`);t.length&&(this.v=new Map,t.forEach(t=>{const i=this.p.bind(this,t);this.v.set(t,i),t.addEventListener("click",i)}))}K(t){const i=this.et();if(t?.querySelector("."+rt)?.remove(),i){this.caption=i;const e=xt("div",rt),n=xt("div",ht),s=xt("div",ut,i);n.append(s),e.append(n),t.append(e),e.addEventListener("click",t=>{t.stopPropagation()})}}it(){this.frame&&cancelAnimationFrame(this.frame),this.frame=null}nt(t,i){const e=t.getBoundingClientRect(),n=i.getBoundingClientRect();this.limits={minX:Math.min(0,(e.width-n.width)/2),maxX:Math.max(0,(n.width-e.width)/2),minY:Math.min(0,(e.height-n.height)/2),maxY:Math.max(0,(n.height-e.height)/2)};const s=new DOMMatrix(getComputedStyle(i).transform);this.zoomedScale=s.a}Y(t){let i={activeSlide:t.closest("."+G),pSlide:null,nSlide:null},e=t.closest("."+k),n=null,s=!0,o=null,l=!0,c=0,u=0,d=null,m=0,f=0,g=!1,p=!1;let x=this.options.animationDuration||100,b=this.options.zoomImageFromOrigin,_=null,w=null,y=!1,v=!1,$=null,I=null,O=null,F=!1,q=!1,D=null,P=null,S=0,z=0,L=0,j=null,E=t.closest("."+Z),X=null,Y=null,H=0,U=0,K=null,V=!1,W=0,J=0,Q=0,tt=0,it=0;this.frame=null,this.targetData.imgScaleVal=null;let ot=0,at=0;const ht=x=>{if(x.pointerId===j&&g){if(!p&&X){if(K&&!V){let t=this.targetData.readyLayout.querySelector("."+R);this.U(x,t)}if(K&&Y&&V){this.frame&&cancelAnimationFrame(this.frame);const{minX:t,maxX:i,minY:e,maxY:n}=this.limits,s=getComputedStyle(K),o=new DOMMatrix(s.transform);let l=o.m41,a=o.m42;const r=o.a,c=.9,h=()=>{l<t?(W*=.68,l+=.12*(t-l)):l>i&&(W*=.68,l+=.12*(i-l)),a<e?(J*=.68,a+=.12*(e-a)):a>n&&(J*=.68,a+=.12*(n-a)),l+=W,a+=J,W*=c,J*=c,K.style.transform=`translate3d(${Math.round(l)}px, ${a}px, 0) scale(${r})`,K.classList.remove(nt);if(Math.hypot(W,J)<.25)return W=0,J=0,this.tt(K,{minX:t,maxX:i,minY:e,maxY:n}),void(this.frame=null);this.frame=requestAnimationFrame(h)};this.frame=requestAnimationFrame(h)}V=!1}if(g=!1,E.style.transition="","x"===d){const t=f-u,i=e.clientWidth;let n=Math.abs(S);n<30&&(n*=1e3);const s=.32*i,o=650,l=t+.2*S;if(p&&_&&(Math.abs(t)>s||n>o||Math.abs(l)>.48*i)){const t=this.state.get("opened"),i=l>0?a:r;let e=document.querySelector("."+N+"--"+i);e&&t&&kt.P.call(this,{arrow:e,isClick:!1})}else p&&(E.style.transform="",setTimeout(()=>{E.style.willChange="auto"},this.options.slideChangeDuration))}if("y"===d){const a=m-c,r=Math.min(100,.2*D);p&&Math.abs(a)>r?(I.style.opacity=0,I=null,b||(t.style.opacity=0),Mt=!0,this.closeModal()):p&&(t.style.transition=`transform 0.3s ${h.timingFunc}`,t.style.transform="",I.style.transition=`opacity 0.3s ${h.timingFunc}`,I.style.opacity=1,P=setTimeout(()=>{t.style.transition="",I.style.transition="",I.style.opacity="",I.classList.remove(T),t.style.willChange="",n&&(n.classList.remove(ct),s=!0),o&&(o.classList.remove(C),l=!0,i.activeSlide.style.overflow="",e.style.overflow=""),n=null,o=null},300),b||(t.style.animation="",t.classList.add(lt)))}c=0,u=0,m=0,f=0,$=null,D=null,p=!1,d=null,e.releasePointerCapture(j),j=null}},ut=(t,i)=>{if(d)return d;const e=Math.abs(t),n=Math.abs(i);return e<24&&n<24?null:(d=e>n?"x":"y",d)};e.addEventListener("pointerdown",e=>{if(null!==j)return;if(j=e.pointerId,K=e.target.closest("img"),!this.state.get("layout-ready"))return;P&&clearTimeout(P),c=e.clientY,u=e.clientX,m=c,f=u,$=document.documentElement.clientWidth,D=document.documentElement.clientHeight,_=this.existGallery,I=this.targetData.readyLayout.querySelector("."+M),I.style.willChange="opacity",I.classList.add(T),d=null,g=!0,p=!1,n=i.activeSlide.querySelector("."+rt),o=i.activeSlide.closest("."+B)?.querySelector("."+A),b?(t.style.transition="",t.style.willChange="transform"):(t.style.opacity=1,t.style.transition=`opacity ${x}ms ${h.timingFunc}`,t.style.willChange="transform, opacity"),_&&(i.pSlide=kt.st(this,a),i.nSlide=kt.st(this,r)),E.style.transition="none",E.style.willChange="transform";let s=t.querySelector("img");if(s&&s.classList.contains(et)&&(X=!0,Y=!!t.classList.contains(st),Y&&K&&this.targetData.imgScaleVal)){s.classList.add(nt);const i=getComputedStyle(s),e=new DOMMatrix(i.transform);this.it(),s.style.transition="",this.nt(t,s),ot=e.m41,at=e.m42,W=J=0,tt=ot,it=at}}),e.addEventListener("pointermove",a=>{if(a.pointerId!==j)return;if(!g)return;m=a.clientY,f=a.clientX;const r=m-c,h=f-u;if(Y&&K&&this.targetData.imgScaleVal){if(!V){const t=Math.hypot(h,r);if(t<12)return;V=!0;H=12*(h/t),U=12*(r/t)}let i=t.querySelector("img"),e=ot+h-H,n=at+r-U;const{minX:s,maxX:o,minY:l,maxY:a}=this.limits,c=.25;e>o?e=o+(e-o)*c:e<s&&(e=s+(e-s)*c),n>a?n=a+(n-a)*c:n<l&&(n=l+(n-l)*c),i.style.transition="none",i.style.transform=`translate3d(${Math.round(e)}px, ${Math.round(n)}px, 0) scale(${this.zoomedScale})`;const u=performance.now(),d=u-Q;if(d>8&&d<100){W=(e-(tt||ot))/d*16,J=(n-(it||at))/d*16}tt=e,it=n,Q=u}if(ut(h,r),"x"===d&&!Y){const i=performance.now(),e=i-L;if(e>8&&e<120){S=.65*S+.35*((f-z)/e*1e3)}if(z=f,L=i,!p){if(Math.abs(h)<20)return;p=!0,w=h>0?1:-1,t.style.willChange=""}const n=h-20*w;n>0&&!y?(y=!0,v=!1):n<0&&!v&&(v=!0,y=!1);const s=n/$*100;E.style.transform=`translate3d(${s}%, 0, 0)`}if("y"===d&&!Y){if(!p){if(Math.abs(r)<40)return;p=!0,E.style.willChange="",O=r>0?1:-1}const a=r-40*O;a>0&&!q?(q=!0,F=!1):a<0&&!F&&(F=!0,q=!1);const c=a/D*100,h=Math.abs(c+(q?-100:100));I.style.opacity=h+"%",b&&this.clickedImgRect||(t.style.animation="none"),t.style.transform=`translate3d(0, ${a}px, 0)`,n&&s&&(s=!1,n.classList.add(ct)),o&&l&&(l=!1,o.classList.add(C),i.activeSlide.style.overflow="visible",e.style.overflow="visible")}(p||Y)&&e.setPointerCapture(j),a.cancelable&&a.preventDefault()}),e.addEventListener("pointerup",ht),e.addEventListener("pointercancel",ht)}get existGallery(){return this.galleryData?.urls.length>1||!1}B(t){if(this.existGallery){let i=this.galleryData,e=t,n=t.querySelector("."+A),s=e.querySelector("."+I),o=e.querySelector("."+O),l=null,c=i.instances.indexOf(this);if(this.galleryData.o.length>1){const t=document.createDocumentFragment();this.galleryData.o.forEach((i,e)=>{let n=document.createElement("div");n.className=F,n.dataset.index=e,n.appendChild(i.cloneNode(!0)),t.appendChild(n)}),o.appendChild(t)}l=o.querySelectorAll("."+F),n.addEventListener("click",t=>{if(t.target.closest(`.${q}`))return;const i=t.target.closest(`.${F}`);if(!i)return;const e=i.parentNode.children;let n=-1,l=null,c=0;for(const t of e)t.classList.contains(q)&&(n=c),c++;if(l=this.galleryData.instances[n],!l||!l.state.get("opened")||!$t)return;o.style.transition="",e[n].classList.remove(q),i.classList.add(q);let h=parseInt(i.getAttribute("data-index")),u=h>n?r:a,d=document.querySelector("."+N+"--"+u);kt.P.call(l,{arrow:d,isClick:!1,isThumbnailClick:!0,targetIndex:h}),kt.ot({viewportThumbnail:s,sliderThumbnails:o,activeThumbnail:i})});const h=n.querySelector("."+I);if(kt.lt(h),-1!==c){const t=l[c];t&&(t.classList.add(q),kt.ot({viewportThumbnail:s,sliderThumbnails:o,activeThumbnail:t,silent:!0}))}}}}class kt{static instances=new Map;static Extensions={};constructor(t=null,i={}){let e=null;if(null===t){i.silent=!0;let t=xt("a","","",{href:i?.src||"",caption:i?.caption||""});e=kt.rt(t)}else e=kt.rt(t);if(!e.length)return null;const n=e.map(e=>{if(null===t){let t=i?.src||"";if(wt.has(t))return wt.get(t)}else if(_t.has(e))return _t.get(e);const n=new Tt(e,i);return kt.instances.set(n,n),n}),s=1===n.length?n[0]:n;return Array.isArray(s)&&(s.on=(t,i)=>(s.forEach(e=>e.on(t,i)),s)),setTimeout(()=>{Array.isArray(s)?s.forEach(t=>t.init()):s.init()},0),s}static rt(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:Array.isArray(t)?t.filter(t=>t instanceof HTMLElement):[]}static destroyAll(){Array.from(this.instances.values()).forEach(t=>{t.destroy()}),this.instances.clear()}static closeAll(){this.allOpened.forEach(t=>{t.closeModal()}),h.openedCounter=0}static get allOpened(){return Array.from(this.instances.values()).filter(t=>t.state.get("opened")).sort((t,i)=>i.openedNumb-t.openedNumb)}static get hasAnyOpen(){for(const t of this.instances.values())if(t.state.get("opened"))return!0;return!1}static get lastOpenedInstance(){let t=null,i=-1;for(const e of this.instances.values())e.state.get("opened")&&e.openedNumb>i&&(i=e.openedNumb,t=e);return t}static q(t,i,e,n){let{animationDuration:s=0,effect:o="fadeInDown",zoomImageFromOrigin:l}=t;l&&!t.silent&&"image"===e&&n&&(o="fadeIn");const a=h.openEffects.includes(o)?o:"fadeInDown",r={fadeInDown:-40,fadeInUp:40}[a]??0,c={"--animationDuration":`${Number(s)||0}ms`,"--animationEffect":a,"--imageInitPosition":`${r}px`,"--slideChangeDuration":t.slideChangeDuration+"ms","--slideOffset":t.slideOffset};Object.entries(c).forEach(([t,e])=>{i.style.setProperty(t,e)})}static async ct(t){await new Promise((i,e)=>{t.complete?i():(t.addEventListener("load",i,{once:!0}),t.addEventListener("error",e,{once:!0}))});try{await t.decode()}catch(t){}return t}static async S(t,i="show",e=!0,n=null,s=null,o=!1){const l="."+W,a="."+at,r="."+H,c=t.querySelector(l),h=t.closest(r),u=e&&n&&s;if("show"===i){if(!o&&!c&&(t.append(xt("div",W)),h?.classList.add(V)),u){const i=h?.querySelector(a);if(!i){const i=n.querySelector("img");if(i){const e=i.cloneNode(!1);return Object.assign(e.style,{width:s.width+"px",height:s.height+"px",top:s.top+"px",left:s.left+"px"}),e.classList.add(at),t.before(e),await kt.ct(e)}}}}else if("hide"===i){const t=h?.querySelector(a);t&&setTimeout(()=>{t.remove()},4),c?.remove(),h?.classList.remove(V)}}static show(t){if(t?.src||"")return new kt(null,t)}static st(t,i){const e={[a]:U,[r]:K,[c]:G}[i];return t.targetData.readyLayout.querySelector(`.${e}`)}static async N(t={}){const{gallery:i,i:e=0,direction:n="next",instance:s}=t;Mt=!1;const o=i[(e+i.length)%i.length];if(!s.targetData.readyLayout)return;let l=kt.st(s,n);l.innerHTML="";let a=xt("div",k),r=xt("div",J);a.append(r),l.append(a),kt.S(r,"show",!1,null,null,!1);let c=await(u=o.targetData.href,yt.has(u)?Promise.resolve(yt.get(u)):new Promise(t=>{const i=async()=>{try{const i=await async function(t){if(yt.has(t))return yt.get(t);const i=new Image;if(await new Promise((e,n)=>{i.onload=e,i.onerror=n,i.loading="eager",i.decoding="async",i.src=t}),i.decode)try{await i.decode()}catch(t){}return yt.set(t,i),kt.X(yt,3),i}(u);t(i)}catch(i){t(null)}};"requestIdleCallback"in window?requestIdleCallback(i,{timeout:200}):setTimeout(i,0)}));var u;let d=c.cloneNode(!1);return d&&d.decode&&d.decode().then(()=>{kt.S(r,"hide",!1,null,null,!1)}).catch(()=>{kt.S(r,"hide",!1,null,null,!1)}),Mt?void 0:(r.append(d),new Promise(t=>{let i=null,e=null,n=null;const s=kt.L(d.naturalWidth,d.naturalHeight,d.parentElement),l=o.el.querySelector("img")?.getBoundingClientRect();let a=o.T(l,s);a?.isRatioCorrect||(i=xt("div",dt),e=xt("div",mt),n=xt("div",ft),n.append(d),i.append(n),e.append(i),[i,e,n].forEach(t=>{t.style.transform="translate3d(0, 0, 0)",t.style.transition=`transform ${o.options.animationDuration}ms ${h.timingFuncInvert}`}),r.append(e)),t()}))}static P(t,i){let{arrow:e,isClick:n,isThumbnailClick:s=!1,targetIndex:o=-1}=t;!0===n&&(i.preventDefault(),i.stopPropagation());let l=!!e.classList.contains(`${N}--${r}`),h=this.galleryData.instances;const u=h.findIndex(t=>t.state.get("opened")),d=-1!==u?h[u]:null;if(!d)return;if(!$t)return;$t=!1;let m=d.state.get("layout-ready");if(-1!==u&&m){d.state.set("layout-ready",!1),d.state.set("opened",!1),d.openedNumb=0,d.targetData.readyLayout.classList.add(x);let t=kt.st(d,a),i=kt.st(d,r),e=kt.st(d,c),n=null,m=null,f=null,g=!0,p=null;if(s&&-1!==o){if(f=o,n=h[f],g=1===Math.abs(u-o),!g){let t=l?r:a;p=kt.N({gallery:h,instance:d,direction:t,i:f})}}else m=l?1:-1,f=(u+m+h.length)%h.length,n=h[f];const b=l?i:t;b.style.visibility="visible";const _=l?t:i;let w=null;w=""+(l?"to-left":"to-right");let y=e.closest("."+Z);if(y.style.transition="",y.style.willChange="transform",!s){let t=document.querySelector("."+A);if(t){let i=t.querySelector("."+I),e=t.querySelector("."+O),n=e.querySelectorAll("."+F),s=n[f];for(const t of n)t.classList.remove(q);s.classList.add(q),kt.ot({viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:s})}}const v=async t=>{if(t.target===y&&"transform"===t.propertyName){y.style.transition="none",y.style.transform="",y.classList.remove("to-left","to-right"),n.targetData.readyLayout=d.targetData.readyLayout,n.state.set("layout-ready",!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y.style.transition="",n.state.set("opened",!0),n.openedNumb=1})}),n.H(),d.v&&(d.v.forEach((t,i)=>{i.removeEventListener("click",t)}),d.v.clear()),d.targetData.originTarget?.remove(),d.targetData.originTarget=null,d.targetData.readyLayout=null;const i={next:K,prev:U};let s=`${H} ${i[l?a:r]}`,o=`${H} ${i[l?r:a]}`,c=`${H} ${G}`;const u=(t,i)=>{t.className=i,t.innerHTML="",t.style.transform="",t.style.visibility=""};u(e,s),b.className=c,b.style.transform="",b.style.visibility="",y.removeEventListener("transitionend",v),u(_,o),document.querySelector("."+S).innerText=+f+1;let m=kt.D(n.targetData.readyLayout),x=this;function w(t){let i=t.getBoundingClientRect(),e=x.R(t.naturalWidth,i.width,t);t.removeAttribute("loading"),t.removeAttribute("decoding"),x.j(n.targetData.readyLayout,e)}function M(t){t.complete?w(t):t.addEventListener("load",()=>{w(t)},{once:!0})}const $=m.querySelector("img");if($)M($);else{new MutationObserver((t,i)=>{const e=m.querySelector("img");e&&(M(e),i.disconnect())}).observe(m,{childList:!0,subtree:!0})}let T=n.targetData.readyLayout.querySelector(`.${J}`);n.Y(T);const k=[a,r],A={gallery:h,instance:n};g||await p,k.forEach(t=>{kt.N({...A,direction:t,i:t===a?f-1:f+1})}),$t=!0}};requestAnimationFrame(()=>{y.classList.add(w),n.K(b)}),y.addEventListener("transitionend",v)}}static C(t=!1){this.ht||(document.addEventListener("keydown",t=>{let i=t.key;if("Escape"===i){const t=this.lastOpenedInstance;t&&(t?.options?.closeExisting?kt.closeAll():t.closeModal())}if("ArrowLeft"===i||"ArrowRight"===i){const t=this.lastOpenedInstance;let e="ArrowLeft"===i?a:r,n=document.querySelector("."+N+"--"+e);n&&t&&kt.P.call(t,{arrow:n,isClick:!1})}}),this.ht=!0)}static F(){const t=document.documentElement.scrollHeight>window.innerHeight;document.body.classList.contains(u)||(document.body.classList.add(u),t?document.documentElement.classList.add("dc-lightbox-scroll"):document.documentElement.classList.remove("dc-lightbox-scroll"))}static $(){document.body.classList.remove(u)}static D(t){const i=t.querySelector("."+G+" ."+J);return i?(i.addEventListener("click",function(t){t.stopPropagation()}),i):null}static ot(t){const{viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:n,silent:s=!1}=t,o=i.clientWidth,l=e.scrollWidth,a=window.getComputedStyle(e),r=new DOMMatrixReadOnly(a.transform).m41;if(e.style.transition=s?"none":"",l<=o){const t=(o-l)/2;return void(e.style.transform=`translateX(${t}px)`)}const c=o/2,h=n.offsetLeft+n.offsetWidth/2,u=h+r;let d=r;(u<.3*o||u>.7*o)&&(d=c-h);const m=o-l;d=Math.max(m,Math.min(0,d)),Math.abs(d-r)<1||(e.style.transform=`translateX(${d}px)`)}static lt(t){const i=t.querySelector("."+O);if(!i)return;let e=0,n=0,s=0,o=!1,l=!1,a=0;let r=null,c=0,h=0,u=0,d=null;const m=()=>{const t=getComputedStyle(i);return new DOMMatrixReadOnly(t.transform).m41||0},f=()=>{const e=i.scrollWidth,n=t.clientWidth;if(e<=n){const t=(n-e)/2;return{min:t,max:t}}return{min:n-e,max:0}},g=e=>{if(e.pointerId===r&&o){if(o=!1,l)(()=>{let t=m();const{min:e,max:n}=f();c=Math.max(-85,Math.min(85,c));const s=()=>{if(t+=c,t>n?(t=n+.915*(t-n),c*=.72):t<e&&(t=e-.915*(e-t),c*=.72),c*=.935,i.style.transform=`translate3d(${t}px, 0, 0)`,Math.abs(c)>.15&&t>e-5&&t<n+5)d=requestAnimationFrame(s);else{const s=Math.max(e,Math.min(n,t));Math.abs(s-t)>.5&&(i.style.transition="transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1)",i.style.transform=`translate3d(${s}px, 0, 0)`),d=null}};d=requestAnimationFrame(s)})();else{const{min:t,max:e}=f(),n=m(),s=Math.max(t,Math.min(e,n));s!==n&&(i.style.transition="transform 0.4s ease-out",i.style.transform=`translate3d(${s}px, 0, 0)`)}try{t.releasePointerCapture(r)}catch(t){}r=null}},p={passive:!1};t.addEventListener("pointerdown",t=>{null===r&&("touch"!==t.pointerType||t.isPrimary)&&(d&&cancelAnimationFrame(d),d=null,r=t.pointerId,e=n=h=t.clientX,u=performance.now(),s=m(),c=0,o=!0,l=!1,a=0,i.style.transition="none")},p),t.addEventListener("pointermove",d=>{if(d.pointerId!==r||!o)return;n=d.clientX;const m=n-e;if(!l){if(Math.abs(m)<15)return;l=!0,a=m>0?1:-1,t.setPointerCapture(r),i.style.transition="none"}let g=s+(m-15*a);const{min:p,max:x}=f();g>x?g=x+.28*(g-x):g<p&&(g=p+.28*(g-p)),i.style.transform=`translate3d(${g}px, 0, 0)`;const b=performance.now(),_=b-u;if(_>8&&_<120){c=(g-(h!==n?h:s))/_*16.67}h=g,u=b,d.cancelable&&d.preventDefault()},p),t.addEventListener("pointerup",g,p),t.addEventListener("pointercancel",g,p)}static X(t,i){for(;t.size>i;){const i=t.keys().next().value;t.delete(i)}}static L(t,i,e){const n=i/t,s=e.getBoundingClientRect();let o=Math.min(t,s.width),l=o*n;l>s.height&&(l=s.height,o=l/n);return{width:o,height:l,left:s.left+(s.width-o)/2,top:s.top+(s.height-l)/2}}}export{kt as default};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @divclass/lightbox v1.
|
|
2
|
+
* @divclass/lightbox v1.1.3 | May 22nd 2026
|
|
3
3
|
* Source: https://github.com/divclass-org/lightbox.git
|
|
4
4
|
* Homepage: https://lightbox.divclass.org/
|
|
5
5
|
* (c) 2026 Taras Bilinskyi | Released under the MIT License
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).DivclassLightbox=i()}(this,function(){"use strict";class t{constructor(){this.events={}}on(t,i){return this.events[t]||(this.events[t]=[]),this.events[t].push(i),this}off(t,i){return this.events[t]?(this.events[t]=this.events[t].filter(t=>t!==i),this):this}once(t,i){const e=(...n)=>{this.off(t,e),i(...n)};return this.on(t,e),this}emit(t,...i){return this.events[t]&&[...this.events[t]].forEach(t=>t(...i)),this}clear(){this.events={}}}class i{constructor(t={},i=null){this.data=t,this.events=i}set(t,i){const e=this.data[t];e!==i&&(this.data[t]=i,this.events&&(this.events.emit(`state:${t}`,i,e),this.events.emit("state:change",t,i,e)))}get(t){return this.data[t]}merge(t,i=!0){const e={...this.data};this.data={...this.data,...t},!i&&this.events&&this.events.emit("state:change","multiple",this.data,e)}}const e={icon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M6 6L18 18M18 6L6 18"/></svg>',thumbnailsIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><rect x="3" y="17" width="4" height="4" rx="1"/><rect x="10" y="17" width="4" height="4" rx="1"/><rect x="17" y="17" width="4" height="4" rx="1"/></svg>',showThumbnailsOnOpen:!0,arrowIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4L7 12L15 20"/></svg>',backdropClick:"close",closeExisting:!1,parentContainer:"body",hideScrollbar:!0,effect:"fadeInDown",zoomImageFromOrigin:!0,animationDuration:400,autoClose:!1,type:"inline",caption:!1,slideChangeDuration:280,slideOffset:.1,beforeLayoutOpen:()=>{},layoutReady:()=>{},layoutOpened:()=>{},beforeLayoutClose:()=>{},layoutClosed:()=>{},extensions:{}},n="data-close",s="data-type",l="data-caption",o="data-gallery",a="prev",r="next",c="active",h={fallbackBase64:"data:image/svg+xml;base64,"+btoa('\n <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">\n <rect width="100%" height="100%" fill="#ddd"/>\n </svg>\n '),openedCounter:0,timer:[0],backdrop_actions:["close"],openEffects:["fadeInDown","fadeIn","fadeInUp","zoomIn"],closeAllPopup:"close-all",timingFunc:"cubic-bezier(0.4, 0, 0.22, 1)",timingFuncInvert:"cubic-bezier(0.78, 0, 0.6, 1)"},u="body--hidden",d="dc-lightbox",m="dc-lightbox--visible",f="dc-lightbox--animating",g="dc-lightbox--opened",p="dc-lightbox--closing",b="dc-lightbox--gallery",w="dc-lightbox--scale-from-origin-in",y="dc-lightbox--scale-to-origin-out",_="dc-lightbox--scaled-from-origin",x="dc-lightbox__close-area",v="dc-lightbox__wrapper",$="dc-lightbox__overlay",M="dc-lightbox__overlay--show",T="dc-lightbox__overlay--prevent-anim",k="dc-lightbox__viewport",I="dc-lightbox__thumbnails",A="dc-lightbox__thumbnails--hide",C="dc-lightbox__thumbnails-viewport",O="dc-lightbox__thumbnails-slider",F="dc-lightbox__thumbnails-slide",P="dc-lightbox__thumbnails-slide--active",q="dc-lightbox__toolbar",S="dc-lightbox__counter",D="dc-lightbox__counter-current",L="dc-lightbox__counter-all",R="dc-lightbox__button-close",j="dc-lightbox__button-thumbnails",E="dc-lightbox__wrapper--slider",z="dc-lightbox__wrapper--has-thumbnails",N="dc-lightbox__arrow",B="dc-lightbox__slides",H="dc-lightbox__slide",G="dc-lightbox__slide--active",K="dc-lightbox__slide--prev",U="dc-lightbox__slide--next",W="dc-lightbox__slide--has-spinner",X="dc-lightbox__spinner",V="dc-lightbox__slide-content",J="dc-lightbox__img-large",Q="dc-lightbox__img-large--loading",Y="dc-lightbox__img-large--loaded",Z="dc-lightbox__img-small",tt="dc-lightbox__slide-content--prevent-anim",it="dc-lightbox__img-placeholder",et="dc-lightbox__info",nt="dc-lightbox__info--hide",st="dc-lightbox__caption",lt="dc-lightbox__caption-data",ot="dc-lightbox__crtl",at="dc-lightbox__crbr",rt="dc-lightbox__crimg",ct="dc-lightbox__inner",ht="dc-lightbox__close";function ut(t,i="",e=null,n=null){const s=document.createElement(t);i&&(s.className=i),n&&Object.entries(n).forEach(([t,i])=>{!1===i||null===i?s.removeAttribute(t):s.setAttribute(t,String(i))});const l=t=>{t instanceof Node?s.append(t):null!=t&&s.insertAdjacentHTML("beforeend",String(t))};return Array.isArray(e)?e.forEach(l):l(e),s}function dt(t,i){const e={...t};return i&&"object"==typeof i&&Object.keys(i).forEach(n=>{i[n]&&"object"==typeof i[n]&&!Array.isArray(i[n])?e[n]=dt(t[n]||{},i[n]):e[n]=i[n]}),e}const mt=new WeakMap,ft=new Map,gt=new Map,pt=new Map;let bt=!1,wt=!1;class yt{constructor(n,s={}){if(s.src){const t=s.src;if(ft.has(t))return ft.get(t);ft.set(s.src,this)}else{if(mt.has(n))return mt.get(n);mt.set(n,this)}this.el=n,this.options=dt(e,s),this.events=new t,this.state=new i({active:!1},this.events),this.extensions={};let l=n.getAttribute("href")||n.getAttribute("data-src")||"",a=this.t(l,n),r=null;"inline"===a&&(r=document.querySelector(l)),this.targetData={href:l,type:a,id:r?.getAttribute("id")||"",style:r?.getAttribute("style")||"",class:r?.getAttribute("class")||"",timer:h.timer};let c=n.getAttribute(o);if(this.galleryName=c&&"image"===a?c:null,this.galleryData=null,this.galleryName){this.smallSrc=this.el?.querySelector("img")?.src||this.targetData?.href||!1,pt.has(this.galleryName)||pt.set(this.galleryName,{instances:[],urls:[],count:0,l:[]});const t=pt.get(this.galleryName);if(t&&(this.galleryData=t,t.instances.push(this),this.smallSrc)){t.urls.push(this.smallSrc);const i=document.createElement("img");i.src=this.smallSrc,i.loading="eager",i.decoding="async",i.alt="",t.l.push(i),t.count++}}this.clickedImgRect=null}init(){if(this.state.get("active"))return;if(this.state.set("active",!0),this.options.silent)this.o();else{let t=this.el;this.h=new Map;const i=this.u.bind(this,t);this.h.set(t,i),t.addEventListener("click",i)}this.emit("before:mount"),this.options.extensions&&this.mount(this.options.extensions),this.emit("mounted"),this.m=new MutationObserver(t=>{t.forEach(t=>{t.removedNodes.forEach(t=>{(t===this.el||t.contains(this.el))&&this.destroy()})})});const t=this.el.parentElement||document.body;this.m.observe(t,{childList:!0})}p(t,i){i.preventDefault();let e=this.targetData;e.timer[0]&&clearTimeout(e.timer[0]);t.getAttribute(n)===h.closeAllPopup||this.options.closeExisting?_t.closeAll():this.closeModal()}async closeModal(){let t=this.options,i=this.targetData;if(!this.state.get("opened"))return;const{animationDuration:e}=t,{type:n}=i;if(i.readyLayout&&!i.readyLayout.classList.contains(p)){this.state.set("layout-ready",!1),bt=!0;let s=null,l=i.readyLayout.querySelector(`.${$}`);const o=()=>new Promise(requestAnimationFrame);"image"===i.type&&(s=i.readyLayout.querySelector(`.${G} .${V}`),s&&(s.classList.remove(tt),l.classList.remove(T)),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)),l.classList.remove(M),this.emit("beforeLayoutClose",{modalRef:i.readyLayout}),i.readyLayout.classList.remove(g),i.readyLayout.classList.remove(b),i.readyLayout.offsetWidth,i.readyLayout.classList.add(f,p);const a=this.el?.querySelector("img")?.getBoundingClientRect()||null;a||i.readyLayout.classList.remove(_);const r=()=>{c&&clearTimeout(c),i.readyLayout&&i.readyLayout.classList.remove(m,p,f);let e=null;"image"!==n?e=this._():this.el&&(e=this.el),"image"===n&&(i.originTarget?.remove(),i.originTarget=null,t.silent&&(this.caption&&(this.caption=null),this.options?.caption&&(this.options.caption=null),this.el=null)),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),_t.$&&(_t.$.forEach((t,i)=>{i.removeEventListener("click",t)}),_t.$.clear()),i.readyLayout?.remove(),i.readyLayout=null,this.placeholder&&(this.placeholder?.remove(),this.placeholder=null),this.emit("layoutClosed",{modalRef:e}),this.state.set("opened",!1),this.openedNumb=0,_t.hasAnyOpen||(_t.M(),document.documentElement.classList.remove("dc-lightbox-scroll"))};let c=0;if(t.zoomImageFromOrigin&&!t.silent&&a&&"image"===i.type){let t=s?.querySelector("img")?.getBoundingClientRect()||null,n=null;if(t&&(n=this.T(a,t),s.style.width=`${t.width}px`,s.style.height=`${t.height}px`,s.style.transform=`translate3d(${t.left}px, ${t.top}px, 0px)`),i.readyLayout.classList.add(y),await o(),await o(),n&&!n.isRatioCorrect){let i=s.querySelector("."+ot),e=s.querySelector("."+at),l=e.querySelector("."+rt);this.k(a,t,n.scale,i,e,l),await o(),await o()}t&&(s.style.transition=`transform ${e}ms ${h.timingFunc}`,s.style.transform=`translate3d(${n.x}px, ${n.y}px, 0px) scale(${n.scale})`),s.addEventListener("transitionend",r,{once:!0}),c=setTimeout(()=>{r()},e+1e3)}else setTimeout(()=>{r()},e)}}u(t,i){i.preventDefault();const e=t.querySelector("img");this.clickedImgRect=e?e.getBoundingClientRect():null,this.o()}async I(t){return new Promise((i,e)=>{const n=new Image;let s;const l=()=>{s&&clearInterval(s)},o=()=>{l(),i({width:n.naturalWidth,height:n.naturalHeight,imgElement:n})};if(n.onload=o,n.onerror=()=>{l(),e(new Error(`Не вдалося завантажити: ${t}`))},n.loading="eager",n.decoding="async",n.src=t,n.complete&&n.naturalWidth)return o();s=setInterval(()=>{n.naturalWidth&&n.naturalHeight&&o()},10)})}async o(){_t.A();let t=this.options,i=this.targetData,{parentContainer:e,hideScrollbar:n,autoClose:s,animationDuration:l,zoomImageFromOrigin:o,silent:c}=t;const{href:u,type:d}=i,{clickedImgRect:p}=this;if(i.originTarget=this.C(u,d),u&&i.originTarget){let u=this.O();if(!this.state.get("layout-ready"))return;if(u instanceof Node){document.querySelector(e).append(u),_t.hasAnyOpen||n&&_t.F(),_t.P(t,u,d,p);let b=this.existGallery,y=u.querySelector("."+$);if(bt=!1,"image"===d){let t=_t.q(u),i=u.querySelectorAll("."+N);i.length&&(_t.$=new Map,i.forEach(t=>{const i=_t.S.bind(this,{arrow:t,isClick:!0});_t.$.set(t,i),t.addEventListener("click",i)}));let e=t.querySelector("img"),n=o&&!c&&p,s=-1;if(n){let i=e.src;gt.has(i)&&(e.src=gt.get(i).src);let o=this.el.querySelector("img").cloneNode(!0),c=await _t.D(t,"show",n,this.el,this.clickedImgRect,!0);await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),u.classList.add(m),setTimeout(()=>{y.classList.add(M)},7);const{width:d,height:g}=await this.I(e.src);if(d&&g){let n=_t.L(d,g,t);e.classList.add(J,Q),e.style.width=n.width+"px",e.style.height=n.height+"px",o.classList.add(Z);let m=this.T(p,n),y=null,x=null,v=null;m.isRatioCorrect?t.append(o):(y=ut("div",ot),x=ut("div",at),v=ut("div",rt),v.append(e,o),y.append(v),x.append(y),t.append(x),this.k(p,n,m.scale,y,x,v)),t.style.width=`${n.width}px`,t.style.height=`${n.height}px`,t.style.transform=`translate3d(${m.x}px, ${m.y}px, 0px) scale(${m.scale})`,t.style.transformOrigin="0 0",u.classList.add(w,_),t.offsetWidth,m.isRatioCorrect||[y,x,v].forEach(t=>{t.style.transition=`transform ${l-.25*l}ms ${h.timingFunc}`}),t.style.transition=`transform ${l}ms ${h.timingFunc}`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.transform=`translate3d(${n.left}px, ${n.top}px, 0) scale(1)`,m.isRatioCorrect||[y,x,v].forEach(t=>{t.style.transform="translate3d(0,0,0)"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.remove(),c=null})});const d=async n=>{if(n.target===t&&"transform"===n.propertyName){if(t.removeEventListener("transitionend",d),!gt.has(i))try{await e.decode()}catch(n){await new Promise((t,i)=>{e.complete?t():(e.addEventListener("load",t,{once:!0}),e.addEventListener("error",i,{once:!0}))})}m.isRatioCorrect||[y,x,v].forEach(t=>{t.style.transition=`transform ${l}ms ${h.timingFuncInvert}`});let c=!1,g=0;requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.classList.add(Y);const i=n=>{if(n.target===e&&"opacity"===n.propertyName&&!c&&(c=!0,clearTimeout(g),g=null,o.src="",o.remove(),e.classList.remove(Q),e.removeAttribute("style"),e.removeEventListener("transitionend",i),t.removeAttribute("style"),u.classList.remove(w),gt.set(e.src,e),_t.R(gt,3),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.j(t),b&&(this.N(u),s=this.galleryData.instances.indexOf(this),-1!==s))){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{_t.B({...i,direction:t,i:t===a?s-1:s+1})}),wt=!0}};e.addEventListener("transitionend",i),g=setTimeout(()=>{i({target:e,propertyName:"opacity"})},2500)})}),u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})}};t.addEventListener("transitionend",d)})})}}else{const i=i=>{p||(i.style.opacity=1),_t.D(t,"hide",!1,null,null,!1),setTimeout(()=>{if(u.classList.remove(f),o&&u.classList.add(_),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.emit("layoutOpened",{modalRef:u}),this.j(t),b&&(this.N(u),s=this.galleryData.instances.indexOf(this),-1!==s)){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{_t.B({...i,direction:t,i:t===a?s-1:s+1})}),wt=!0}},l)};u.classList.add(m),setTimeout(()=>{y.classList.add(M)},1),this.H(e,(i,e)=>{_t.D(t,i,n,this.el,this.clickedImgRect,e)}).then(async()=>{await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),i(e)})}}else u.classList.add(m),setTimeout(()=>{y.classList.add(M)},1);this.emit("layoutReady",{modalRef:u}),u.classList.add(g,f),i.readyLayout=u,setTimeout(()=>{"image"!==d&&(this.state.set("opened",!0),this.openedNumb=++h.openedCounter,u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})),this.G(),t&&s&&(i.timer[0]=setTimeout(()=>{this.closeModal()},s))},l)}}}O(){let t=this.targetData;const{id:i,style:e,class:n,type:s}=t;this.emit("beforeLayoutOpen",{modalRef:t.originTarget});let l=document.createElement("div"),o=this.K();if(l.append(o),l.classList.add(d),"image"!==s){const t=l.querySelector(`.${ct}`);t&&Array.from(t.children).filter(t=>!t.classList.contains(ht)).forEach(t=>{i&&(t.id=i),e&&t.setAttribute("style",e),n&&(t.className=n),t.style.display="block"})}return this.state.set("layout-ready",!0),l}K(){const t=this.targetData,{type:i,id:e}=t,{backdropClick:s,icon:l,thumbnailsIcon:o,showThumbnailsOnOpen:a,zoomImageFromOrigin:r}=this.options,c=document.createDocumentFragment();["id","style","class"].forEach(i=>t.originTarget.removeAttribute(i));const u=s&&Array.isArray(h.backdrop_actions)&&h.backdrop_actions.includes(s)?s:null,d=u&&"image"!==i?{[n]:u}:null;if("image"===i){let i=ut("div",q,[ut("button",R,l,{[n]:""})]),e=ut("div",$),s=ut("div",`${v} ${E}`,null,d),h=ut("div",B),u=ut("div",`${H} ${G}`,null,d);h.append(u);let m=ut("div",k,null),f=ut("div",V);t.originTarget instanceof Node?(r&&(t.originTarget.style.opacity=0),f.append(t.originTarget)):f.innerHTML=t.originTarget,m.append(f),u.append(m),this.U(u),s.append(h);if(this.existGallery){const t=this.galleryData.instances.indexOf(this);let e=ut("div",S),n=ut("span",D,t+1),l=ut("span",L,this.galleryData.count);e.append(n,l),i.prepend(e);let r=ut("div",`${H} ${K}`,null,d),c=ut("div",`${H} ${U}`,null,d);h.prepend(r),h.append(c),s.prepend(ut("div",`${N} ${N}--prev`,this.options.arrowIcon)),s.append(ut("div",`${N} ${N}--next`,this.options.arrowIcon));let u=ut("button",j,o);e.after(u);let m=ut("div",I),f=ut("div",C),g=ut("div",O);f.append(g),m.append(f),s.append(m);const p=localStorage.getItem("dcThumbnails");(null!==p?"true"===p:a)&&s.classList.add(z),u.addEventListener("click",()=>{const t=s.classList.toggle(z);localStorage.setItem("dcThumbnails",t)})}return c.append(i,e,s),c}let m=ut("div",$),f=ut("div",v),g=ut("span",x,null,d),p=ut("div",ct),b=ut("button",ht,l,{[n]:""});return p.append(b),t.originTarget instanceof Node?(this.placeholder=document.createComment(`placeholder-for-${e||"element"}`),t.originTarget.before(this.placeholder),p.append(t.originTarget)):p.innerHTML+=t.originTarget,f.append(g,p),c.append(m,f),c}_(){if(this.placeholder?.parentNode){let t=this.targetData.readyLayout.querySelector("#"+this.targetData.id);if(t)return t.style.display="none",this.placeholder.replaceWith(t),t}return!1}C(t,i=this.options.type){return"image"===i?this.W(t):this.X(t)}W(t){if(!t)return!1;let i=document.createElement("img");return i.src=t,i.alt="",i}V(){let t=this.options.caption;if(this.el){const i=this.el.getAttribute(l);i&&"false"!==i&&(t=i)}return t&&(t=t.trim()),t}X(t){if(!t||!t.startsWith("#")||t.length<=1)return!1;const i=document.querySelector(t);return!!i&&(!this.state.get("opened")&&i)}t(t,i=null){if(i){const t=i.getAttribute(s);if(t&&"false"!==t)return t}let e=this?.options?.type||"inline";return t&&/(^data:image\/[a-z0-9+\/=]*,)|\.(jpe?g|gif|png|bmp|webp|svg|ico)([\?#].*)?$/i.test(t)&&(e="image"),e}mount(t){for(const[i,e]of Object.entries(t)){let t=e;if("object"==typeof t&&null!==t&&("function"==typeof t[i]?t=t[i]:"function"==typeof t.default&&(t=t.default)),"function"!=typeof t)continue;const n=new t(this);this.extensions[i]=n,"function"==typeof n.mount&&n.mount()}}on(t,i){return this.events.on(t,i),this}off(t,i){return this.events.off(t,i),this}emit(t,i){return this.events.emit(t,i),this}destroy(){this.state.get("active")&&(this.emit("before:destroy"),this.m&&(this.m.disconnect(),this.m=null),Object.keys(this.extensions).forEach(t=>{this.extensions[t].destroy?.(),this.extensions[t]=null}),this.extensions={},this.el&&(mt.delete(this.el),_t.instances.delete(this),this.el=null),this.targetData&&(this.targetData=null),this.placeholder&&(this.placeholder=null),this.openedNumb&&(this.openedNumb=null),this.galleryData&&(pt.delete(this.galleryName),this.galleryData=null),gt&>.clear(),this?.options?.src&&ft.delete(this.options.src),this.h&&(this.h.forEach((t,i)=>{i.removeEventListener("click",t)}),this.h.clear()),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),h.openedCounter=0,this.state.set("active",!1),this.state.set("layout-ready",!1),this.emit("destroyed"),this.events.clear())}k(t,i,e,n,s,l){const o=2*e,a=.5*i.width-t.width/o,r=.5*i.height-t.height/o,c=(t,i,e)=>{const n=Math.round(1e4*i)/1e4,s=Math.round(1e4*e)/1e4;t.style.transform=`translate3d(${n}px, ${s}px, 0)`};c(n,2*a,2*r),c(s,-a,-r),c(l,-a,-r)}T(t,i){if(!t||!i)return;const e=t.width/i.width,n=t.height/i.height,s=e.toFixed(2)===n.toFixed(2),l=Math.max(e,n);return{isRatioCorrect:s,scale:l,x:.5*t.width+t.left-i.width*l*.5,y:.5*t.height+t.top-i.height*l*.5}}H(t,i){const e=!t.complete||0===t.naturalWidth;let n=!1;const s=(t=!1)=>{n||(n=!0,i("show",t))};return(e?new Promise(i=>{s(),t.addEventListener("load",i,{once:!0}),t.addEventListener("error",i,{once:!0})}):Promise.resolve()).then(()=>{if(t.decode)return s(!0),t.decode().catch(t=>{})}).finally(()=>{})}G(){let t=this.targetData.readyLayout.querySelectorAll(`[${n}]`);t.length&&(this.v=new Map,t.forEach(t=>{const i=this.p.bind(this,t);this.v.set(t,i),t.addEventListener("click",i)}))}U(t){const i=this.V();if(t?.querySelector("."+et)?.remove(),i){this.caption=i;const e=ut("div",et),n=ut("div",st),s=ut("div",lt,i);n.append(s),e.append(n),t.append(e),e.addEventListener("click",t=>{t.stopPropagation()})}}j(t){let i={activeSlide:t.closest("."+G),pSlide:null,nSlide:null},e=t.closest("."+k),n=null,s=!0,l=null,o=!0,c=0,u=0,d=null,m=0,f=0,g=!1,p=!1;let b=this.options.animationDuration||100,w=this.options.zoomImageFromOrigin,y=null,_=null,x=!1,v=!1,M=null,C=null,O=null,F=!1,P=!1,q=null,S=null,D=0,L=0,R=0,j=null,E=t.closest("."+B);const H=b=>{if(b.pointerId===j&&g){if(g=!1,E.style.transition="","x"===d){const t=f-u;D=Math.max(-1.5,Math.min(1.5,D)),D*=.95;const i=.18*M,e=.35,n=t+D*M*.35;if(p&&y&&(Math.abs(n)>i||Math.abs(D)>e)){const t=this.state.get("opened"),i=n>0?a:r;let e=document.querySelector("."+N+"--"+i);e&&t&&_t.S.call(this,{arrow:e,isClick:!1})}else p&&(E.style.transform="",setTimeout(()=>{E.style.willChange="auto"},this.options.slideChangeDuration))}if("y"===d){const a=m-c,r=Math.min(100,.2*q);p&&Math.abs(a)>r?(C.style.opacity=0,C=null,w||(t.style.opacity=0),bt=!0,this.closeModal()):p&&(t.style.transition=`transform 0.3s ${h.timingFunc}`,t.style.transform="",C.style.transition=`opacity 0.3s ${h.timingFunc}`,C.style.opacity=1,S=setTimeout(()=>{t.style.transition="",C.style.transition="",C.style.opacity="",C.classList.remove(T),t.style.willChange="",n&&(n.classList.remove(nt),s=!0),l&&(l.classList.remove(A),o=!0,i.activeSlide.style.overflow="",e.style.overflow=""),n=null,l=null},300),w||(t.style.animation="",t.classList.add(tt)))}c=0,u=0,m=0,f=0,M=null,q=null,p=!1,d=null,e.releasePointerCapture(j),j=null}},K=(t,i)=>{if(d)return d;const e=Math.abs(t),n=Math.abs(i);return e<24&&n<24?null:(d=e>n?"x":"y",d)};e.addEventListener("pointerdown",e=>{if(null!==j)return;j=e.pointerId,this.state.get("layout-ready")&&(S&&clearTimeout(S),c=e.clientY,u=e.clientX,m=c,f=u,M=document.documentElement.clientWidth,q=document.documentElement.clientHeight,y=this.existGallery,C=this.targetData.readyLayout.querySelector("."+$),C.style.willChange="opacity",C.classList.add(T),d=null,g=!0,p=!1,n=i.activeSlide.querySelector("."+et),l=i.activeSlide.closest("."+z)?.querySelector("."+I),w?(t.style.transition="",t.style.willChange="transform"):(t.style.opacity=1,t.style.transition=`opacity ${b}ms ${h.timingFunc}`,t.style.willChange="transform, opacity"),y&&(i.pSlide=_t.J(this,a),i.nSlide=_t.J(this,r)),E.style.transition="none",E.style.willChange="transform")}),e.addEventListener("pointermove",a=>{if(a.pointerId!==j)return;if(!g)return;m=a.clientY,f=a.clientX;const r=m-c,h=f-u;if(K(h,r),"x"===d){const i=performance.now();if(D=(f-L)/(i-R),L=f,R=i,!p){if(Math.abs(h)<20)return;p=!0,_=h>0?1:-1,t.style.willChange=""}const e=h-20*_;e>0&&!x?(x=!0,v=!1):e<0&&!v&&(v=!0,x=!1);const n=e/M*100;E.style.transform=`translate3d(${n}%, 0, 0)`}if("y"===d){if(!p){if(Math.abs(r)<40)return;p=!0,E.style.willChange="",O=r>0?1:-1}const a=r-40*O;a>0&&!P?(P=!0,F=!1):a<0&&!F&&(F=!0,P=!1);const c=a/q*100,h=Math.abs(c+(P?-100:100));C.style.opacity=h+"%",w&&this.clickedImgRect||(t.style.animation="none"),t.style.transform=`translate3d(0, ${a}px, 0)`,n&&s&&(s=!1,n.classList.add(nt)),l&&o&&(o=!1,l.classList.add(A),i.activeSlide.style.overflow="visible",e.style.overflow="visible")}p&&e.setPointerCapture(j),a.cancelable&&a.preventDefault()}),e.addEventListener("pointerup",H),e.addEventListener("pointercancel",H)}get existGallery(){return this.galleryData?.urls.length>1||!1}N(t){if(this.existGallery){let i=this.galleryData,e=t,n=t.querySelector("."+I),s=e.querySelector("."+C),l=e.querySelector("."+O),o=null,c=i.instances.indexOf(this);if(this.galleryData.l.length>1){const t=document.createDocumentFragment();this.galleryData.l.forEach((i,e)=>{let n=document.createElement("div");n.className=F,n.dataset.index=e,n.appendChild(i.cloneNode(!0)),t.appendChild(n)}),l.appendChild(t)}o=l.querySelectorAll("."+F),n.addEventListener("click",t=>{if(t.target.closest(`.${P}`))return;const i=t.target.closest(`.${F}`);if(!i)return;const e=i.parentNode.children;let n=-1,o=null,c=0;for(const t of e)t.classList.contains(P)&&(n=c),c++;if(o=this.galleryData.instances[n],!o||!o.state.get("opened")||!wt)return;l.style.transition="",e[n].classList.remove(P),i.classList.add(P);let h=parseInt(i.getAttribute("data-index")),u=h>n?r:a,d=document.querySelector("."+N+"--"+u);_t.S.call(o,{arrow:d,isClick:!1,isThumbnailClick:!0,targetIndex:h}),_t.Y({viewportThumbnail:s,sliderThumbnails:l,activeThumbnail:i})});const h=n.querySelector("."+C);if(_t.Z(h),-1!==c){const t=o[c];t&&(t.classList.add(P),_t.Y({viewportThumbnail:s,sliderThumbnails:l,activeThumbnail:t,silent:!0}))}}}}class _t{static instances=new Map;static Extensions={};constructor(t=null,i={}){let e=null;if(null===t){i.silent=!0;let t=ut("a","","",{href:i?.src||"",caption:i?.caption||""});e=_t.tt(t)}else e=_t.tt(t);if(!e.length)return null;const n=e.map(e=>{if(null===t){let t=i?.src||"";if(ft.has(t))return ft.get(t)}else if(mt.has(e))return mt.get(e);const n=new yt(e,i);return _t.instances.set(n,n),n}),s=1===n.length?n[0]:n;return Array.isArray(s)&&(s.on=(t,i)=>(s.forEach(e=>e.on(t,i)),s)),setTimeout(()=>{Array.isArray(s)?s.forEach(t=>t.init()):s.init()},0),s}static tt(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:Array.isArray(t)?t.filter(t=>t instanceof HTMLElement):[]}static destroyAll(){Array.from(this.instances.values()).forEach(t=>{t.destroy()}),this.instances.clear()}static closeAll(){this.allOpened.forEach(t=>{t.closeModal()}),h.openedCounter=0}static get allOpened(){return Array.from(this.instances.values()).filter(t=>t.state.get("opened")).sort((t,i)=>i.openedNumb-t.openedNumb)}static get hasAnyOpen(){for(const t of this.instances.values())if(t.state.get("opened"))return!0;return!1}static get lastOpenedInstance(){let t=null,i=-1;for(const e of this.instances.values())e.state.get("opened")&&e.openedNumb>i&&(i=e.openedNumb,t=e);return t}static P(t,i,e,n){let{animationDuration:s=0,effect:l="fadeInDown",zoomImageFromOrigin:o}=t;o&&!t.silent&&"image"===e&&n&&(l="fadeIn");const a=h.openEffects.includes(l)?l:"fadeInDown",r={fadeInDown:-40,fadeInUp:40}[a]??0,c={"--animationDuration":`${Number(s)||0}ms`,"--animationEffect":a,"--imageInitPosition":`${r}px`,"--slideChangeDuration":t.slideChangeDuration+"ms","--slideOffset":t.slideOffset};Object.entries(c).forEach(([t,e])=>{i.style.setProperty(t,e)})}static async it(t){await new Promise((i,e)=>{t.complete?i():(t.addEventListener("load",i,{once:!0}),t.addEventListener("error",e,{once:!0}))});try{await t.decode()}catch(t){}return t}static async D(t,i="show",e=!0,n=null,s=null,l=!1){const o="."+X,a="."+it,r="."+H,c=t.querySelector(o),h=t.closest(r),u=e&&n&&s;if("show"===i){if(!l&&!c&&(t.append(ut("div",X)),h?.classList.add(W)),u){const i=h?.querySelector(a);if(!i){const i=n.querySelector("img");if(i){const e=i.cloneNode(!1);return Object.assign(e.style,{width:s.width+"px",height:s.height+"px",top:s.top+"px",left:s.left+"px"}),e.classList.add(it),t.before(e),await _t.it(e)}}}}else if("hide"===i){const t=h?.querySelector(a);t&&setTimeout(()=>{t.remove()},4),c?.remove(),h?.classList.remove(W)}}static show(t){if(t?.src||"")return new _t(null,t)}static J(t,i){const e={[a]:K,[r]:U,[c]:G}[i];return t.targetData.readyLayout.querySelector(`.${e}`)}static async B(t={}){const{gallery:i,i:e=0,direction:n="next",instance:s}=t;bt=!1;const l=i[(e+i.length)%i.length];if(!s.targetData.readyLayout)return;let o=_t.J(s,n);o.innerHTML="";let a=ut("div",k),r=ut("div",V);a.append(r),o.append(a),_t.D(r,"show",!1,null,null,!1);let c=await(u=l.targetData.href,gt.has(u)?Promise.resolve(gt.get(u)):new Promise(t=>{const i=async()=>{try{const i=await async function(t){if(gt.has(t))return gt.get(t);const i=new Image;if(await new Promise((e,n)=>{i.onload=e,i.onerror=n,i.loading="eager",i.decoding="async",i.src=t}),i.decode)try{await i.decode()}catch(t){}return gt.set(t,i),_t.R(gt,3),i}(u);t(i)}catch(i){t(null)}};"requestIdleCallback"in window?requestIdleCallback(i,{timeout:200}):setTimeout(i,0)}));var u;let d=c.cloneNode(!1);return d&&d.decode&&d.decode().then(()=>{_t.D(r,"hide",!1,null,null,!1)}).catch(()=>{_t.D(r,"hide",!1,null,null,!1)}),bt?void 0:(r.append(d),new Promise(t=>{let i=null,e=null,n=null;const s=_t.L(d.naturalWidth,d.naturalHeight,d.parentElement),o=l.el.querySelector("img")?.getBoundingClientRect();let a=l.T(o,s);a?.isRatioCorrect||(i=ut("div",ot),e=ut("div",at),n=ut("div",rt),n.append(d),i.append(n),e.append(i),[i,e,n].forEach(t=>{t.style.transform="translate3d(0, 0, 0)",t.style.transition=`transform ${l.options.animationDuration}ms ${h.timingFuncInvert}`}),r.append(e)),t()}))}static S(t,i){let{arrow:e,isClick:n,isThumbnailClick:s=!1,targetIndex:l=-1}=t;!0===n&&(i.preventDefault(),i.stopPropagation());let o=!!e.classList.contains(`${N}--${r}`),h=this.galleryData.instances;const u=h.findIndex(t=>t.state.get("opened")),d=-1!==u?h[u]:null;if(!d)return;if(!wt)return;wt=!1;let m=d.state.get("layout-ready");if(-1!==u&&m){d.state.set("layout-ready",!1),d.state.set("opened",!1),d.openedNumb=0,d.targetData.readyLayout.classList.add(b);let t=_t.J(d,a),i=_t.J(d,r),e=_t.J(d,c),n=null,m=null,f=null,g=!0,p=null;if(s&&-1!==l){if(f=l,n=h[f],g=1===Math.abs(u-l),!g){let t=o?r:a;p=_t.B({gallery:h,instance:d,direction:t,i:f})}}else m=o?1:-1,f=(u+m+h.length)%h.length,n=h[f];const w=o?i:t;w.style.visibility="visible";const y=o?t:i;let _=null;_=""+(o?"to-left":"to-right");let x=e.closest("."+B);if(x.style.willChange="transform",!s){let t=document.querySelector("."+I);if(t){let i=t.querySelector("."+C),e=t.querySelector("."+O),n=e.querySelectorAll("."+F),s=n[f];for(const t of n)t.classList.remove(P);s.classList.add(P),_t.Y({viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:s})}}const v=async t=>{if(t.target===x&&"transform"===t.propertyName){x.style.transition="none",x.style.transform="",x.classList.remove("to-left","to-right"),n.targetData.readyLayout=d.targetData.readyLayout,n.state.set("layout-ready",!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{x.style.transition="",n.state.set("opened",!0),n.openedNumb=1})}),n.G(),d.v&&(d.v.forEach((t,i)=>{i.removeEventListener("click",t)}),d.v.clear()),d.targetData.originTarget?.remove(),d.targetData.originTarget=null,d.targetData.readyLayout=null;const t={next:U,prev:K};let i=`${H} ${t[o?a:r]}`,s=`${H} ${t[o?r:a]}`,l=`${H} ${G}`;const c=(t,i)=>{t.className=i,t.innerHTML="",t.style.transform="",t.style.visibility=""};c(e,i),w.className=l,w.style.transform="",w.style.visibility="",x.removeEventListener("transitionend",v),c(y,s),document.querySelector("."+D).innerText=+f+1,_t.q(n.targetData.readyLayout);let u=n.targetData.readyLayout.querySelector(`.${V}`);n.j(u);const m=[a,r],b={gallery:h,instance:n};g||await p,m.forEach(t=>{_t.B({...b,direction:t,i:t===a?f-1:f+1})}),wt=!0}};requestAnimationFrame(()=>{x.classList.add(_),n.U(w)}),x.addEventListener("transitionend",v)}}static A(t=!1){this.et||(document.addEventListener("keydown",t=>{let i=t.key;if("Escape"===i){const t=this.lastOpenedInstance;t&&(t?.options?.closeExisting?_t.closeAll():t.closeModal())}if("ArrowLeft"===i||"ArrowRight"===i){const t=this.lastOpenedInstance;let e="ArrowLeft"===i?a:r,n=document.querySelector("."+N+"--"+e);n&&t&&_t.S.call(t,{arrow:n,isClick:!1})}}),this.et=!0)}static F(){const t=document.documentElement.scrollHeight>window.innerHeight;document.body.classList.contains(u)||(document.body.classList.add(u),t?document.documentElement.classList.add("dc-lightbox-scroll"):document.documentElement.classList.remove("dc-lightbox-scroll"))}static M(){document.body.classList.remove(u)}static q(t){const i=t.querySelector("."+G+" ."+V);return i?(i.addEventListener("click",function(t){t.stopPropagation()}),i):null}static Y(t){const{viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:n,silent:s=!1}=t,l=i.clientWidth,o=e.scrollWidth,a=window.getComputedStyle(e),r=new DOMMatrixReadOnly(a.transform).m41;if(e.style.transition=s?"none":"",o<=l){const t=(l-o)/2;return void(e.style.transform=`translateX(${t}px)`)}const c=l/2,h=n.offsetLeft+n.offsetWidth/2,u=h+r;let d=r;(u<.3*l||u>.7*l)&&(d=c-h);const m=l-o;d=Math.max(m,Math.min(0,d)),Math.abs(d-r)<1||(e.style.transform=`translateX(${d}px)`)}static Z(t){const i=t.querySelector("."+O);if(!i)return;let e=0,n=0,s=0,l=!1,o=!1,a=0,r=null;let c=null,h=0,u=0,d=0,m=null;const f=()=>{const t=window.getComputedStyle(i);let e;if(window.DOMMatrix)e=new DOMMatrixReadOnly(t.transform);else{if(!window.WebKitCSSMatrix)return 0;e=new WebKitCSSMatrix(t.transform)}return e.m41},g=()=>{let t=f();const{min:e,max:n}=(()=>{const t=i.scrollWidth;if(t<=r){const i=(r-t)/2;return{min:i,max:i}}return{min:Math.min(0,r-t),max:0}})();h=Math.max(-60,Math.min(60,h));const s=()=>{if(t+=h,h*=.96,t>n&&(t=n),t<e&&(t=e),i.style.transform=`translate3d(${t}px,0,0)`,Math.abs(h)>.1&&t>e&&t<n)m=requestAnimationFrame(s);else{const s=Math.max(e,Math.min(n,t));i.style.transition="",s!==t&&(i.style.transform=`translate3d(${s}px,0,0)`),m=null}};m=requestAnimationFrame(s)},p=i=>{if(i.pointerId===c&&l){l=!1,o&&g(),o=!1;try{t.releasePointerCapture(c)}catch(t){}c=null}};let b={passive:!1};t.addEventListener("pointerdown",g=>{null===c&&(m&&cancelAnimationFrame(m),m=null,"touch"===g.pointerType&&!1===g.isPrimary||(c=g.pointerId,e=g.clientX,n=e,u=e,d=performance.now(),r=t.clientWidth,s=f(),h=0,l=!0,o=!1,a=0,i.style.transition=""))},b),t.addEventListener("pointermove",r=>{if(r.pointerId!==c||!l)return;n=r.clientX;const m=n-e;if(!o){if(Math.abs(m)<20)return;o=!0,a=m>0?1:-1,t.setPointerCapture(c),i.style.transition="none"}const f=s+(m-20*a);i.style.transform=`translate3d(${f}px,0,0)`;const g=performance.now(),p=g-d;p>0&&(h=(n-u)/p*16.67),u=n,d=g,r.cancelable&&r.preventDefault()},b),t.addEventListener("pointerup",p,b),t.addEventListener("pointercancel",p,b)}static R(t,i){for(;t.size>i;){const i=t.keys().next().value;t.delete(i)}}static L(t,i,e){const n=i/t,s=e.getBoundingClientRect();let l=s.width,o=l*n;o>s.height&&(o=s.height,l=o/n);return{width:l,height:o,left:s.left+(s.width-l)/2,top:s.top+(s.height-o)/2}}}return _t});
|
|
8
|
+
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).DivclassLightbox=i()}(this,function(){"use strict";class t{constructor(){this.events={}}on(t,i){return this.events[t]||(this.events[t]=[]),this.events[t].push(i),this}off(t,i){return this.events[t]?(this.events[t]=this.events[t].filter(t=>t!==i),this):this}once(t,i){const e=(...n)=>{this.off(t,e),i(...n)};return this.on(t,e),this}emit(t,...i){return this.events[t]&&[...this.events[t]].forEach(t=>t(...i)),this}clear(){this.events={}}}class i{constructor(t={},i=null){this.data=t,this.events=i}set(t,i){const e=this.data[t];e!==i&&(this.data[t]=i,this.events&&(this.events.emit(`state:${t}`,i,e),this.events.emit("state:change",t,i,e)))}get(t){return this.data[t]}merge(t,i=!0){const e={...this.data};this.data={...this.data,...t},!i&&this.events&&this.events.emit("state:change","multiple",this.data,e)}}const e={icon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M6 6L18 18M18 6L6 18"/></svg>',iconZoom:'<svg class="icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><circle cx="5.5" cy="5.5" r="5"></circle><path d="M3.5 5.5h4"></path><path class="dc-lightbox__button-zoom-line" d="M5.5 3.5v4"></path><path d="M14.5 14.5l-5.367-5.367"></path></g></svg>',maxZoom:3,thumbnailsIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><rect x="3" y="17" width="4" height="4" rx="1"/><rect x="10" y="17" width="4" height="4" rx="1"/><rect x="17" y="17" width="4" height="4" rx="1"/></svg>',showThumbnailsOnOpen:!0,arrowIcon:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4L7 12L15 20"/></svg>',backdropClick:"close",closeExisting:!1,parentContainer:"body",hideScrollbar:!0,effect:"fadeInDown",zoomImageFromOrigin:!0,animationDuration:400,autoClose:!1,type:"inline",caption:!1,slideChangeDuration:280,slideOffset:.1,beforeLayoutOpen:()=>{},layoutReady:()=>{},layoutOpened:()=>{},beforeLayoutClose:()=>{},layoutClosed:()=>{},extensions:{}},n="data-close",s="data-type",o="data-caption",l="data-gallery",a="prev",r="next",c="active",h={fallbackBase64:"data:image/svg+xml;base64,"+btoa('\n <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">\n <rect width="100%" height="100%" fill="#ddd"/>\n </svg>\n '),openedCounter:0,timer:[0],backdrop_actions:["close"],openEffects:["fadeInDown","fadeIn","fadeInUp","zoomIn"],closeAllPopup:"close-all",timingFunc:"cubic-bezier(0.4, 0, 0.22, 1)",timingFuncInvert:"cubic-bezier(0.78, 0, 0.6, 1)"},u="body--hidden",d="dc-lightbox",m="dc-lightbox--visible",f="dc-lightbox--animating",g="dc-lightbox--opened",p="dc-lightbox--closing",b="dc-lightbox--gallery",x="dc-lightbox--scale-from-origin-in",_="dc-lightbox--scale-to-origin-out",w="dc-lightbox--scaled-from-origin",y="dc-lightbox__close-area",v="dc-lightbox__wrapper",M="dc-lightbox__overlay",$="dc-lightbox__overlay--show",T="dc-lightbox__overlay--prevent-anim",k="dc-lightbox__viewport",A="dc-lightbox__thumbnails",C="dc-lightbox__thumbnails--hide",I="dc-lightbox__thumbnails-viewport",O="dc-lightbox__thumbnails-slider",F="dc-lightbox__thumbnails-slide",q="dc-lightbox__thumbnails-slide--active",D="dc-lightbox__toolbar",P="dc-lightbox__counter",S="dc-lightbox__counter-current",z="dc-lightbox__counter-all",L="dc-lightbox__button-close",R="dc-lightbox__button-zoom",j="dc-lightbox__button-zoom--in",E="dc-lightbox__button-zoom--disabled",X="dc-lightbox__button-thumbnails",Y="dc-lightbox__wrapper--slider",B="dc-lightbox__wrapper--has-thumbnails",N="dc-lightbox__arrow",Z="dc-lightbox__slides",H="dc-lightbox__slide",G="dc-lightbox__slide--active",U="dc-lightbox__slide--prev",K="dc-lightbox__slide--next",V="dc-lightbox__slide--has-spinner",W="dc-lightbox__spinner",J="dc-lightbox__slide-content",Q="dc-lightbox__img-large",tt="dc-lightbox__img-large--loading",it="dc-lightbox__img-large--loaded",et="dc-lightbox__img-zoomable",nt="dc-lightbox__img-grabbing",st="dc-lightbox__slide-content--zoomIn",ot="dc-lightbox__img-small",lt="dc-lightbox__slide-content--prevent-anim",at="dc-lightbox__img-placeholder",rt="dc-lightbox__info",ct="dc-lightbox__info--hide",ht="dc-lightbox__caption",ut="dc-lightbox__caption-data",dt="dc-lightbox__crtl",mt="dc-lightbox__crbr",ft="dc-lightbox__crimg",gt="dc-lightbox__inner",pt="dc-lightbox__close";function bt(t,i="",e=null,n=null){const s=document.createElement(t);i&&(s.className=i),n&&Object.entries(n).forEach(([t,i])=>{!1===i||null===i?s.removeAttribute(t):s.setAttribute(t,String(i))});const o=t=>{t instanceof Node?s.append(t):null!=t&&s.insertAdjacentHTML("beforeend",String(t))};return Array.isArray(e)?e.forEach(o):o(e),s}function xt(t,i){const e={...t};return i&&"object"==typeof i&&Object.keys(i).forEach(n=>{i[n]&&"object"==typeof i[n]&&!Array.isArray(i[n])?e[n]=xt(t[n]||{},i[n]):e[n]=i[n]}),e}const _t=new WeakMap,wt=new Map,yt=new Map,vt=new Map;let Mt=!1,$t=!1;class Tt{constructor(n,s={}){if(s.src){const t=s.src;if(wt.has(t))return wt.get(t);wt.set(s.src,this)}else{if(_t.has(n))return _t.get(n);_t.set(n,this)}this.el=n,this.options=xt(e,s),this.events=new t,this.state=new i({active:!1},this.events),this.extensions={};let o=n.getAttribute("href")||n.getAttribute("data-src")||"",a=this.t(o,n),r=null;"inline"===a&&(r=document.querySelector(o)),this.targetData={href:o,type:a,id:r?.getAttribute("id")||"",style:r?.getAttribute("style")||"",class:r?.getAttribute("class")||"",timer:h.timer};let c=n.getAttribute(l);if(this.galleryName=c&&"image"===a?c:null,this.galleryData=null,this.galleryName){this.smallSrc=this.el?.querySelector("img")?.src||this.targetData?.href||!1,vt.has(this.galleryName)||vt.set(this.galleryName,{instances:[],urls:[],count:0,o:[]});const t=vt.get(this.galleryName);if(t&&(this.galleryData=t,t.instances.push(this),this.smallSrc)){t.urls.push(this.smallSrc);const i=document.createElement("img");i.src=this.smallSrc,i.loading="eager",i.decoding="async",i.alt="",t.o.push(i),t.count++}}this.clickedImgRect=null}init(){if(this.state.get("active"))return;if(this.state.set("active",!0),this.options.silent)this.l();else{let t=this.el;this.h=new Map;const i=this.u.bind(this,t);this.h.set(t,i),t.addEventListener("click",i)}this.emit("before:mount"),this.options.extensions&&this.mount(this.options.extensions),this.emit("mounted"),this.m=new MutationObserver(t=>{t.forEach(t=>{t.removedNodes.forEach(t=>{(t===this.el||t.contains(this.el))&&this.destroy()})})});const t=this.el.parentElement||document.body;this.m.observe(t,{childList:!0})}p(t,i){i.preventDefault();let e=this.targetData;e.timer[0]&&clearTimeout(e.timer[0]);t.getAttribute(n)===h.closeAllPopup||this.options.closeExisting?kt.closeAll():this.closeModal()}async closeModal(){let t=this.options,i=this.targetData;if(!this.state.get("opened"))return;const{animationDuration:e}=t,{type:n}=i;if(i.readyLayout&&!i.readyLayout.classList.contains(p)){this.state.set("layout-ready",!1),Mt=!0;let s=null,o=i.readyLayout.querySelector(`.${M}`);const l=()=>new Promise(requestAnimationFrame);"image"===i.type&&(s=i.readyLayout.querySelector(`.${G} .${J}`),s&&(s.classList.remove(lt),o.classList.remove(T)),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)),o.classList.remove($),this.emit("beforeLayoutClose",{modalRef:i.readyLayout}),i.readyLayout.classList.remove(g),i.readyLayout.classList.remove(b),i.readyLayout.offsetWidth,i.readyLayout.classList.add(f,p);const a=this.el?.querySelector("img")?.getBoundingClientRect()||null;a||i.readyLayout.classList.remove(w);const r=()=>{c&&clearTimeout(c),i.readyLayout&&i.readyLayout.classList.remove(m,p,f);let e=null;"image"!==n?e=this._():this.el&&(e=this.el),"image"===n&&(i.originTarget?.remove(),i.originTarget=null,t.silent&&(this.caption&&(this.caption=null),this.options?.caption&&(this.options.caption=null),this.el=null)),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),kt.M&&(kt.M.forEach((t,i)=>{i.removeEventListener("click",t)}),kt.M.clear()),i.readyLayout?.remove(),i.readyLayout=null,this.placeholder&&(this.placeholder?.remove(),this.placeholder=null),this.emit("layoutClosed",{modalRef:e}),this.state.set("opened",!1),this.openedNumb=0,kt.hasAnyOpen||(kt.$(),document.documentElement.classList.remove("dc-lightbox-scroll"))};let c=0;if(t.zoomImageFromOrigin&&!t.silent&&a&&"image"===i.type){let t=s?.querySelector("img")?.getBoundingClientRect()||null,n=null;if(t&&(n=this.T(a,t),s.style.width=`${t.width}px`,s.style.height=`${t.height}px`,s.style.transform=`translate3d(${t.left}px, ${t.top}px, 0px)`),i.readyLayout.classList.add(_),await l(),await l(),n&&!n.isRatioCorrect){let i=s.querySelector("."+dt),e=s.querySelector("."+mt),o=e.querySelector("."+ft);this.k(a,t,n.scale,i,e,o),await l(),await l()}t&&(s.style.transition=`transform ${e}ms ${h.timingFunc}`,s.style.transform=`translate3d(${n.x}px, ${n.y}px, 0px) scale(${n.scale})`),s.addEventListener("transitionend",r,{once:!0}),c=setTimeout(()=>{r()},e+1e3)}else setTimeout(()=>{r()},e)}}u(t,i){i.preventDefault();const e=t.querySelector("img");this.clickedImgRect=e?e.getBoundingClientRect():null,this.l()}async A(t){return new Promise((i,e)=>{const n=new Image;let s;const o=()=>{s&&clearInterval(s)},l=()=>{o(),i({width:n.naturalWidth,height:n.naturalHeight,imgElement:n})};if(n.onload=l,n.onerror=()=>{o(),e(new Error(`Не вдалося завантажити: ${t}`))},n.loading="eager",n.decoding="async",n.src=t,n.complete&&n.naturalWidth)return l();s=setInterval(()=>{n.naturalWidth&&n.naturalHeight&&l()},10)})}async l(){kt.C();let t=this.options,i=this.targetData,{parentContainer:e,hideScrollbar:n,autoClose:s,animationDuration:o,zoomImageFromOrigin:l,silent:c}=t;const{href:u,type:d}=i,{clickedImgRect:p}=this;if(i.originTarget=this.I(u,d),u&&i.originTarget){let u=this.O();if(!this.state.get("layout-ready"))return;if(u instanceof Node){document.querySelector(e).append(u),kt.hasAnyOpen||n&&kt.F(),kt.q(t,u,d,p);let b=this.existGallery,_=u.querySelector("."+M);if(Mt=!1,"image"===d){let t=kt.D(u),i=u.querySelectorAll("."+N);i.length&&(kt.M=new Map,i.forEach(t=>{const i=kt.P.bind(this,{arrow:t,isClick:!0});kt.M.set(t,i),t.addEventListener("click",i)}));let e=t.querySelector("img"),n=l&&!c&&p,s=-1;if(n){let i=e.src;yt.has(i)&&(e.src=yt.get(i).src);let l=this.el.querySelector("img").cloneNode(!0),c=await kt.S(t,"show",n,this.el,this.clickedImgRect,!0);await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),u.classList.add(m),setTimeout(()=>{_.classList.add($)},7);const{width:d,height:g}=await this.A(e.src);if(d&&g){let n=kt.L(d,g,t),m=this.R(d,n.width,e);this.j(u,m),e.classList.add(Q,tt),e.style.width=n.width+"px",e.style.height=n.height+"px",l.classList.add(ot);let _=this.T(p,n),y=null,v=null,M=null;_.isRatioCorrect?t.append(l):(y=bt("div",dt),v=bt("div",mt),M=bt("div",ft),M.append(e,l),y.append(M),v.append(y),t.append(v),this.k(p,n,_.scale,y,v,M)),t.style.width=`${n.width}px`,t.style.height=`${n.height}px`,t.style.transform=`translate3d(${_.x}px, ${_.y}px, 0px) scale(${_.scale})`,t.style.transformOrigin="0 0",u.classList.add(x,w),t.offsetWidth,_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transition=`transform ${o-.25*o}ms ${h.timingFunc}`}),t.style.transition=`transform ${o}ms ${h.timingFunc}`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.transform=`translate3d(${n.left}px, ${n.top}px, 0) scale(1)`,_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transform="translate3d(0,0,0)"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.remove(),c=null})});const d=async n=>{if(n.target===t&&"transform"===n.propertyName){if(t.removeEventListener("transitionend",d),!yt.has(i))try{await e.decode()}catch(n){await new Promise((t,i)=>{e.complete?t():(e.addEventListener("load",t,{once:!0}),e.addEventListener("error",i,{once:!0}))})}_.isRatioCorrect||[y,v,M].forEach(t=>{t.style.transition=`transform ${o}ms ${h.timingFuncInvert}`});let c=!1,m=0;requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.classList.add(it);const i=n=>{if(n.target===e&&"opacity"===n.propertyName&&!c&&(c=!0,clearTimeout(m),m=null,l.src="",l.remove(),e.classList.remove(tt),e.removeAttribute("style"),e.removeEventListener("transitionend",i),t.removeAttribute("style"),u.classList.remove(x),yt.set(e.src,e),kt.X(yt,3),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.Y(t),b&&(this.B(u),s=this.galleryData.instances.indexOf(this),-1!==s))){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{kt.N({...i,direction:t,i:t===a?s-1:s+1})}),$t=!0}};e.addEventListener("transitionend",i),m=setTimeout(()=>{i({target:e,propertyName:"opacity"})},2500)})}),u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})}};t.addEventListener("transitionend",d)})})}}else{const i=i=>{p||(i.style.opacity=1),kt.S(t,"hide",!1,null,null,!1);let e=i.getBoundingClientRect(),n=this.R(i.naturalWidth,e.width,i);this.j(u,n),setTimeout(()=>{if(u.classList.remove(f),l&&u.classList.add(w),this.state.set("opened",!0),this.openedNumb=++h.openedCounter,this.emit("layoutOpened",{modalRef:u}),this.Y(t),b&&(this.B(u),s=this.galleryData.instances.indexOf(this),-1!==s)){const t=[a,r],i={gallery:this.galleryData.instances,instance:this};t.forEach(t=>{kt.N({...i,direction:t,i:t===a?s-1:s+1})}),$t=!0}},o)};u.classList.add(m),setTimeout(()=>{_.classList.add($)},1),this.Z(e,(i,e)=>{kt.S(t,i,n,this.el,this.clickedImgRect,e)}).then(async()=>{await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame),i(e)})}}else u.classList.add(m),setTimeout(()=>{_.classList.add($)},1);this.emit("layoutReady",{modalRef:u}),u.classList.add(g,f),i.readyLayout=u,setTimeout(()=>{"image"!==d&&(this.state.set("opened",!0),this.openedNumb=++h.openedCounter,u.classList.remove(f),this.emit("layoutOpened",{modalRef:u})),this.H(),t&&s&&(i.timer[0]=setTimeout(()=>{this.closeModal()},s))},o)}}}O(){let t=this.targetData;const{id:i,style:e,class:n,type:s}=t;this.emit("beforeLayoutOpen",{modalRef:t.originTarget});let o=document.createElement("div"),l=this.G();if(o.append(l),o.classList.add(d),"image"!==s){const t=o.querySelector(`.${gt}`);t&&Array.from(t.children).filter(t=>!t.classList.contains(pt)).forEach(t=>{i&&(t.id=i),e&&t.setAttribute("style",e),n&&(t.className=n),t.style.display="block"})}return this.state.set("layout-ready",!0),o}G(){const t=this.targetData,{type:i,id:e}=t,{backdropClick:s,icon:o,iconZoom:l,thumbnailsIcon:a,showThumbnailsOnOpen:r,zoomImageFromOrigin:c}=this.options,u=document.createDocumentFragment();["id","style","class"].forEach(i=>t.originTarget.removeAttribute(i));const d=s&&Array.isArray(h.backdrop_actions)&&h.backdrop_actions.includes(s)?s:null,m=d&&"image"!==i?{[n]:d}:null;if("image"===i){let i=bt("button",R,l),e=bt("div",D,[i,bt("button",L,o,{[n]:""})]);i.addEventListener("click",t=>{this.U(t,t.currentTarget,!1)});let s=bt("div",M),h=bt("div",`${v} ${Y}`,null,m),d=bt("div",Z),f=bt("div",`${H} ${G}`,null,m);d.append(f);let g=bt("div",k,null),p=bt("div",J);t.originTarget instanceof Node?(c&&(t.originTarget.style.opacity=0),p.append(t.originTarget)):p.innerHTML=t.originTarget,g.append(p),f.append(g),this.K(f),h.append(d);if(this.existGallery){const t=this.galleryData.instances.indexOf(this);let i=bt("div",P),n=bt("span",S,t+1),s=bt("span",z,this.galleryData.count);i.append(n,s),e.prepend(i);let o=bt("div",`${H} ${U}`,null,m),l=bt("div",`${H} ${K}`,null,m);d.prepend(o),d.append(l),h.prepend(bt("div",`${N} ${N}--prev`,this.options.arrowIcon)),h.append(bt("div",`${N} ${N}--next`,this.options.arrowIcon));let c=bt("button",X,a);i.after(c);let u=bt("div",A),f=bt("div",I),g=bt("div",O);f.append(g),u.append(f),h.append(u);const p=localStorage.getItem("dcThumbnails");(null!==p?"true"===p:r)&&h.classList.add(B),c.addEventListener("click",()=>{const t=h.classList.toggle(B);localStorage.setItem("dcThumbnails",t)})}return u.append(e,s,h),u}let f=bt("div",M),g=bt("div",v),p=bt("span",y,null,m),b=bt("div",gt),x=bt("button",pt,o,{[n]:""});return b.append(x),t.originTarget instanceof Node?(this.placeholder=document.createComment(`placeholder-for-${e||"element"}`),t.originTarget.before(this.placeholder),b.append(t.originTarget)):b.innerHTML+=t.originTarget,g.append(p,b),u.append(f,g),u}_(){if(this.placeholder?.parentNode){let t=this.targetData.readyLayout.querySelector("#"+this.targetData.id);if(t)return t.style.display="none",this.placeholder.replaceWith(t),t}return!1}I(t,i=this.options.type){return"image"===i?this.V(t):this.W(t)}R(t,i,e=null){const n=t/i;let s=Math.min(n,this.options.maxZoom)>1;return s&&e&&(e.classList.add(et),e.setAttribute("draggable","false")),s}j(t,i){if(!t)return;const e=t.querySelector("."+R);e&&(e.classList.remove(j),e.classList.toggle(E,!i))}J(t,i,e){return Math.max(i,Math.min(e,t))}tt(t,i){const e=getComputedStyle(t),n=new DOMMatrix(e.transform),{minX:s,maxX:o,minY:l,maxY:a}=i,r=this.J(n.m41,s,o),c=this.J(n.m42,l,a);if(n.m41===r&&n.m42===c)return;t.style.transition="transform 0.48s cubic-bezier(0.25, 0.82, 0.15, 1)",t.style.transform=`translate3d(${Math.round(r)}px, ${Math.round(c)}px, 0) scale(${n.a})`;const h=()=>{t.style.transition="",t.removeEventListener("transitionend",h)};t.addEventListener("transitionend",h)}U(t,i,e=!0){let n=kt.lastOpenedInstance;if(!n)return;let s=n.state.get("opened"),o=n.targetData.readyLayout.querySelector(`.${G} .${J} img`);if(s&&o){let s=n.options.maxZoom,l=o.getBoundingClientRect(),a=l.width,r=o.naturalWidth/a,c=Math.min(r,s);if(c){let s=o.closest("."+J);const a=s.classList.contains(st),r=t=>{if(t.target!==o||"transform"!==t.propertyName)return;o.removeEventListener("transitionend",r);let i=o.getBoundingClientRect(),e=Math.round(i.width),s=Math.round(i.height),l=0,a=0;const h=getComputedStyle(o).transform;if(h&&"none"!==h){const t=new DOMMatrixReadOnly(h);l=t.m41,a=t.m42}l=Math.round(l),a=Math.round(a),o.style.willChange="transform",o.style.transition="none",o.style.width=e+"px",o.style.height=s+"px",o.style.maxWidth="none",o.style.maxHeight="none",o.style.transform=`translate(${l}px, ${a}px) scale(1)`,n.targetData.imgScaleVal=c,requestAnimationFrame(()=>{requestAnimationFrame(()=>{o.style.transition=""})})},h=t=>{t.target===o&&"transform"===t.propertyName&&(s.classList.remove(st),i.classList.remove(j),o.classList.remove(nt),o.style.transformOrigin="center center",o.style.width="",o.style.height="",o.style.maxWidth="",o.style.maxHeight="",o.style.transform="",o.style.willChange="",o.removeEventListener("transitionend",h))};if(a||n.targetData.imgScaleVal)n.targetData.imgScaleVal&&(o.style.transition="",o.style.transform=`scale(${1/n.targetData.imgScaleVal})`,n.targetData.imgScaleVal=!1,n.it(),o.addEventListener("transitionend",h));else if(c>1){if(i.classList.add(j),s.classList.add(st),e){const i=window.innerWidth,e=window.innerHeight,n=l.left+l.width/2,s=l.top+l.height/2,a=t.clientX-n,r=t.clientY-s;let h=-a*(c-1),u=-r*(c-1);const d=l.width*c,m=l.height*c,f=Math.max(0,(d-i)/2),g=Math.max(0,(m-e)/2);h=Math.max(-f,Math.min(f,h)),u=Math.max(-g,Math.min(g,u)),o.style.transform=`translate(${Math.round(h)}px, ${Math.round(u)}px) scale(${c})`}else o.style.transform=`scale(${c})`;o.addEventListener("transitionend",r),o.style.transformOrigin=""}}}return!1}V(t){if(!t)return!1;let i=document.createElement("img");return i.src=t,i.alt="",i}et(){let t=this.options.caption;if(this.el){const i=this.el.getAttribute(o);i&&"false"!==i&&(t=i)}return t&&(t=t.trim()),t}W(t){if(!t||!t.startsWith("#")||t.length<=1)return!1;const i=document.querySelector(t);return!!i&&(!this.state.get("opened")&&i)}t(t,i=null){if(i){const t=i.getAttribute(s);if(t&&"false"!==t)return t}let e=this?.options?.type||"inline";return t&&/(^data:image\/[a-z0-9+\/=]*,)|\.(jpe?g|gif|png|bmp|webp|svg|ico)([\?#].*)?$/i.test(t)&&(e="image"),e}mount(t){for(const[i,e]of Object.entries(t)){let t=e;if("object"==typeof t&&null!==t&&("function"==typeof t[i]?t=t[i]:"function"==typeof t.default&&(t=t.default)),"function"!=typeof t)continue;const n=new t(this);this.extensions[i]=n,"function"==typeof n.mount&&n.mount()}}on(t,i){return this.events.on(t,i),this}off(t,i){return this.events.off(t,i),this}emit(t,i){return this.events.emit(t,i),this}destroy(){this.state.get("active")&&(this.emit("before:destroy"),this.m&&(this.m.disconnect(),this.m=null),Object.keys(this.extensions).forEach(t=>{this.extensions[t].destroy?.(),this.extensions[t]=null}),this.extensions={},this.el&&(_t.delete(this.el),kt.instances.delete(this),this.el=null),this.targetData&&(this.targetData=null),this.placeholder&&(this.placeholder=null),this.openedNumb&&(this.openedNumb=null),this.galleryData&&(vt.delete(this.galleryName),this.galleryData=null),yt&&yt.clear(),this?.options?.src&&wt.delete(this.options.src),this.h&&(this.h.forEach((t,i)=>{i.removeEventListener("click",t)}),this.h.clear()),this.v&&(this.v.forEach((t,i)=>{i.removeEventListener("click",t)}),this.v.clear()),h.openedCounter=0,this.state.set("active",!1),this.state.set("layout-ready",!1),this.emit("destroyed"),this.events.clear())}k(t,i,e,n,s,o){const l=2*e,a=.5*i.width-t.width/l,r=.5*i.height-t.height/l,c=(t,i,e)=>{const n=Math.round(1e4*i)/1e4,s=Math.round(1e4*e)/1e4;t.style.transform=`translate3d(${n}px, ${s}px, 0)`};c(n,2*a,2*r),c(s,-a,-r),c(o,-a,-r)}T(t,i){if(!t||!i)return;const e=t.width/i.width,n=t.height/i.height,s=e.toFixed(2)===n.toFixed(2),o=Math.max(e,n);return{isRatioCorrect:s,scale:o,x:.5*t.width+t.left-i.width*o*.5,y:.5*t.height+t.top-i.height*o*.5}}Z(t,i){const e=!t.complete||0===t.naturalWidth;let n=!1;const s=(t=!1)=>{n||(n=!0,i("show",t))};return(e?new Promise(i=>{s(),t.addEventListener("load",i,{once:!0}),t.addEventListener("error",i,{once:!0})}):Promise.resolve()).then(()=>{if(t.decode)return s(!0),t.decode().catch(t=>{})}).finally(()=>{})}H(){let t=this.targetData.readyLayout.querySelectorAll(`[${n}]`);t.length&&(this.v=new Map,t.forEach(t=>{const i=this.p.bind(this,t);this.v.set(t,i),t.addEventListener("click",i)}))}K(t){const i=this.et();if(t?.querySelector("."+rt)?.remove(),i){this.caption=i;const e=bt("div",rt),n=bt("div",ht),s=bt("div",ut,i);n.append(s),e.append(n),t.append(e),e.addEventListener("click",t=>{t.stopPropagation()})}}it(){this.frame&&cancelAnimationFrame(this.frame),this.frame=null}nt(t,i){const e=t.getBoundingClientRect(),n=i.getBoundingClientRect();this.limits={minX:Math.min(0,(e.width-n.width)/2),maxX:Math.max(0,(n.width-e.width)/2),minY:Math.min(0,(e.height-n.height)/2),maxY:Math.max(0,(n.height-e.height)/2)};const s=new DOMMatrix(getComputedStyle(i).transform);this.zoomedScale=s.a}Y(t){let i={activeSlide:t.closest("."+G),pSlide:null,nSlide:null},e=t.closest("."+k),n=null,s=!0,o=null,l=!0,c=0,u=0,d=null,m=0,f=0,g=!1,p=!1;let b=this.options.animationDuration||100,x=this.options.zoomImageFromOrigin,_=null,w=null,y=!1,v=!1,$=null,I=null,O=null,F=!1,q=!1,D=null,P=null,S=0,z=0,L=0,j=null,E=t.closest("."+Z),X=null,Y=null,H=0,U=0,K=null,V=!1,W=0,J=0,Q=0,tt=0,it=0;this.frame=null,this.targetData.imgScaleVal=null;let ot=0,at=0;const ht=b=>{if(b.pointerId===j&&g){if(!p&&X){if(K&&!V){let t=this.targetData.readyLayout.querySelector("."+R);this.U(b,t)}if(K&&Y&&V){this.frame&&cancelAnimationFrame(this.frame);const{minX:t,maxX:i,minY:e,maxY:n}=this.limits,s=getComputedStyle(K),o=new DOMMatrix(s.transform);let l=o.m41,a=o.m42;const r=o.a,c=.9,h=()=>{l<t?(W*=.68,l+=.12*(t-l)):l>i&&(W*=.68,l+=.12*(i-l)),a<e?(J*=.68,a+=.12*(e-a)):a>n&&(J*=.68,a+=.12*(n-a)),l+=W,a+=J,W*=c,J*=c,K.style.transform=`translate3d(${Math.round(l)}px, ${a}px, 0) scale(${r})`,K.classList.remove(nt);if(Math.hypot(W,J)<.25)return W=0,J=0,this.tt(K,{minX:t,maxX:i,minY:e,maxY:n}),void(this.frame=null);this.frame=requestAnimationFrame(h)};this.frame=requestAnimationFrame(h)}V=!1}if(g=!1,E.style.transition="","x"===d){const t=f-u,i=e.clientWidth;let n=Math.abs(S);n<30&&(n*=1e3);const s=.32*i,o=650,l=t+.2*S;if(p&&_&&(Math.abs(t)>s||n>o||Math.abs(l)>.48*i)){const t=this.state.get("opened"),i=l>0?a:r;let e=document.querySelector("."+N+"--"+i);e&&t&&kt.P.call(this,{arrow:e,isClick:!1})}else p&&(E.style.transform="",setTimeout(()=>{E.style.willChange="auto"},this.options.slideChangeDuration))}if("y"===d){const a=m-c,r=Math.min(100,.2*D);p&&Math.abs(a)>r?(I.style.opacity=0,I=null,x||(t.style.opacity=0),Mt=!0,this.closeModal()):p&&(t.style.transition=`transform 0.3s ${h.timingFunc}`,t.style.transform="",I.style.transition=`opacity 0.3s ${h.timingFunc}`,I.style.opacity=1,P=setTimeout(()=>{t.style.transition="",I.style.transition="",I.style.opacity="",I.classList.remove(T),t.style.willChange="",n&&(n.classList.remove(ct),s=!0),o&&(o.classList.remove(C),l=!0,i.activeSlide.style.overflow="",e.style.overflow=""),n=null,o=null},300),x||(t.style.animation="",t.classList.add(lt)))}c=0,u=0,m=0,f=0,$=null,D=null,p=!1,d=null,e.releasePointerCapture(j),j=null}},ut=(t,i)=>{if(d)return d;const e=Math.abs(t),n=Math.abs(i);return e<24&&n<24?null:(d=e>n?"x":"y",d)};e.addEventListener("pointerdown",e=>{if(null!==j)return;if(j=e.pointerId,K=e.target.closest("img"),!this.state.get("layout-ready"))return;P&&clearTimeout(P),c=e.clientY,u=e.clientX,m=c,f=u,$=document.documentElement.clientWidth,D=document.documentElement.clientHeight,_=this.existGallery,I=this.targetData.readyLayout.querySelector("."+M),I.style.willChange="opacity",I.classList.add(T),d=null,g=!0,p=!1,n=i.activeSlide.querySelector("."+rt),o=i.activeSlide.closest("."+B)?.querySelector("."+A),x?(t.style.transition="",t.style.willChange="transform"):(t.style.opacity=1,t.style.transition=`opacity ${b}ms ${h.timingFunc}`,t.style.willChange="transform, opacity"),_&&(i.pSlide=kt.st(this,a),i.nSlide=kt.st(this,r)),E.style.transition="none",E.style.willChange="transform";let s=t.querySelector("img");if(s&&s.classList.contains(et)&&(X=!0,Y=!!t.classList.contains(st),Y&&K&&this.targetData.imgScaleVal)){s.classList.add(nt);const i=getComputedStyle(s),e=new DOMMatrix(i.transform);this.it(),s.style.transition="",this.nt(t,s),ot=e.m41,at=e.m42,W=J=0,tt=ot,it=at}}),e.addEventListener("pointermove",a=>{if(a.pointerId!==j)return;if(!g)return;m=a.clientY,f=a.clientX;const r=m-c,h=f-u;if(Y&&K&&this.targetData.imgScaleVal){if(!V){const t=Math.hypot(h,r);if(t<12)return;V=!0;H=12*(h/t),U=12*(r/t)}let i=t.querySelector("img"),e=ot+h-H,n=at+r-U;const{minX:s,maxX:o,minY:l,maxY:a}=this.limits,c=.25;e>o?e=o+(e-o)*c:e<s&&(e=s+(e-s)*c),n>a?n=a+(n-a)*c:n<l&&(n=l+(n-l)*c),i.style.transition="none",i.style.transform=`translate3d(${Math.round(e)}px, ${Math.round(n)}px, 0) scale(${this.zoomedScale})`;const u=performance.now(),d=u-Q;if(d>8&&d<100){W=(e-(tt||ot))/d*16,J=(n-(it||at))/d*16}tt=e,it=n,Q=u}if(ut(h,r),"x"===d&&!Y){const i=performance.now(),e=i-L;if(e>8&&e<120){S=.65*S+.35*((f-z)/e*1e3)}if(z=f,L=i,!p){if(Math.abs(h)<20)return;p=!0,w=h>0?1:-1,t.style.willChange=""}const n=h-20*w;n>0&&!y?(y=!0,v=!1):n<0&&!v&&(v=!0,y=!1);const s=n/$*100;E.style.transform=`translate3d(${s}%, 0, 0)`}if("y"===d&&!Y){if(!p){if(Math.abs(r)<40)return;p=!0,E.style.willChange="",O=r>0?1:-1}const a=r-40*O;a>0&&!q?(q=!0,F=!1):a<0&&!F&&(F=!0,q=!1);const c=a/D*100,h=Math.abs(c+(q?-100:100));I.style.opacity=h+"%",x&&this.clickedImgRect||(t.style.animation="none"),t.style.transform=`translate3d(0, ${a}px, 0)`,n&&s&&(s=!1,n.classList.add(ct)),o&&l&&(l=!1,o.classList.add(C),i.activeSlide.style.overflow="visible",e.style.overflow="visible")}(p||Y)&&e.setPointerCapture(j),a.cancelable&&a.preventDefault()}),e.addEventListener("pointerup",ht),e.addEventListener("pointercancel",ht)}get existGallery(){return this.galleryData?.urls.length>1||!1}B(t){if(this.existGallery){let i=this.galleryData,e=t,n=t.querySelector("."+A),s=e.querySelector("."+I),o=e.querySelector("."+O),l=null,c=i.instances.indexOf(this);if(this.galleryData.o.length>1){const t=document.createDocumentFragment();this.galleryData.o.forEach((i,e)=>{let n=document.createElement("div");n.className=F,n.dataset.index=e,n.appendChild(i.cloneNode(!0)),t.appendChild(n)}),o.appendChild(t)}l=o.querySelectorAll("."+F),n.addEventListener("click",t=>{if(t.target.closest(`.${q}`))return;const i=t.target.closest(`.${F}`);if(!i)return;const e=i.parentNode.children;let n=-1,l=null,c=0;for(const t of e)t.classList.contains(q)&&(n=c),c++;if(l=this.galleryData.instances[n],!l||!l.state.get("opened")||!$t)return;o.style.transition="",e[n].classList.remove(q),i.classList.add(q);let h=parseInt(i.getAttribute("data-index")),u=h>n?r:a,d=document.querySelector("."+N+"--"+u);kt.P.call(l,{arrow:d,isClick:!1,isThumbnailClick:!0,targetIndex:h}),kt.ot({viewportThumbnail:s,sliderThumbnails:o,activeThumbnail:i})});const h=n.querySelector("."+I);if(kt.lt(h),-1!==c){const t=l[c];t&&(t.classList.add(q),kt.ot({viewportThumbnail:s,sliderThumbnails:o,activeThumbnail:t,silent:!0}))}}}}class kt{static instances=new Map;static Extensions={};constructor(t=null,i={}){let e=null;if(null===t){i.silent=!0;let t=bt("a","","",{href:i?.src||"",caption:i?.caption||""});e=kt.rt(t)}else e=kt.rt(t);if(!e.length)return null;const n=e.map(e=>{if(null===t){let t=i?.src||"";if(wt.has(t))return wt.get(t)}else if(_t.has(e))return _t.get(e);const n=new Tt(e,i);return kt.instances.set(n,n),n}),s=1===n.length?n[0]:n;return Array.isArray(s)&&(s.on=(t,i)=>(s.forEach(e=>e.on(t,i)),s)),setTimeout(()=>{Array.isArray(s)?s.forEach(t=>t.init()):s.init()},0),s}static rt(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:Array.isArray(t)?t.filter(t=>t instanceof HTMLElement):[]}static destroyAll(){Array.from(this.instances.values()).forEach(t=>{t.destroy()}),this.instances.clear()}static closeAll(){this.allOpened.forEach(t=>{t.closeModal()}),h.openedCounter=0}static get allOpened(){return Array.from(this.instances.values()).filter(t=>t.state.get("opened")).sort((t,i)=>i.openedNumb-t.openedNumb)}static get hasAnyOpen(){for(const t of this.instances.values())if(t.state.get("opened"))return!0;return!1}static get lastOpenedInstance(){let t=null,i=-1;for(const e of this.instances.values())e.state.get("opened")&&e.openedNumb>i&&(i=e.openedNumb,t=e);return t}static q(t,i,e,n){let{animationDuration:s=0,effect:o="fadeInDown",zoomImageFromOrigin:l}=t;l&&!t.silent&&"image"===e&&n&&(o="fadeIn");const a=h.openEffects.includes(o)?o:"fadeInDown",r={fadeInDown:-40,fadeInUp:40}[a]??0,c={"--animationDuration":`${Number(s)||0}ms`,"--animationEffect":a,"--imageInitPosition":`${r}px`,"--slideChangeDuration":t.slideChangeDuration+"ms","--slideOffset":t.slideOffset};Object.entries(c).forEach(([t,e])=>{i.style.setProperty(t,e)})}static async ct(t){await new Promise((i,e)=>{t.complete?i():(t.addEventListener("load",i,{once:!0}),t.addEventListener("error",e,{once:!0}))});try{await t.decode()}catch(t){}return t}static async S(t,i="show",e=!0,n=null,s=null,o=!1){const l="."+W,a="."+at,r="."+H,c=t.querySelector(l),h=t.closest(r),u=e&&n&&s;if("show"===i){if(!o&&!c&&(t.append(bt("div",W)),h?.classList.add(V)),u){const i=h?.querySelector(a);if(!i){const i=n.querySelector("img");if(i){const e=i.cloneNode(!1);return Object.assign(e.style,{width:s.width+"px",height:s.height+"px",top:s.top+"px",left:s.left+"px"}),e.classList.add(at),t.before(e),await kt.ct(e)}}}}else if("hide"===i){const t=h?.querySelector(a);t&&setTimeout(()=>{t.remove()},4),c?.remove(),h?.classList.remove(V)}}static show(t){if(t?.src||"")return new kt(null,t)}static st(t,i){const e={[a]:U,[r]:K,[c]:G}[i];return t.targetData.readyLayout.querySelector(`.${e}`)}static async N(t={}){const{gallery:i,i:e=0,direction:n="next",instance:s}=t;Mt=!1;const o=i[(e+i.length)%i.length];if(!s.targetData.readyLayout)return;let l=kt.st(s,n);l.innerHTML="";let a=bt("div",k),r=bt("div",J);a.append(r),l.append(a),kt.S(r,"show",!1,null,null,!1);let c=await(u=o.targetData.href,yt.has(u)?Promise.resolve(yt.get(u)):new Promise(t=>{const i=async()=>{try{const i=await async function(t){if(yt.has(t))return yt.get(t);const i=new Image;if(await new Promise((e,n)=>{i.onload=e,i.onerror=n,i.loading="eager",i.decoding="async",i.src=t}),i.decode)try{await i.decode()}catch(t){}return yt.set(t,i),kt.X(yt,3),i}(u);t(i)}catch(i){t(null)}};"requestIdleCallback"in window?requestIdleCallback(i,{timeout:200}):setTimeout(i,0)}));var u;let d=c.cloneNode(!1);return d&&d.decode&&d.decode().then(()=>{kt.S(r,"hide",!1,null,null,!1)}).catch(()=>{kt.S(r,"hide",!1,null,null,!1)}),Mt?void 0:(r.append(d),new Promise(t=>{let i=null,e=null,n=null;const s=kt.L(d.naturalWidth,d.naturalHeight,d.parentElement),l=o.el.querySelector("img")?.getBoundingClientRect();let a=o.T(l,s);a?.isRatioCorrect||(i=bt("div",dt),e=bt("div",mt),n=bt("div",ft),n.append(d),i.append(n),e.append(i),[i,e,n].forEach(t=>{t.style.transform="translate3d(0, 0, 0)",t.style.transition=`transform ${o.options.animationDuration}ms ${h.timingFuncInvert}`}),r.append(e)),t()}))}static P(t,i){let{arrow:e,isClick:n,isThumbnailClick:s=!1,targetIndex:o=-1}=t;!0===n&&(i.preventDefault(),i.stopPropagation());let l=!!e.classList.contains(`${N}--${r}`),h=this.galleryData.instances;const u=h.findIndex(t=>t.state.get("opened")),d=-1!==u?h[u]:null;if(!d)return;if(!$t)return;$t=!1;let m=d.state.get("layout-ready");if(-1!==u&&m){d.state.set("layout-ready",!1),d.state.set("opened",!1),d.openedNumb=0,d.targetData.readyLayout.classList.add(b);let t=kt.st(d,a),i=kt.st(d,r),e=kt.st(d,c),n=null,m=null,f=null,g=!0,p=null;if(s&&-1!==o){if(f=o,n=h[f],g=1===Math.abs(u-o),!g){let t=l?r:a;p=kt.N({gallery:h,instance:d,direction:t,i:f})}}else m=l?1:-1,f=(u+m+h.length)%h.length,n=h[f];const x=l?i:t;x.style.visibility="visible";const _=l?t:i;let w=null;w=""+(l?"to-left":"to-right");let y=e.closest("."+Z);if(y.style.transition="",y.style.willChange="transform",!s){let t=document.querySelector("."+A);if(t){let i=t.querySelector("."+I),e=t.querySelector("."+O),n=e.querySelectorAll("."+F),s=n[f];for(const t of n)t.classList.remove(q);s.classList.add(q),kt.ot({viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:s})}}const v=async t=>{if(t.target===y&&"transform"===t.propertyName){y.style.transition="none",y.style.transform="",y.classList.remove("to-left","to-right"),n.targetData.readyLayout=d.targetData.readyLayout,n.state.set("layout-ready",!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y.style.transition="",n.state.set("opened",!0),n.openedNumb=1})}),n.H(),d.v&&(d.v.forEach((t,i)=>{i.removeEventListener("click",t)}),d.v.clear()),d.targetData.originTarget?.remove(),d.targetData.originTarget=null,d.targetData.readyLayout=null;const i={next:K,prev:U};let s=`${H} ${i[l?a:r]}`,o=`${H} ${i[l?r:a]}`,c=`${H} ${G}`;const u=(t,i)=>{t.className=i,t.innerHTML="",t.style.transform="",t.style.visibility=""};u(e,s),x.className=c,x.style.transform="",x.style.visibility="",y.removeEventListener("transitionend",v),u(_,o),document.querySelector("."+S).innerText=+f+1;let m=kt.D(n.targetData.readyLayout),b=this;function w(t){let i=t.getBoundingClientRect(),e=b.R(t.naturalWidth,i.width,t);t.removeAttribute("loading"),t.removeAttribute("decoding"),b.j(n.targetData.readyLayout,e)}function M(t){t.complete?w(t):t.addEventListener("load",()=>{w(t)},{once:!0})}const $=m.querySelector("img");if($)M($);else{new MutationObserver((t,i)=>{const e=m.querySelector("img");e&&(M(e),i.disconnect())}).observe(m,{childList:!0,subtree:!0})}let T=n.targetData.readyLayout.querySelector(`.${J}`);n.Y(T);const k=[a,r],A={gallery:h,instance:n};g||await p,k.forEach(t=>{kt.N({...A,direction:t,i:t===a?f-1:f+1})}),$t=!0}};requestAnimationFrame(()=>{y.classList.add(w),n.K(x)}),y.addEventListener("transitionend",v)}}static C(t=!1){this.ht||(document.addEventListener("keydown",t=>{let i=t.key;if("Escape"===i){const t=this.lastOpenedInstance;t&&(t?.options?.closeExisting?kt.closeAll():t.closeModal())}if("ArrowLeft"===i||"ArrowRight"===i){const t=this.lastOpenedInstance;let e="ArrowLeft"===i?a:r,n=document.querySelector("."+N+"--"+e);n&&t&&kt.P.call(t,{arrow:n,isClick:!1})}}),this.ht=!0)}static F(){const t=document.documentElement.scrollHeight>window.innerHeight;document.body.classList.contains(u)||(document.body.classList.add(u),t?document.documentElement.classList.add("dc-lightbox-scroll"):document.documentElement.classList.remove("dc-lightbox-scroll"))}static $(){document.body.classList.remove(u)}static D(t){const i=t.querySelector("."+G+" ."+J);return i?(i.addEventListener("click",function(t){t.stopPropagation()}),i):null}static ot(t){const{viewportThumbnail:i,sliderThumbnails:e,activeThumbnail:n,silent:s=!1}=t,o=i.clientWidth,l=e.scrollWidth,a=window.getComputedStyle(e),r=new DOMMatrixReadOnly(a.transform).m41;if(e.style.transition=s?"none":"",l<=o){const t=(o-l)/2;return void(e.style.transform=`translateX(${t}px)`)}const c=o/2,h=n.offsetLeft+n.offsetWidth/2,u=h+r;let d=r;(u<.3*o||u>.7*o)&&(d=c-h);const m=o-l;d=Math.max(m,Math.min(0,d)),Math.abs(d-r)<1||(e.style.transform=`translateX(${d}px)`)}static lt(t){const i=t.querySelector("."+O);if(!i)return;let e=0,n=0,s=0,o=!1,l=!1,a=0;let r=null,c=0,h=0,u=0,d=null;const m=()=>{const t=getComputedStyle(i);return new DOMMatrixReadOnly(t.transform).m41||0},f=()=>{const e=i.scrollWidth,n=t.clientWidth;if(e<=n){const t=(n-e)/2;return{min:t,max:t}}return{min:n-e,max:0}},g=e=>{if(e.pointerId===r&&o){if(o=!1,l)(()=>{let t=m();const{min:e,max:n}=f();c=Math.max(-85,Math.min(85,c));const s=()=>{if(t+=c,t>n?(t=n+.915*(t-n),c*=.72):t<e&&(t=e-.915*(e-t),c*=.72),c*=.935,i.style.transform=`translate3d(${t}px, 0, 0)`,Math.abs(c)>.15&&t>e-5&&t<n+5)d=requestAnimationFrame(s);else{const s=Math.max(e,Math.min(n,t));Math.abs(s-t)>.5&&(i.style.transition="transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1)",i.style.transform=`translate3d(${s}px, 0, 0)`),d=null}};d=requestAnimationFrame(s)})();else{const{min:t,max:e}=f(),n=m(),s=Math.max(t,Math.min(e,n));s!==n&&(i.style.transition="transform 0.4s ease-out",i.style.transform=`translate3d(${s}px, 0, 0)`)}try{t.releasePointerCapture(r)}catch(t){}r=null}},p={passive:!1};t.addEventListener("pointerdown",t=>{null===r&&("touch"!==t.pointerType||t.isPrimary)&&(d&&cancelAnimationFrame(d),d=null,r=t.pointerId,e=n=h=t.clientX,u=performance.now(),s=m(),c=0,o=!0,l=!1,a=0,i.style.transition="none")},p),t.addEventListener("pointermove",d=>{if(d.pointerId!==r||!o)return;n=d.clientX;const m=n-e;if(!l){if(Math.abs(m)<15)return;l=!0,a=m>0?1:-1,t.setPointerCapture(r),i.style.transition="none"}let g=s+(m-15*a);const{min:p,max:b}=f();g>b?g=b+.28*(g-b):g<p&&(g=p+.28*(g-p)),i.style.transform=`translate3d(${g}px, 0, 0)`;const x=performance.now(),_=x-u;if(_>8&&_<120){c=(g-(h!==n?h:s))/_*16.67}h=g,u=x,d.cancelable&&d.preventDefault()},p),t.addEventListener("pointerup",g,p),t.addEventListener("pointercancel",g,p)}static X(t,i){for(;t.size>i;){const i=t.keys().next().value;t.delete(i)}}static L(t,i,e){const n=i/t,s=e.getBoundingClientRect();let o=Math.min(t,s.width),l=o*n;l>s.height&&(l=s.height,o=l/n);return{width:o,height:l,left:s.left+(s.width-o)/2,top:s.top+(s.height-l)/2}}}return kt});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@divclass/lightbox",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Divclass Lightbox — modern, lightweight lightbox for images and inline content.
|
|
3
|
+
"version": "1.1.3",
|
|
4
|
+
"description": "Divclass Lightbox — modern, lightweight lightbox for images and inline content. Touch-friendly, cross-browser, swipe & drag gestures, virtual slides, inline HTML, zero dependency.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lightbox",
|
|
7
7
|
"javascript lightbox",
|