https://abonnement.lardennais.fr/sites/all/themes/pcg/js/toggle.js?v=1.12

1// Toggle Element
2import { config } from './config.js';
3import { log } from './function/log.js';
4
5
6const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
7
8// Ex: <div data-target=".element"></div>
9const toggle = () => {
10  log('data', 'component toggle', 'init');
11
12  let cssClass = '-is-toggle';
13  let cssClassSlide = '-is-toggle-slide';
14  let toggles = document.querySelectorAll('[data-toggle], .js-toggle');
15
16  toggles.forEach(toggle => {
17    toggle.addEventListener('click', function (e) {
18      e.preventDefault();
19      e.stopPropagation();
20     // console.log(toggle);
21      let cible = (toggle.dataset.target) ? toggle.dataset.target : config.toggle[toggle.id];
22      let name = cible.replace(/\.|#/i, '');
23      // let name = toggle.dataset.toggle;
24      let element = document.querySelector(cible);
25      let childrenElementWithToggle = document.querySelector(cible + " ." + cssClass);
26      let childrenBtnClick = document.querySelector(cible + " .-is-click");
27
28      // Si la cible contient la class is-toggle, on retire toutes les class
29      if (element.classList.contains(cssClass)) {
30
31        element.classList.remove(cssClass);
32        config.body.classList.remove('-is-toggle-' + name);
33        // document.removeEventListener('click', outsideClickListener);
34        toggle.classList.remove('-is-click');
35
36        // on ferme aussi les enfants
37        if(childrenElementWithToggle) {
38          childrenBtnClick.classList.remove('-is-click');
39          childrenElementWithToggle.classList.remove(cssClass);
40        }
41
42        // si il contient la classe slide, on l'enlève et on remet le height à 0
43        if(element.classList.contains(cssClassSlide)) {
44          element.classList.remove(cssClassSlide);
45          element.style.height = `0`;
46        }
47        // Sinon si la cible ne contient pas la class is-toggle, on l'ajoute
48      } else {
49        toggle.classList.add('-is-click');
50        // Mais on retire au préalable la class du body d'un menu toggle préalablement ouvert.
51        let bodyElem = document.querySelector('body');
52        for (let i = bodyElem.classList.length - 1; i >= 0; i--) {
53          const className = bodyElem.classList[i];
54          if (className.startsWith('-is-toggle-')) {
55            bodyElem.classList.remove(className);
56          }
57        }
58
59        let isToggleElements = document.querySelectorAll('.-is-toggle');
60        // Et on retire également la class is-toggle d'autres éléments ouverts.
61        if(!toggle.dataset.allvisible || toggle.dataset.allvisible != "visible") {
62          isToggleElements.forEach(function (element){
63            element.classList.remove(cssClass);
64          });
65        }
66
67        // on ajoute la classe à l'élément cible et au body
68        element.classList.add(cssClass);
69        config.body.classList.add('-is-toggle-' + name);
70
71        // Si le bouton contient data animation="slide", on ajoute une classe -is-toggle-sllide
72        // et on récupère la hauteur et on l'ajoute à l'élément cible
73        if(toggle.dataset.animation && toggle.dataset.animation == "slide") {
74          element.style.height = `${element.scrollHeight}px`;
75          element.classList.add(cssClassSlide);
76        }
77
78        // On supprime les autres class sauf si data-allvisible="visible" est présent sur le bouton
79        if(!toggle.dataset.allvisible || toggle.dataset.allvisible != "visible") {
80          toggles.forEach(item => {
81            if (toggle != item) {
82              let itemCible = item.dataset.target;
83              let itemName = item.dataset.toggle;
84              let elementCible = document.querySelector(itemCible);
85
86              if (elementCible && element != elementCible) {
87                config.body.classList.remove('-is-toggle-' + itemName);
88                elementCible.classList.remove(cssClass);
89              }
90            }
91          });
92        }
93
94        // fermeture au click extérieur
95        /** En rajoutant un data-outside="no-close" sur le bouton, le clic extérieur ne ferme plus le bloc ouvert
96         * -> à condition qu'il n'y ai pas de background transparent avec les data de fermeture dessus */
97        if(!toggle.dataset.outside || toggle.dataset.outside != "no-close" ) { // si il n'a pas de data-outside no-close alors on ferme lorsque l'on clique à l'exterieur de element
98          document.addEventListener('click', function outsideClickListener(e){
99
100            // log('data', 'component toggle', 'fermeture', e.target, config.body.classList);
101            if (element && !element.contains(e.target) && config.body.classList.contains('-is-toggle-' + name)) {
102              e.preventDefault();
103              e.stopPropagation();
104              log('data', 'component toggle', 'fermeture');
105
106              element.classList.remove(cssClass);
107              config.body.classList.remove('-is-toggle-' + name);
108              document.removeEventListener('click', outsideClickListener);
109            }
110
111          });
112        }
113      }
114    });

115  });
116}
117
118toggle();