@thednp/shorty 1.0.0

package/src/is/isShadowRoot.js

@@ -0,0 +1,12 @@
+import getWindow from '../get/getWindow';
+/**
+ * Check if target is a `ShadowRoot`.
+ *
+ * @param {any} element target
+ * @returns {boolean} the query result
+ */
+const isShadowRoot = (element) => {
+  const OwnElement = getWindow(element).ShadowRoot;
+  return element instanceof OwnElement || element instanceof ShadowRoot;
+};
+export default isShadowRoot;

package/src/is/isString.js

@@ -0,0 +1,8 @@
+/**
+ * Shortcut for `typeof SOMETHING === string` static method.
+ *
+ * @param  {any} str array-like iterable object
+ * @returns {boolean} the query result
+ */
+const isString = (str) => typeof str === 'string';
+export default isString;

package/src/is/isTableElement.js

@@ -0,0 +1,7 @@
+/**
+ * Check if a target element is a `<table>`, `<td>` or `<th>`.
+ * @param {any} element the target element
+ * @returns {boolean} the query result
+ */
+const isTableElement = (element) => ['TABLE', 'TD', 'TH'].includes(element.tagName);
+export default isTableElement;

package/src/is/isWindow.js

@@ -0,0 +1,9 @@
+/**
+ * Check if a target node is `window`.
+ *
+ * @param {any} node the target node
+ * @returns {boolean} the query result
+ */
+export default function isWindow(node) {
+  return node instanceof Window;
+}

package/src/misc/ArrayFrom.js

@@ -0,0 +1,8 @@
+/**
+ * Shortcut for `Array.from()` static method.
+ *
+ * @param  {any[] | HTMLCollection | NodeList | Map<any, any>} arr array-like iterable object
+ * @returns {Array<any>}
+ */
+const ArrayFrom = (arr) => Array.from(arr);
+export default ArrayFrom;

package/src/misc/Float32ArrayFrom.js

@@ -0,0 +1,7 @@
+/**
+ * Shortcut for `Float32Array.from()` static method.
+ * @param  {any[] | HTMLCollection | NodeList} arr array-like iterable object
+ * @returns {Float32Array}
+ */
+const Float32ArrayFrom = (arr) => Float32Array.from(Array.from(arr));
+export default Float32ArrayFrom;

package/src/misc/Float64ArrayFrom.js

@@ -0,0 +1,7 @@
+/**
+ * Shortcut for `Float64Array.from()` static method.
+ * @param  {any[] | HTMLCollection | NodeList} arr array-like iterable object
+ * @returns {Float64Array}
+ */
+const Float64ArrayFrom = (arr) => Float64Array.from(Array.from(arr));
+export default Float64ArrayFrom;

package/src/misc/ObjectAssign.js

@@ -0,0 +1,7 @@
+/**
+ * Shortcut for `Object.assign()` static method.
+ * @param  {Record<string, any>} obj a target object
+ * @param  {Record<string, any>} source a source object
+ */
+const ObjectAssign = (obj, source) => Object.assign(obj, source);
+export default ObjectAssign;

package/src/misc/ObjectKeys.js

@@ -0,0 +1,7 @@
+/**
+ * Shortcut for `Object.keys()` static method.
+ * @param  {Record<string, any>} obj a target object
+ * @returns {string[]}
+ */
+const ObjectKeys = (obj) => Object.keys(obj);
+export default ObjectKeys;

package/src/misc/ObjectValues.js

@@ -0,0 +1,7 @@
+/**
+ * Shortcut for `Object.values()` static method.
+ * @param  {Record<string, any>} obj a target object
+ * @returns {any[]}
+ */
+const ObjectValues = (obj) => Object.values(obj);
+export default ObjectValues;

package/src/misc/OriginalEvent.js

@@ -0,0 +1,18 @@
+import ObjectAssign from './ObjectAssign';
+
+/**
+ * Returns a namespaced `CustomEvent` specific to each component.
+ * @param {string} EventType Event.type
+ * @param {Record<string, any>=} config Event.options | Event.properties
+ * @returns {SHORTER.OriginalEvent} a new namespaced event
+ */
+export default function OriginalEvent(EventType, config) {
+  const OriginalCustomEvent = new CustomEvent(EventType, {
+    cancelable: true, bubbles: true,
+  });
+
+  if (config instanceof Object) {
+    ObjectAssign(OriginalCustomEvent, config);
+  }
+  return OriginalCustomEvent;
+}

