86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
"use strict";
|
|
|
|
/**
|
|
* Global element references.
|
|
*/
|
|
let nav_menu_mobile_button;
|
|
let nav_menu_mobile_button_icon;
|
|
let nav_menu;
|
|
let nav_menu_mobile;
|
|
let nav_menu_mobile_page_overlay;
|
|
let nav_ref_page;
|
|
let nav_ref_cookie_notice;
|
|
let nav_ref_footer;
|
|
|
|
|
|
|
|
/**
|
|
* Global states.
|
|
*/
|
|
let nav_menu_mobile_opened = false;
|
|
|
|
|
|
|
|
/**
|
|
* CALLBACK: Initialize.
|
|
*/
|
|
window.addEventListener("load", function(event){
|
|
// COLLECT ELEMENTS //
|
|
nav_menu_mobile_button = document.getElementById("nav-menu-mobile-button");
|
|
nav_menu_mobile_button_icon = nav_menu_mobile_button.getElementsByClassName("icon")[0];
|
|
nav_menu = document.getElementById("nav-menu");
|
|
nav_menu_mobile = document.getElementById("nav-menu-mobile");
|
|
nav_menu_mobile_page_overlay = document.getElementById("nav-menu-mobile-page-overlay");
|
|
nav_ref_page = document.getElementById("page");
|
|
nav_ref_cookie_notice = document.getElementById("cookie-notice-required");
|
|
nav_ref_footer = document.getElementById("footer");
|
|
|
|
|
|
// REGISTER ONCLICK HANDLERS //
|
|
nav_menu_mobile_button.onclick = nav_menu_mobile_toggle;
|
|
nav_menu_mobile_page_overlay.onclick = nav_menu_mobile_toggle;
|
|
|
|
|
|
// COPY MENU CONTENT TO MOBILE MENU //
|
|
nav_menu_mobile.innerHTML = nav_menu.innerHTML;
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
* CALLBACK: Mobile nav menu button or page overlay was clicked, toggle mobile menu.
|
|
*/
|
|
async function nav_menu_mobile_toggle(){
|
|
// SET NEW STATE //
|
|
nav_menu_mobile_opened = !nav_menu_mobile_opened;
|
|
|
|
|
|
// CHANGE BUTTON ICON //
|
|
nav_menu_mobile_button_icon.classList.remove("ti-menu-2", "ti-x");
|
|
if(nav_menu_mobile_opened) nav_menu_mobile_button_icon.classList.add("ti-x");
|
|
else nav_menu_mobile_button_icon.classList.add("ti-menu-2");
|
|
|
|
|
|
// MAYBE DISPLAY MOBILE MENU //
|
|
nav_menu_mobile.classList.add("gone");
|
|
if(nav_menu_mobile_opened) nav_menu_mobile.classList.remove("gone");
|
|
|
|
|
|
// SET PAGE, COOKIE NOTICE AND FOOTER FOCUS //
|
|
nav_ref_page.classList.remove("focus-remove-on-mobile");
|
|
if(nav_menu_mobile_opened) nav_ref_page.classList.add("focus-remove-on-mobile");
|
|
|
|
if(nav_ref_cookie_notice !== null){
|
|
nav_ref_cookie_notice.classList.remove("focus-remove-on-mobile");
|
|
if(nav_menu_mobile_opened) nav_ref_cookie_notice.classList.add("focus-remove-on-mobile");
|
|
}
|
|
|
|
nav_ref_footer.classList.remove("focus-remove-on-mobile");
|
|
if(nav_menu_mobile_opened) nav_ref_footer.classList.add("focus-remove-on-mobile");
|
|
|
|
|
|
// MAYBE DISPLAY PAGE OVERLAY //
|
|
nav_menu_mobile_page_overlay.classList.add("gone");
|
|
if(nav_menu_mobile_opened) nav_menu_mobile_page_overlay.classList.remove("gone");
|
|
}
|