@appartmint/mint 0.12.17 → 0.12.28

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

@@ -0,0 +1,378 @@
+/**
+ * Imports
+ */
+import { mintSide } from '../enum';
+import mintUtil from '../../util';
+import mintSelectors from '../util/selectors';
+import mintSettings from '../util/settings';
+
+/**
+ * Main header functionality
+ * @public
+ */
+export class mintHeader {
+    /**
+     * Last-logged window width
+     */
+    lastWidth: number = mintUtil.windowWidth();
+
+    /**
+     * Frequently-referenced elements
+     */
+    el: {[key: string]: HTMLElement | null} = {};
+
+    /**
+     * 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.attachElements();
+        this.attachEvents();
+        this.addClasses();
+        
+        this.setMobileMenu();
+    }
+
+    /**
+     * Adds elements to {@link el | `this.el`}
+     */
+    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'));
+    }
+
+    /**
+     * Adds events to the dom
+     */
+    attachEvents () : void {
+        //window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default, { trailing: false }));
+        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];
+        lastFocusable?.addEventListener('keydown', mintUtil.throttleEvent(this.eWrapTab.bind(this)));
+        focusables?.forEach((focusable: HTMLElement) => {
+            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) => {
+            menuButton.addEventListener('click', mintUtil.throttleEvent(this.eToggleMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
+        });
+
+        this.el.mobileButton?.addEventListener('click', mintUtil.throttleEvent(this.eToggleMobileMenu.bind(this), mintSettings.delay.slow, { trailing: false }));
+        this.el.wrapper?.addEventListener('transitionend', this.eTransitionEnd.bind(this));
+    }
+
+    /**
+     * Adds classes that inform the styles 
+     */
+    addClasses () : void {
+        if (mintSettings.fixed) {
+            this.el.body?.classList.add(mintSelectors.getClass('fixed'));
+        }
+    }
+
+    /**
+     * Sets the state of the mobile menu
+     * @param open - `true` to open the menu or `false` to close it
+     */
+    setMobileMenu (open: boolean = false) : void {
+        let ariaExpanded: string = open ? 'true' : 'false',
+            ariaLabel: string = open ? 'close menu' : 'open menu';
+
+        this.el.mobileButton?.setAttribute('aria-expanded', ariaExpanded);
+        setTimeout(() => {
+            this.el.mobileButton?.setAttribute('aria-label', ariaLabel);
+        }, mintSettings.delay.fast);
+
+        if (open) {
+            if (mintSettings.fixed !== true) {
+                window.scroll({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            }
+
+            setTimeout(() => {
+                if (this.el.html) {
+                    this.el.html.style.overflow = 'hidden';
+                }
+            }, mintSettings.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'));
+            });
+        } else {
+            if (this.el.html) {
+                this.el.html.style.overflow = 'auto';
+            }            
+            
+            requestAnimationFrame(() => {
+                this.el.wrapper?.classList.remove(mintSelectors.getClass('open'));
+            });
+
+            this.closeAllMenus();
+        }
+    }
+
+    /**
+     * Toggles the state of the mobile menu
+     */
+    toggleMobileMenu () : void {
+        this.setMobileMenu(this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    }
+
+    /**
+     * Sets the state of the provided button's menu
+     * @param button - Button element to set
+     * @param open - `true` to open the menu or `false` to close it
+     */
+    setMenu (button?: HTMLElement | null,
+             open: boolean = false) : void {
+        let ariaExpanded: string = open ? 'true' : 'false',
+            menu: HTMLElement | null = button?.nextElementSibling as HTMLElement | null;
+        if (button && menu) {
+            button.setAttribute('aria-expanded', ariaExpanded);
+            if (open) {
+                mintUtil.show(menu);
+            } else {
+                mintUtil.hide(menu);
+                this.closeSubMenus(button);
+            }
+        }
+    }
+
+    /**
+     * Toggles the state of the provided button's menu
+     * @param button - Button element to toggle
+     */
+    toggleMenu (button?: HTMLElement | null) : void {
+        this.setMenu(button, button?.getAttribute('aria-expanded')?.toLowerCase() !== 'true');
+    }
+
+    /**
+     * Closes all submenus of the provided button's menu
+     * @param button - Button element of the parent menu
+     */
+    closeSubMenus (button?: HTMLElement | null) : void {
+        let menu: HTMLElement | null | undefined = button?.nextElementSibling as HTMLElement,
+            subMenus: NodeListOf<HTMLElement> = menu?.querySelectorAll(mintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
+        subMenus.forEach((child: HTMLElement) => {
+            // setMenu calls this function, so ignore subsub menus
+            if (child.parentElement?.parentElement === menu) {
+                this.setMenu(child);
+            }
+        });
+    }
+
+    /**
+     * Closes all sibling menus of the provided button's menu
+     * @param button - Button element of the sibling menus
+     */
+    closeSiblingMenus (button?: HTMLElement | null) : void {
+        let menu: HTMLElement | null | undefined = button?.parentElement as HTMLElement,
+            siblingMenus: NodeListOf<HTMLElement> = menu?.parentElement?.querySelectorAll(mintSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
+        siblingMenus.forEach((child: HTMLElement) => {
+            if (child !== button) {
+                this.setMenu(child);
+            }
+        });
+    }
+
+    /**
+     * Closes all submenus of the n4vbar
+     */
+    closeAllMenus () : void {
+        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(mintSelectors.subMenuButtons);
+        menuButtons?.forEach((menuButton: HTMLElement) => {
+            this.setMenu(menuButton);
+        });
+    }
+
+    /**
+     * Opens the menu closest to the document's focus
+     */
+    openClosestMenu () : void {
+        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) {
+            activeMenu = this.el.wrapper;
+        }
+
+        if (activeButton?.getAttribute('aria-controls') && activeMenu && !showing) {
+            activeButton.click();
+            let firstFocusable: HTMLElement | null = activeMenu.querySelector(mintSelectors.focusable);
+            firstFocusable?.focus();
+        }
+    }
+
+    /**
+     * Closes the menu closest to the document's focus
+     */
+    closeClosestMenu () : void {
+        let activeElement: HTMLElement | null = document.activeElement as HTMLElement | null,
+            activeMenu: HTMLElement | null = activeElement?.closest(mintSelectors.subMenu) as HTMLElement | null,
+            activeButton: HTMLElement | null = activeMenu?.previousElementSibling ? activeMenu.previousElementSibling as HTMLElement : this.el.mobileButton;
+        if (activeElement?.getAttribute('aria-controls') && activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
+            activeButton = activeElement;
+        }
+
+        if (activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
+            activeButton?.click();
+            activeButton?.focus();
+        }
+    }
+
+    /**
+     * Toggles the menu closest to the document's focus
+     */
+    toggleClosestMenu () : void {
+        if (document.activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
+            this.closeClosestMenu();
+        } else {
+            this.openClosestMenu();
+        }
+    }
+
+    /**
+     * 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();
+        }
+        this.lastWidth = mintUtil.windowWidth();
+    }
+
+    /**
+     * Closes all submenus when the page is scrolled
+     */
+    eHandleScroll () : void {
+        this.closeAllMenus();
+    }
+
+    /**
+     * Sends the focus to the menu button after tabbing past the last menu item
+     * @param e - Keyboard event
+     */
+    eWrapTab (e: KeyboardEvent) : void {
+        if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
+            this.el.mobileButton?.focus();
+            if (document.activeElement === this.el.mobileButton) {
+                e.preventDefault();
+            }
+        }
+    }
+
+    /**
+     * Handles keypresses on n4vbar buttons
+     * @param e - Keyboard event
+     */
+    eHandleButtonKeypress (e: KeyboardEvent) : void {
+        let target = e.target as HTMLElement | null,
+            subMenu = target?.closest('li');
+        switch (e.key.toLowerCase()) {
+            case 'escape':
+                if (subMenu?.classList.contains(mintSelectors.classes.open as string)) {
+                    this.setMenu(subMenu);
+                } else {
+                    this.setMobileMenu();
+                    this.el.menuButton?.focus();
+                }
+                break;
+            case 'arrowleft':
+                this.closeClosestMenu();
+                break;
+            case 'arrowright':
+                this.openClosestMenu();
+                break;
+            case 'enter':
+            case 'space':
+                target?.click();
+                break;
+        }
+    }
+
+    /**
+     * Handles keypresses on n4vbar links
+     * @param e - Keyboard event
+     */
+    eHandleLinkKeypress (e: KeyboardEvent) : void {
+        let target = e.target as HTMLElement | null;
+        switch (e.key.toLowerCase()) {
+            case 'escape':
+            case 'arrowleft':
+                this.closeClosestMenu();
+                break;
+            case 'arrowright':
+                this.openClosestMenu();
+                break;
+            case 'enter':
+            case 'space':
+                target?.click();
+                break;
+        }
+    }
+
+    /**
+     * Handles keypresses on the n4vbar
+     * @param e - Keyboard event
+     */
+    eHandleKeypress (e: KeyboardEvent) : void {
+        if (e.key.toLowerCase() !== 'tab') {
+            e.preventDefault();
+        }
+        const target = e.target as HTMLElement | null;
+        switch (target?.tagName.toLowerCase()) {
+            case 'a':
+                this.eHandleLinkKeypress(e);
+                break;
+            case 'button':
+                this.eHandleButtonKeypress(e);
+                break;
+        }
+    }
+
+    /**
+     * Toggles the mobile menu
+     */
+    eToggleMobileMenu () : void {
+        this.toggleMobileMenu();
+    }
+
+    /**
+     * Toggles the clicked submenu
+     * @param e - Mouse event
+     */
+    eToggleMenu (e: MouseEvent) : void {
+        let target = e.target as HTMLElement | null;
+        this.closeSiblingMenus(target);
+        this.toggleMenu(target);
+    }
+
+    /**
+     * Runs after the mobile menu transitions
+     */
+    eTransitionEnd () : void {
+        if (this.el.wrapper?.classList.contains(mintSelectors.getClass('open')) === false ) {
+            this.el.wrapper.style.display = 'none';
+        }
+    };
+}
+export default mintHeader;

package/src/ts/imports/enum.ts

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

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

@@ -0,0 +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;

package/src/ts/imports/models/item.ts

@@ -0,0 +1,66 @@
+/**
+ * A generic item
+ * @note - this class must be convertable with JSON
+ *       - only add strings, numbers, booleans, arrays, and objects
+ */
+export class mintItem {
+	/**
+	 * Item settings
+	 */
+	version?: number = 0;
+	priority?: number = 0;
+	price?: number = 0;
+	level?: number = 0;
+	size?: number = 0;
+	num?: number = 0;
+	width?: number = 0;
+	height?: number = 0;
+
+	centered?: boolean = false;
+	disabled?: boolean = false;
+	private?: boolean = false;
+
+	/**
+	 * Item properties
+	 */
+	id?: string;
+	slug?: string;
+	name?: string;
+	title?: string;
+	subtitle?: string;
+	description?: string;
+	category?: string;
+	type?: string;
+	unit?: string;
+	logo?: mintItem;
+	icon?: string;
+	position?: string;
+	transform?: string;
+	date?: string;
+
+	/**
+	 * Item links
+	 */
+	src?: string;
+	href?: string;
+	target?: string;
+	routerLink?: string[];
+
+	/**
+	 * Item data
+	 */
+	attr?: { [key: string]: string } = {};
+	params?: { [key: string]: string } = {};
+	options?: { [key: string]: string } = {};
+	lists?: { [key: string]: string[] } = {};
+
+	/**
+	 * Item lists
+	 */
+	paragraphs?: string[] = [];
+	classes?: string[] = [];
+	items?: mintItem[] = [];
+	images?: mintItem[] = [];
+	buttons?: mintItem[] = [];
+};
+export default mintItem;

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

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

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

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

package/src/ts/imports/util/icon.ts

@@ -0,0 +1,67 @@
+/**
+ * Imports
+ */
+import mintObject from "./object";
+
+/**
+ * Icon helper functions
+ */
+export abstract class mintIcon {
+    /**
+     * Default icons
+     */
+    static icons: {[key: string]: string} = {
+        'a[href^="mailto:"]': 'far fa-envelope',
+        'a[href^="tel:"]': 'fas fa-phone-flip',
+        'a[href^="sms:"]': 'far fa-message',
+        'a[href^="https://maps"]': 'fas fa-map-location-dot',
+        'a[href^="http"]': 'fas fa-up-right-from-square'
+    };
+
+    /**
+     * Appends the given icon to the given selector if there is not already an icon appended
+     */
+    static append (icon: string, selector: string): void {
+        let items: NodeListOf<HTMLElement> = document.querySelectorAll(selector);
+        items.forEach((item: HTMLElement) => {
+            let iconElement: HTMLElement = document.createElement('i');
+            iconElement.classList.add(...icon.split(' '));
+            if (!item.querySelector('i')) {
+                item.appendChild(iconElement);
+            }
+			if (iconElement.classList.contains('fa-up-right-from-square')) {
+				item.setAttribute('target', '_blank');
+			}
+        });
+    }
+
+    /**
+     * Updates the icons
+     * @param icons - the icons to update
+     */
+    static update (icons?: {[key: string]: string | false}): void {
+        let activeIcons: {[key: string]: string} = mintObject.removeValues({
+            ...this.icons,
+            ...icons
+        }, [false]);
+
+        Object.keys(activeIcons).forEach((selector: string) => {
+            this.append(activeIcons[selector], selector);
+        });
+    }
+
+    /**
+     * Removes the given icon from the given selector
+     * @param icon - the icon to remove
+     */
+    static remove (icon: string, selector: string): void {
+        let items: NodeListOf<HTMLElement> = document.querySelectorAll(selector);
+        items.forEach((item: HTMLElement) => {
+            let iconElement: HTMLElement | null = item.querySelector('i');
+            if (iconElement) {
+                iconElement.remove();
+            }
+        });
+    }
+};
+export default mintIcon;

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

@@ -0,0 +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;

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

@@ -0,0 +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;