@appartmint/mint 0.8.12 → 0.9.0

package/dist/js/util.js

@@ -0,0 +1,638 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["mintUtil"] = factory();
+	else
+		root["mintUtil"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/ts/imports/enum.ts":
+/*!********************************!*\
+  !*** ./src/ts/imports/enum.ts ***!
+  \********************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mintSide = void 0;
+/**
+ * Side Enum
+ */
+var mintSide;
+(function (mintSide) {
+  mintSide[mintSide["Top"] = 0] = "Top";
+  mintSide[mintSide["Right"] = 1] = "Right";
+  mintSide[mintSide["Bottom"] = 2] = "Bottom";
+  mintSide[mintSide["Left"] = 3] = "Left";
+})(mintSide = exports.mintSide || (exports.mintSide = {}));
+;
+
+/***/ }),
+
+/***/ "./src/ts/imports/util/selectors.ts":
+/*!******************************************!*\
+  !*** ./src/ts/imports/util/selectors.ts ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+var _a;
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mintSelectors = void 0;
+/**
+ * CSS-selector helpers
+ * @public
+ */
+class mintSelectors {
+  /**
+   * 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) {
+    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) {
+    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) {
+    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) {
+    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) {
+    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) {
+    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) {
+    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) {
+    return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.hasExpanded;
+  }
+  /**
+   * Returns the id of the requested element
+   */
+  static getId(id) {
+    var _b;
+    return (_b = this.ids[id !== null && id !== void 0 ? id : -1]) !== null && _b !== void 0 ? _b : '';
+  }
+  /**
+   * Returns the class of the requested element
+   */
+  static getClass(className, classGroup) {
+    var _b, _c;
+    if (classGroup) {
+      let group = this.classes[classGroup];
+      return (_b = group[className !== null && className !== void 0 ? className : -1]) !== null && _b !== void 0 ? _b : '';
+    }
+    return (_c = this.classes[className !== null && className !== void 0 ? className : -1]) !== null && _c !== void 0 ? _c : '';
+  }
+  /**
+   * 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) {
+    let focusables;
+    if (el) {
+      focusables = [...el.querySelectorAll(this.focusable)];
+    } else {
+      focusables = [...document.querySelectorAll(this.focusable)];
+    }
+    return focusables.filter(el => 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) {
+    let current = el;
+    do {
+      if (window.getComputedStyle(current).getPropertyValue('display').toLowerCase() === 'none') {
+        return false;
+      }
+      current = current.parentElement;
+    } while (current);
+    return true;
+  }
+}
+exports.mintSelectors = mintSelectors;
+_a = mintSelectors;
+/**
+ * The library name that will be added as a prefix
+ */
+mintSelectors.lib = 'mint';
+/**
+ * The prefix built from the library name
+ */
+mintSelectors.pre = `${_a.lib}-`;
+/**
+ * CSS-selector for disabled elements
+ */
+mintSelectors.disabled = '[disabled]';
+/**
+ * CSS-selector for elements with an aria-controls attribute
+ */
+mintSelectors.hasControls = '[aria-controls]';
+/**
+ * CSS-selector for elements with an aria-expanded attribute
+ */
+mintSelectors.hasExpanded = '[aria-expanded]';
+/**
+ * CSS-selector for elements with an href attribute
+ */
+mintSelectors.hasLink = '[href]';
+/**
+ * CSS-selector for elements with a routerLink attribute
+ */
+mintSelectors.hasRouterLink = '[routerLink]';
+/**
+ * CSS-selector for elements with an id attribute
+ */
+mintSelectors.hasId = '[id]';
+/**
+ * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)
+ */
+mintSelectors.notTabbable = '[tabindex^="-"]';
+/**
+ * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)
+ */
+mintSelectors.tabbable = `[tabindex]${_a.neg(_a.notTabbable)}`;
+/**
+ * CSS-selector for elements that can receive focus
+ */
+mintSelectors.focusable = `input${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
+                                select${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
+                                textarea${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
+                                button${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
+                                object${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
+                                a${_a.hasLink}, a${_a.hasRouterLink},
+                                area${_a.hasLink},
+                                ${_a.tabbable}`.replace(/\s/g, '');
+/**
+ * CSS-selector for submenu buttons
+ */
+mintSelectors.subMenuButtons = `button${_a.hasControls}`;
+/**
+ * CSS-selector for submenus
+ */
+mintSelectors.subMenu = `${_a.subMenuButtons} + ul${_a.hasId}`;
+/**
+ * Frequently-used ids
+ */
+mintSelectors.ids = {
+  header: _a.prefix('header'),
+  logo: _a.prefix('logo'),
+  wrapper: _a.prefix('wrapper'),
+  mainContent: _a.prefix('main-content')
+};
+/**
+ * Classes
+ */
+mintSelectors.classes = {
+  sides: {
+    top: _a.prefix('top'),
+    right: _a.prefix('right'),
+    bottom: _a.prefix('bottom'),
+    left: _a.prefix('left')
+  },
+  srOnly: _a.prefix('sr-only'),
+  js: _a.prefix('js'),
+  ready: _a.prefix('ready'),
+  fixed: _a.prefix('fixed'),
+  open: _a.prefix('open')
+};
+exports["default"] = mintSelectors;
+
+/***/ }),
+
+/***/ "./src/ts/imports/util/settings.ts":
+/*!*****************************************!*\
+  !*** ./src/ts/imports/util/settings.ts ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+
+var _a;
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mintSettings = void 0;
+/**
+ * Imports
+ */
+const enum_1 = __webpack_require__(/*! ../enum */ "./src/ts/imports/enum.ts");
+const selectors_1 = __webpack_require__(/*! ./selectors */ "./src/ts/imports/util/selectors.ts");
+/**
+ * Settings management
+ * @public
+ */
+class mintSettings {
+  /**
+   * Update the provided settings variables
+   * @param settings - Object of settings variables to update
+   */
+  static set(settings) {
+    let newDelay = 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, next) => prev && typeof next === 'number', true)) {
+        this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);
+      }
+    }
+  }
+  /**
+   * Updates the delay variables based on `this.delayBase` and `this.delayStep`
+   */
+  static setDelay() {
+    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
+   */
+  static setFrom(from) {
+    if (this.from !== from) {
+      this.from = from;
+      let header = document.getElementById(selectors_1.mintSelectors.getId('header'));
+      header === null || header === void 0 ? void 0 : header.classList.remove(...Object.values(selectors_1.mintSelectors.classes.sides));
+      header === null || header === void 0 ? void 0 : header.classList.add(selectors_1.mintSelectors.getClass(enum_1.mintSide[this.from].toLowerCase(), 'sides'));
+    }
+  }
+  /**
+   * Updates whether or not the navbar is fixed
+   */
+  static setFixed(fixed) {
+    if (this.fixed !== fixed) {
+      this.fixed = fixed;
+      let header = document.getElementById(selectors_1.mintSelectors.getId('header')),
+        fixedClass = selectors_1.mintSelectors.getClass('fixed');
+      if (this.fixed) {
+        header === null || header === void 0 ? void 0 : header.classList.add(fixedClass);
+      } else {
+        header === null || header === void 0 ? void 0 : header.classList.remove(fixedClass);
+      }
+    }
+  }
+}
+exports.mintSettings = mintSettings;
+_a = mintSettings;
+/**
+ * Value added to all delay variables
+ */
+mintSettings.delayBase = 0;
+/**
+ * Value multiplied by delay variable index
+ */
+mintSettings.delayStep = 100;
+/**
+ * Delay variables
+ */
+mintSettings.delay = {
+  instant: _a.delayBase + _a.delayStep * 0,
+  fast: _a.delayBase + _a.delayStep * 1,
+  medFast: _a.delayBase + _a.delayStep * 2,
+  default: _a.delayBase + _a.delayStep * 3,
+  medSlow: _a.delayBase + _a.delayStep * 4,
+  slow: _a.delayBase + _a.delayStep * 5
+};
+;
+exports["default"] = mintSettings;
+
+/***/ }),
+
+/***/ "./src/ts/util.ts":
+/*!************************!*\
+  !*** ./src/ts/util.ts ***!
+  \************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mintUtil = void 0;
+/**
+ * Imports
+ */
+const enum_1 = __webpack_require__(/*! ./imports/enum */ "./src/ts/imports/enum.ts");
+const settings_1 = __importDefault(__webpack_require__(/*! ./imports/util/settings */ "./src/ts/imports/util/settings.ts"));
+/**
+ * Utility functions
+ * @public
+ */
+class mintUtil {
+  /**
+   * Returns the width of the window, including fractional pixels
+   * @returns the width of the window
+   */
+  static windowWidth() {
+    let body = document.getElementsByTagName('body')[0],
+      decimal = body.getBoundingClientRect().width % 1;
+    return window.innerWidth + decimal;
+  }
+  /**
+   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+   * @param func - the function to debounce
+   * @param wait - the amount of time to wait before running the function
+   * @returns - the debounced function
+   */
+  static debounce(func) {
+    let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    let timer;
+    return function (e) {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(func, wait, e);
+    };
+  }
+  /**
+   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+   * @param func - the function to debounce
+   * @param wait - the amount of time to wait before running the function
+   * @returns - the debounced function as an EventListener
+   */
+  static debounceEvent(func) {
+    let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    return mintUtil.debounce(func, wait);
+  }
+  /**
+   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+   * @param func - the function to throttle
+   * @param wait - the amount of time between function calls
+   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+   * @returns - the throttled function
+   */
+  static throttle(func) {
+    let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    let options = arguments.length > 2 ? arguments[2] : undefined;
+    let context,
+      args,
+      result,
+      timeout,
+      previous = 0,
+      later = function () {
+        previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : new Date().getTime();
+        timeout = 0;
+        result = func.apply(context, args);
+        if (!timeout) {
+          context = args = null;
+        }
+      },
+      throttled = function () {
+        let now = new Date().getTime();
+        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false) {
+          previous = now;
+        }
+        let remaining = wait - now + previous;
+        context = this;
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+          if (timeout) {
+            clearTimeout(timeout);
+            timeout = 0;
+          }
+          previous = now;
+          result = func.apply(context, args);
+          if (!timeout) {
+            context = args = null;
+          }
+        } else if (!timeout && (options === null || options === void 0 ? void 0 : options.trailing) !== false) {
+          timeout = window.setTimeout(later, remaining);
+        }
+        return result;
+      };
+    return throttled;
+  }
+  /**
+   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+   * @param func - the function to throttle
+   * @param wait - the amount of time between function calls
+   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+   * @returns - the throttled function as an EventListener
+   */
+  static throttleEvent(func) {
+    let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    let options = arguments.length > 2 ? arguments[2] : undefined;
+    return mintUtil.throttle(func, wait, options);
+  }
+  /**
+   * Sets the element's height to its `innerHeight`, then to `auto` after a delay
+   * @param el - the element whose height will be set
+   * @param delay - the amount of time in milliseconds that the show animation will be active
+   * @param from - the side that the element is animating from
+   */
+  static show(el) {
+    let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    let from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : enum_1.mintSide.Top;
+    if (el) {
+      el.style.display = '';
+      requestAnimationFrame(() => {
+        if (from === enum_1.mintSide.Top || from === enum_1.mintSide.Bottom) {
+          el.style.height = `${el.scrollHeight}px`;
+        } else {
+          el.style.width = `${el.scrollWidth}px`;
+        }
+        setTimeout(() => {
+          if (from === enum_1.mintSide.Top || from === enum_1.mintSide.Bottom) {
+            el.style.height = 'auto';
+          } else {
+            el.style.width = 'auto';
+          }
+        }, delay);
+      });
+    }
+  }
+  /**
+   * Sets the element's height to 0
+   * @param el - the element whose height will be set
+   * @param delay - the amount of time in milliseconds that the show animation will be active
+   * @param from - the side that the element is animating from
+   */
+  static hide(el) {
+    let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
+    let from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : enum_1.mintSide.Top;
+    if (el) {
+      let height = el.scrollHeight,
+        width = el.scrollWidth,
+        transition = el.style.transition;
+      el.style.transition = '';
+      requestAnimationFrame(() => {
+        if (from === enum_1.mintSide.Top || from === enum_1.mintSide.Bottom) {
+          el.style.height = `${height}px`;
+        } else {
+          el.style.width = `${width}px`;
+        }
+        el.style.transition = transition;
+        requestAnimationFrame(() => {
+          if (from === enum_1.mintSide.Top || from === enum_1.mintSide.Bottom) {
+            el.style.height = '0';
+          } else {
+            el.style.width = '0';
+          }
+        });
+      });
+      setTimeout(() => {
+        el.style.display = 'none';
+      }, delay);
+    }
+  }
+  /**
+   * Copies the provided text to the clipboard
+   * @param text - the text to copy
+   * @returns - true if the text was successfully copied to the clipboard; else false
+   */
+  static copyText(text) {
+    let textArea = document.createElement('textarea');
+    if (!text || !textArea) {
+      return false;
+    }
+    textArea.value = text;
+    textArea.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            transform: translate(-100%, -100%);
+            opacity: 0;
+            z-index: -1;
+        `;
+    document.body.appendChild(textArea);
+    textArea.select();
+    textArea.setSelectionRange(0, 99999);
+    navigator.clipboard.writeText(textArea.value);
+    document.body.removeChild(textArea);
+    return true;
+  }
+  /**
+   * Tests the validity of an email address
+   * @see {@link https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression}
+   * @param text - the string to test
+   * @returns - true if the given string is an email address; false if not
+   */
+  static isEmail(text) {
+    return null !== text.match(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/);
+  }
+}
+exports.mintUtil = mintUtil;
+exports["default"] = mintUtil;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/ts/util.ts");
+/******/ 	__webpack_exports__ = __webpack_exports__["default"];
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=util.js.map