https://www.pm.gc.ca/themes/pm_theme/js/pmmobile.js?tluucm

1(function ($, Drupal, drupalSettings) {
2  Drupal.behaviors.pmmobile = {
3    attach: function (context, settings) {
4      PMMobile.init();
5      PMSite.init();
6    }
7  };
8})(jQuery, Drupal, drupalSettings);
9
10var PMMobile = function () {
11  var state = {
12    initialized: false,   // Indicates that initialization is complete
13  };
14
15  function init() {
16    if (state.initialized) {
17      return;
18    }
19
20    $('#navbar-collapse').on('hidden.bs.collpase', function () {
21      $('#navbar-collapse').css('transition', '1s height');
22    });
23
24    /*** This section is added for mobile search tooltip when input has focus ****/
25    $('#mobile-search-form input.form-search.form-control').tooltip({
26      placement: "top",
27      trigger: "focus"
28    });
29
30    $('.form-search.form-control').keyup(function (event) {
31      if (event.keyCode == 27) {
32        // console.log('escape on input search');
33        hideSearch();
34        $('.mobile-search-button').focus();
35      }
36    });
37
38    // set the mobile menu region overlaps the content
39    $('.navbar-toggle').click(function () {
40      //adjustMenuMobileHeight();
41    });
42
43    $('.navbar-toggle').keyup(function (event) {
44      if (event.keyCode == 27) {
45         if ($('#navbar-collapse').hasClass('in')) {
46           $('#navbar-collapse').removeClass('in');
47           $('#navbar-collapse').attr('aria-expanded', 'false');
48         }
49      }
50    });
51
52    // navigating inside the collapsible menu when the hamburger menu receives the focus #453
53    $('.navbar-toggle').keydown(function (event) {
54      var key = event.which || event.keyCode;
55      if (key == 9) {
56        if ($('#navbar-collapse').hasClass('in')) {
57          event.stopPropagation();
58            event.preventDefault();
59        }
60        $('.menu--main.nav.navbar-nav li.first button, .menu--main.nav.navbar-nav li.first a').focus();
61      }
62    });
63
64    // improvment for #453(tab back up to the "Prime Minister of Canada" from the last link in the mobile menu "find Out More")
65    $('.menu--main.nav.navbar-nav > li.last a').keydown(function (event) {
66      var key = event.which || event.keyCode;
67      if (!event.shiftKey && key == 9) {
68        event.stopPropagation();
69        event.preventDefault();
70        $('.collapse-inner.row .mobile-branding a').focus();
71        // closing the mobile menu to avoid tab looping
72        if ($('#navbar-collapse').hasClass('in')) {
73          $('#navbar-collapse').removeClass('in');
74          $('#navbar-collapse').attr('aria-expanded', 'false');
75        }
76      }
77    });
78
79    $('#navbar ul.menu.menu--main.nav.navbar-nav li a, #navbar ul.menu.menu--main.nav.navbar-nav li.expanded.dropdown span.navbar-text').keyup(function (event) {
80      if (event.keyCode == 27) {
81        if ($('#navbar-collapse').hasClass('in')) {
82          $('#navbar-collapse').removeClass('in');
83          $('#navbar-collapse').attr('aria-expanded', 'false');
84          $('.navbar-toggle').focus();
85        }
86      }
87    });
88
89    $('#newstype-selector-dropdown, #photos-videos-selector-dropdown, #cabinet-secretaries-selector-dropdown').on('show.bs.dropdown', function () {
90      if ($(this).find('ul.dropdown').is(':hidden')) {
91        $('#newstype-selector-dropdown ul.dropdown, #photos-videos-selector-dropdown ul.dropdown, #cabinet-secretaries-selector-dropdown ul.dropdown').show();
92      }
93      closeMenu();
94    });
95
96    $('#newstype-selector-dropdown, #photos-videos-selector-dropdown, #cabinet-secretaries-selector-dropdown').on('hidden.bs.dropdown', function () {
97      if ($(this).find('ul.dropdown').is(':visible')) {
98        $('#newstype-selector-dropdown ul.dropdown, #photos-videos-selector-dropdown ul.dropdown, #cabinet-secretaries-selector-dropdown ul.dropdown').hide();
99      }
100    });
101
102    $('#newstype-selector-dropdown, #photos-videos-selector-dropdown, #cabinet-secretaries-selector-dropdown').each(function () {
103      $(this).keydown(function (e) {
104        var key = e.which;
105        if (key == 13) {
106          if ($(this).find('ul.dropdown').is(':visible')) {
107                $('#newstype-selector-dropdown ul.dropdown, #photos-videos-selector-dropdown ul.dropdown, #cabinet-secretaries-selector-dropdown ul.dropdown').hide();
108          }
109          else {
110            closeMenu();
111            $('#newstype-selector-dropdown ul.dropdown, #photos-videos-selector-dropdown ul.dropdown, #cabinet-secretaries-selector-dropdown ul.dropdown').show();
112          }
113        }
114      });
115    });
116
117    /***** WCAG Fix 309: Fix unexpected focus order behaviour****/
118    /* $('.canada-logo-wrapper').keydown(function (ev) {
119      var kc = ev.which || ev.keyCode;
120      if (kc === 9) {
121        // at the end of the page, put the focus on the skip-link at the top
122        $('.skip-link').focus();
123      }
124    }); */
125
126    $(window).resize(function () {
127      if ($(this).width() < 768) {
128        PMSite.resetFocusOpenedMenu();
129        if ($('#navbar-collapse').hasClass('in')) {
130          //adjustMenuMobileHeight();
131        }
132      }
133    });
134
135    state.initialized = true;
136  }
137
138  function hideSearch() {
139    $('#mobile-search-form').addClass('hidden').hide();
140  }
141
142  function closeMenu() {
143    $('#navbar-collapse').css('transition', 'none');
144    if ($('#navbar-collapse').hasClass('in')) {
145      // Should we do something?
146    }
147    $('#mobile-search-form').hide().addClass('hidden');
148  }
149
150  /**
151   * When the mobile menu is opened, if the currently active item may require the parent item to be expanded.
152   */
153  function menuFocus() {
154    var href = window.location.pathname;
155
156    // We only want to include the hash only if there's more than just the hashtag
157    /*if (window.location.hash && window.location.hash != '#') {
158      href = href + window.location.hash;
159    }*/
160
161    if (href == '/en' || href == '/en/') { // Equivalent URL so we can get the menu item to highlight properly
162      href = '/en/news';
163    }
164    else if (href == '/fr' || href == '/fr/') { // Equivalent URL so we can get the menu item to highlight properly
165      href = '/fr/nouvelles';
166    }
167
168    // EN mobile menu
169    $('#block-mainnavigation .menu.nav > li').each(function () {
170      var menu_item = this;
171      $(this).find('.dropdown-menu a').each(function () {
172        if ($(this).attr('href') == href) {
173          $(this).addClass('active');
174          setTimeout(function () {
175            $(menu_item).addClass('open');
176          }, 100);
177        }
178        else {
179          $(this).removeClass('active');
180        }
181      });
182    });
183
184    // FR mobile menu
185    $('#block-mobilemenufr .menu.nav > li').each(function () {
186      var menu_item = this;
187      $(this).find('.dropdown-menu a').each(function () {
188        if ($(this).attr('href') == href) {
189          $(this).addClass('active');
190          setTimeout(function () {
191            $(menu_item).addClass('open');
192          }, 100);
193        }
194        else {
195          $(this).removeClass('active');
196        }
197      });
198    });
199
200    //setMenuMaxHeight();
201
202  }
203
204  /*
205  * This function ensures bottom of mobile menu will not go below bottom of screen
206  * called during menuOpen, screen resize, and text-size-detector (for WCAG 1.4.10.1 textZOOM)
207  */
208  function setMenuMaxHeight() {
209    var menuBarHeight = $('.navbar-header').outerHeight();
210    var screenHeight = $(window).outerHeight();
211    var menuMaxHeight = screenHeight - menuBarHeight;
212    $('#navbar-collapse').css('max-height', menuMaxHeight + 'px');
213  }
214
215  function adjustMenuMobileHeight() {
216    // var viewport_height = viewport().height;
217    // var footer_cont_height = $('.footer-container').height();
218    // var footer_height = $('footer').height();
219    var win_height = $(window).height();
220    var main_header_height = $('.main-header').height();
221    var footer_outer_height = $('.footer-outer').height();
222
223    if ($('body').hasClass('user-logged-in')){
224      adminBarHeight = 39;
225      adminBarLiningHeight = 39;
226    }
227    else {
228      adminBarHeight = 0;
229      adminBarLiningHeight = 0;
230    }
231    // $('.navbar-collapse ul.menu.menu--main.nav.navbar-nav').css("min-height",viewport_height-(footer_height+main_header_height+adminBarHeight+adminBarLiningHeight)+"px");
232    var subst_height = adminBarHeight + adminBarLiningHeight + main_header_height + footer_outer_height;
233    //$(".navbar-collapse ul.menu.menu--main.nav.navbar-nav").height(win_height - subst_height);
234    //$(".navbar-collapse ul.menu.menu--main.nav.navbar-nav").css("overflow", "auto");
235  }
236

237  function addNewsAccordionMenu() {
238    var accordNewsMenu = document.createElement("button");
239    $(accordNewsMenu).attr({
240      'id': 'newsMenuAcc',
241      'ari-controls': 'collapseNews',
242      'class': 'btn btn-link collapsed',
243      'aria-expanded': 'false',
244      'data-target': '#collapseNews',
245      'data-toggle': 'collapse'
246    });
247
248    newsMenuTitle = ($('html').attr('lang') == 'en') ? 'News Types': 'Types de nouvelles';
249    accordNewsMenu.innerHTML = "<span class='newsMenu'>" +  newsMenuTitle +  "</span>";
250
251    var accordNewsWrap = document.createElement("div");
252    $(accordNewsWrap).attr({
253      'id': 'collapseNews',
254      'aria-labelledby': 'newsHeading',
255      'class': 'collapse',
256      'aria-expanded': 'false',
257      'data-bs-parent': '#newsMenuAcc',
258    });
259
260    var originNewsMenu = $('#block-newstypesmenu ul.menu--news-types-menu.nav');
261
262    if (typeof(originNewsMenu)  != 'undefined' && originNewsMenu != null) {
263      originNewsMenu.before(accordNewsMenu);
264      originNewsMenu.wrapAll(accordNewsWrap);
265    }
266  }
267
268  function removeNewsAccordionMenu() {
269    if ($('#newsMenuAcc')) {
270      $('#newsMenuAcc').remove();
271    }
272
273    var wrapperNode  = document.querySelector('div#collapseNews');
274    if (wrapperNode != null) {
275      wrapperNode.replaceWith(...wrapperNode.childNodes);
276    }
277  }
278
279  return {
280    init: init,
281    setMenuMaxHeight: setMenuMaxHeight,
282    adjustMenuMobileHeight: adjustMenuMobileHeight,
283    addNewsAccordionMenu: addNewsAccordionMenu,
284    removeNewsAccordionMenu: removeNewsAccordionMenu,
285  }
286}();