package/src/misc/createElement.js

@@ -0,0 +1,25 @@
+import getDocument from '../get/getDocument';
+import ObjectAssign from './ObjectAssign';
+
+/**
+ * This is a shortie for `document.createElement` method
+ * which allows you to create a new `HTMLElement` for a given `tagName`
+ * or based on an object with specific non-readonly attributes:
+ * `id`, `className`, `textContent`, `style`, etc.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
+ *
+ * @param {Record<string, string> | string} param `tagName` or object
+ * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+ */
+export default function createElement(param) {
+  if (typeof param === 'string') {
+    return getDocument().createElement(param);
+  }
+
+  const { tagName } = param;
+  const attr = { ...param };
+  const newElement = createElement(tagName);
+  delete attr.tagName;
+  ObjectAssign(newElement, attr);
+  return newElement;
+}

package/src/misc/createElementNS.js

@@ -0,0 +1,26 @@
+import getDocument from '../get/getDocument';
+import ObjectAssign from './ObjectAssign';
+
+/**
+ * This is a shortie for `document.createElementNS` method
+ * which allows you to create a new `HTMLElement` for a given `tagName`
+ * or based on an object with specific non-readonly attributes:
+ * `id`, `className`, `textContent`, `style`, etc.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
+ *
+ * @param {string} namespace `namespaceURI` to associate with the new `HTMLElement`
+ * @param {Record<string, string> | string} param `tagName` or object
+ * @return {HTMLElement | Element} a new `HTMLElement` or `Element`
+ */
+export default function createElementNS(namespace, param) {
+  if (typeof param === 'string') {
+    return getDocument().createElementNS(namespace, param);
+  }
+
+  const { tagName } = param;
+  const attr = { ...param };
+  const newElement = createElementNS(namespace, tagName);
+  delete attr.tagName;
+  ObjectAssign(newElement, attr);
+  return newElement;
+}

package/src/misc/data.js

@@ -0,0 +1,78 @@
+import querySelector from '../selectors/querySelector';
+
+/** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
+const componentData = new Map();
+/**
+ * An interface for web components background data.
+ * @see https://github.com/thednp/bootstrap.native/blob/master/src/components/base-component.js
+ */
+const Data = {
+  /**
+   * Sets web components data.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   * @param {Record<string, any>} instance the component instance
+   */
+  set: (target, component, instance) => {
+    const element = querySelector(target);
+    if (!element) return;
+
+    if (!componentData.has(component)) {
+      componentData.set(component, new Map());
+    }
+
+    const instanceMap = componentData.get(component);
+    // @ts-ignore - not undefined, but defined right above
+    instanceMap.set(element, instance);
+  },
+
+  /**
+   * Returns all instances for specified component.
+   * @param {string} component the component's name or a unique key
+   * @returns {Map<HTMLElement | Element, Record<string, any>>?} all the component instances
+   */
+  getAllFor: (component) => {
+    const instanceMap = componentData.get(component);
+
+    return instanceMap || null;
+  },
+
+  /**
+   * Returns the instance associated with the target.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   * @returns {Record<string, any>?} the instance
+   */
+  get: (target, component) => {
+    const element = querySelector(target);
+    const allForC = Data.getAllFor(component);
+    const instance = element && allForC && allForC.get(element);
+
+    return instance || null;
+  },
+
+  /**
+   * Removes web components data.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string} component the component's name or a unique key
+   */
+  remove: (target, component) => {
+    const element = querySelector(target);
+    const instanceMap = componentData.get(component);
+    if (!instanceMap || !element) return;
+
+    instanceMap.delete(element);
+
+    if (instanceMap.size === 0) {
+      componentData.delete(component);
+    }
+  },
+};
+
+/**
+ * An alias for `Data.get()`.
+ * @type {SHORTER.getInstance<any>}
+ */
+export const getInstance = (target, component) => Data.get(target, component);
+
+export default Data;

package/src/misc/dispatchEvent.js

@@ -0,0 +1,8 @@
+/**
+ * Shortcut for the `Element.dispatchEvent(Event)` method.
+ *
+ * @param {HTMLElement | Element} element is the target
+ * @param {Event} event is the `Event` object
+ */
+const dispatchEvent = (element, event) => element.dispatchEvent(event);
+export default dispatchEvent;

package/src/misc/distinct.js

