https://tf1pro.com/themes/custom/tf1pro_theme/js/menu.js?tlvz91

1function Menu() {
2
3  // les liens qui doivent être affiches dans le menu généré dynamiquement à droite
4  this.lstMenuItem = null;
5  this.lstPanelPos = [];
6  this.$ = jQuery;
7
8  /**
9   * On place les événements
10   */
11  this.construct = function () {
12
13    // gestion du menu haut
14    // this.logoInitialiser();
15    this.menuInit();
16
17
18    // après le onload :
19    // sur le scrool :
20    // - construction / affichage du menu de droite
21    // - gestion des menus du footer
22    // addEvent(window, 'load', this, false);
23    // addEvent(window, 'scroll', this, false);
24
25    // redimensionnement de la fenêtre
26    addEvent(window, 'resize', this, false);
27  };
28
29  /**
30   * Gestionnaire d'événement du document
31   * @param event
32   */
33  this.handleEvent = function (event) {
34    switch (event.type) {
35
36      case "load":
37      case "scroll":
38      case "click":
39      case "mouseover":
40        break;
41
42      case "resize":
43        this.resize(event.target);
44        break;
45    }
46  };
47
48
49  /* ------------------------------------------------------------------------------*/
50  /* Evenements -------------------------------------------------------------------*/
51  /* ------------------------------------------------------------------------------*/
52
53  /* ------------------------------------------------------------------------------*/
54  /* EVENEMENT : onresize                                                          */
55  /* ELEMENTS :                                                                    */
56  /*           Menu Header, Desktop et Mobile, logo                                */
57  /*           Menu Header, < 375, Liens retour                                    */
58  /* ------------------------------------------------------------------------------*/
59  this.resize = function (window) {
60
61    // header : on gere quel logo on affiche en fonction de l'affichage desktop / mobile
62    // this.manageLogo();
63
64  };
65
66  this.showBsDropdown = function (context) {
67    console.log("showBsDropDown");
68    console.log(context);
69  };
70
71  this.hideBsDropdown = function (context) {
72    console.log("hideBsDropDown");
73    console.log(context);
74  };
75
76  /* ------------------------------------------------------------------------------*/
77  /* MENU : principal (header)                                                     */
78  /* RESOLUTION : Desktop et Mobile                                                */
79  /* ELEMENT : menu principale                                                     */
80  /* ------------------------------------------------------------------------------*/
81
82  this.menuInit = function () {
83    const activeTrail = document.querySelectorAll('.active-trail');
84    activeTrail.forEach(function (elt, idx) {
85      addClass(elt, 'show');
86      const sous = elt.querySelector('.dropdown-menu');
87      if (sous) {
88        addClass(sous, 'show');
89      }
90    })
91  }
92
93  /* ------------------------------------------------------------------------------*/
94  /* MENU : principal (header)                                                     */
95  /* RESOLUTION : Desktop et Mobile                                                */
96  /* ELEMENT : logo                                                                */
97  /* ------------------------------------------------------------------------------*/
98
99  /**
100   * En fonction du menu desktop / mobile, le logo est placé différemment
101   * Pour gérer cela on commence par cloner le logo de départ dans cette fonction
102   * Puis on affiche le bon logo en fonction de la résolution
103   * @returns {HTMLElement}
104   */
105  // this.logoInitialiser = function () {
106
107  //   // on clone le logo dans le menu
108  //   this.cloneLogo();
109
110  //   // on gere quel logo on affiche en fonction de l'affichage desktop / mobile
111  //   // this.manageLogo();
112  // };
113
114  /**
115   * On clone le logo d'origine et on place le clone dans son emplacement du menu mobile
116   * @returns {HTMLElement}
117   */
118  this.cloneLogo = function () {
119    // si on l'a déjà fait on sort
120    let menuLogo = document.getElementById('logoMenu');
121    if (menuLogo?.tagName) {
122      return menuLogo;
123    }
124
125    const menu = document.querySelector('header ul.navbar-nav > li:nth-child(4)');
126    if (menu != null) {
127      menuLogo = document.createElement('li');
128      menuLogo.id = 'logoMenu';
129      menuLogo.className = 'nav-item';
130      menu.parentNode.insertBefore(menuLogo, menu);
131
132      const lnkModele = document.querySelector('header .navbar-brand > a.site-logo');
133      const lnkClone = document.createElement('a');

134      lnkClone.className = lnkModele.className + ' nav-link';
135      lnkClone.title = lnkModele.title;
136      lnkClone.href = lnkModele.href;
137      lnkClone.tabIndex = lnkModele.tabIndex;
138      lnkClone.setAttribute('aria-label', lnkModele.getAttribute('aria-label'));
139      menuLogo.appendChild(lnkClone);
140
141      const imgModele = lnkModele.getElementsByTagName('img')[0];
142      const imgClone = document.createElement('img');
143      imgClone.className = imgModele.className;
144      imgClone.alt = imgModele.alt;
145      imgClone.src = imgModele.src;
146      imgClone.setAttribute('aria-hidden', 'true');
147      lnkClone.appendChild(imgClone);
148
149      return menuLogo;
150    }
151    return
152  };
153
154  /**
155   * Renvoie le logo inséré par le JS
156   * @returns {Node}
157   */
158  this.getLogoMenu = function () {
159    return document.querySelector('header ul.navbar-nav > li:nth-child(4) > a.site-logo');
160  };
161
162  /**
163   * Renvoie le logo originel
164   * @returns {Node}
165   */
166  this.getLogoOrigin = function () {
167    return document.querySelector('header .navbar-brand > a.site-logo');
168  };
169
170  /**
171   * Affiche le bon logo en fonction de la résolution
172   */
173  // this.manageLogo = function () {
174
175  //   let logoShow = this.getLogoMenu();
176  //   let logoHide = this.getLogoOrigin();
177
178  //   if (isMobile()) {
179  //     logoShow = logoHide;
180  //     logoHide = this.getLogoMenu();
181  //   }
182  //   if (logoShow != null) {
183  //     logoShow.style.display = 'block';
184  //   }
185  //   if (logoHide != null) {
186  //     logoHide.style.display = 'none';
187  //   }
188  // };
189
190
191  this.construct();
192}
193
194(function ($, Drupal, drupalSettings) {
195
196  Drupal.behaviors.tf1Menu = {
197    attach: function (context, settings) {
198      const menu = new Menu();
199      // window.setTimeout(function () { menu.manageLogo(); }, 50);
200      $(document, context).on('click.bs.dropdown.data-api keyup.dropdown.data-api', '.nav-item a',function (e) {
201        e.stopPropagation();
202      });
203
204      $(".dropdown", context).on('show.bs.dropdown', function (e) {
205        $(e.target.closest('.mr-auto')).find('.active-trail').removeClass('show');
206        $(e.target.closest('.mr-auto')).find('.active-trail').find('.dropdown-menu').removeClass('show');
207        $(e.target.closest('.mr-auto')).find('.active-trail').find('.active').attr('aria-expanded', false);
208      });
209
210      $("#navbarSupportedContent .dropdown").on('hidden.bs.dropdown', function (e) {
211        $(e.target.closest('.mr-auto')).find('.active-trail').addClass('show');
212        $(e.target.closest('.mr-auto')).find('.active-trail').find('.dropdown-menu').addClass('show');
213        $(e.target.closest('.mr-auto')).find('.active-trail').find('.active').attr('aria-expanded', '');
214      });
215    }
216  }
217})(jQuery, Drupal, drupalSettings)