@appartmint/mint 0.13.3 → 0.14.0

package/src/ts/imports/components/header.ts

@@ -12,9 +12,12 @@ import mintSettings from '../util/settings';
  */
 export class mintHeader {
     /**
-     * Last-logged window width
+     * Navbar settings
      */
-    lastWidth: number = mintUtil.windowWidth();
+     settings: {[key: string]: any} = {
+        from: mintSide.Top,
+        fixed: true
+    };
 
     /**
      * Frequently-referenced elements
@@ -25,17 +28,11 @@ export class mintHeader {
      * Initializes and closes the menu
      */
     constructor (settings?: {[key: string]: any}) {
-        let defaultSettings: {[key: string]: any} = {
-            from: mintSide.Top,
-            fixed: true
-        };
-        mintSettings.set({ ...defaultSettings, ...settings });
-        
+        this.settings = {...this.settings, ...settings};
+
         this.attachElements();
         this.attachEvents();
         this.addClasses();
-        
-        this.setMobileMenu();
     }
 
     /**
@@ -44,27 +41,27 @@ export class mintHeader {
     attachElements () : void {
         this.el.html = document.querySelector('html');
         this.el.body = document.querySelector('body');
-        this.el.header = document.getElementById(mintSelectors.getId('header'));
-        this.el.mobileButton = this.el.header?.querySelector(mintSelectors.controls(mintSelectors.getId('wrapper'))) || null;
-        this.el.wrapper = document.getElementById(mintSelectors.getId('wrapper'));
+        this.el.header = document.getElementById('mint-header');
+        this.el.mobileButton = this.el.header?.querySelector(mintSelectors.controls('mint-wrapper')) || null;
+        this.el.wrapper = document.getElementById('mint-wrapper');
     }
 
     /**
      * Adds events to the dom
      */
     attachEvents () : void {
-        //window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default, { trailing: false }));
+        window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default));
         window.addEventListener('scroll', mintUtil.throttleEvent(this.eHandleScroll.bind(this), mintSettings.delay.default, { trailing: false }));
 
-        let focusables: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(mintSelectors.focusable),
-            lastFocusable: HTMLElement | undefined = focusables?.[focusables?.length - 1];
+        let focusables = this.el.header?.querySelectorAll(mintSelectors.focusable),
+            lastFocusable = focusables?.[focusables?.length - 1];
         lastFocusable?.addEventListener('keydown', mintUtil.throttleEvent(this.eWrapTab.bind(this)));