@@ -0,0 +1,10 @@
+/**
+ * JavaScript `Array` distinct.
+ * @see https://codeburst.io/javascript-array-distinct-5edc93501dc4
+ * @param {any} value
+ * @param {number} index
+ * @param {any} self
+ * @returns {boolean}
+ */
+const distinct = (value, index, self) => self.indexOf(value) === index;
+export default distinct;

package/src/misc/emulateAnimationEnd.js

@@ -0,0 +1,37 @@
+import animationEndEvent from '../strings/animationEndEvent';
+import getElementAnimationDelay from '../get/getElementAnimationDelay';
+import getElementAnimationDuration from '../get/getElementAnimationDuration';
+
+/**
+ * Utility to make sure callbacks are consistently
+ * called when animation ends.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {EventListener} handler `animationend` callback
+ */
+export default function emulateAnimationEnd(element, handler) {
+  let called = 0;
+  const endEvent = new Event(animationEndEvent);
+  const duration = getElementAnimationDuration(element);
+  const delay = getElementAnimationDelay(element);
+
+  if (duration) {
+    /**
+     * Wrap the handler in on -> off callback
+     * @type {EventListener}
+     */
+    const animationEndWrapper = (e) => {
+      if (e.target === element) {
+        handler.apply(element, [e]);
+        element.removeEventListener(animationEndEvent, animationEndWrapper);
+        called = 1;
+      }
+    };
+    element.addEventListener(animationEndEvent, animationEndWrapper);
+    setTimeout(() => {
+      if (!called) element.dispatchEvent(endEvent);
+    }, duration + delay + 17);
+  } else {
+    handler.apply(element, [endEvent]);
+  }
+}

package/src/misc/emulateAnimationEndLegacy.js

@@ -0,0 +1,38 @@
+import supportAnimation from '../boolean/supportAnimation';
+import animationEndEvent from '../strings/animationEndEventLegacy';
+import getElementAnimationDelay from '../get/getElementAnimationDelayLegacy';
+import getElementAnimationDuration from '../get/getElementAnimationDurationLegacy';
+
+/**
+ * Utility to make sure callbacks are consistently
+ * called when animation ends.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {EventListener} handler `animationend` callback
+ */
+export default function emulateAnimationEnd(element, handler) {
+  let called = 0;
+  const endEvent = new Event(animationEndEvent);
+  const duration = getElementAnimationDuration(element);
+  const delay = getElementAnimationDelay(element);
+
+  if (supportAnimation && duration) {
+    /**
+     * Wrap the handler in on -> off callback
+     * @param {Event} e Event object
+     */
+    const animationEndWrapper = (e) => {
+      if (e.target === element) {
+        handler.apply(element, [e]);
+        element.removeEventListener(animationEndEvent, animationEndWrapper);
+        called = 1;
+      }
+    };
+    element.addEventListener(animationEndEvent, animationEndWrapper);
+    setTimeout(() => {
+      if (!called) element.dispatchEvent(endEvent);
+    }, duration + delay + 17);
+  } else {
+    handler.apply(element, [endEvent]);
+  }
+}

package/src/misc/emulateTransitionEnd.js

@@ -0,0 +1,37 @@
+import transitionEndEvent from '../strings/transitionEndEvent';
+import getElementTransitionDelay from '../get/getElementTransitionDelay';
+import getElementTransitionDuration from '../get/getElementTransitionDuration';
+
+/**
+ * Utility to make sure callbacks are consistently
+ * called when transition ends.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {EventListener} handler `transitionend` callback
+ */
+export default function emulateTransitionEnd(element, handler) {
+  let called = 0;
+  const endEvent = new Event(transitionEndEvent);
+  const duration = getElementTransitionDuration(element);
+  const delay = getElementTransitionDelay(element);
+
+  if (duration) {
+    /**
+     * Wrap the handler in on -> off callback
+     * @type {EventListener} e Event object
+     */
+    const transitionEndWrapper = (e) => {
+      if (e.target === element) {
+        handler.apply(element, [e]);
+        element.removeEventListener(transitionEndEvent, transitionEndWrapper);
+        called = 1;
+      }
+    };
+    element.addEventListener(transitionEndEvent, transitionEndWrapper);
+    setTimeout(() => {
+      if (!called) element.dispatchEvent(endEvent);
+    }, duration + delay + 17);
+  } else {
+    handler.apply(element, [endEvent]);
+  }
+}

