@divclass/lightbox 1.0.2
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 +16 -0
- package/LICENSE +21 -0
- package/README.md +361 -0
- package/dist/divclass-lightbox.css +1 -0
- package/dist/divclass-lightbox.esm.js +8 -0
- package/dist/divclass-lightbox.umd.js +8 -0
- package/package.json +48 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## [1.0.2] - 2026-03-13
|
|
6
|
+
### Added
|
|
7
|
+
- Initial release of **Divclass Lightbox**
|
|
8
|
+
- Supports images and inline content
|
|
9
|
+
- Smart Zoom From Origin animations
|
|
10
|
+
- Virtual slides (only 3 DOM nodes at a time)
|
|
11
|
+
- Swipe & drag gestures for touch devices
|
|
12
|
+
- Animated thumbnails and data-gallery support
|
|
13
|
+
- Inline content and nested modals
|
|
14
|
+
- Lifecycle hooks and global controls
|
|
15
|
+
- Cross-browser and touch-friendly
|
|
16
|
+
- Lightweight: 32 KB (~11 KB gzipped)
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Taras Bilinskyi
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,361 @@
|
|
|
1
|
+
# Divclass Lightbox
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@divclass/lightbox)
|
|
4
|
+
|
|
5
|
+
**Lightweight 32 KB (≈11 KB gzipped), dependency-free lightbox** for images and inline content.
|
|
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)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 🌟 Key Features
|
|
13
|
+
|
|
14
|
+
* **Lightweight — 32 KB (≈11 KB gzipped)**
|
|
15
|
+
Full-featured lightbox without heavy dependencies.
|
|
16
|
+
* **Virtual Slides**
|
|
17
|
+
Only **3 DOM nodes** exist at a time for optimal performance.
|
|
18
|
+
* **Fully Responsive**
|
|
19
|
+
Works perfectly across desktop, tablet, and mobile devices.
|
|
20
|
+
* **Cross-browser & Touch-friendly**
|
|
21
|
+
Supports modern browsers and touch gestures.
|
|
22
|
+
* **Easy Integration**
|
|
23
|
+
Initialize via **data attributes or selectors**.
|
|
24
|
+
* **Smart Zoom From Origin**
|
|
25
|
+
Smooth animation from thumbnail → full image without predefined image sizes.
|
|
26
|
+
* **Swipe & Drag Gestures**
|
|
27
|
+
Intuitive navigation on touch devices
|
|
28
|
+
* **Animated Thumbnails & Data Galleries**
|
|
29
|
+
Create galleries instantly using `data-gallery`.
|
|
30
|
+
* **Inline Content & Nested Modals**
|
|
31
|
+
Display any HTML content and even open nested modals.
|
|
32
|
+
* **Smart Image Preloading**
|
|
33
|
+
Smooth navigation with optimized image loading.
|
|
34
|
+
* **Keyboard Navigation**
|
|
35
|
+
* **Global Controls**
|
|
36
|
+
- `DivclassLightbox.closeAll()`
|
|
37
|
+
- `DivclassLightbox.destroyAll()`
|
|
38
|
+
* **Customizable Animations**
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 🌍 Demo
|
|
43
|
+
|
|
44
|
+
https://lightbox.divclass.org
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## 📦 Installation
|
|
50
|
+
|
|
51
|
+
## Install via npm
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npm install @divclass/lightbox
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
import DivclassLightbox from "@divclass/lightbox";
|
|
59
|
+
import "@divclass/lightbox/style.css"
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
new DivclassLightbox("[data-dc-lightbox]")
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## CDN
|
|
66
|
+
```html
|
|
67
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@divclass/lightbox/dist/divclass-lightbox.css">
|
|
68
|
+
<script src="https://cdn.jsdelivr.net/npm/@divclass/lightbox/dist/divclass-lightbox.umd.js"></script>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
new DivclassLightbox('[data-dc-lightbox]');
|
|
72
|
+
</script>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## ES Modules (browser)
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<link rel="stylesheet" href="/path/divclass-lightbox.css">
|
|
79
|
+
|
|
80
|
+
<script type="module">
|
|
81
|
+
import DivclassLightbox from "/path/divclass-lightbox.esm.js";
|
|
82
|
+
|
|
83
|
+
new DivclassLightbox("[data-dc-lightbox]");
|
|
84
|
+
</script>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Manual Download
|
|
88
|
+
|
|
89
|
+
Download the latest release and include the files manually:
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<link rel="stylesheet" href="dist/divclass-lightbox.css">
|
|
93
|
+
|
|
94
|
+
<script src="dist/divclass-lightbox.umd.js"></script>
|
|
95
|
+
|
|
96
|
+
<script>
|
|
97
|
+
new DivclassLightbox('[data-dc-lightbox]');
|
|
98
|
+
</script>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## 🚀 Quick Start
|
|
104
|
+
|
|
105
|
+
Add the `data-dc-lightbox` attribute to links that should open in the lightbox.
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<a href="image-large.jpg" data-dc-lightbox>
|
|
109
|
+
<img src="image-thumb.jpg" alt="">
|
|
110
|
+
</a>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Initialize the lightbox with a selector:
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
import DivclassLightbox from "@divclass/lightbox";
|
|
117
|
+
import "@divclass/lightbox/style.css"
|
|
118
|
+
|
|
119
|
+
new DivclassLightbox("[data-dc-lightbox]")
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
## Gallery
|
|
126
|
+
|
|
127
|
+
Group items into a gallery using the `data-gallery` attribute.
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<a href="img1.jpg" data-dc-lightbox data-gallery="gallery1">
|
|
131
|
+
<img src="thumb1.jpg" alt="">
|
|
132
|
+
</a>
|
|
133
|
+
|
|
134
|
+
<a href="img2.jpg" data-dc-lightbox data-gallery="gallery1">
|
|
135
|
+
<img src="thumb2.jpg" alt="">
|
|
136
|
+
</a>
|
|
137
|
+
|
|
138
|
+
<a href="img3.jpg" data-dc-lightbox data-gallery="gallery1">
|
|
139
|
+
<img src="thumb3.jpg" alt="">
|
|
140
|
+
</a>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Caption
|
|
146
|
+
|
|
147
|
+
Use `data-caption` to display text or HTML.
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<a
|
|
152
|
+
href="image.jpg"
|
|
153
|
+
data-dc-lightbox
|
|
154
|
+
data-caption="Lorem ipsum <p>Custom HTML caption</p>"
|
|
155
|
+
>
|
|
156
|
+
<img src="thumb.jpg" alt="">
|
|
157
|
+
</a>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Inline Content
|
|
163
|
+
|
|
164
|
+
You can open any HTML element inside the lightbox.
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<a href="#modal-content" data-dc-lightbox>
|
|
169
|
+
Open modal
|
|
170
|
+
</a>
|
|
171
|
+
|
|
172
|
+
<div id="modal-content" style="display:none">
|
|
173
|
+
<h2>Hello</h2>
|
|
174
|
+
<p>This content is displayed inside the lightbox.</p>
|
|
175
|
+
</div>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
You can also use `data-src`:
|
|
179
|
+
|
|
180
|
+
```html
|
|
181
|
+
<button data-dc-lightbox data-src="#modal-content">
|
|
182
|
+
Open modal
|
|
183
|
+
</button>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## Open via JavaScript
|
|
189
|
+
|
|
190
|
+
You can also open the lightbox programmatically.
|
|
191
|
+
|
|
192
|
+
```js
|
|
193
|
+
DivclassLightbox.show({
|
|
194
|
+
src: "https://picsum.photos/id/10/800/1000/",
|
|
195
|
+
type: "image",
|
|
196
|
+
caption: "Test image",
|
|
197
|
+
});
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
Open inline content:
|
|
201
|
+
|
|
202
|
+
```js
|
|
203
|
+
DivclassLightbox.show({
|
|
204
|
+
src: "#modal-1"
|
|
205
|
+
});
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
Example with additional options:
|
|
209
|
+
|
|
210
|
+
```js
|
|
211
|
+
DivclassLightbox.show({
|
|
212
|
+
src: "https://picsum.photos/id/10/800/1000/",
|
|
213
|
+
type: "image",
|
|
214
|
+
caption: "Auto closing example",
|
|
215
|
+
closeExisting: true,
|
|
216
|
+
autoClose: 2000
|
|
217
|
+
});
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## ⚙ Options
|
|
223
|
+
|
|
224
|
+
| Option | Type | Default | Description |
|
|
225
|
+
| ---------------------- | ---------------------------------------------------- | -------------- | ------------------------------------------------------ |
|
|
226
|
+
| icon | string | SVG | Close button icon |
|
|
227
|
+
| thumbnailsIcon | string | SVG | Thumbnails toggle icon |
|
|
228
|
+
| arrowIcon | string | SVG | Arrow navigation icon |
|
|
229
|
+
| showThumbnailsOnOpen | boolean | `true` | Show thumbnails when gallery opens |
|
|
230
|
+
| backdropClick | "close" \| false | `"close"` | Close modal when clicking backdrop (inline only) |
|
|
231
|
+
| closeExisting | boolean | `false` | Closes any currently open lightbox before opening a new one. |
|
|
232
|
+
| parentContainer | string | `"body"` | CSS selector of the container element where the modal will be appended. |
|
|
233
|
+
| hideScrollbar | boolean | `true` | Hide body scrollbar when lightbox is open |
|
|
234
|
+
| effect | "fadeIn" \| "fadeInDown" \| "fadeInUp" \| "zoomIn" | `"fadeInUp"` | Opening animation |
|
|
235
|
+
| zoomImageFromOrigin | boolean | `true` | Animate image from thumbnail position |
|
|
236
|
+
| animationDuration | number | `400` | Opening/closing animation duration (ms) |
|
|
237
|
+
| autoClose | false \| number | `false` | Automatically close lightbox after specified time (ms) |
|
|
238
|
+
| type | "inline" \| "image" | `"inline"` | Default content type |
|
|
239
|
+
| caption | string \| false | `false` | Caption text or HTML |
|
|
240
|
+
| slideChangeDuration | number | `280` | Slide transition duration (ms) |
|
|
241
|
+
| slideOffset | number | `0.1` | Distance offset between slides during drag/swipe navigation. Accepts values from 0 to 1 |
|
|
242
|
+
|
|
243
|
+
---
|
|
244
|
+
|
|
245
|
+
## HTML Data Attributes
|
|
246
|
+
|
|
247
|
+
<table>
|
|
248
|
+
<thead>
|
|
249
|
+
<tr>
|
|
250
|
+
<th>Attribute</th>
|
|
251
|
+
<th>Description</th>
|
|
252
|
+
</tr>
|
|
253
|
+
</thead>
|
|
254
|
+
<tbody>
|
|
255
|
+
<tr>
|
|
256
|
+
<td><code class="text-nowrap">data-src</code></td>
|
|
257
|
+
<td>
|
|
258
|
+
Alternative source if the element is not a link with <code>href</code>.
|
|
259
|
+
Can point to an inline element (<code>#modal</code>) or an image URL.
|
|
260
|
+
</td>
|
|
261
|
+
</tr>
|
|
262
|
+
<tr>
|
|
263
|
+
<td><code class="text-nowrap">data-close</code></td>
|
|
264
|
+
<td>
|
|
265
|
+
Closes the lightbox when the element is clicked. Useful for custom buttons.
|
|
266
|
+
Can also be <code>data-close="close-all"</code> to close all previously opened lightboxes.
|
|
267
|
+
</td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td><code class="text-nowrap">data-type</code></td>
|
|
271
|
+
<td>
|
|
272
|
+
Content type: <code>"image"</code> or <code>"inline"</code>.
|
|
273
|
+
Required if the <code>href</code> for an image has no extension.
|
|
274
|
+
</td>
|
|
275
|
+
</tr>
|
|
276
|
+
<tr>
|
|
277
|
+
<td><code class="text-nowrap">data-caption</code></td>
|
|
278
|
+
<td>
|
|
279
|
+
Caption for the image. Can include HTML tags.
|
|
280
|
+
</td>
|
|
281
|
+
</tr>
|
|
282
|
+
<tr>
|
|
283
|
+
<td><code class="text-nowrap">data-gallery</code></td>
|
|
284
|
+
<td>
|
|
285
|
+
Groups elements into a gallery by name <code class="text-nowrap">data-gallery="galleryName"</code>, enabling navigation between items and animated thumbnails.
|
|
286
|
+
</td>
|
|
287
|
+
</tr>
|
|
288
|
+
</tbody>
|
|
289
|
+
</table>
|
|
290
|
+
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
## 🎯 Events
|
|
294
|
+
|
|
295
|
+
Divclass Lightbox provides lifecycle hooks that allow you to interact with the modal during different stages.
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
```js
|
|
299
|
+
const lightbox = new DivclassLightbox('[data-dc-lightbox]');
|
|
300
|
+
|
|
301
|
+
lightbox.on("layoutReady", ({ modalRef }) => {
|
|
302
|
+
const heading = modalRef.querySelector("h2");
|
|
303
|
+
|
|
304
|
+
if (heading) {
|
|
305
|
+
heading.innerHTML = "New Text";
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
## Available Events
|
|
311
|
+
|
|
312
|
+
| Event | Description |
|
|
313
|
+
| ------------------- | ---------------------------------------------- |
|
|
314
|
+
| `beforeLayoutOpen` | Fired before the modal layout is prepared |
|
|
315
|
+
| `layoutReady` | Fired when the layout is inserted into the DOM |
|
|
316
|
+
| `layoutOpened` | Fired when the modal becomes visible |
|
|
317
|
+
| `beforeLayoutClose` | Fired before the modal starts closing |
|
|
318
|
+
| `layoutClosed` | Fired after the modal is fully closed |
|
|
319
|
+
|
|
320
|
+
---
|
|
321
|
+
|
|
322
|
+
## 🌐 Global Methods
|
|
323
|
+
|
|
324
|
+
### `DivclassLightbox.show(options)`
|
|
325
|
+
|
|
326
|
+
Open a lightbox programmatically.
|
|
327
|
+
|
|
328
|
+
### `DivclassLightbox.closeAll()`
|
|
329
|
+
|
|
330
|
+
Close all currently opened lightboxes.
|
|
331
|
+
|
|
332
|
+
### `DivclassLightbox.destroyAll()`
|
|
333
|
+
|
|
334
|
+
Destroy all initialized lightbox instances and remove event listeners.
|
|
335
|
+
|
|
336
|
+
---
|
|
337
|
+
|
|
338
|
+
## Why Divclass Lightbox?
|
|
339
|
+
|
|
340
|
+
Divclass Lightbox focuses on **performance and simplicity**.
|
|
341
|
+
|
|
342
|
+
Unlike many heavy lightbox libraries, it keeps the DOM minimal using **virtual slides**, supports **touch gestures**, and works with **zero dependencies**.
|
|
343
|
+
|
|
344
|
+
---
|
|
345
|
+
|
|
346
|
+
## 🌐 Browser Support
|
|
347
|
+
|
|
348
|
+
* Chrome
|
|
349
|
+
* Firefox
|
|
350
|
+
* Edge
|
|
351
|
+
* Safari
|
|
352
|
+
* Opera
|
|
353
|
+
|
|
354
|
+
Touch devices fully supported (mobile & tablet).
|
|
355
|
+
|
|
356
|
+
---
|
|
357
|
+
|
|
358
|
+
## 📄 License
|
|
359
|
+
|
|
360
|
+
MIT © Taras Bilinskyi
|
|
361
|
+
|
|
@@ -0,0 +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}}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @divclass/lightbox v1.0.2 | March 13th 2026
|
|
3
|
+
* Source: https://github.com/divclass-org/lightbox.git
|
|
4
|
+
* Homepage: https://lightbox.divclass.org/
|
|
5
|
+
* (c) 2026 Taras Bilinskyi | Released under the MIT License
|
|
6
|
+
*/
|
|
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};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @divclass/lightbox v1.0.2 | March 13th 2026
|
|
3
|
+
* Source: https://github.com/divclass-org/lightbox.git
|
|
4
|
+
* Homepage: https://lightbox.divclass.org/
|
|
5
|
+
* (c) 2026 Taras Bilinskyi | Released under the MIT License
|
|
6
|
+
*/
|
|
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});
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@divclass/lightbox",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Divclass Lightbox — modern, lightweight lightbox for images and inline content. Only 32 KB (≈11 KB gzipped). Touch-friendly, cross-browser, swipe & drag gestures, virtual slides, inline HTML, zero dependency.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"lightbox",
|
|
7
|
+
"javascript lightbox",
|
|
8
|
+
"lightbox gallery",
|
|
9
|
+
"image lightbox",
|
|
10
|
+
"modal",
|
|
11
|
+
"gallery",
|
|
12
|
+
"image gallery",
|
|
13
|
+
"image viewer",
|
|
14
|
+
"touch gallery",
|
|
15
|
+
"swipe gallery",
|
|
16
|
+
"inline modal",
|
|
17
|
+
"responsive gallery",
|
|
18
|
+
"vanilla javascript",
|
|
19
|
+
"zero dependency",
|
|
20
|
+
"virtual slides",
|
|
21
|
+
"zoom animation"
|
|
22
|
+
],
|
|
23
|
+
"homepage": "https://lightbox.divclass.org",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/divclass-org/lightbox.git"
|
|
27
|
+
},
|
|
28
|
+
"author": "Taras Bilinskyi",
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"CHANGELOG.md",
|
|
33
|
+
"LICENSE",
|
|
34
|
+
"README.md"
|
|
35
|
+
],
|
|
36
|
+
"type": "module",
|
|
37
|
+
"main": "./dist/divclass-lightbox.umd.js",
|
|
38
|
+
"module": "./dist/divclass-lightbox.esm.js",
|
|
39
|
+
"style": "./dist/divclass-lightbox.css",
|
|
40
|
+
"exports": {
|
|
41
|
+
".": {
|
|
42
|
+
"import": "./dist/divclass-lightbox.esm.js",
|
|
43
|
+
"require": "./dist/divclass-lightbox.umd.js",
|
|
44
|
+
"default": "./dist/divclass-lightbox.esm.js"
|
|
45
|
+
},
|
|
46
|
+
"./style.css": "./dist/divclass-lightbox.css"
|
|
47
|
+
}
|
|
48
|
+
}
|