https://www.mairie-ruffec.fr/wp-content/themes/ruffec/app.js?ver=1.0.0

1document.addEventListener("DOMContentLoaded", () => {
2	// set submenu link un three columns
3	let subMenus = document.querySelectorAll(
4		".customHeader .customHeader__menu .menu-menu-principal-container .menu > li > .sub-menu"
5	);
6	for (const subMenu of subMenus) {
7		// select all li elements inside the sub-menu
8		let subMenuItemsNb = subMenu.childElementCount;
9		let subMenuAllItems = subMenu.children;
10		let subMenuItems = [];
11		for (const subMenuItem of subMenuAllItems) {
12			//check if the element is a li
13			if (subMenuItem.tagName != "LI") {
14				continue;
15			} else {
16				subMenuItems.push(subMenuItem);
17			}
18		}
19		for (let i = 1; i <= 3; i++) {
20			let subMenuCol = document.createElement("div");
21			subMenuCol.classList.add("sub-menu__col");
22			subMenuCol.classList.add("sub-menu__col--" + i);
23			subMenu.appendChild(subMenuCol);
24			let subMenuItemIndex = 1;
25			for (const subMenuItem of subMenuItems) {
26				if (subMenuItemIndex % i == 0) {
27					subMenuCol.appendChild(subMenuItem);
28				}
29				subMenuItemIndex++;
30			}
31		}
32	}
33
34	// add mobile menu button
35	let headerMenu = document.querySelector(".customHeader");
36	let headerMenuInner = headerMenu.querySelector(".wpb_row");
37	let headerLogo = document.querySelector(".customHeader .customHeader__logo");
38	if (headerLogo) {
39		let burger = document.createElement("div");
40		burger.classList.add("mobileBurger");
41		burger.innerHTML = "<span></span><span></span><span></span>";
42		burger.addEventListener("click", () => {
43			document.body.classList.toggle("menuOpen");
44			window.scrollTo(0, 0);
45		});
46		headerMenuInner.insertBefore(burger, headerLogo);
47		let search = document.createElement("div");
48		search.classList.add("mobilesearch");
49		search.innerHTML =
50			'<div class="search-icon"><i class="fa fa-search3"></i></div>';
51		headerMenuInner.appendChild(search);
52		let searchBar = document.querySelector(
53			".customHeader .customHeader__search .search-field"
54		);
55		search.addEventListener("click", () => {
56			document.body.classList.add("menuOpen");
57			window.scrollTo(0, 0);
58			if (searchBar) {
59				searchBar.focus();
60			}
61		});
62	}
63
64	//change search bar placeholder
65	let searchBar = document.querySelector(
66		".customHeader .customHeader__search .search-field"
67	);
68	if (searchBar) {
69		searchBar.setAttribute(
70			"placeholder",
71			"Je recherche un service, une information..."
72		);
73	}
74
75	// gridCustom link everywhere
76	let gridCustomLinks = document.querySelectorAll(
77		".gridCustom .tmb, .eventGrid .tmb, .actuGrid .tmb"
78	);
79	for (const gridCustomLink of gridCustomLinks) {
80		gridCustomLink.addEventListener("click", (e) => {
81			window.location.href = gridCustomLink
82				.querySelector("a")
83				.getAttribute("href");
84		});
85	}
86
87	let abecedaireFiltersContainer = document.querySelector(".abecedaireFilters");
88	let abecedaireElementsToFilter = document.querySelectorAll(
89		".gridFilter .isotope-container .tmb"
90	);
91	abecedaireElementsToFilter.forEach((abecedaireElementToFilter) => {
92		let abecedaireElementToFilterTitle =
93			abecedaireElementToFilter.querySelector(".t-entry-title a").innerHTML;
94		let abecedaireElementToFilterLetter = abecedaireElementToFilterTitle
95			.charAt(0)
96			.toLowerCase();
97		abecedaireElementToFilter.setAttribute(
98			"data-first-letter",
99			abecedaireElementToFilterLetter
100		);
101	});
102	if (abecedaireFiltersContainer) {
103		let abecedaireFilters = document.createElement("div");
104		abecedaireFilters.classList.add("abecedaireFilters__letters");
105		abecedaireFiltersContainer.appendChild(abecedaireFilters);
106		let abecedaireFiltersLetters = [
107			"Tous",
108			"-",
109			"a",
110			"-",
111			"b",
112			"-",
113			"c",
114			"-",
115			"d",
116			"-",
117			"e",
118			"-",
119			"f",
120			"-",
121			"g",
122			"-",
123			"h",
124			"-",
125			"i",
126			"-",
127			"j",
128			"-",
129			"k",
130			"-",
131			"l",
132			"-",
133			"m",
134			"-",
135			"n",
136			"-",
137			"o",
138			"-",
139			"p",
140			"-",
141			"q",
142			"-",
143			"r",
144			"-",
145			"s",
146			"-",
147			"t",
148			"-",
149			"u",
150			"-",
151			"v",
152			"-",
153			"w",
154			"-",
155			"x",
156			"-",
157			"y",
158			"-",
159			"z",
160		];
161		for (const abecedaireFiltersLetter of abecedaireFiltersLetters) {
162			if (abecedaireFiltersLetter == "-") {
163				let abecedaireFiltersLetterSeparator = document.createElement("span");
164				abecedaireFiltersLetterSeparator.classList.add(
165					"abecedaireFilters__letterSeparator"
166				);
167				abecedaireFiltersLetterSeparator.innerHTML = abecedaireFiltersLetter;
168				abecedaireFilters.appendChild(abecedaireFiltersLetterSeparator);
169			} else {
170				let itemWithThisLetter = document.querySelector(
171					'[data-first-letter="' + abecedaireFiltersLetter + '"]'
172				);
173
174				if (abecedaireFiltersLetter == "Tous") {
175					itemWithThisLetter = true;
176				}
177
178				let abecedaireFiltersLetterLink = document.createElement("a");
179				abecedaireFiltersLetterLink.setAttribute("href", "#");
180				abecedaireFiltersLetterLink.classList.add("abecedaireFilters__letter");
181				abecedaireFiltersLetterLink.innerHTML = abecedaireFiltersLetter;
182				abecedaireFilters.appendChild(abecedaireFiltersLetterLink);
183
184				if (itemWithThisLetter == undefined) {
185					abecedaireFiltersLetterLink.classList.add(
186						"abecedaireFilters__letter--disabled"
187					);
188				} else {
189					console.log(abecedaireFiltersLetter);
190					abecedaireFiltersLetterLink.addEventListener("click", (e) => {
191						abecedaireElementsToFilter.forEach((abecedaireElementToFilter) => {
192							if (abecedaireFiltersLetter == "Tous") {
193								abecedaireElementToFilter.classList.remove("hidden");
194							} else {
195								if (
196									abecedaireElementToFilter.getAttribute("data-first-letter") ==
197									abecedaireFiltersLetter
198								) {
199									abecedaireElementToFilter.classList.remove("hidden");
200								} else {
201									abecedaireElementToFilter.classList.add("hidden");
202								}
203							}
204						});
205					});
206				}
207			}
208		}
209	}
210
211	// add event on link to open submenu
212	let firstLevelLinks = document.querySelectorAll(
213		".customHeader .customHeader__menu .menu-menu-principal-container .menu > li > a"
214	);
215
216	firstLevelLinks.forEach((firstLevelLink) => {
217		firstLevelLink.addEventListener("mouseup", (e) => {
218			if (firstLevelLink.parentElement.querySelector(".sub-menu")) {

219				let currentSubMenusOpen = document.querySelectorAll(".subMenuOpen");
220				currentSubMenusOpen.forEach((currentSubMenuOpen) => {
221					currentSubMenuOpen.classList.remove("subMenuOpen");
222				});
223				firstLevelLink.parentElement.classList.toggle("subMenuOpen");
224			}
225		});
226		firstLevelLink.addEventListener("click", (e) => {
227			if (window.matchMedia("(max-width: 959px)").matches) {
228				if (firstLevelLink.parentElement.querySelector(".sub-menu")) {
229					e.preventDefault();
230				}
231			}
232		});
233	});
234
235	// add event on link to open submenu menu
236	let secondLevelLinks = document.querySelectorAll(
237		".customHeader .customHeader__menu .menu-menu-principal-container .menu > li > .sub-menu > .sub-menu__col > li > a"
238	);
239	let secondLevelSubs = document.querySelectorAll(
240		".customHeader .customHeader__menu .menu-menu-principal-container .menu > li > .sub-menu .sub-menu"
241	);
242	secondLevelLinks.forEach((secondLevelLink) => {
243		let secondLevelLinksText = secondLevelLink.textContent;
244		let secondLevelLinkSubMenus =
245			secondLevelLink.parentElement.querySelectorAll(".sub-menu");
246		for (const secondLevelLinkSubMenu of secondLevelLinkSubMenus) {
247			let secondLevelSubTitle = document.createElement("li");
248			let secondLevelSubTitleLink = document.createElement("a");
249			secondLevelSubTitleLink.setAttribute(
250				"href",
251				secondLevelLink.getAttribute("href")
252			);
253			secondLevelSubTitleLink.textContent = secondLevelLinksText;
254			secondLevelSubTitle.appendChild(secondLevelSubTitleLink);
255			secondLevelSubTitle.classList.add("subSubMenuTitle");
256			secondLevelLinkSubMenu.prepend(secondLevelSubTitle);
257
258			let secondLevelSubBack = document.createElement("li");
259			secondLevelSubBack.textContent = "Retour";
260			secondLevelSubBack.classList.add("subSubMenuBack");
261			secondLevelSubBack.addEventListener("click", (e) => {
262				secondLevelLink.parentElement.classList.remove("subSubMenuOpen");
263			});
264			secondLevelLinkSubMenu.prepend(secondLevelSubBack);
265		}
266
267		secondLevelLink.addEventListener("mouseup", (e) => {
268			if (secondLevelLink.parentElement.querySelector(".sub-menu")) {
269				secondLevelLink.parentElement.classList.toggle("subSubMenuOpen");
270			}
271		});
272		secondLevelLink.addEventListener("click", (e) => {
273			if (window.matchMedia("(max-width: 959px)").matches) {
274				if (secondLevelLink.parentElement.querySelector(".sub-menu")) {
275					e.preventDefault();
276				}
277			}
278		});
279	});
280});