https://www.jacksonville.gov/Scripts/gallery.js

1
2class Gallery {
3    #gallery;
4    #currentSlide;
5    #figures;
6
7    constructor(gallery) {
8        this.#gallery = gallery;
9        this.#currentSlide = 0;
10
11        // Setup if 0 or 1 items
12        this.#figures = this.#gallery.querySelectorAll('.c-gallery__figure');
13        if (this.#figures.length == 0) this.#gallery.style.display = 'none';
14        if (this.#figures.length == 1) {
15            this.#gallery.querySelector('.c-gallery__prev-btn').style.display = 'none';
16            this.#gallery.querySelector('.c-gallery__next-btn').style.display = 'none';
17        }
18
19        // Setup current
20        this.#figures.forEach(el => {
21            el.classList.remove('c-gallery__figure--current');
22        });
23        this.#figures[this.#currentSlide].classList.add('c-gallery__figure--current');
24
25        this.#gallery.addEventListener('nextSlide', _ => this.nextSlide());
26        this.#gallery.addEventListener('prevSlide', _ => this.prevSlide());
27        this.#gallery.addEventListener('changeSlide', (e) => this.handleChangeSlide(e.detail.num, e.detail?.dir));
28        this.#gallery.querySelector('.c-gallery__prev-btn')?.addEventListener("click", _ => this.prevSlide());
29        this.#gallery.querySelector('.c-gallery__next-btn')?.addEventListener("click", _ => this.nextSlide());
30    }
31
32    #clearAnimations = () => {
33        this.#gallery.querySelectorAll('.c-gallery__figure').forEach(el => {
34            el.classList.remove(
35                'c-gallery__figure--move-in-left',
36                'c-gallery__figure--move-in-right',
37                'c-gallery__figure--move-out-left',
38                'c-gallery__figure--move-out-right',
39            )
40        });
41    }
42
43    handleChangeSlide = (newSlide, direction = null) => { // direction is where we are moving the new slide in from
44        if (newSlide === this.#currentSlide) return;
45        direction ??= (newSlide < this.#currentSlide ? 'right' : 'left'); // 'right' or 'left'
46        this.#clearAnimations();
47        const curr = this.#figures[this.#currentSlide];
48        curr.classList.remove('c-gallery__figure--current');
49        const newCurr = this.#figures[newSlide];
50
51        curr.classList.add(`c-gallery__figure--move-out-${direction}`); // Move out to, move in from
52        newCurr.classList.add(`c-gallery__figure--move-in-${direction}`, 'c-gallery__figure--current');
53        const prevNum = this.#currentSlide;
54        this.#currentSlide = newSlide;
55        this.#gallery.dispatchEvent(new CustomEvent('changedSlide', {
56            detail: {
57                prevNum,
58                num: newSlide,
59                dir: direction,
60            }
61        }));
62    }
63
64    nextSlide = () => this.handleChangeSlide(
65        this.#currentSlide === this.#figures.length-1 ? 0 : this.#currentSlide + 1,
66        'left'
67    );
68    prevSlide = () => this.handleChangeSlide(
69        this.#currentSlide === 0 ? this.#figures.length-1 : this.#currentSlide - 1,
70        'right'
71    );
72}
73
74const createBtnHandler = (buttons, galleryEl) => {
75    buttons.forEach((el, i) => {
76        el.addEventListener('click', () => galleryEl.dispatchEvent(new CustomEvent('changeSlide', {
77            detail: {
78                num: i,
79            }
80        })));
81    });
82
83    buttons[0].classList.add('gallery__loc-btn--active');
84    galleryEl.addEventListener('changedSlide', (event) => {
85        buttons[event.detail.prevNum].classList.remove('gallery__loc-btn--active');
86        buttons[event.detail.num].classList.add('gallery__loc-btn--active');
87    });
88};
89
90const syncGalleries = (g1, g2) => {
91    g1.addEventListener('changedSlide', (e) => 
92        g2.dispatchEvent(new CustomEvent('changeSlide', { detail: e.detail })));
93    g2.addEventListener('changedSlide', (e) => 
94        g1.dispatchEvent(new CustomEvent('changeSlide', { detail: e.detail })));
95};
96
97onReady(_ => {
98    document.querySelectorAll('.c-gallery').forEach(el => {
99        el.gallery = new Gallery(el);
100    })
101});