https://www.rfca-yorkshire.org.uk/wp-content/themes/rfca/assets/js/gallery.js

1/**
2* Toggle Gallery
3*/
4var body            = document.querySelector('body');
5var toggleGallery   = document.querySelectorAll('.js-toggle-gallery');
6var toggleGalleryArray = Array.prototype.slice.call(toggleGallery);
7var closeGallery    = document.querySelector('.js-close-gallery');
8var galleryContainer = document.querySelector('.modal-gallery__container');
9var modalGallery = document.querySelector('.modal-gallery');
10
11// jquery selectors for slick use
12var gallery = $('.js-gallery');
13var navGallery = $('.modal-gallery__nav');
14
15
16toggleGalleryArray.forEach(function(galleryToggle) {
17    galleryToggle.addEventListener('click', function(e) {
18        body.classList.toggle('is-active-gallery');
19
20        /**
21        * Create new gallery instance for Gallery
22        */
23        gallery.slick({
24            arrows: true,
25            prevArrow: '<button class="modal-gallery__prev-slide"><span class="screen-reader-text">Previous slide</span></button>',
26            nextArrow: '<button class="modal-gallery__next-slide"><span class="screen-reader-text">Next slide</span></button>',
27            fade: true,
28            lazyLoad: 'progressive',
29            asNavFor: '.modal-gallery__nav',
30            adaptiveHeight: true,
31            centerMode: true,
32            responsive: [
33                {
34                    breakpoint: 768,
35                    settings: {
36                        arrows: false
37                    }
38                }
39              ]
40        });
41
42        navGallery.slick({
43            slidesToShow: 2,
44            slidesToScroll: 1,
45            prevArrow: '<button class="modal-gallery__prev-slide-nav"><span class="screen-reader-text">Previous slide</span></button>',
46            nextArrow: '<button class="modal-gallery__next-slide-nav"><span class="screen-reader-text">Next slide</span></button>',
47            asNavFor: '.js-gallery',
48            centerMode: true,
49            focusOnSelect: true,
50            variableWidth: true,
51            useTransform: false
52        });
53
54        document.querySelector(".modal-gallery__prev-slide").focus();
55        trapFocus(modalGallery);
56
57        if (galleryToggle.getAttribute("id")) {
58            var skipToSlide = galleryToggle.getAttribute("id");
59            gallery.slick('slickGoTo', skipToSlide-1, 1);
60        }
61
62        e.preventDefault();
63    });
64});
65
66/**
67* Close general click outside element
68*/
69if (closeGallery) {
70    closeGallery.addEventListener('click', function(e) {
71        body.classList.toggle('is-active-gallery');
72        gallery.slick('unslick');
73        navGallery.slick('unslick');
74        e.preventDefault();
75    })
76
77
78    galleryContainer.addEventListener('mouseenter', function(e) {
79        modalGallery.classList.remove('outside')
80    })
81
82    galleryContainer.addEventListener('mouseleave', function(e) {
83        modalGallery.classList.add('outside')
84    })
85
86    modalGallery.addEventListener('click', function(e) {
87        if (modalGallery.classList.contains('outside')) {
88            body.classList.toggle('is-active-gallery');
89            gallery.slick('unslick');
90            navGallery.slick('unslick');
91            e.preventDefault();
92        }
93    });
94}
95
96// Keep focus in modal when it is active
97
98function trapFocus(element) {
99    // select all focusabled elements inside the modal
100    var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
101    var firstFocusableEl = focusableEls[0];
102    var lastFocusableEl = focusableEls[focusableEls.length - 1];
103    var KEYCODE_TAB = 9;
104
105    element.addEventListener('keydown', function(e) {
106      var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);
107
108      if (!isTabPressed) {
109        return;
110      }
111
112      if ( e.shiftKey ) /* shift + tab */ {
113        if (document.activeElement === firstFocusableEl) {

114          lastFocusableEl.focus();
115            e.preventDefault();
116          }
117        } else /* tab */ {
118        if (document.activeElement === lastFocusableEl) {
119          firstFocusableEl.focus();
120            e.preventDefault();
121          }
122        }
123    });
124  }