@appartmint/mint 0.12.17 → 0.12.28

package/src/ts/imports/util/object.ts

@@ -0,0 +1,141 @@
+/**
+ * Object functions for the util library
+ */
+export abstract class mintObject {
+    /**
+     * Returns true if the provided objects have the same entries
+     */
+     static isSimilar (obj1: any, obj2: any) : boolean {
+        let keys: string[] = Object.keys(obj1);
+        if (keys.length !== Object.keys(obj2).length) {
+            return false;
+        }
+        let isSimilar: boolean = true;
+        keys.forEach((key: string) => {
+            if (obj1[key] !== obj2[key]) {
+                isSimilar = false;
+            }
+        });
+        return isSimilar;
+    };
+
+    /**
+     * Returns true if the first object has at least the same
+     * entries as the second object
+     * @param superset - the object to check
+     * @param subset - the object whose entries are required
+     * @returns - true if the first object is a superset of the second
+     * @recursive
+     */
+    static isSuperset (superset: any, subset: any) : boolean {
+        let isSuperset: boolean = true;
+        
+        // Base case - if the objects are equal, it is a superset
+        if (superset === subset) {
+            return isSuperset;
+        }
+
+        // If the subset isn't an object or array, and doesn't
+        // satisfy the base case, it isn't a superset
+        try {
+            if (Object.keys(subset).length === 0) {
+                return !isSuperset;
+            }
+        }
+        // If the subset is null or undefined, and doesn't satisfy
+        // the base case, it isn't a superset
+        // TODO: Check if other exceptions could occur
+        catch (e) {
+            return !isSuperset;
+        }
+
+        // If the children of the subset are subsets of the
+        // respective children of the superset, it is a superset
+        Object.keys(subset).forEach((key: string) => {
+            isSuperset = isSuperset && mintObject.isSuperset(superset[key], subset[key]);
+        });
+        return isSuperset;
+    };
+
+    /**
+     * Removes object entries by key
+     * @alias mintObject.removeKeys
+     * @param object - the object to remove entries from
+     * @param keys - the keys to remove
+     */
+    static remove (object: any, keys: string[]) : Object {
+        return this.removeKeys(object, keys);
+    };
+
+    /**
+     * Removes object entries by key
+     * @param object - the object to remove entries from
+     * @param keys - the keys to remove
+     */
+    static removeKeys (object: any, keys: string[]) : any {
+        return Object.keys(object).reduce((obj: any, key: string) => {
+            if (!keys.includes(key)) {
+                obj[key] = object[key];
+            }
+            return obj;
+        }, {});
+    };
+
+    /**
+     * Removes object entries by value
+     */
+    static removeValues (object: any, values: any[]) : any {
+        return Object.keys(object).reduce((obj: any, key: string) => {
+            if (!values.includes(object[key])) {
+                obj[key] = object[key];
+            }
+            return obj;
+        }, {});
+    };
+    
+    /**
+     * Sorts an object's entries alphabetically by key
+     */
+    static sort (object: any) : Object {
+        return Object.keys(object).sort().reduce((obj: any, key: string) => {
+            obj[key] = object[key];
+            return obj;
+        }, {});
+    };
+
+    /**
+     * @alias mintObject.filterKeys
+     */
+    static filter (object: any, keys: string[]) : Object {
+        return this.filterKeys(object, keys);
+    };
+
+    /**
+     * Filters an object by its keys
+     * @param object - the object to filter
+     * @param keys - the keys to keep
+     * @returns - the filtered object
+     */
+    static filterKeys (object: any, keys: string[]) : Object {
+        return keys.reduce((obj: any, key: string) => {
+            obj[key] = object[key];
+            return obj;
+        }, {});
+    };
+
+    /**
+     * Filters an object by its values
+     * @param object - the object to filter
+     * @param values - the values to keep
+     * @returns - the filtered object
+     */
+    static filterValues (object: any, values: any[]) : Object {
+        return Object.keys(object).reduce((obj: any, key: string) => {
+            if (values.includes(object[key])) {
+                obj[key] = object[key];
+            }
+            return obj;
+        }, {});
+    };
+};
+export default mintObject;

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

