From 627405f2e580966a6c4d9057155cec462853f678 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 21 Oct 2019 18:51:45 +0200 Subject: [PATCH] WIP #3053 --- .../resources/assets/images/menu-close.svg | 1 + .../CCV/resources/assets/scripts/menu.js | 41 +++++++++++--- .../assets/styles/components/mmenu.styl | 53 +++++++++++++++++++ .../resources/views/partials/header.blade.php | 6 +-- 4 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/images/menu-close.svg create mode 100644 wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl diff --git a/wp-content/themes/CCV/resources/assets/images/menu-close.svg b/wp-content/themes/CCV/resources/assets/images/menu-close.svg new file mode 100644 index 0000000..e8915a8 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/menu-close.svg @@ -0,0 +1 @@ + diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js index ea0eddd..ad9e74b 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/menu.js +++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js @@ -20,17 +20,18 @@ document.addEventListener( position: 'right' // Todo: switch for Arabic, based on class or text direction? }); + // Open / Close Menu handlers document.querySelector(`a[href="#menu"]`) .addEventListener('click', (event) => { mmenu.open(); event.preventDefault(); event.stopPropagation(); - if (null === document.querySelector('.mm--close')) { + if (null === document.querySelector('#close-menu')) { - nav.innerHTML = '' + nav.innerHTML; + nav.innerHTML = '' + nav.innerHTML; - document.querySelector('.mm--close').addEventListener('click', (event) => { + document.querySelector('#close-menu').addEventListener('click', (event) => { mmenu.close(); }); @@ -40,11 +41,39 @@ document.addEventListener( function buildMobileMenu() { const menu = document.createElement('div'); - const menuItems = document.querySelector('.main-menu'); + const menuItems = document.querySelector('.main-menu').cloneNode(true); + const ctaButtons = document.querySelectorAll('.header-cta'); + const locales = document.querySelectorAll('.nav-secondary .locales a'); + const localeLinks = Array.from(locales).reduce((html, link) => html + link.outerHTML, ''); - // Todo: copy other items into mobile menu (secondary nav buttons, language switcher etc) - menu.appendChild(menuItems.cloneNode(true)); + // Prepend CTA links from header into main menu + // ctaButtons is a NodeList so we convert to an array to allow it to be reversed + // It needs to be reversed because we will prepend these links and we want the + // order to remain the same at the end... + Array.from(ctaButtons).reverse().forEach(function(button) { + let newItem = document.createElement('li'); + newItem.className = 'cta-button'; + newItem.innerHTML = button.outerHTML; + menuItems.insertBefore(newItem, menuItems.childNodes[0] || null); + }); + + // Append language switcher + let localesItem = document.createElement('li'); + localesItem.className = 'locales'; + localesItem.innerHTML = localeLinks; + menuItems.appendChild(localesItem); + + // Remove link from top level menu items that have sub-menus (otherwise MMenu splits the link and the sub-menu arrow) + menuItems.querySelectorAll('.menu-item-has-children > a').forEach(function (link) { + let parent = link.parentNode; + let newWrapper = document.createElement('span'); + newWrapper.innerText = link.innerText; + parent.insertBefore(newWrapper, parent.childNodes[0] || null); + parent.removeChild(link); // Replaced by the new element + }); menu.setAttribute('id', menuID); + menu.appendChild(menuItems); + document.body.appendChild(menu); } diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl new file mode 100644 index 0000000..c720810 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl @@ -0,0 +1,53 @@ +:root + --mm-width: 90% + --mm-max-width: 308px + +#mobile-menu + @apply bg-purple-dark text-white + + // Submenu header + &:after + @apply font-display uppercase + opacity: 0.7 + box-shadow: none + border-bottom: 1px solid rgba(#fff, 0.2) + + &.mm--main:after + display: none + + .menu-list + @apply bg-purple-dark + + .menu-item + @apply bg-purple-dark text-white font-display uppercase + + // Submenu arrow (if applicable) + &:before + opacity: 1 + + // Menu item divider + &:after + display: none + +// Close button +#close-menu + padding: 0 + position: absolute + top: 2.5vw + right: @top + width: 30px + height: @width + z-index: 1 + cursor: pointer + display: none + transition: color 0.2s + + &:after + display: none + + &:hover + @apply text-pink + + // Only display at the top level of the menu + .mm--main & + display: block diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php index ec657b5..18e2f36 100644 --- a/wp-content/themes/CCV/resources/views/partials/header.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php @@ -14,7 +14,7 @@
-