https://www.venustreatments.com/src/js/accessibility.js

1$(document).ready(function () {
2  updateViewPortMeta();
3  hideFixedMenu();
4  buttonLocationDropdown();
5  accessibleRegionDropdown();
6  replaceWith();
7  updateMegaMenu();
8  updateOtherMenus();
9
10  function updateViewPortMeta() {
11    var mvp = document.getElementsByName('viewport')[0];
12    if (mvp) {
13      mvp.setAttribute(
14        'content',
15        'initial-scale=1, minimum-scale=1, maximum-scale=5, viewport-fit=cover'
16      );
17    }
18  }
19
20  function replaceWith() {
21    $.extend({
22      replaceTag: function (currentElem, newTagObj, keepProps) {
23        var $currentElem = $(currentElem);
24        var i,
25          $newTag = $(newTagObj).clone();
26        if (keepProps) {
27          newTag = $newTag[0];
28          newTag.className = currentElem.className;
29          $.extend(newTag.classList, currentElem.classList);
30          $.extend(newTag.attributes, currentElem.attributes);
31        }
32        $currentElem.wrapAll($newTag);
33        $currentElem.contents().unwrap();
34        // return node; (Error spotted by Frank van Luijn)
35        return this; // Suggested by ColeLawrence
36      },
37    });
38    $.fn.extend({
39      replaceTag: function (newTagObj, keepProps) {
40        // "return" suggested by ColeLawrence
41        return this.each(function () {
42          jQuery.replaceTag(this, newTagObj, keepProps);
43        });
44      },
45    });
46  }
47
48  function updateMegaMenu() {
49    var menuLang = $('body').attr('data-location');
50    if (
51      menuLang === 'en-gl' ||
52      menuLang === 'en-ca' ||
53      menuLang === 'en-us' ||
54      menuLang === 'en-uk' ||
55      menuLang === 'en-ie' ||
56      menuLang === 'en-au'
57    ) {
58      // Append close button.
59      $('.treatments-menu').append(
60        '<button id="treatmentsClose" class="sr-only">Close Menu</button>'
61      );
62      $(
63        ".logoSlice .nav .dropdown > a[href$='/" +
64          menuLang +
65          "/treatments.htm']"
66      ).replaceTag(
67        $(
68          "<button aria-label='Opens the Treatments Menu' id='treatmentsMenu' class='megamenu-button'>"
69        )
70      );
71      $('.megamenu-button').on('click', function (event) {
72        if (event.type === 'click') {
73          if ($('#selectLang').parent().hasClass('open')) {
74            $('#selectLang').parent().removeClass('open');
75          }
76          if ($('.dropdown-menu').hasClass('show-menu')) {
77            $('.dropdown-menu').removeClass('show-menu');
78          }
79          if ($(this).next().hasClass('show-menu')) {
80            $(this).next().toggleClass('show-menu');
81          } else {
82            $('.megamenu-wrapper').removeClass('show-menu');
83            $(this).next().find('.megaMenu-nav-wrapper').removeAttr('hidden');
84            $(this).next().toggleClass('show-menu');
85          }
86        }
87      });
88
89      // Focus trap Treatments menu
90      var treatmentsDialog = document.getElementById('treatments');
91      var closeTreatmentsButton = document.getElementById('treatmentsClose');
92      var openTreatmentsButton = document.getElementById('treatmentsMenu');
93      var treatmentsDisabledHandle;
94
95      function openTreatmentsDialog(e) {
96        if (e.keyCode === 13) {
97          $(this).next().toggleClass('show-menu');
98          treatmentsDisabledHandle = ally.maintain.disabled({
99            filter: [treatmentsDialog, closeTreatmentsButton],
100          });
101          treatmentsDialog.hidden = false;
102        }
103      }
104
105      function closeTreatmentsDialog(e) {
106        if (e.keyCode === 13) {
107          $(this)
108            .parents('.treatmentsmenu-wrapper')
109            .parent()
110            .toggleClass('show-menu');
111          treatmentsDisabledHandle.disengage();
112          treatmentsDialog.hidden = true;
113        }
114      }
115
116	  if (openTreatmentsButton) {
117		openTreatmentsButton.addEventListener(
118			'keydown',
119			openTreatmentsDialog,
120			false
121		);
122	}
123	if (closeTreatmentsButton) {
124		closeTreatmentsButton.addEventListener(
125			'keydown',
126			closeTreatmentsDialog,
127			false
128		);
129	  }
130
131      // Outside click.
132      $('.megamenu-button').click(function (event) {
133        event.stopPropagation();
134
135        $(document).one('click', function (e) {
136          if (!$(e.target).is('.megamenu-wrapper')) {
137            $('.megamenu-wrapper').removeClass('show-menu');
138          }
139        });
140      });
141    }
142  }
143
144  //Update Product menu

145  function updateOtherMenus() {
146    var menuLang = $('body').attr('data-location');
147    if (
148      menuLang === 'en-gl' ||
149      menuLang === 'en-ca' ||
150      menuLang === 'en-us' ||
151      menuLang === 'en-uk' ||
152      menuLang === 'en-ie' ||
153      menuLang === 'en-au'
154    ) {
155      if ($('#treatments').length > 0) {
156        $(
157          ".logoSlice .nav .dropdown > a[href$='/" +
158            menuLang +
159            "/products.htm']"
160        ).replaceTag(
161          $(
162            "<button aria-label='Opens the Products Menu' id='productsMenu' class='dropdown-button'>"
163          )
164        );
165        $('.dropdown-button')
166          .next()
167          .append('<button class="sr-only dropdown-close">Close Menu</button>');
168        $('.dropdown-button').on('click', function (event) {
169          if (event.type === 'click') {
170            if ($('#selectLang').parent().hasClass('open')) {
171              $('#selectLang').parent().removeClass('open');
172            }
173            if ($('.megamenu-wrapper').hasClass('show-menu')) {
174              $('.megamenu-wrapper').removeClass('show-menu');
175            }
176            if ($(this).next().hasClass('show-menu')) {
177              $(this).next().toggleClass('show-menu');
178            } else {
179              $('.dropdown-menu').removeClass('show-menu');
180              $(this).next().find('.dropdown-menu').removeAttr('hidden');
181              $(this).next().toggleClass('show-menu');
182            }
183          }
184        });
185
186        var dropdownDialogs = $('.dropdown-button').next();
187        var dropdownDisabledHandles;
188
189        function openDropdownDialog(button) {
190          $(button).next().toggleClass('show-menu');
191          dropdownDisabledHandles = ally.maintain.disabled({
192            filter: dropdownDialogs,
193          });
194          dropdownDialogs.hidden = false;
195        }
196
197        function closeDropdownDialog(button) {
198          $(button).parent('.dropdown-menu').toggleClass('show-menu');
199          dropdownDisabledHandles.disengage();
200          dropdownDialogs.hidden = true;
201        }
202
203        var dropdownButtons = document.querySelectorAll('.dropdown-button');
204        for (var i = 0; i < dropdownButtons.length; i++) {
205          var self = dropdownButtons[i];
206
207          self.addEventListener(
208            'keydown',
209            function (event) {
210              if (event.keyCode === 13) {
211                event.preventDefault();
212                openDropdownDialog(this);
213              }
214            },
215            false
216          );
217        }
218
219        var dropdownClose = document.querySelectorAll('.dropdown-close');
220        for (var i = 0; i < dropdownClose.length; i++) {
221          var self = dropdownClose[i];
222
223          self.addEventListener(
224            'keydown',
225            function (event) {
226              if (event.keyCode === 13) {
227                event.preventDefault();
228                closeDropdownDialog(this);
229              }
230            },
231            false
232          );
233        }
234        // Outside click.
235        $('.dropdown-button').click(function (event) {
236          event.stopPropagation();
237
238          $(document).one('click', function (e) {
239            if (!$(e.target).is('.dropdown-menu')) {
240              $('.dropdown-menu').removeClass('show-menu');
241            }
242          });
243        });
244      }
245    }
246    // FR CA
247    if (menuLang === 'fr-ca') {
248      if ($('.fr-menu').length > 0) {
249        $(
250          ".logoSlice .nav .dropdown > a[href$='/" +
251            menuLang +
252            "/products.htm']"
253        ).replaceTag(
254          $(
255            "<button aria-label='Produits Menu' id='productsMenu' class='dropdown-button'>"
256          )
257        );
258        $(
259          ".logoSlice .nav .dropdown > a[href$='/" +
260            menuLang +
261            "/treatments.htm']"
262        ).replaceTag(
263          $(
264            "<button aria-label='Traitements Menu' id='treatmentsMenu' class='dropdown-button'>"
265          )
266        );
267        $('.dropdown-button')
268          .next()
269          .append(
270            '<button class="sr-only dropdown-close">Fermer menu</button>'
271          );
272        $('.dropdown-button').on('click', function (event) {
273          if (event.type === 'click') {
274            if ($('#selectLang').parent().hasClass('open')) {
275              $('#selectLang').parent().removeClass('open');
276            }
277            if ($(this).next().hasClass('show-menu')) {
278              $(this).next().toggleClass('show-menu');
279            } else {
280              $('.dropdown-menu').removeClass('show-menu');
281              $(this).next().find('.dropdown-menu').removeAttr('hidden');
282              $(this).next().toggleClass('show-menu');
283            }
284          }
285        });
286
287        var dropdownDialogs = $('.dropdown-button').next();
288        var dropdownDisabledHandles;
289
290        function openDropdownDialog(button) {
291          $(button).next().toggleClass('show-menu');
292          dropdownDisabledHandles = ally.maintain.disabled({
293            filter: dropdownDialogs,
294          });
295          dropdownDialogs.hidden = false;

296        }
297
298        function closeDropdownDialog(button) {
299          $(button).parent('.dropdown-menu').toggleClass('show-menu');
300          dropdownDisabledHandles.disengage();
301          dropdownDialogs.hidden = true;
302        }
303
304        var dropdownButtons = document.querySelectorAll('.dropdown-button');
305        for (var i = 0; i < dropdownButtons.length; i++) {
306          var self = dropdownButtons[i];
307
308          self.addEventListener(
309            'keydown',
310            function (event) {
311              if (event.keyCode === 13) {
312                event.preventDefault();
313                openDropdownDialog(this);
314              }
315            },
316            false
317          );
318        }
319
320        var dropdownClose = document.querySelectorAll('.dropdown-close');
321        for (var i = 0; i < dropdownClose.length; i++) {
322          var self = dropdownClose[i];
323
324          self.addEventListener(
325            'keydown',
326            function (event) {
327              if (event.keyCode === 13) {
328                event.preventDefault();
329                closeDropdownDialog(this);
330              }
331            },
332            false
333          );
334        }
335        // Outside click.
336        $('.dropdown-button').click(function (event) {
337          event.stopPropagation();
338
339          $(document).one('click', function (e) {
340            if (!$(e.target).is('.dropdown-menu')) {
341              $('.dropdown-menu').removeClass('show-menu');
342            }
343          });
344        });
345      }
346    }
347  }
348
349  // Region Dropdown Accessibility
350  function accessibleRegionDropdown() {
351    var menuLang = $('body').attr('data-location');
352    if (menuLang === 'en-gl' || menuLang === 'en-ca' || menuLang === 'en-us') {
353      if ($('#selectLang').length > 0 && $('#closeSelectLang').length > 0) {
354        var dialog = document.getElementById('regionlist');
355        var closeButton = document.getElementById('closeSelectLang');
356        var openButton = document.getElementById('selectLang');
357        var disabledHandle;
358
359        function openDialog(e) {
360          if (e.keyCode === 13) {
361            $('button.selectLang').parent().addClass('open');
362            disabledHandle = ally.maintain.disabled({
363              filter: [dialog, closeButton],
364            });
365            dialog.hidden = false;
366          }
367        }
368
369        function closeDialog(e) {
370          if (e.keyCode === 13) {
371            $('button.selectLang').parent().removeClass('open');
372            disabledHandle.disengage();
373            dialog.hidden = true;
374          }
375        }
376
377        openButton.addEventListener('keydown', openDialog, false);
378        closeButton.addEventListener('keydown', closeDialog, false);
379      }
380    }
381  }
382
383  function hideFixedMenu() {
384    $('#fixedMenu a').attr('tabindex', '-1');
385    $('.scrolling-menu').attr('aria-hidden', 'true');
386  }
387
388  // Location function modified for accessible menu
389  var location_debug = false;
390
391  function getFlag(path) {
392    var flag = path;
393    if (flag.indexOf('-') > -1) {
394      flag = flag.substring(4, 6);
395    }
396    return flag;
397  }
398
399  function buttonLocationDropdown() {
400    var slObj = $('button.selectLang');
401
402    slObj.on('keydown click', function (event) {
403      if (
404        (event.type === 'keydown' && event.keyCode === 13) ||
405        event.type === 'click'
406      ) {
407        if (!$('#regionlist .nearest').attr('data-status')) {
408          $('#regionlist .nearest').attr('data-status', 1);
409
410          var language =
411            window.navigator.userLanguage || window.navigator.language;
412
413          $.ajax({
414            cache: false,
415            url: '/ajax_location.cfm',
416            data: {
417              action: 'nearest',
418              lang: language,
419              role_id: mylocation.role_id,
420            },
421            type: 'get',
422          })
423            .done(function (data) {
424              $('#regionlist .nearest')
425                .attr('data-status', 2)
426                .removeClass('loading');
427              var html = '<ul>';
428              if (data.status === 1) {
429                for (var i in data.locations) {
430                  var title = data.locations[i].title;
431                  if (data.locations[i].langtitle != '') {
432                    if (
433                      data.locations[i].title != data.locations[i].langtitle
434                    ) {
435                      title =
436                        data.locations[i].title +
437                        ' (' +
438                        data.locations[i].langtitle +
439                        ')';
440                    }
441                  }
442                  html +=
443                    "<li><a href='" +
444                    data.locations[i].path +
445                    "' title='" +
446                    data.locations[i].title +
447                    ' (' +
448                    data.locations[i].lang +
449                    ")' style='background-image: url(/img/flags/" +
450                    getFlag(data.locations[i].path) +
451                    ".png)'>" +
452                    title +
453                    '</a></li>';
454                }
455              } else {
456                html += '<!-- ' + data.message + ' -->';
457              }
458              html += '</ul>';

459              $('#regionlist .nearest').html(html);
460
461              curpath = '/' + $('body').attr('data-location') + '/';
462              $("#regionlist a[href='" + curpath + "']")
463                .parent()
464                .addClass('active');
465            })
466            .fail(function (jqXHR, textStatus, errorThrown) {
467              $('#regionlist .nearest')
468                .attr('data-status', 3)
469                .html(jqXHR.statusText)
470                .removeClass('loading');
471            });
472        }
473      }
474    });
475  }
476});