https://www.agencecm.com/catalogue/js/header_multisite_kine.js

1(function () {
2  "use strict";
3
4  function initAcmHeader() {
5    var header = document.getElementById("d_header");
6
7    if (!header) {
8      return;
9    }
10
11    var toggle = header.querySelector(".acm-header__toggle");
12    var collapse = header.querySelector(".acm-header__collapse");
13
14    var dropdownItems = header.querySelectorAll(".acm-header__item--dropdown");
15
16    /*
17     * ----------------------------------------------------
18     * MENU MOBILE
19     * ----------------------------------------------------
20     */
21
22    if (toggle && collapse) {
23      toggle.addEventListener("click", function (event) {
24        event.preventDefault();
25        event.stopPropagation();
26
27        var isOpen = collapse.classList.toggle("is-open");
28
29        toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
30
31        toggle.setAttribute(
32          "aria-label",
33          isOpen ? "Fermer le menu" : "Ouvrir le menu",
34        );
35      });
36    }
37
38    /*
39     * ----------------------------------------------------
40     * DROPDOWNS
41     * ----------------------------------------------------
42     */
43
44    dropdownItems.forEach(function (item) {
45      var button = item.querySelector(".acm-header__dropdown-toggle");
46
47      if (!button) {
48        return;
49      }
50
51      button.addEventListener("click", function (event) {
52        event.preventDefault();
53        event.stopPropagation();
54
55        var wasOpen = item.classList.contains("is-open");
56
57        /*
58         * Ferme tous les autres menus.
59         */
60        dropdownItems.forEach(function (otherItem) {
61          if (otherItem !== item) {
62            otherItem.classList.remove("is-open");
63
64            var otherButton = otherItem.querySelector(
65              ".acm-header__dropdown-toggle",
66            );
67
68            if (otherButton) {
69              otherButton.setAttribute("aria-expanded", "false");
70            }
71          }
72        });
73
74        /*
75         * Toggle du menu courant.
76         */
77        if (wasOpen) {
78          item.classList.remove("is-open");
79
80          button.setAttribute("aria-expanded", "false");
81        } else {
82          item.classList.add("is-open");
83
84          button.setAttribute("aria-expanded", "true");
85        }
86      });
87    });
88
89    /*
90     * ----------------------------------------------------
91     * CLIC EN DEHORS DU HEADER
92     * ----------------------------------------------------
93     */
94
95    document.addEventListener("click", function (event) {
96      if (!header.contains(event.target)) {
97        dropdownItems.forEach(function (item) {
98          item.classList.remove("is-open");
99
100          var button = item.querySelector(".acm-header__dropdown-toggle");
101
102          if (button) {
103            button.setAttribute("aria-expanded", "false");
104          }
105        });
106      }
107    });
108
109    /*
110     * ----------------------------------------------------
111     * ESCAPE
112     * ----------------------------------------------------
113     */
114
115    document.addEventListener("keydown", function (event) {
116      if (event.key !== "Escape") {
117        return;
118      }
119
120      dropdownItems.forEach(function (item) {
121        item.classList.remove("is-open");
122
123        var button = item.querySelector(".acm-header__dropdown-toggle");
124
125        if (button) {
126          button.setAttribute("aria-expanded", "false");
127        }
128      });
129
130      if (collapse) {
131        collapse.classList.remove("is-open");
132
133        if (toggle) {
134          toggle.setAttribute("aria-expanded", "false");
135
136          toggle.setAttribute("aria-label", "Ouvrir le menu");
137        }
138      }
139    });
140
141    /*
142     * ----------------------------------------------------
143     * REDIMENSIONNEMENT
144     *
145     * Si on passe de mobile à desktop, on nettoie
146     * l'état du menu mobile.
147     * ----------------------------------------------------
148     */
149
150    var desktopBreakpoint = 1400;
151
152    window.addEventListener("resize", function () {
153      if (window.innerWidth >= desktopBreakpoint) {
154        if (collapse) {
155          collapse.classList.remove("is-open");
156        }
157
158        if (toggle) {
159          toggle.setAttribute("aria-expanded", "false");
160
161          toggle.setAttribute("aria-label", "Ouvrir le menu");
162        }
163      }
164    });
165  }
166
167  /*
168   * --------------------------------------------------------
169   * INITIALISATION
170   * --------------------------------------------------------
171   */
172
173  if (document.readyState === "loading") {
174    document.addEventListener("DOMContentLoaded", initAcmHeader);
175  } else {
176    initAcmHeader();
177  }
178})();