https://www.quebec.ca/_assets/8b5470729627060287ec80151aeaf598/JavaScript/Src/components.js?1790696784

1$(document).ready(function() {
2  // Accessiblité du outline
3  window.addEventListener('keydown', changeState);
4  window.addEventListener('mousemove', changeState);
5
6  function changeState(e) {
7      const keyCode = e.keyCode;
8      if (!keyCode || keyCode === 9 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
9          if (document.documentElement.getAttribute('data-state') !== e.type) {
10              document.documentElement.setAttribute('data-state', e.type);
11          }
12      }
13  }
14  // Menu secondaire
15  var menu = $('.menu-sec');
16  if (menu) {
17    // Opérations au render (ouverture et styles des menus actifs)
18    $('.menu-sec-liste li').each(function() {
19      if ($(this).find('.page-courante').length > 0) {
20        $(this).addClass('page-courante');
21      }
22    });
23    $('.menu-sec-item').each(function() {
24      if ($(this).find('.page-courante').length === 0) {
25        $(this).find('.menu-sec-submenu').addClass('hide-for-mobile');
26      }
27    });
28    $('.menu-sec-subitem').each(function() {
29      if (!$(this).hasClass('page-courante')) {
30        $(this).find('.menu-sec-subsubmenu').addClass('hide-for-mobile');
31      }
32    });
33    // Gestion de l'ouverture et la fermeture des menus de gauche Quebec.ca
34    $('.menu-sec-item').each(function() {
35      var menuitem = $(this);
36      var subMenu = menuitem.find('.menu-sec-submenu');
37      var button = $(this).find('.menu-sec-button');
38      if (menuitem.hasClass('page-courante')) {
39        menuitem.addClass('actif');
40        //Gestion des boutons déjà ouverts à l'affichage de la page (accessibilité)
41        button.attr('aria-expanded', true);
42      }
43      button.on('click', function() {
44        if (menuitem.hasClass('actif')) {
45          menuitem.removeClass('actif');
46          subMenu.slideUp(200);
47          $(this).attr('aria-expanded', false);
48        } else {
49          menuitem.addClass('actif');
50          subMenu.slideDown(200);
51          $(this).attr('aria-expanded', true);
52        }
53      });
54    });
55    $('.menu-sec-subitem').each(function() {
56      var menuitem = $(this);
57      var subMenu = menuitem.find('.menu-sec-subsubmenu');
58      var button = $(this).find('.menu-sec-subButton');
59      if (menuitem.hasClass('page-courante')) {
60        menuitem.addClass('actif');
61        //Gestion des boutons déjà ouverts à l'affichage de la page (accessibilité)
62        button.attr('aria-expanded', true);
63      }
64      button.on('click', function() {
65        if (menuitem.hasClass('actif')) {
66          menuitem.removeClass('actif');
67          subMenu.slideUp(200);
68          $(this).attr('aria-expanded', false);
69        } else {
70          menuitem.addClass('actif');
71          subMenu.slideDown(200);
72          $(this).attr('aria-expanded', true);
73        }
74      });
75    });
76
77    $('.menu-sec-wrapper').click(function(event){
78      event.stopPropagation();
79    });
80
81    var menuButton = $('.menu-sec-mobile-button');
82    menuButton.on('click', function() {
83      if (menu.hasClass('menu-actif')) {
84        closeMenu();
85      } else {
86        menu.addClass('menu-actif');
87        menu.slideDown(200);
88        $(this).attr('aria-expanded', true);
89        $(this).addClass('actif');
90      }
91    });
92    function closeMenu() {
93      menu.removeClass('menu-actif');
94      menu.slideUp(200);
95      menuButton.attr('aria-expanded', false);
96      menuButton.removeClass('actif');
97    }
98    $(window).on('resize', function() {
99      if ($(document).width() >= 978) {
100        menu.css('display', 'block');
101      } else {
102        if (!menu.hasClass('menu-actif')) {
103          menu.css('display', 'none');
104        }
105      }
106    });
107  }
108
109  // Ajouter la classe first-parent au fil d'ariane, pour afficher la page précédente en mobile (v11)
110  var curitem = $('.filAriane').find('.curitem')[0];
111  $(curitem).prev().addClass('first-parent');
112
113  // Fil d'ariane avec ellipse
114  $('.filAriane').css('visibility', 'visible');
115  var fil = $('.filAriane.ellipse');
116  if (fil) {
117    var niveaux = fil.find('li');
118    if (niveaux.length > 5) {
119      niveaux.each(function(index) {
120        $(this).addClass('item-' + index);
121      });
122      var ellipse = niveaux.slice(2, niveaux.length - 2);
123      var ellipseMenu = '<li class="ellipse-item">' +
124          '<button class="ellipse-button" aria-expanded="false" aria-controls="ellipse-sub-menu" aria-label="Voir tout les niveaux du fil d\'Ariane"><qc-icon icon="more_horiz" size="sm"></qc-icon></button>' +
125          '<ul class="ellipse-options" id="ellipse-sub-menu"></ul>' +
126          '</li>';
127      fil.find('.item-1').after(ellipseMenu);
128      var ellipseOptions = $('.ellipse-options');
129      ellipseOptions.append(ellipse);
130
131      // Gestion de l'ouverture et de la fermeture du sous-menu ellipse avec
132      // focusTrap et désactivation au clickOutside
133      var ellipseItem = $('.ellipse-item');

134      var ellipseTrap = focusTrap.createFocusTrap('.ellipse-item', {
135          fallbackFocus: ellipseItem,
136          clickOutsideDeactivates: true,
137          onDeactivate: function() {
138            closeEllipse();
139          },
140      });
141      var ellipseButton = $('.ellipse-button');
142      ellipseButton.on('click', function() {
143        if (ellipseOptions.hasClass('actif')) {
144          closeEllipse();
145          ellipseTrap.deactivate();
146        } else {
147          ellipseOptions.addClass('actif');
148          $(this).attr('aria-expanded', true);
149          ellipseTrap.activate();
150        }
151      });
152      function closeEllipse() {
153        ellipseOptions.removeClass('actif');
154        ellipseButton.attr('aria-expanded', false);
155      }
156      var mobileCurItem = $('.first-parent').clone();
157      var mobileCurItemClass = mobileCurItem.attr('class');
158      mobileCurItem.attr('class', mobileCurItemClass + ' mobileCurItem');
159      if($(window).width() <= 766){
160        // Vérifier si la page avant la page courante est une shortcut
161        if($('.filAriane').find('.mobileCurItem').length === 0  && $('.curitem').length === 2){
162          $('.filAriane').append(mobileCurItem);
163        }
164      }
165      $(window).resize(function() {
166        if($(window).width() <= 766){
167          if($('.filAriane').find('.mobileCurItem').length === 0  && $('.curitem').length === 2){
168            $('.filAriane').append(mobileCurItem);
169          }
170        }
171        else{
172          $('.filAriane').find('.mobileCurItem').remove()
173        }
174      });
175
176    }
177  }
178
179  // Note de bas de page
180  $noteBasPageMobile = $('.note-bas-page-mobile');
181  $noteBasPageMobileContenu = $noteBasPageMobile.find('.note-bas-page-contenu');
182  $noteBasPageMobileFermer = $noteBasPageMobile.find('.note-bas-page-fermer');
183  $('.note-bas-page-link').each(function() {
184    $(this).on('click', function(e) {
185      if (window.matchMedia("(max-width: 767px)").matches) {
186        e.preventDefault();
187
188        $currentNoteLink = $(this);
189        $currentNote = $(`#${$currentNoteLink.data('note')}`);
190        let html = $currentNote.is(".note-bas-page-num")
191                                ? $currentNote.parent().html()
192                                : $currentNote.html()
193        $noteBasPageMobile.find('.note-bas-page-contenu').html(html);
194        $noteBasPageMobile.attr('tabindex', '0');
195        $noteBasPageMobile.addClass('ouvert');
196        // Pour le to Top (flèche en haut)
197        var hauteurNoteMobile = $noteBasPageMobile.height() + 40 + 24;
198        $('#flecheHaut').css('bottom',hauteurNoteMobile+'px');
199
200        $noteBasPageMobile.focus();
201        $noteBasPageMobileFermer.off().on('click', function() {
202
203          $noteBasPageMobile.removeClass('ouvert');
204          $currentNoteLink.focus();
205
206          // Pour le to Top (flèche en haut)
207          var etatFleche = $('#flecheHaut').is(':visible');
208          $('#flecheHaut').removeAttr('style');
209          if(etatFleche == true){
210            $('#flecheHaut').css('display', 'block');
211          }
212
213        });
214      }
215    })
216  });
217
218  // Partage par courriel (détail de nouvelle) : logique JS séparée du HTML.
219  // Le mailto est construit ici plutôt que dans un attribut onclick, sinon
220  // Googlebot interprète le texte du message comme une fausse URL relative et
221  // génère des erreurs 403 dans la Search Console (ticket Monday 11595450464).
222  $('#shareByEmail').on('click', function(e) {
223    e.preventDefault();
224    var sujet = this.dataset.shareSubject || '';
225    var titre = this.dataset.shareTitre || '';
226    var intro = this.dataset.shareIntro || '';
227    var corps = titre + '\r\n ' + intro + window.location.href;
228    window.location.href = 'mailto:?subject=' + encodeURIComponent(sujet) + '&body=' + encodeURIComponent(corps);
229  });
230
231});
232