@iamproperty/components 7.8.2--beta6 → 7.8.2--beta7

package/assets/js/components/nav/nav.component.js

@@ -1,9 +1,4 @@
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-    event: 'customElementRegistered',
-    element: 'nav',
-});
+import { navTemplate, branchSelector, menuEvents, megaMenuTitles, megaMenusEvents, accountMenuEvents, backdropEvents } from '../../modules/nav';
 class iamNav extends HTMLElement {
     constructor() {
         super();
@@ -11,41 +6,16 @@ class iamNav extends HTMLElement {
         const assetLocation = document.body.hasAttribute('data-assets-location')
             ? document.body.getAttribute('data-assets-location')
             : '/assets';
-        const loadCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
+        const navCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
         const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
+        template.innerHTML = /* HTML */ `
     <style class="styles">
-
-    ${loadCSS}
-    </style>
-    <style class="doc-styles">
+    ${navCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="container">
-      <slot name="logo"></slot>
-      <div class="buttons-holder"></div>
-      <button class="btn-menu" part="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
-
-      <div class="menu__outer">
-        <div class="menu closed">
 
-          <div class="menu__primary">
-            <slot></slot>
-            <slot name="dual"></slot>
-          </div>
-          <div class="dialog__wrapper d-none" id="search-wrapper"></div>
-          <slot name="actions"></slot>
-          <div class="menu__secondary bg-light">
-            <div class="container">
-            <slot name="secondary"></slot>
-            </div>
-          </div>
-        </div>
-        <slot name="menus"></slot>
-      </div>
-    </div>
-    <div class="backdrop" part="backdrop"></div>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    ${navTemplate}
     `;
         shadowRoot.appendChild(template.content.cloneNode(true));
         // insert extra CSS
@@ -53,216 +23,38 @@ class iamNav extends HTMLElement {
             document.head.insertAdjacentHTML('beforeend', `<style id="navGlobal">${loadExtraCSS}</style>`);
     }
     connectedCallback() {
-        // Load external CSS if needed
-        if (this.hasAttribute('data-css'))
-            this.shadowRoot
-                .querySelector('.doc-styles')
-                .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
-        const menuButton = this.shadowRoot.querySelector('.btn-menu');
-        const menu = this.shadowRoot.querySelector('.menu');
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const iamNav = this;
+        var _a;
         const backdrop = this.shadowRoot.querySelector('.backdrop');
-        const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
-        // Check the content
-        const createNavMenu = (component) => {
-            buttonsHolder.innerHTML = '';
-            component.querySelectorAll(':scope > *').forEach(function (element) {
-                const tagname = element.tagName;
-                switch (tagname) {
-                    case 'BUTTON':
-                        if (!element.hasAttribute('slot')) {
-                            element.setAttribute('slot', 'actions');
-                            menu.classList.add('has-actions');
-                        }
-                        break;
-                }
-                // Create menu button
-                if (element.classList.contains('nav--menu') &&
-                    element.hasAttribute('data-title') &&
-                    element.hasAttribute('data-icon')) {
-                    const title = element.getAttribute('data-title');
-                    const iconClass = element.getAttribute('data-icon');
-                    // Create the menu button that sits seperately to the menu
-                    const button = document.createElement('button');
-                    button.setAttribute('slot', title);
-                    button.classList.add('btn-menu');
-                    button.setAttribute('part', 'btn-menu');
-                    button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
-                    buttonsHolder.insertAdjacentElement('beforeend', button);
-                    const mdButton = button.querySelector('.btn-primary');
-                    // Make sure the menu is added to the right part of the component
-                    element.setAttribute('slot', 'menus');
-                    // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown
-                    if (element.classList.contains('open')) {
-                        button.setAttribute('aria-expanded', true);
-                        mdButton.classList.toggle('active');
-                        component.classList.add('open');
-                        backdrop.classList.add('show');
-                    }
-                    else {
-                        element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
-                    }
-                    // Click event
-                    button.addEventListener('click', function (e) {
-                        e.preventDefault();
-                        button.toggleAttribute('aria-expanded');
-                        console.log(element);
-                        element.classList.toggle('open');
-                        mdButton.classList.toggle('active');
-                        // Close desktop menus
-                        const openMenu = component.querySelector(':scope > details[open]');
-                        if (openMenu)
-                            openMenu.removeAttribute('open');
-                        // Close the main menu and fix states on the button, iamNav component and backdrop
-                        if (element.classList.contains('open')) {
-                            menu.classList.remove('open');
-                            menuButton.removeAttribute('aria-expanded');
-                            setTimeout(function () {
-                                menu.classList.add('closed');
-                            }, 1000); // Delay until its close so the animation is broken
-                            component.classList.add('open');
-                            backdrop.classList.add('show');
-                            element.classList.remove('closed');
-                        }
-                        else {
-                            component.classList.remove('open');
-                            backdrop.classList.remove('show');
-                            setTimeout(function () {
-                                element.classList.add('closed');
-                            }, 1000);
-                        }
-                        // Close any open menus
-                        component.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
-                            if (openmenu != element) {
-                                openmenu.classList.remove('open');
-                            }
-                        });
-                        component.shadowRoot
-                            .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')
-                            .forEach(function (selectedButton) {
-                            if (selectedButton != button) {
-                                selectedButton.removeAttribute('aria-expanded');
-                                const innerBtn = selectedButton.querySelector('.btn-primary');
-                                innerBtn.classList.remove('active');
-                            }
-                        });
-                    }, false);
-                }
-            });
-            component.querySelectorAll('details').forEach(function (element) {
-                element.classList.add('details--revert');
-            });
-        };
-        createNavMenu(this);
-        this.addEventListener('rebuilt', () => {
-            console.log('rebuilt nav');
-            createNavMenu(this);
-        });
+        const menuButton = this.shadowRoot.querySelector('#btn-menu');
+        const menu = this.shadowRoot.querySelector('.menu');
+        const accountMenuButton = this.shadowRoot.querySelector('#btn-menu-account');
+        const accountMenu = this.shadowRoot.querySelector('.nav--menu');
+        const accountBtnTitle = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#account-btn-title');
+        // #region Add Helper classes
         // Has secondary link
         if (this.querySelector('[slot="secondary"]')) {
-            menu.classList.add('has-secondary');
+            this.classList.add('has-secondary');
+        }
+        // #endregion
+        accountBtnTitle.innerHTML = this.hasAttribute('data-account-btn-title') ? this.getAttribute('data-account-btn-title') : 'My account';
+        if (!this.querySelector('[slot="account"]')) {
+            accountMenuButton === null || accountMenuButton === void 0 ? void 0 : accountMenuButton.remove();
+            accountMenu === null || accountMenu === void 0 ? void 0 : accountMenu.remove();
+            accountBtnTitle === null || accountBtnTitle === void 0 ? void 0 : accountBtnTitle.remove();
         }
-        // Open and close the menu
-        menuButton.addEventListener('click', function (e) {
-            e.preventDefault();
-            //menuButton.toggleAttribute('aria-expanded');
-            menu.classList.toggle('open');
-            // Close any other menus
-            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
-                element.classList.remove('open');
-                setTimeout(function () {
-                    element.classList.add('closed');
-                }, 1000);
-            });
-            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
-                element.removeAttribute('aria-expanded');
-                const innerBtn = element.querySelector('.btn-primary');
-                innerBtn.classList.remove('active');
-            });
-            if (menu.classList.contains('open')) {
-                iamNav.classList.add('open');
-                menu.classList.remove('closed');
-            }
-            else {
-                iamNav.classList.remove('open');
-                setTimeout(function () {
-                    menu.classList.add('closed');
-                }, 1000);
-            }
-        }, false);
         // Allow outside JS to close the menu
         this.addEventListener('request-close', () => {
             menuButton.removeAttribute('aria-expanded');
             menu.classList.remove('open');
-            iamNav.classList.remove('open');
+            this.classList.remove('open');
         });
