https://desinformante.com.br/wp-content/plugins/hacklab-blocks/blo…/hl-slider.js?ver=1791048810

1document.addEventListener('DOMContentLoaded', function() {
2    let galleries = document.querySelectorAll('.wp-block-hacklab-flickr-album-gallery')
3
4    if (galleries.length >= 1) {
5
6        const SLIDERTIME = 350;
7
8        galleries.forEach(function(gallery) {
9            let buttonGrid = gallery.querySelector('[action=display-grid')
10            let galleryGrid = gallery.querySelector('.flickr-album-gallery-grid')
11            const allSlides = [...gallery.querySelectorAll('.hl-slide')]
12
13            buttonGrid.addEventListener('click', function() {
14                this.classList.toggle('slider-active')
15                galleryGrid.classList.toggle('slider-active')
16                allSlides[0].classList.add('active')
17            })
18
19            let clickable = true;
20            let active = null;
21            let newActive = null;
22
23            const backButton = gallery.querySelector('.hl-slider-back-btn');
24            const forwardButton = gallery.querySelector('.hl-slider-next-btn');
25
26            function initSlider() {
27                // Set the CSS transition on the slides to the value we specified in SLIDETIME above

28                allSlides.forEach(slide =>
29                    slide.setAttribute(
30                        'style',
31                        `transition: transform ${SLIDERTIME}ms ease;
32                                animation-duration: ${SLIDERTIME}ms`,
33                    ),
34                );
35            }
36
37            function changeSlide(forward) {
38                if (clickable) {
39                    clickable = false;
40                    active = gallery.querySelector('.active');
41                    const activeSlideIndex = allSlides.indexOf(active);
42            
43                    if (forward) {
44                        newActive = allSlides[(activeSlideIndex + 1) % allSlides.length];
45                        active.classList.add('slideOutLeft');
46                        newActive.classList.add('slideInRight', 'active');
47                    } else {
48                        newActive =
49                        allSlides[
50                            (activeSlideIndex - 1 + allSlides.length) % allSlides.length
51                        ];
52                        active.classList.add('slideOutRight');
53                        newActive.classList.add('slideInLeft', 'active');
54                    }
55                }
56            }
57

58            allSlides.forEach(slide => {
59                slide.addEventListener('transitionend', e => {
60                  // Check for the old active transition and if clickable is false
61                  // to not trigger it more than once
62                  if (slide === active && !clickable) {
63                    clickable = true;
64                    // Remove all CSS animation classes on old active
65                    active.className = 'hl-slide';
66                  }
67                });
68              });
69
70            //Event listeners
71            forwardButton.addEventListener('click', () => {
72                changeSlide(true);
73            });
74            backButton.addEventListener('click', () => {
75                changeSlide(false);
76            });
77
78            // Init the slider
79            initSlider();
80        })
81    }
82
83    // Fancybox
84    Fancybox.bind('[data-fancybox="gallery"]', {
85        Toolbar: false,
86    });
87})