@@ -0,0 +1,230 @@
+/**
+ * CSS-selector helpers
+ * @public
+ */
+export abstract class mintSelectors {
+    /**
+     * The library name that will be added as a prefix
+     */
+    static lib: string = 'mint';
+
+    /**
+     * The prefix built from the library name
+     */
+    static pre: string = `${this.lib}-`;
+
+    /**
+     * CSS-selector for disabled elements
+     */
+    static disabled: string = '[disabled]';
+
+    /**
+     * CSS-selector for elements with an aria-controls attribute
+     */
+    static hasControls: string = '[aria-controls]';
+
+    /**
+     * CSS-selector for elements with an aria-expanded attribute
+     */
+    static hasExpanded: string = '[aria-expanded]';
+
+    /**
+     * CSS-selector for elements with an href attribute
+     */
+    static hasLink: string = '[href]';
+
+    /**
+     * CSS-selector for elements with a routerLink attribute
+     */
+    static hasRouterLink: string = '[routerLink]';
+
+    /**
+     * CSS-selector for elements with an id attribute
+     */
+    static hasId: string = '[id]';
+
+    /**
+     * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)
+     */
+    static notTabbable: string = '[tabindex^="-"]';
+
+    /**
+     * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)
+     */
+    static tabbable: string = `[tabindex]${this.neg(this.notTabbable)}`;
+
+    /**
+     * CSS-selector for elements that can receive focus
+     */
+    static focusable: string = `input${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                select${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                textarea${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                button${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                object${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                a${this.hasLink}, a${this.hasRouterLink},
+                                area${this.hasLink},
+                                ${this.tabbable}`.replace(/\s/g, '');
+
+    /**
+     * CSS-selector for submenu buttons
+     */
+    static subMenuButtons: string = `button${this.hasControls}`;
+
+    /**
+     * CSS-selector for submenus
+     */
+    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
+     * @returns - the provided string prefixed with the library name
+     */
+    static prefix (base: string) : string {
+        base = base.toLowerCase();
+        return base.startsWith(this.pre) ? base : `${this.pre}${base}`;
+    }
+
+    /**
+     * Adds two dashes to the beginning of the provided string
+     * @param base - the string to be prefixed
+     * @returns - the provided string prefixed with two dashes
+     */
+    static cssPrefix (base: string) : string {
+        return `--${this.prefix(base.replace(/^-+/, ''))}`;
+    }
+
+    /**
+     * Turns the provided string into a CSS variable call
+     * @param base - the name of the CSS variable to call
+     * @returns - the CSS variable call for the provided string
+     */
+    static cssVar (base: string) : string {
+        return `var(${this.cssPrefix(base)})`;
+    }
+
+    /**
+     * Negates the provided CSS selector
+     * @param base - the CSS selector to negate
+     * @returns - the negated CSS selector
+     */
+    static neg (base: string) : string {
+        return `:not(${base})`;
+    }
+
+    /**
+     * Generates a class CSS selector
+     * @param base - the name of the class to generate
+     * @returns - the generated CSS selector
+     */
+    static class (base: string) : string {
+        return `.${this.prefix(base)}`;
+    }
+
+    /**
+     * Generates an id CSS selector
+     * @param base - the name of the id to generate
+     * @returns - the generated CSS selector
+     */
+    static id (base: string) : string {
+        return `#${this.prefix(base)}`;
+    }
+
+    /**
+     * Generates an aria-controls CSS selector
+     * @param id - the id of the controlled element
+     * @returns - the generated CSS selector
+     */
+    static controls (id?: string | null) : string {
+        return id ? `[aria-controls="${this.prefix(id)}"]` : this.hasControls;
+    }
+
+    /**
+     * Generates an aria-expanded CSS selector
+     * @param bool - whether the element is expanded or not
+     * @returns - the generated CSS selector
+     */
+    static expanded (bool?: boolean | null) : string {
+        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
+     * @returns - the elements within the given element that are focusable
+     */
+    static getFocusables (el?: HTMLElement) : HTMLElement[] {
+        let focusables: HTMLElement[];
+        if (el) {
+            focusables = Array.from(el.querySelectorAll<HTMLElement>(this.focusable));
+        } else {
+            focusables = Array.from(document.querySelectorAll<HTMLElement>(this.focusable));
+        }
+        return focusables.filter((el: HTMLElement) => this.isFocusable(el));
+    }
+
+    /**
+     * Returns true if an element is focusable and false if not,
+     * based on styles (i.e. a parent has display: none;)
+     * NOTE: Still need to determine what other styles may make an element un-focusable
+     * @param el - the element
+     * @returns - true if the element is focusable; false if not
+     */
+    static isFocusable (el: HTMLElement) : boolean {
+        let current: HTMLElement | null = el;
+
+        do {
+            if (window.getComputedStyle(current).getPropertyValue('display').toLowerCase() === 'none') {
+                return false;
+            }
+            current = current.parentElement;
+        } while (current);
+        return true;
+    }
+}
+export default mintSelectors;

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

@@ -0,0 +1,120 @@
+/**
+ * Imports
+ */
+import { mintSide } from '../enum';
+import { mintSelectors } from './selectors';
+
+/**
+ * Settings management
+ * @public
+ */
+export abstract class mintSettings {
+    /**
+     * Value added to all delay variables
+     */
+    static delayBase: number = 0;
+
+    /**
+     * Value multiplied by delay variable index
+     */
+    static delayStep: number = 100;
+
+    /**
+     * Delay variables
+     */
+    static delay: {[key: string]: number} = {
+        instant: this.delayBase + this.delayStep * 0,
+        fast: this.delayBase + this.delayStep * 1,
+        medFast: this.delayBase + this.delayStep * 2,
+        default: this.delayBase + this.delayStep * 3,
+        medSlow: this.delayBase + this.delayStep * 4,
+        slow: this.delayBase + this.delayStep * 5
+    };
+
+    /**
+     * Side of the window the mobile navbar enters from
+     */
+    static from?: mintSide;
+
+    /**
+    * Whether the navbar is fixed or not
+    */
+    static fixed?: boolean;
+
+    /**
+     * Update the provided settings variables
+     * @param settings - Object of settings variables to update
+     */
+    static set (settings: {[key: string]: any}) : void {
+        let newDelay: boolean = false;
+        if (typeof settings.delayBase === 'number') {
+            this.delayBase = settings.delayBase;
+            newDelay = true;
+        }
+        if (typeof settings.delayStep === 'number') {
+            this.delayStep = settings.delayStep;
+            newDelay = true;
+        }
+        if (newDelay) {
+            this.setDelay();
+        }
+
+        if (settings.delay && Object.keys(settings.delay).length) {
+            if (Object.values(settings.delay).reduce((prev: any, next: any) => prev && typeof next === 'number', true)) {
+                this.delay = {...this.delay, ...settings.delay};
+            }
+        }
+
+        if (typeof settings.from === 'number') {
+            this.setFrom(settings.from);
+        }
+
+        if (typeof settings.fixed === 'boolean') {
+            this.setFixed(settings.fixed);
+        }
+    }
+
+    /**
+     * Updates the delay variables based on `this.delayBase` and `this.delayStep`
+     */
+    protected static setDelay () : void {
+        this.delay = {
+            instant: this.delayBase + this.delayStep * 0,
+            fast: this.delayBase + this.delayStep * 1,
+            medFast: this.delayBase + this.delayStep * 2,
+            default: this.delayBase + this.delayStep * 3,
+            medSlow: this.delayBase + this.delayStep * 4,
+            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/text.ts

@@ -0,0 +1,47 @@
+/**
+ * Functions for analyzing and manipulating text.
+ */
+export abstract class mintText {
+	/*static fitContainer () {
+		let $warning: JQuery<HTMLElement> = $(warningSelector);
+		$warning.css({
+			overflow: 'scroll',
+			fontSize: ''
+		});
+		while (($warning?.[0].scrollHeight ?? Number.MIN_SAFE_INTEGER) > ($warning?.innerHeight() ?? Number.MAX_SAFE_INTEGER)) {
+			let fontSize: number = parseInt($warning.css('font-size')) - 1;
+			$warning.css('font-size', fontSize + 'px');
+		}
+	}*/
+
+	/**
+	 * Generate a slug from a string
+	 * @param str - The string to slugify
+	 * @returns The slugified string
+	 */
+	static slug (str: string): string {
+		return str.toLowerCase().replace(/\W+/g, '-').replace(/^-+|-+$/g, '');
+	}
+
+	/**
+	 * Pluralize the given word
+	 */
+	static pluralize (word: string): string {
+		if (word.endsWith('ies') ||
+			word.endsWith('es') ||
+			(word.endsWith('s') && !word.endsWith('us') && !word.endsWith('is') && !word.endsWith('ss'))) {
+			return word;
+		}
+
+		if (word.endsWith('y') && !['a', 'e', 'i', 'o', 'u'].includes(word.charAt(word.length - 2))) {
+			return word.slice(0, -1) + 'ies';
+		}
+
+		if (word.endsWith('s') || word.endsWith('sh') || word.endsWith('ch') || word.endsWith('x') || word.endsWith('z')) {
+			return word + 'es';
+		}
+
+		return word + 's';
+	}
+};
+export default mintText;

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

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

package/src/ts/index.ts

@@ -0,0 +1,33 @@
+/**
+ * A library for building responsive web applications.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Exports
+ */
+// Enums
+export { mintSide } from './imports/enum';
+
+// Components
+export { mintHeader } from './imports/components/header';
+
+// Models
+export { mintColor } from './imports/models/color';
+export { mintItem } from './imports/models/item';
+
+// Utilities
+export { mintDisplay } from './imports/util/display';
+export { mintEvent } from './imports/util/event';
+export { mintIcon } from './imports/util/icon';
+export { mintList } from './imports/util/list';
+export { mintMath } from './imports/util/math';
+export { mintObject } from './imports/util/object';
+export { mintText } from './imports/util/text';
+export { mintWindow } from './imports/util/window';
+
+// Objects
+export { mintSelectors } from './imports/util/selectors';
+export { mintSettings } from './imports/util/settings';
+export { mintUtil, default } from './util';