package/src/misc/emulateTransitionEndLegacy.js

@@ -0,0 +1,38 @@
+import supportTransition from '../boolean/supportTransition';
+import transitionEndEvent from '../strings/transitionEndEventLegacy';
+import getElementTransitionDelay from '../get/getElementTransitionDelayLegacy';
+import getElementTransitionDuration from '../get/getElementTransitionDurationLegacy';
+
+/**
+ * Utility to make sure callbacks are consistently
+ * called when transition ends.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {EventListener} handler `transitionend` callback
+ */
+export default function emulateTransitionEnd(element, handler) {
+  let called = 0;
+  const endEvent = new Event(transitionEndEvent);
+  const duration = getElementTransitionDuration(element);
+  const delay = getElementTransitionDelay(element);
+
+  if (supportTransition && duration) {
+    /**
+     * Wrap the handler in on -> off callback
+     * @param {Event} e Event object
+     */
+    const transitionEndWrapper = (e) => {
+      if (e.target === element) {
+        handler.apply(element, [e]);
+        element.removeEventListener(transitionEndEvent, transitionEndWrapper);
+        called = 1;
+      }
+    };
+    element.addEventListener(transitionEndEvent, transitionEndWrapper);
+    setTimeout(() => {
+      if (!called) element.dispatchEvent(endEvent);
+    }, duration + delay + 17);
+  } else {
+    handler.apply(element, [endEvent]);
+  }
+}

package/src/misc/focus.js

@@ -0,0 +1,8 @@
+/**
+ * Utility to focus an `HTMLElement` target.
+ *
+ * @param {HTMLElement | Element} element is the target
+ */
+// @ts-ignore -- `Element`s resulted from querySelector can focus too
+const focus = (element) => element.focus();
+export default focus;

package/src/misc/noop.js

@@ -0,0 +1,3 @@
+/** A generic function with empty body. */
+const noop = () => {};
+export default noop;

package/src/misc/normalizeOptions.js

@@ -0,0 +1,49 @@
+import getAttribute from '../attr/getAttribute';
+import normalizeValue from './normalizeValue';
+import ObjectKeys from './ObjectKeys';
+import toLowerCase from './toLowerCase';
+
+/**
+ * Utility to normalize component options.
+ *
+ * @param {HTMLElement | Element} element target
+ * @param {Record<string, any>} defaultOps component default options
+ * @param {Record<string, any>} inputOps component instance options
+ * @param {string=} ns component namespace
+ * @return {Record<string, any>} normalized component options object
+ */
+export default function normalizeOptions(element, defaultOps, inputOps, ns) {
+  // @ts-ignore -- our targets are always `HTMLElement`
+  const data = { ...element.dataset };
+  /** @type {Record<string, any>} */
+  const normalOps = {};
+  /** @type {Record<string, any>} */
+  const dataOps = {};
+  const title = 'title';
+
+  ObjectKeys(data).forEach((k) => {
+    const key = ns && k.includes(ns)
+      ? k.replace(ns, '').replace(/[A-Z]/, (match) => toLowerCase(match))
+      : k;
+
+    dataOps[key] = normalizeValue(data[k]);
+  });
+
+  ObjectKeys(inputOps).forEach((k) => {
+    inputOps[k] = normalizeValue(inputOps[k]);
+  });
+
+  ObjectKeys(defaultOps).forEach((k) => {
+    if (k in inputOps) {
+      normalOps[k] = inputOps[k];
+    } else if (k in dataOps) {
+      normalOps[k] = dataOps[k];
+    } else {
+      normalOps[k] = k === title
+        ? getAttribute(element, title)
+        : defaultOps[k];
+    }
+  });
+
+  return normalOps;
+}

package/src/misc/normalizeValue.js

@@ -0,0 +1,32 @@
+/**
+ * The raw value or a given component option.
+ *
+ * @typedef {string | HTMLElement | Function | number | boolean | null} niceValue
+ */
+
+/**
+ * Utility to normalize component options
+ *
+ * @param {any} value the input value
+ * @return {niceValue} the normalized value
+ */
+export default function normalizeValue(value) {
+  if (value === 'true') { // boolean
+    return true;
+  }
+
+  if (value === 'false') { // boolean
+    return false;
+  }
+
+  if (!Number.isNaN(+value)) { // number
+    return +value;
+  }
+
+  if (value === '' || value === 'null') { // null
+    return null;
+  }
+
+  // string / function / HTMLElement / object
+  return value;
+}

