@appartmint/mint 2.1.3 → 2.1.5

package/dist/js/imports/components/header.d.ts

@@ -15,16 +15,35 @@ export declare class MintHeader {
     el: {
         [key: string]: HTMLElement | null;
     };
+    /**
+     * Event handlers
+     */
+    events: {
+        el: HTMLElement | Window | null;
+        handlers: EventListener[];
+        events: string[];
+    }[];
     /**
      * Initializes and closes the menu
      */
     constructor(settings?: {
         [key: string]: any;
     });
+    /**
+     * Destroys the header
+     */
+    destroy(): void;
     /**
      * Adds elements to {@link el | `this.el`}
      */
     attachElements(): void;
+    /**
+     * Attach event to the given element
+     * @param element - Element to attach event to
+     * @param event - Event to attach
+     * @param handler - Handler to attach
+     */
+    attachEvent(element: HTMLElement | Window | null | undefined, event: string, handler: EventListener): void;
     /**
      * Adds events to the dom
      */
@@ -111,6 +130,10 @@ export declare class MintHeader {
      * Toggles the mobile menu
      */
     eToggleMobileMenu(): void;
+    /**
+     * Closes the mobile menu
+     */
+    eCloseMobileMenu(): void;
     /**
      * Toggles the clicked submenu
      * @param e - Mouse event

package/dist/js/imports/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/ts/imports/components/header.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,qBAAa,UAAU;IACnB;;OAEG;IACF,QAAQ,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAG7B;IAEF;;OAEG;IACH,EAAE,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAA;KAAC,CAAM;IAE7C;;OAEG;gBACU,QAAQ,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC;IAQ5C;;OAEG;IACH,cAAc,IAAM,IAAI;IAQxB;;OAEG;IACH,YAAY,IAAM,IAAI;IAoBtB;;OAEG;IACH,UAAU,IAAM,IAAI;IAYpB;;;OAGG;IACH,aAAa,CAAE,IAAI,GAAE,OAAe,GAAI,IAAI;IAsD5C;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAI1B;;;;OAIG;IACH,OAAO,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,EAC3B,IAAI,GAAE,OAAe,GAAI,IAAI;IActC;;;OAGG;IACH,UAAU,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAI/C;;;OAGG;IACH,aAAa,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAWlD;;;OAGG;IACH,iBAAiB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAUtD;;OAEG;IACH,aAAa,IAAM,IAAI;IAOvB;;OAEG;IACH,eAAe,IAAM,IAAI;IAezB;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAc1B;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAQ3B;;OAEG;IACH,aAAa,IAAM,IAAI;IAoBvB;;OAEG;IACH,aAAa,IAAM,IAAI;IAIvB;;;OAGG;IACH,QAAQ,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IASlC;;;OAGG;IACH,qBAAqB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAyB/C;;;OAGG;IACH,mBAAmB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAiB7C;;;OAGG;IACH,eAAe,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAezC;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAI3B;;;OAGG;IACH,WAAW,CAAE,CAAC,EAAE,UAAU,GAAI,IAAI;IAMlC;;OAEG;IACH,cAAc,IAAM,IAAI;CAK3B;AACD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/ts/imports/components/header.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,qBAAa,UAAU;IAEtB;;OAEM;IACF,QAAQ,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAG7B;IAEF;;OAEG;IACH,EAAE,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAA;KAAC,CAAM;IAEhD;;OAEG;IACH,MAAM,EAAE;QACP,EAAE,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;QAChC,QAAQ,EAAE,aAAa,EAAE,CAAC;QAC1B,MAAM,EAAE,MAAM,EAAE,CAAA;KAChB,EAAE,CAAM;IAGN;;OAEG;gBACU,QAAQ,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC;IAQ/C;;OAEG;IACH,OAAO,IAAM,IAAI;IASd;;OAEG;IACH,cAAc,IAAM,IAAI;IAS3B;;;;;OAKG;IACH,WAAW,CAAE,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,GAAI,IAAI;IAiBzG;;OAEG;IACH,YAAY,IAAM,IAAI;IAqBtB;;OAEG;IACH,UAAU,IAAM,IAAI;IAYpB;;;OAGG;IACH,aAAa,CAAE,IAAI,GAAE,OAAe,GAAI,IAAI;IAsD5C;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAI1B;;;;OAIG;IACH,OAAO,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,EAC3B,IAAI,GAAE,OAAe,GAAI,IAAI;IActC;;;OAGG;IACH,UAAU,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAI/C;;;OAGG;IACH,aAAa,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAWlD;;;OAGG;IACH,iBAAiB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAUtD;;OAEG;IACH,aAAa,IAAM,IAAI;IAOvB;;OAEG;IACH,eAAe,IAAM,IAAI;IAezB;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAc1B;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAQ3B;;OAEG;IACH,aAAa,IAAM,IAAI;IAgCvB;;OAEG;IACH,aAAa,IAAM,IAAI;IAIvB;;;OAGG;IACH,QAAQ,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IASlC;;;OAGG;IACH,qBAAqB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAyB/C;;;OAGG;IACH,mBAAmB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAiB7C;;;OAGG;IACH,eAAe,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAezC;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAI9B;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAIvB;;;OAGG;IACH,WAAW,CAAE,CAAC,EAAE,UAAU,GAAI,IAAI;IAMlC;;OAEG;IACH,cAAc,IAAM,IAAI;CAK3B;AACD,eAAe,UAAU,CAAC"}

package/dist/js/index.js

@@ -34,6 +34,10 @@ class MintHeader {
      * Frequently-referenced elements
      */
     el = {};
+    /**
+     * Event handlers
+     */
+    events = [];
     /**
      * Initializes and closes the menu
      */
@@ -43,6 +47,17 @@ class MintHeader {
         this.attachEvents();
         this.addClasses();
     }
+    /**
+     * Destroys the header
+     */
+    destroy() {
+        this.events.forEach(event => {
+            event.handlers.forEach((handler, index) => {
+                event.el?.removeEventListener(event.events[index], handler);
+            });
+        });
+        this.events = [];
+    }
     /**
      * Adds elements to {@link el | `this.el`}
      */
@@ -52,24 +67,49 @@ class MintHeader {
         this.el.header = document.getElementById('mint-header');
         this.el.mobileButton = this.el.header?.querySelector(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls('mint-wrapper')) || null;
         this.el.wrapper = document.getElementById('mint-wrapper');
+        this.el.main = document.getElementsByTagName('main')[0];
+    }
+    /**
+     * Attach event to the given element
+     * @param element - Element to attach event to
+     * @param event - Event to attach
+     * @param handler - Handler to attach
+     */
+    attachEvent(element, event, handler) {
+        if (element) {
+            let oldElement = this.events.find(e => e.el === element);
+            if (oldElement) {
+                oldElement.handlers.push(handler);
+                oldElement.events.push(event);
+            }
+            else {
+                this.events.push({
+                    el: element,
+                    handlers: [handler],
+                    events: [event]
+                });
+            }
+            element.addEventListener(event, handler);
+        }
     }
     /**
      * Adds events to the dom
      */
     attachEvents() {
-        window.addEventListener('resize', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default));
-        window.addEventListener('scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
+        this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default));
+        this.attachEvent(window, 'scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
+        this.attachEvent(this.el.main, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eCloseMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
         let focusables = this.el.header?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable), lastFocusable = focusables?.[focusables?.length - 1];
-        lastFocusable?.addEventListener('keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
+        this.attachEvent(lastFocusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
         focusables?.forEach((focusable) => {
-            focusable.addEventListener('keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
+            this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
         });
         let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls());
         menuButtons?.forEach((menuButton) => {
-            menuButton.addEventListener('click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
+            this.attachEvent(menuButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
         });
-        this.el.mobileButton?.addEventListener('click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
-        this.el.wrapper?.addEventListener('transitionend', this.eTransitionEnd.bind(this));
+        this.attachEvent(this.el.mobileButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
+        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
     }
     /**
      * Adds classes that inform the styles based on settings
@@ -240,7 +280,19 @@ class MintHeader {
      * Closes the mobile menu when the window resizes
      */
     eHandleResize() {
-        let isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true', isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm, overflow = 'auto';
+        const isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm;
+        let closeMenu = true;
+        if (this.el.header?.classList.contains('mint-tray')) {
+            closeMenu = false;
+        }
+        else if (!this.el.header?.classList.contains('mint-expand')) {
+            closeMenu = false;
+        }
+        if (!isMobile && closeMenu) {
+            this.setMobileMenu(false);
+        }
+        const isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
+        let overflow = 'auto';
         if (isOpen) {
             if (this.settings.tray) {
                 if (isMobile) {
@@ -345,6 +397,12 @@ class MintHeader {
     eToggleMobileMenu() {
         this.toggleMobileMenu();
     }
+    /**
+     * Closes the mobile menu
+     */
+    eCloseMobileMenu() {
+        this.setMobileMenu(false);
+    }
     /**
      * Toggles the clicked submenu
      * @param e - Mouse event