Untitled
unknown
plain_text
a year ago
7.6 kB
3
Indexable
// Select all necessary elements and store them as uiElements object const burgerIconWrap = document.querySelector(".burger-menu--icon-wrap"); const burgerIcon = document.querySelector(".burger-menu--icon"); const headerMenu = document.querySelector(".home-header--menu"); const burgerMenu = document.querySelector(".burger-menu--wrap"); const burgerNav = document.querySelector(".home-header--navbar"); const gortexLogo = document.querySelector(".home-header--logo"); const headerLangWrap = document.querySelector(".home-header--lang-wrap"); const collectionLineWrap = document.querySelector(".home--collection-line-wrap"); const contactLineWrap = document.querySelector(".home--contact-line-wrap"); const collection = document.querySelector(".collection"); const collectionLink = document.querySelector(".collection a"); const contactLink = document.querySelector(".contact a"); const dropdownArrows = document.querySelectorAll(".burger-menu--arrow"); const collectionDropdown = document.querySelector(".collection-dropdown--ul"); const contactDropdown = document.querySelector(".contact-dropdown--ul"); const uiElements = { burgerIconWrap, burgerIcon, headerMenu, burgerMenu, burgerNav, gortexLogo, headerLangWrap, collectionLineWrap, contactLineWrap, collectionLink, contactLink, collectionArrow: dropdownArrows[0], contactArrow: dropdownArrows[1], collectionDropdown, contactDropdown, }; let isBurgerVisible = false; let isDropdownVisible = [false, false]; // Styles const burgerIconWrapStyles = { height: "15vw", width: "14%", alignItems: "center", }; const burgerIconStyles = { }; const headerMenuStyles = { flexFlow: "column nowrap", height: "100vh", }; const burgerMenuStyles = { display: "flex", width: "100%", alignItems: "flex-end", backgroundColor: "#151515E5", justifyContent: "flex-start", }; const burgerNavStyles = { display: "flex", }; const gortexLogoStyles = { display: "none", }; const headerLangWrapStyles = { display: "flex", }; const collectionLineWrapStyles = { display: "flex", }; const contactLineWrapStyles = { display: "flex", }; const collectionLinkStyles = { }; const contactLinkStyles = { }; const collectionArrowStyles = { }; const contactArrowStyles = { }; const collectionDropdownStyles = { }; const contactDropdownStyles = { }; const elementStyles = { burgerIconWrap: burgerIconWrapStyles, burgerIcon: burgerIconStyles, headerMenu: headerMenuStyles, burgerMenu: burgerMenuStyles, burgerNav: burgerNavStyles, gortexLogo: gortexLogoStyles, headerLangWrap: headerLangWrapStyles, collectionLineWrap: collectionLineWrapStyles, contactLineWrap: contactLineWrapStyles, collectionLink: collectionLinkStyles, contactLink: contactLinkStyles, collectionArrow: collectionArrowStyles, contactArrow: contactArrowStyles, collectionDropdown: collectionDropdownStyles, contactDropdown: contactDropdownStyles, }; if (window.matchMedia("(max-width: 599.9px)").matches) { //Save existing inline styles const originalInlineStyles = {}; for (const element in uiElements) { if (uiElements.hasOwnProperty(element)) { originalInlineStyles[element] = uiElements[element].getAttribute("style") || ""; } } // Switch burger menu visibility on click (default = invisible) uiElements.burgerIcon.addEventListener('click', toggleBurger); function toggleBurger() { isBurgerVisible ? hideBurger() : showBurger(); } // Show burger menu (add inline styles) function showBurger() { for (const elementKey in uiElements) { if (uiElements.hasOwnProperty(elementKey)) { const element = uiElements[elementKey]; const styles = elementStyles[elementKey]; modifyElementStyle(element, styles); } } uiElements.burgerIcon.innerText = "close"; isBurgerVisible = true; } // Hide burger menu (remove added inline styles) function hideBurger() { isBurgerVisible = false; for (const element in originalInlineStyles) { uiElements[element].style = originalInlineStyles[element]; if (uiElements[element].getAttribute("style") === "") { uiElements[element].removeAttribute('style'); } } uiElements.burgerIcon.innerText = "menu"; collection.style.marginBottom = 0; isDropdownVisible[0] = isDropdownVisible[1] = false; collectionDropdown.style.display = contactDropdown.style.display = "none"; dropdownArrows[0].innerText = dropdownArrows[1].innerText = "arrow_downward"; } // Modifty inline styles (add/change) function modifyElementStyle(element, styleObject) { if (element.hasAttribute("style")) { const originalStyles = originalInlineStyles[element]; element.setAttribute("style", originalStyles + "; " + styleObjectToString(styleObject)); } else { element.setAttribute("style", styleObjectToString(styleObject)); } } // Convert style object to string (used for adding inline styles defined as JS object in "Styles" section below) function styleObjectToString(styleObject) { let styleString = ""; for (let property in styleObject) { const kebabCaseProperty = camelToKebab(property); styleString += ${kebabCaseProperty}: ${styleObject[property]} ; } } return styleString; } // Convert camelCaseString to kebab-case-string (used for CSS properites = simple regex - no numbers etc.) function camelToKebab(string) { return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); } //Burger dropdowns // Switch dropdowns visibility on click (default = invisible) collectionLink.addEventListener('click', function() { toggleDropdown(0); }); contactLink.addEventListener('click', function() { toggleDropdown(1); }); function toggleDropdown(dropdownIndex) { isDropdownVisible[dropdownIndex] ? hideDropdown(dropdownIndex) : showDropdown(dropdownIndex); } // Show dropdown (based on dropdownIndex) function showDropdown(dropdownIndex) { if (dropdownIndex === 0) { collectionDropdown.style = "display: flex; top: 26vw;"; burgerNav.style.height = "68vw"; collection.style.marginBottom = "27vw"; contactDropdown.style.top = "85vw"; } else if (dropdownIndex === 1) { contactDropdown.style.display = "flex"; if (isDropdownVisible[0] == true) { contactDropdown.style.top = "85vw"; } else { contactDropdown.style.top = "55vw"; } } dropdownArrows[dropdownIndex].innerText = "arrow_upward"; isDropdownVisible[dropdownIndex] = true; } // Hide dropdown (based on dropdownIndex) function hideDropdown(dropdownIndex) { isDropdownVisible[dropdownIndex] = false; if (dropdownIndex === 0) { collectionDropdown.style = "display: none;"; burgerNav.style.height = "40vw"; collection.style.marginBottom = ""; contactDropdown.style.top = "55vw"; } else if (dropdownIndex === 1) { contactDropdown.style.display = "none"; } dropdownArrows[dropdownIndex].innerText = "arrow_downward"; } }
Editor is loading...
Leave a Comment