package/src/misc/passiveHandler.js

@@ -0,0 +1,7 @@
+/**
+ * A global namespace for most scroll event listeners.
+ * @type {Partial<AddEventListenerOptions>}
+ */
+const passiveHandler = { passive: true };
+
+export default passiveHandler;

package/src/misc/passiveHandlerLegacy.js

@@ -0,0 +1,9 @@
+import supportPassive from '../boolean/supportPassive';
+
+/**
+ * A global namespace for most scroll event listeners in legacy browsers.
+ * @type {Partial<AddEventListenerOptions> | boolean}
+ */
+const passiveHandler = supportPassive ? { passive: true } : false;
+
+export default passiveHandler;

package/src/misc/reflow.js

@@ -0,0 +1,9 @@
+/**
+ * Utility to force re-paint of an `HTMLElement` target.
+ *
+ * @param {HTMLElement | Element} element is the target
+ * @return {number} the `Element.offsetHeight` value
+ */
+// @ts-ignore
+const reflow = (element) => element.offsetHeight;
+export default reflow;

package/src/misc/setElementStyle.js

@@ -0,0 +1,10 @@
+import ObjectAssign from './ObjectAssign';
+
+/**
+ * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
+ * @param  {HTMLElement | Element} element target element
+ * @param  {Partial<CSSStyleDeclaration>} styles attribute value
+ */
+// @ts-ignore
+const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
+export default setElementStyle;

package/src/misc/timer.js

@@ -0,0 +1,78 @@
+import querySelector from '../selectors/querySelector';
+
+/** @type {Map<HTMLElement | Element, any>} */
+const TimeCache = new Map();
+/**
+ * An interface for one or more `TimerHandler`s per `Element`.
+ * @see https://github.com/thednp/navbar.js/
+ */
+const Timer = {
+  /**
+   * Sets a new timeout timer for an element, or element -> key association.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {ReturnType<TimerHandler>} callback the callback
+   * @param {number} delay the execution delay
+   * @param {string=} key a unique key
+   */
+  set: (target, callback, delay, key) => {
+    const element = querySelector(target);
+
+    if (!element) return;
+
+    if (key && key.length) {
+      if (!TimeCache.has(element)) {
+        TimeCache.set(element, new Map());
+      }
+      const keyTimers = TimeCache.get(element);
+      keyTimers.set(key, setTimeout(callback, delay));
+    } else {
+      TimeCache.set(element, setTimeout(callback, delay));
+    }
+  },
+
+  /**
+   * Returns the timer associated with the target.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string=} key a unique
+   * @returns {number?} the timer
+   */
+  get: (target, key) => {
+    const element = querySelector(target);
+
+    if (!element) return null;
+    const keyTimers = TimeCache.get(element);
+
+    if (key && key.length && keyTimers && keyTimers.get) {
+      return keyTimers.get(key) || null;
+    }
+    return keyTimers || null;
+  },
+
+  /**
+   * Clears the element's timer.
+   * @param {HTMLElement | Element | string} target target element
+   * @param {string=} key a unique key
+   */
+  clear: (target, key) => {
+    const element = querySelector(target);
+
+    if (!element) return;
+
+    if (key && key.length) {
+      const keyTimers = TimeCache.get(element);
+
+      if (keyTimers && keyTimers.get) {
+        clearTimeout(keyTimers.get(key));
+        keyTimers.delete(key);
+        if (keyTimers.size === 0) {
+          TimeCache.delete(element);
+        }
+      }
+    } else {
+      clearTimeout(TimeCache.get(element));
+      TimeCache.delete(element);
+    }
+  },
+};
+
+export default Timer;

package/src/misc/toLowerCase.js

@@ -0,0 +1,8 @@
+/**
+ * Shortcut for `String.toLowerCase()`.
+ *
+ * @param {string} source input string
+ * @returns {string} lowercase output string
+ */
+const toLowerCase = (source) => source.toLowerCase();
+export default toLowerCase;

package/src/misc/toUpperCase.js

@@ -0,0 +1,8 @@
+/**
+ * Shortcut for `String.toUpperCase()`.
+ *
+ * @param {string} source input string
+ * @returns {string} uppercase output string
+ */
+const toUpperCase = (source) => source.toUpperCase();
+export default toUpperCase;