https://penetanguishene.ca/scripts/eSolutions/alert/alert.js

1(function ($j) {
2    // Banner alerts
3    let $jbannerAlerts = $j('.umb--alerts--banners');
4    if ($jbannerAlerts.length) {
5        $jbannerAlerts.detach().prependTo('header');
6
7        // Events
8
9        // Dismiss single banner
10        $jbannerAlerts.find('.umb--alert__close').click(function (event) {
11            event.preventDefault();
12            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
13                $j(this).parents('.umb--alert').hide();
14            } else {
15                $j(this).parents('.umb--alert').slideUp();
16            }
17            var bannerId = $j(this).parents('.umb--alert').attr('id');
18            $j.cookie(bannerId, 1, { path: "/" });
19        });
20    }
21
22    // Modal alerts
23    let $jmodalAlerts = $j('.umb--alerts--modals');
24    const $jdissmissAllButton = $jmodalAlerts.find('.umb--alerts__dismiss');
25    if ($jmodalAlerts.length) {
26
27        jQueryBridget('flickity', Flickity, $j);
28
29        // Init carousel
30        let $jalertsCarousel = $jmodalAlerts.find('.ghd--carousel'),
31            flktyOptions = $jalertsCarousel.data('flickity-options');
32
33        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
34            flktyOptions.friction = 1;
35            flktyOptions.selectedAttraction = 1;
36        }
37
38        $jalertsCarousel.flickity(flktyOptions);
39
40        let focusableEls = {}, firstFocusableEl = {}, lastFocusableEl = {}, $dissmissAll = {};
41
42        // define the active modal and trap the focus within
43        let $activeModal = $j('.ghd--carousel__cell.is-selected');
44        // Initialize focus trap
45        trapFocus($activeModal);
46
47        // Events
48        // On previous button click
49        $j('.flickity-button.previous').on('click', function (e) {
50            // define focusable
51            defineFocusable($activeModal);
52            focusableEls.each(function (key, value) {
53                $j(this).removeAttr('tabindex');
54            });
55            $activeModal = $j('.ghd--carousel__cell.is-selected');
56            trapFocus($activeModal);
57        });
58
59        $j('.flickity-button.next').on('click', function (e) {
60            // define focusable
61            defineFocusable($activeModal);
62            focusableEls.each(function (key, value) {
63                $j(this).removeAttr('tabindex');
64            });
65            $activeModal = $j('.ghd--carousel__cell.is-selected');
66            trapFocus($activeModal);
67        })
68
69
70        // Dismiss all alerts
71        $jdissmissAllButton.click(function () {
72
73            $j.cookie("seenAlertModal", 1, { path: "/" });
74
75            hideModalAlerts();
76
77        });
78
79        // Dismiss single alert
80        $jalertsCarousel.find('.bx--modal-close').click(function (event) {
81            event.preventDefault();
82
83            // define focusable
84            defineFocusable($activeModal);
85            focusableEls.each(function (key, value) {
86                $j(this).removeAttr('tabindex');
87            });
88
89            var flkty = $jalertsCarousel.data('flickity');
90
91            var alertId = flkty.selectedElement.firstElementChild.id;
92            $j.cookie(alertId, 1, { path: "/" });
93
94            $jalertsCarousel.flickity('remove', flkty.selectedElement);
95
96            $activeModal = $j('.ghd--carousel__cell.is-selected');
97            trapFocus($activeModal);
98
99            // No more alerts left, hide modal
100            if (!$jalertsCarousel.find('.ghd--carousel__cell').length) {
101                hideModalAlerts();
102            }
103        });
104
105        function hideModalAlerts() {
106            $jalertsCarousel.flickity('destroy');
107
108            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
109                $jmodalAlerts.remove();
110            } else {
111                $jmodalAlerts.fadeOut(function () {
112                    $jmodalAlerts.remove();
113                });
114            }
115        }
116
117        function hideBannerAlerts() {
118            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
119                $jbannerAlerts.remove();
120            } else {
121                $jbannerAlerts.slideUp(function () {
122                    $jbannerAlerts.remove();
123                });
124            }
125        }
126
127        function defineFocusable(element) {
128            focusableEls = element.find('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])');
129        };
130
131        function trapFocus(element) {
132            defineFocusable(element);
133            // Assign Dissmiss all alerts
134            $dissmissAll = $j('.umb--alerts__dismiss:not([disabled])').get(0);
135            // If DAA add to focusableEls
136            if ($dissmissAll) {

137                focusableEls = focusableEls.add($dissmissAll);
138            }
139            // Assign Previous button
140            $previousAlert = $jalertsCarousel.find('.flickity-button.previous:not([disabled])').get(0);
141            focusableEls = focusableEls.add($previousAlert);
142            // Assign Next button
143            $nextAlert = $jalertsCarousel.find('.flickity-button.next:not([disabled])').get(0);
144            focusableEls = focusableEls.add($nextAlert);
145            
146            // tab index
147            focusableEls.each(function (key, value) {
148                $j(this).attr('tabindex', key + 1)
149            });
150            firstFocusableEl = focusableEls.first();
151            lastFocusableEl = focusableEls.last();
152
153            // set focus on first input
154            firstFocusableEl.focus();
155
156            // redirect last tab to first input
157            lastFocusableEl.on('keydown', function (e) {
158                if ((e.which === 9 && !e.shiftKey)) {
159                    e.preventDefault();

160                    firstFocusableEl.focus();
161                }
162            });
163
164            // redirect first tab to last input
165            firstFocusableEl.on('keydown', function (e) {
166                if ((e.which === 9 && e.shiftKey)) {
167                    e.preventDefault();
168                    lastFocusableEl.focus();
169                }
170            });
171
172            // allow escape key to close alerts
173            element.on('keyup', function (e) {
174                if (e.keyCode === 27) {
175                    hideModalAlerts();
176                }
177            });
178
179        }
180    }
181
182})(jQuery);