https://arabic-calligraphy.ru/nassets/d40f6009/js/image-gallery.js?v=1765633901

1class ImageGallery
2{
3	#id;
4	#images;
5	#currentImageNumber;
6	#imageElement;
7	#captionElement;
8	#container;
9
10	constructor(mode, id, images, currentImageNumber) {
11		this.#id = id;
12
13		if (mode === 'edit') {
14			this.#initEditMode();
15			return;
16		}
17		this.#initPresentationViewMode(images, currentImageNumber);
18	}
19
20	#initEditMode() {
21		document.addEventListener('block.save.done', (event) => {
22			if (event.detail.editBlock.blockId === this.#id && event.detail.editBlock.opened) {
23				event.detail.editBlock.openBlock(event.detail.editBlock.blockId, event.detail.editBlock.place);
24			}
25		});
26	}
27
28	#initPresentationViewMode(images, currentImageNumber) {
29		this.#images = images;
30
31		if (this.#images.length === 0) {
32			return;
33		}
34
35		this.#container = document.getElementById('gallery-presentation-' + this.#id);
36		if (this.#container === null) {
37			return;
38		}
39
40		this.#imageElement = this.#container.querySelector('img.presentation-image');
41		if (this.#imageElement === null) {
42			return;
43		}
44
45		this.#currentImageNumber = this.#prepareCurrentNumber(currentImageNumber);
46
47		this.#captionElement = this.#container.querySelector('.presentation-image-caption');
48
49		this.setCurrentImage(this.#currentImageNumber);
50
51		this.#imageElement.addEventListener('load', () => {
52			setTimeout(() => {this.#imageElement.style.opacity = 1}, 300);
53		});
54
55		let prev = this.#container.querySelector('.presentation-prev');
56		let next = this.#container.querySelector('.presentation-next');
57
58		if (prev !== null) {
59			prev.addEventListener('click', () => {
60				this.setCurrentImage(this.#currentImageNumber - 1);
61			});
62		}
63
64		if (next !== null) {
65			next.addEventListener('click', () => {
66				this.setCurrentImage(this.#currentImageNumber + 1);
67			});
68		}
69	}
70
71	#prepareCurrentNumber(imageNumber) {
72		if (imageNumber >= this.#images.length) {
73			imageNumber = this.#images.length - 1;
74		}
75
76		if (imageNumber < 0 || this.#images[imageNumber] === undefined) {
77			imageNumber = 0;
78		}
79		return imageNumber;
80	}
81
82	setCurrentImage(imageNumber) {
83		let numberToSet = this.#prepareCurrentNumber(imageNumber);
84		if (numberToSet === this.#currentImageNumber) {
85			return;
86		}
87
88		this.#imageElement.style.transition = 'transition: opacity 0.3s,';
89		this.#imageElement.style.opacity = .3;
90
91		this.#currentImageNumber = numberToSet;
92		this.#imageElement.src = this.#images[numberToSet].src;
93
94		if (this.#captionElement !== null) {
95			this.#captionElement.innerHTML = this.#images[numberToSet].caption;
96		}
97	}
98}