-        focusables?.forEach((focusable: HTMLElement) => {
+        focusables?.forEach((focusable) => {
             focusable.addEventListener('keydown', mintUtil.throttleEvent(this.eHandleKeypress.bind(this)));
         });
 
-        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(mintSelectors.controls() + mintSelectors.neg(mintSelectors.controls(mintSelectors.ids.wrapper as string)));
-        menuButtons?.forEach((menuButton: HTMLElement) => {
+        let menuButtons = this.el.wrapper?.querySelectorAll(mintSelectors.controls());
+        menuButtons?.forEach((menuButton) => {
             menuButton.addEventListener('click', mintUtil.throttleEvent(this.eToggleMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
         });
 
@@ -73,11 +70,17 @@ export class mintHeader {
     }
 
     /**
-     * Adds classes that inform the styles 
+     * Adds classes that inform the styles based on settings
      */
     addClasses () : void {
-        if (mintSettings.fixed) {
-            this.el.body?.classList.add(mintSelectors.getClass('fixed'));
+        this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
+        this.el.header?.classList.add(`mint-${mintSide[this.settings.from ?? 0].toLowerCase()}`);
+
+        if (this.settings.fixed) {
+            this.el.body?.classList.add('mint-fixed');
+        }
+        if (this.settings.tray) {
+            this.el.header?.classList.add('mint-tray');
         }
     }
 
@@ -95,7 +98,7 @@ export class mintHeader {
         }, mintSettings.delay.fast);
 
         if (open) {
-            if (mintSettings.fixed !== true) {
+            if (this.settings.fixed !== true) {
                 window.scroll({
                     top: 0,
                     left: 0,
@@ -105,16 +108,26 @@ export class mintHeader {
 
             setTimeout(() => {
                 if (this.el.html) {
-                    this.el.html.style.overflow = 'hidden';
+                    let isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+                        overflow = 'auto';
+
+                    if (this.settings.tray) {
+                        if (isMobile) {
+                            overflow = 'hidden';
+                        }
+                    } else {
+                        overflow = 'hidden';
+                    }
+                    this.el.html.style.overflow = overflow;
                 }
-            }, mintSettings.from === mintSide.Left ? mintSettings.delay.default : mintSettings.delay.instant);
+            }, this.settings.from === mintSide.Left ? mintSettings.delay.default : mintSettings.delay.instant);
             
             if (this.el.wrapper) {
                 this.el.wrapper.style.display = 'flex';
             }
 
             requestAnimationFrame(() => {
-                this.el.wrapper?.classList.add(mintSelectors.getClass('open'));
+                this.el.wrapper?.classList.add('mint-open');
             });
         } else {
             if (this.el.html) {
@@ -122,7 +135,7 @@ export class mintHeader {
             }            
             
             requestAnimationFrame(() => {
-                this.el.wrapper?.classList.remove(mintSelectors.getClass('open'));
+                this.el.wrapper?.classList.remove('mint-open');
             });
 
             this.closeAllMenus();
@@ -210,7 +223,7 @@ export class mintHeader {
         let activeButton: HTMLElement | null = document.activeElement as HTMLElement | null,
             activeMenu: HTMLElement | null = activeButton?.nextElementSibling as HTMLElement | null,
             showing: boolean = activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        if (activeButton?.getAttribute('aria-controls') === mintSelectors.ids.wrapper) {
+        if (activeButton?.getAttribute('aria-controls') === 'mint-wrapper') {
             activeMenu = this.el.wrapper;
         }
 
@@ -252,12 +265,24 @@ export class mintHeader {
     /**
      * Closes the mobile menu when the window resizes
      */
-    eHandleResize (e: Event) : void {
-        // Also check if resized from mobile to desktop
-        if (mintUtil.windowWidth() !== this.lastWidth) {
-            this.setMobileMenu();
+    eHandleResize () : void {
+        let isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true',
+            isMobile = mintUtil.windowWidth() <= mintSettings.break.sm,
+            overflow = 'auto';
+        
+        if (isOpen) {
+            if (this.settings.tray) {
+                if (isMobile) {
+                    overflow = 'hidden';
+                }
+            } else {
+                overflow = 'hidden';
+            }
+        }
+
+        if (this.el.html) {
+            this.el.html.style.overflow = overflow;
         }
-        this.lastWidth = mintUtil.windowWidth();
     }
 
     /**
@@ -289,7 +314,7 @@ export class mintHeader {
             subMenu = target?.closest('li');
         switch (e.key.toLowerCase()) {
             case 'escape':
-                if (subMenu?.classList.contains(mintSelectors.classes.open as string)) {
+                if (subMenu?.classList.contains('mint-open')) {
                     this.setMenu(subMenu);
                 } else {
                     this.setMobileMenu();
@@ -370,7 +395,7 @@ export class mintHeader {
      * Runs after the mobile menu transitions
      */
     eTransitionEnd () : void {
-        if (this.el.wrapper?.classList.contains(mintSelectors.getClass('open')) === false ) {
+        if (this.el.wrapper?.classList.contains('mint-open') === false ) {
             this.el.wrapper.style.display = 'none';
         }
     };

package/src/ts/imports/enum.ts

@@ -1,9 +1,9 @@
-/**
- * Side Enum
- */
- export enum mintSide {
-    Top,
-    Right,
-    Bottom,
-    Left
-};
+/**
+ * Side Enum
+ */
+ export enum mintSide {
+    Top,
+    Right,
+    Bottom,
+    Left
+};

package/src/ts/imports/models/color.ts

@@ -1,96 +1,96 @@
-/**
- * Color
- */
-export class mintColor {
-    protected static hexBase: number = 16;
-    protected static hexMax: string = 'FF';
-    public r: number;
-    public g: number;
-    public b: number;
-    public a: number;
-
-    constructor (args: {[key: string]: number | string}) {
-        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
-        if (typeof args.color === 'string') {
-            this.stringConstructor(args.color);
-        }
-    }
-
-    /**
-     * Constructor from a string argument
-     */
-    protected stringConstructor (str: string) : void {
-        if (str.startsWith('#')) {
-            this.hexConstructor(str);
-        } else {
-            if (~str.indexOf('linear-gradient')) {
-                str = str.substring(str.indexOf('linear-gradient'), str.length);
-            }
-            this.rgbConstructor(str);
-        }
-    }
-
-    /**
-     * Constructor from a hex argument
-     */
-    protected hexConstructor (hex: string) : void {
-        switch (hex.length) {
-            case 1:
-            case 5:
-            case 6:
-                return;
-            case 2:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
-                break;
-            case 3:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
-                break;
-            case 4:
-                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
-                break;
-            case 7:
-                hex += mintColor.hexMax;
-                break;
-            case 8:
-                hex += hex[hex.length - 1];
-                break;
-            default:
-                hex = hex.substring(0, 9);
-        }
-
-        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
-        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
-        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
-        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
-    }
-
-    /**
-     * Constructor from an rgba argument
-     */
-    protected rgbConstructor (rgb: string) : void {
-        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
-        if (match) {
-            this.r = parseInt(match[1]);
-            this.g = parseInt(match[2]);
-            this.b = parseInt(match[3]);
-            this.a = parseFloat(match[4]);
-        }
-    }
-
-    /**
-     * Returns the perceived brightness of the color
-     */
-    getBrightness () : number {
-        if (this.a === 0) {
-            return 262;
-        }
-        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
-            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
-        }
-        return -1;
-    }
-}
-export default mintColor;
+/**
+ * Color
+ */
+export class mintColor {
+    protected static hexBase: number = 16;
+    protected static hexMax: string = 'FF';
+    public r: number;
+    public g: number;
+    public b: number;
+    public a: number;
+
+    constructor (args: {[key: string]: number | string}) {
+        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
+        if (typeof args.color === 'string') {
+            this.stringConstructor(args.color);
+        }
+    }
+
+    /**
+     * Constructor from a string argument
+     */
+    protected stringConstructor (str: string) : void {
+        if (str.startsWith('#')) {
+            this.hexConstructor(str);
+        } else {
+            if (~str.indexOf('linear-gradient')) {
+                str = str.substring(str.indexOf('linear-gradient'), str.length);
+            }
+            this.rgbConstructor(str);
+        }
+    }
+
+    /**
+     * Constructor from a hex argument
+     */
+    protected hexConstructor (hex: string) : void {
+        switch (hex.length) {
+            case 1:
+            case 5:
+            case 6:
+                return;
+            case 2:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
+                break;
+            case 3:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
+                break;
+            case 4:
+                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
+                break;
+            case 7:
+                hex += mintColor.hexMax;
+                break;
+            case 8:
+                hex += hex[hex.length - 1];
+                break;
+            default:
+                hex = hex.substring(0, 9);
+        }
+
+        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
+        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
+        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
+        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
+    }
+
+    /**
+     * Constructor from an rgba argument
+     */
+    protected rgbConstructor (rgb: string) : void {
+        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
+        if (match) {
+            this.r = parseInt(match[1]);
+            this.g = parseInt(match[2]);
+            this.b = parseInt(match[3]);
+            this.a = parseFloat(match[4]);
+        }
+    }
+
+    /**
+     * Returns the perceived brightness of the color
+     */
+    getBrightness () : number {
+        if (this.a === 0) {
+            return 262;
+        }
+        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
+            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
+        }
+        return -1;
+    }
+}
+export default mintColor;

package/src/ts/imports/util/display.ts

@@ -1,7 +1,7 @@
-/**
- * Handles the display of elements
- */
-export abstract class mintDisplay {
-
-};
+/**
+ * Handles the display of elements
+ */
+export abstract class mintDisplay {
+
+};
 export default mintDisplay;

package/src/ts/imports/util/event.ts

@@ -1,7 +1,7 @@
-/**
- * Event helper functions
- */
-export abstract class mintEvent {
-
-};
-export default mintEvent;
+/**
+ * Event helper functions
+ */
+export abstract class mintEvent {
+
+};
+export default mintEvent;

package/src/ts/imports/util/list.ts

@@ -1,19 +1,19 @@
-/**
- * List functions for the util library
- */
-export abstract class mintList {
-	/**
-	 * Returns a copy of the provided list with the items in random order
-	 * @param list - the list to shuffle
-	 * @returns - the shuffled list
-	 */
-	static shuffle (list: any[]): any[] {
-		let copy = [...list];
-		for (let i = copy.length - 1; i > 0; i--) {
-			const j = Math.floor(Math.random() * (i + 1));
-			[copy[i], copy[j]] = [copy[j], copy[i]];
-		}
-		return copy;
-	}
-};
-export default mintList;
+/**
+ * List functions for the util library
+ */
+export abstract class mintList {
+	/**
+	 * Returns a copy of the provided list with the items in random order
+	 * @param list - the list to shuffle
+	 * @returns - the shuffled list
+	 */
+	static shuffle (list: any[]): any[] {
+		let copy = [...list];
+		for (let i = copy.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[copy[i], copy[j]] = [copy[j], copy[i]];
+		}
+		return copy;
+	}
+};
+export default mintList;

package/src/ts/imports/util/math.ts

@@ -1,17 +1,17 @@
-/**
- * Math functions for the util library
- */
-export abstract class mintMath {
-    /**
-     * Get a random integer between min and max
-     * @param max Maximum value to return
-     * @param min Minimum value to return (default is 0)
-     * @returns a random integer between min and max
-     */
-    static randomInt (max: number, min: number = 0): number {
-        min = Math.ceil(min);
-        max = Math.floor(max);
-        return Math.floor(Math.random() * (max - min) + min);
-    }
-};
-export default mintMath;
+/**
+ * Math functions for the util library
+ */
+export abstract class mintMath {
+    /**
+     * Get a random integer between min and max
+     * @param max Maximum value to return
+     * @param min Minimum value to return (default is 0)
+     * @returns a random integer between min and max
+     */
+    static randomInt (max: number, min: number = 0): number {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+};
+export default mintMath;

package/src/ts/imports/util/selectors.ts

@@ -75,33 +75,6 @@ export abstract class mintSelectors {
      */
     static subMenu: string = `${this.subMenuButtons} + ul${this.hasId}`;
 
-    /**
-     * Frequently-used ids
-     */
-    static ids: {[key: string]: string | {[key: string]: string}} = {
-        header: this.prefix('header'),
-        logo: this.prefix('logo'),
-        wrapper: this.prefix('wrapper'),
-        mainContent: this.prefix('main-content')
-    };
-
-    /**
-     * Classes
-     */
-    static classes: {[key: string]: string | {[key: string]: string}} = {
-        sides: {
-            top: this.prefix('top'),
-            right: this.prefix('right'),
-            bottom: this.prefix('bottom'),
-            left: this.prefix('left')
-        },
-        srOnly: this.prefix('sr-only'),
-        js: this.prefix('js'),
-        ready: this.prefix('ready'),
-        fixed: this.prefix('fixed'),
-        open: this.prefix('open')
-    };
-
     /**
      * Adds the library prefix to the beginning of the provided string
      * @param base - the string to be prefixed
@@ -175,24 +148,6 @@ export abstract class mintSelectors {
         return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.hasExpanded;
     }
 
-    /**
-     * Returns the id of the requested element
-     */
-    static getId (id?: string) : string {
-        return this.ids[id ?? -1] as string ?? '';
-    }
-
-    /**
-     * Returns the class of the requested element
-     */
-    static getClass (className?: string, classGroup?: string) : string {
-        if (classGroup) {
-            let group: {[key: string]: string} = this.classes[classGroup] as {[key: string]: string};
-            return group[className ?? -1] ?? '';
-        }
-        return this.classes[className ?? -1] as string ?? '';
-    }
-
     /**
      * Returns a NodeList of HTMLElements within the given element that are focusable
      * @param el - the element whose focusable children will be returned

package/src/ts/imports/util/settings.ts

@@ -1,9 +1,3 @@
-/**
- * Imports
- */
-import { mintSide } from '../enum';
-import { mintSelectors } from './selectors';
-
 /**
  * Settings management
  * @public
@@ -32,14 +26,16 @@ export abstract class mintSettings {
     };
 
     /**
-     * Side of the window the mobile navbar enters from
+     * Breakpoint variables
      */
-    static from?: mintSide;
-
-    /**
-    * Whether the navbar is fixed or not
-    */
-    static fixed?: boolean;
+    static break: {[key: string]: number} = {
+        z: 0,
+        xs: 480,
+        sm: 768,
+        md: 1024,
+        lg: 1200,
+        xl: 1440
+    };
 
     /**
      * Update the provided settings variables
@@ -65,12 +61,10 @@ export abstract class mintSettings {
             }
         }
 
-        if (typeof settings.from === 'number') {
-            this.setFrom(settings.from);
-        }
-
-        if (typeof settings.fixed === 'boolean') {
-            this.setFixed(settings.fixed);
+        if (settings.break && Object.keys(settings.break).length) {
+            if (Object.values(settings.break).reduce((prev: any, next: any) => prev && typeof next === 'number', true)) {
+                this.break = {...this.break, ...settings.break};
+            }
         }
     }
 
@@ -87,34 +81,6 @@ export abstract class mintSettings {
             slow: this.delayBase + this.delayStep * 5
         };
     }
-
-    /**
-     * Updates the direction the navbar enters from
-     */
-    protected static setFrom (from: mintSide) : void {
-        if (this.from !== from) {
-            this.from = from;
-            let header: HTMLElement | null = document.getElementById(mintSelectors.getId('header'));
-            header?.classList.remove(...Object.values(mintSelectors.classes.sides));
-            header?.classList.add(mintSelectors.getClass(mintSide[this.from].toLowerCase(), 'sides'));
-        }
-    }
-
-    /**
-     * Updates whether or not the navbar is fixed
-     */
-    protected static setFixed (fixed: boolean) : void {
-        if (this.fixed !== fixed) {
-            this.fixed = fixed;
-            let header: HTMLElement | null = document.getElementById(mintSelectors.getId('header')),
-                fixedClass: string = mintSelectors.getClass('fixed');
-            if (this.fixed) {
-                header?.classList.add(fixedClass);
-            } else {
-                header?.classList.remove(fixedClass);
-            }
-        }
-    }
 };
 
 export default mintSettings;

package/src/ts/imports/util/window.ts

@@ -1,7 +1,7 @@
-/**
- * Functions related to the browser window.
- */
-export abstract class mintWindow {
-
-};
+/**
+ * Functions related to the browser window.
+ */
+export abstract class mintWindow {
+
+};
 export default mintWindow;