/* ==========================================================
RETYRE-X — DIVI 4 FULLSCREEN MENU BEHAVIOUR
Adds accessible submenu arrows and synchronises the X icon.
========================================================== */
(function () {
"use strict";
var menuObserver = null;
var bodyObserver = null;
var currentContainer = null;
function syncMenuIcon() {
var container = document.querySelector(".et_slide_in_menu_container");
if (!container) {
document.body.classList.remove("rx-menu-open");
return;
}
var isOpen =
container.classList.contains("et_pb_fullscreen_menu_opened") ||
document.body.classList.contains("et_pb_fullscreen_menu_opened");
document.body.classList.toggle("rx-menu-open", isOpen);
}
function initialiseSubmenus() {
var menu = document.querySelector(
".et_header_style_fullscreen #mobile_menu_slide"
);
if (!menu) {
return;
}
var parentItems = menu.querySelectorAll(
"li.menu-item-has-children"
);
parentItems.forEach(function (item, index) {
var link = Array.from(item.children).find(function (child) {
return child.tagName === "A";
});
var submenu = Array.from(item.children).find(function (child) {
return child.tagName === "UL" &&
child.classList.contains("sub-menu");
});
if (!link || !submenu) {
return;
}
/* Give each submenu a stable ID for accessibility. */
if (!submenu.id) {
submenu.id = "rx-submenu-" + index + "-" +
Math.random().toString(36).slice(2, 8);
}
/* Reuse an existing toggle rather than creating duplicates. */
var toggle = Array.from(item.children).find(function (child) {
return child.classList.contains("rx-submenu-toggle");
});
if (!toggle) {
toggle = document.createElement("button");
toggle.type = "button";
toggle.className = "rx-submenu-toggle";
toggle.setAttribute("aria-controls", submenu.id);
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute(
"aria-label",
"Show submenu for " + link.textContent.trim()
);
item.appendChild(toggle);
}
/* Keep the visual and accessibility states in sync. */
var expanded = item.classList.contains("rx-submenu-open");
toggle.setAttribute("aria-expanded", String(expanded));
submenu.setAttribute("aria-hidden", String(!expanded));
if (!toggle.dataset.rxBound) {
toggle.addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
var willOpen = !item.classList.contains(
"rx-submenu-open"
);
item.classList.toggle("rx-submenu-open", willOpen);
toggle.setAttribute(
"aria-expanded",
String(willOpen)
);
submenu.setAttribute(
"aria-hidden",
String(!willOpen)
);
toggle.setAttribute(
"aria-label",
(willOpen ? "Hide submenu for " : "Show submenu for ") +
link.textContent.trim()
);
});
toggle.dataset.rxBound = "true";
}
});
}
function watchMenuContainer() {
var container = document.querySelector(
".et_slide_in_menu_container"
);
if (!container || container === currentContainer) {
syncMenuIcon();
return;
}
if (menuObserver) {
menuObserver.disconnect();
}
currentContainer = container;
menuObserver = new MutationObserver(function () {
syncMenuIcon();
});
menuObserver.observe(container, {
attributes: true,
attributeFilter: ["class"]
});
syncMenuIcon();
}
function initialiseRetyreMenu() {
initialiseSubmenus();
watchMenuContainer();
}
function startRetyreMenu() {
initialiseRetyreMenu();
/* Divi can insert or rebuild its menu after the page loads. */
bodyObserver = new MutationObserver(function () {
initialiseRetyreMenu();
});
bodyObserver.observe(document.body, {
childList: true,
subtree: true
});
/* Also detect a menu-open class applied directly to the body. */
var bodyClassObserver = new MutationObserver(function () {
syncMenuIcon();
});
bodyClassObserver.observe(document.body, {
attributes: true,
attributeFilter: ["class"]
});
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
startRetyreMenu,
{ once: true }
);
} else {
startRetyreMenu();
}
})();