-        // Close the menu on the click of the backdrop on desktop
-        backdrop.addEventListener('click', () => {
-            const openMenu = this.querySelector('details[open] summary');
-            if (openMenu)
-                openMenu.click();
-            iamNav.classList.toggle('open');
-            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
-                element.classList.remove('open');
-            });
-            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
-                element.removeAttribute('aria-expanded');
-                const innerBtn = element.querySelector('.btn-primary');
-                innerBtn.classList.remove('active');
-            });
-            backdrop.classList.remove('show');
-        });
-        // On desktop close other menu's (details) when one is clicked
-        this.addEventListener('click', (event) => {
-            if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
-                if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {
-                    const summary = event.target.closest('summary');
-                    const details = summary.closest('details');
-                    const wrapper = details.parentNode;
-                    if (details.hasAttribute('open'))
-                        details.removeAttribute('open');
-                    else
-                        details.setAttribute('open', 'true');
-                    // Close any bespoke menus
-                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
-                        element.classList.remove('open');
-                        setTimeout(function () {
-                            menu.classList.add('closed');
-                        }, 1000);
-                    });
-                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
-                        element.removeAttribute('aria-expanded');
-                        const innerBtn = element.querySelector('.btn-primary');
-                        innerBtn.classList.remove('active');
-                    });
-                    // Close any other dropdowns on the same level
-                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {
-                        if (detailsArrayElement != details)
-                            detailsArrayElement.removeAttribute('open');
-                    });
-                    if (this.querySelectorAll(':scope > details[open]').length) {
-                        backdrop.classList.add('show');
-                        iamNav.classList.add('open');
-                        if (this.querySelectorAll(':scope > details[open][slot="secondary"]').length)
-                            iamNav.classList.add('open-secondary');
-                    }
-                    else {
-                        backdrop.classList.remove('show');
-                        iamNav.classList.remove('open');
-                        iamNav.classList.remove('open-secondary');
-                    }
-                    event.preventDefault();
-                }
-            }
-        });
-        // Mega menu title
-        this.querySelectorAll('details').forEach((detailsElement) => {
-            const summary = detailsElement.querySelector('summary');
-            const containerDiv = detailsElement.querySelector(':Scope > div');
-            containerDiv.setAttribute('data-title', summary.textContent);
-        });
-        // Search
+        menuEvents(this, menu, menuButton, accountMenu, accountMenuButton);
+        megaMenuTitles(this);
+        megaMenusEvents(this, menu, menuButton, accountMenu, accountMenuButton, backdrop);
+        accountMenuEvents(this, menu, menuButton, accountMenu, accountMenuButton, backdrop);
+        backdropEvents(this, menu, menuButton, accountMenu, accountMenuButton, backdrop);
+        branchSelector(this);
+        // #region Search
         if (this.querySelector('[slot="search"]')) {
             menu.classList.add('has-search');
             const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
@@ -299,24 +91,7 @@ class iamNav extends HTMLElement {
                 searchButton.removeAttribute('aria-expanded');
             });
         }
-        if (this.classList.contains('nav--sticky')) {
-            let oldScrollY = window.scrollY;
-            window.onscroll = function (e) {
-                if (oldScrollY < window.scrollY) {
-                    document.body.setAttribute('data-direction', 'down');
-                }
-                else {
-                    document.body.setAttribute('data-direction', 'up');
-                }
-                if (window.scrollY > 100) {
-                    document.body.classList.add('past100');
-                }
-                else {
-                    document.body.classList.remove('past100');
-                }
-                oldScrollY = window.scrollY;
-            };
-        }
+        // #endregion
     }
 }
 export default iamNav;