| Server IP : 54.36.91.62 / Your IP :
216.73.216.168 [
Web Server : Apache System : Linux webm002.cluster127.gra.hosting.ovh.net 5.15.167-ovh-vps-grsec-zfs-classid #1 SMP Tue Sep 17 08:14:20 UTC 2024 x86_64 User : eticmes ( 123698) PHP Version : 7.4.33 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Domains : 2 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/eticmes/www/wp-content/themes/oceanwp/assets/src/js/theme/mobile-menu/ |
Upload File : |
import delegate from "delegate";
import { options } from "../../constants";
import { fadeIn, fadeOut, slideDown, slideUp } from "../../lib/utils";
class SidebarMobileMenu {
#elements = {
body: document.body,
};
#isMenuOpen;
#menuItemsPlusIcon;
#sidebarToggleMenuBtn;
constructor() {
if (
typeof options.sidrSource !== "undefined" &&
this.#elements.body.classList.contains("sidebar-mobile")
) {
this.#setElements();
this.#start();
this.#setupEventListeners();
}
}
#setElements = () => {
this.#elements = {
...this.#elements,
hamburgerBtn: document.querySelector(".mobile-menu > .hamburger"),
header: document.querySelector("#site-header"),
};
};
#start = () => {
this.#isMenuOpen = false;
this.#startSidrPlugin();
if (!document.querySelector(".sidr-class-dropdown-toggle")) {
document
.querySelectorAll(".sidr-class-menu-item-has-children > a")
.forEach((menuItemLink) => {
menuItemLink.insertAdjacentHTML(
"beforeend",
'<span class="sidr-class-dropdown-toggle" tabindex=0></span>'
);
});
}
this.#menuItemsPlusIcon =
options.sidrDropdownTarget == "link"
? document.querySelectorAll("li.sidr-class-menu-item-has-children > a")
: document.querySelectorAll(".sidr-class-dropdown-toggle");
};
#startSidrPlugin = () => {
const self = this;
sidr.new(".mobile-menu", {
name: "sidr",
source: options.sidrSource,
side: options.sidrSide,
displace: options.sidrDisplace,
speed: 300,
renaming: true,
timing: "ease",
bind: "click",
onOpen() {
document.querySelector("a.sidr-class-toggle-sidr-close")?.focus();
self.#elements.hamburgerBtn?.classList.add("is-active");
self.#elements.header.insertAdjacentHTML(
"afterend",
'<div class="oceanwp-sidr-overlay" tabindex=0></div>'
);
const overlay = document.querySelector(".oceanwp-sidr-overlay");
fadeIn(overlay);
overlay.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
sidr.close("sidr");
});
},
onClose() {
self.#elements.hamburgerBtn?.classList.remove("is-active");
document
.querySelectorAll(".sidr-class-menu-item-has-children.active > ul")
.forEach((subMenuActive) => {
subMenuActive.style.display = "none";
});
document
.querySelectorAll(".sidr-class-menu-item-has-children.active")
.forEach((menuItemActive) => {
menuItemActive.classList.remove("active");
});
const overlay = document.querySelector(".oceanwp-sidr-overlay");
fadeOut(overlay);
setTimeout(() => {
overlay.remove();
});
},
});
document
.querySelectorAll('#sidr [class*="sidr-class-fa"]')
.forEach((icon) => {
icon.className = icon.className.replace(/\bsidr-class-fa.*?\b/g, "fa");
});
document
.querySelectorAll('#sidr [class*="sidr-class-icon"]')
.forEach((icon) => {
icon.className = icon.className.replace(
/\bsidr-class-icon-.*?\b/g,
"icon-"
);
});
this.#sidebarToggleMenuBtn = document.querySelector(
"a.sidr-class-toggle-sidr-close"
);
};
#setupEventListeners = () => {
this.#elements.hamburgerBtn?.addEventListener(
"click",
this.#onHamburgerBtnClick
);
this.#sidebarToggleMenuBtn?.addEventListener(
"click",
this.#onSidebarCloseMenuBtnClick
);
this.#menuItemsPlusIcon?.forEach((menuItemPlusIcon) => {
menuItemPlusIcon.addEventListener("click", this.#onMenuItemPlusIconClick);
menuItemPlusIcon.addEventListener(
"touchend",
this.#onMenuItemPlusIconClick
);
});
delegate(
document.body,
'.sidr-class-dropdown-menu a[href*="#"]:not([href="#"]), .sidr-class-menu-item > a[href*="#"]:not([href="#"])',
"click",
this.#closeSidr
);
delegate(
document.body,
'.sidr-class-dropdown-menu a[href*="#"]:not([href="#"]), .sidr-class-menu-item > a[href*="#"]:not([href="#"])',
"touchend",
this.#closeSidr
);
document
.querySelectorAll("li.sidr-class-nav-no-click > a")
?.forEach((menuItemLink) => {
menuItemLink.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
});
});
document.addEventListener("keydown", this.#onDocumentKeydown);
window.addEventListener("resize", this.#onWindowResize);
};
#onHamburgerBtnClick = (event) => {
this.#isMenuOpen = !this.#isMenuOpen;
event.currentTarget.setAttribute("aria-expanded", this.#isMenuOpen);
};
#onSidebarCloseMenuBtnClick = (event) => {
event.preventDefault();
event.stopPropagation();
this.#closeSidr();
this.#sidebarToggleMenuBtn.classList.remove("opened");
};
#onMenuItemPlusIconClick = (event) => {
event.preventDefault();
event.stopPropagation();
const menuItemPlusIcon = event.currentTarget;
const menuItem =
options.sidrDropdownTarget == "link"
? menuItemPlusIcon.parentNode
: menuItemPlusIcon.parentNode.parentNode;
const subMenu = menuItem.lastElementChild;
if (!menuItem?.classList.contains("active")) {
menuItem.classList.add("active");
slideDown(subMenu, 250);
} else {
menuItem.classList.remove("active");
slideUp(subMenu, 250);
menuItem
.querySelectorAll(".sidr-class-menu-item-has-children.active")
?.forEach((openMenuItem) => {
openMenuItem.classList.remove("active");
slideUp(openMenuItem.querySelector("ul"));
});
}
};
#onWindowResize = (event) => {
if (window.innerWidth >= 960) {
this.#closeSidr();
}
};
/**
* Trap keyboard navigation
*/
#onDocumentKeydown = (event) => {
if (!this.#elements.body.classList.contains("sidr-open")) {
return;
}
event.stopPropagation();
const tabKey = event.keyCode === 9;
const shiftKey = event.shiftKey;
const escKey = event.keyCode === 27;
const enterKey = event.keyCode === 13;
const closeIcon = this.#sidebarToggleMenuBtn;
const navElements = document
.querySelector("#sidr")
.querySelectorAll("a, span.sidr-class-dropdown-toggle, input, button");
const navFirstElement = navElements[0];
const navLastElement = navElements[navElements.length - 1];
if (closeIcon) {
closeIcon.style.outline = "";
if (!shiftKey && tabKey && navLastElement === document.activeElement) {
event.preventDefault();
closeIcon.style.outline = "1px dashed rgba(255, 255, 255, 0.6)";
closeIcon.focus();
}
if (shiftKey && tabKey && navFirstElement === document.activeElement) {
event.preventDefault();
closeIcon.style.outline = "1px dashed rgba(255, 255, 255, 0.6)";
closeIcon.focus();
}
}
if (escKey) {
event.preventDefault();
this.#closeSidr();
}
if (
enterKey &&
document.activeElement.classList.contains("sidr-class-dropdown-toggle")
) {
event.preventDefault();
document.activeElement.click();
}
// If there are no elements in the menu, don't move the focus
if (tabKey && navFirstElement === navLastElement) {
event.preventDefault();
}
};
#closeSidr = () => {
setTimeout(() => {
sidr.close("sidr");
this.#elements.hamburgerBtn?.classList.remove("is-active");
}, 50);
};
}
("use script");
window.oceanwp = window.oceanwp || {};
oceanwp.sidebarMobileMenu = new SidebarMobileMenu();