@maplat/ui 0.10.5 → 0.11.0

package/src/contextmenu/helpers/dom.ts

@@ -0,0 +1,295 @@
+import { isNumeric } from "./mix";
+
+/**
+ * @param {Element|Array<Element>} element DOM node or array of nodes.
+ * @param {String|Array<String>} classname Class or array of classes.
+ * For example: 'class1 class2' or ['class1', 'class2']
+ * @param {Number|undefined} timeout Timeout to remove a class.
+ */
+export function addClass(
+  element: HTMLElement | HTMLElement[],
+  classname: string | string[],
+  timeout: number | null = null
+) {
+  if (Array.isArray(element)) {
+    element.forEach(each => addClass(each, classname, null));
+    return;
+  }
+
+  const array = Array.isArray(classname) ? classname : classname.split(/\s+/);
+  let i = array.length;
+
+  while (i--) {
+    if (!hasClass(element, array[i])) {
+      _addClass(element, array[i], timeout);
+    }
+  }
+}
+
+/**
+ * @param {Element|Array<Element>} element DOM node or array of nodes.
+ * @param {String|Array<String>} classname Class or array of classes.
+ * For example: 'class1 class2' or ['class1', 'class2']
+ * @param {Number|undefined} timeout Timeout to add a class.
+ */
+export function removeClass(
+  element: HTMLElement | HTMLElement[],
+  classname: string | string[],
+  timeout: number | null = null
+) {
+  if (Array.isArray(element)) {
+    element.forEach(each => removeClass(each, classname, timeout));
+    return;
+  }
+
+  const array = Array.isArray(classname) ? classname : classname.split(/\s+/);
+  let i = array.length;
+
+  while (i--) {
+    if (hasClass(element, array[i])) {
+      _removeClass(element, array[i], timeout);
+    }
+  }
+}
+
+/**
+ * @param {Element} element DOM node.
+ * @param {String} classname Classname.
+ * @return {Boolean}
+ */
+export function hasClass(element: HTMLElement, c: string) {
+  // use native if available
+  return element.classList
+    ? element.classList.contains(c)
+    : classRegex(c).test(element.className);
+}
+
+/**
+ * @param {Element|Array<Element>} element DOM node or array of nodes.
+ * @param {String} classname Classe.
+ */
+export function toggleClass(
+  element: HTMLElement | HTMLElement[],
+  classname: string
+) {
+  if (Array.isArray(element)) {
+    element.forEach(each => toggleClass(each, classname));
+    return;
+  }
+
+  // use native if available
+  if (element.classList) {
+    element.classList.toggle(classname);
+  } else if (hasClass(element, classname)) {
+    _removeClass(element, classname, null);
+  } else {
+    _addClass(element, classname, null);
+  }
+}
+
+/**
+ * Abstraction to querySelectorAll for increased
+ * performance and greater usability
+ * @param {String} selector
+ * @param {Element} context (optional)
+ * @param {Boolean} find_all (optional)
+ * @return (find_all) {Element} : {Array}
+ */
+export function find(
+  selector: string,
+  context: Element | Document = window.document,
+  find_all: boolean = false
+): HTMLElement | HTMLElement[] | undefined {
+  const simpleRe = /^(#?[\w-]+|\.[\w-.]+)$/,
+    periodRe = /\./g,
+    slice = Array.prototype.slice;
+  let matches: HTMLElement[] = [];
+
+  // Redirect call to the more performant function
+  // if it's a simple selector and return an array
+  // for easier usage
+  if (simpleRe.test(selector)) {
+    switch (selector[0]) {
+      case "#": {
+        const el = $(selector.substr(1));
+        matches = el ? [el] : [];
+        break;
+      }
+      case ".":
+        matches = slice.call(
+          context.getElementsByClassName(
+            selector.substr(1).replace(periodRe, " ")
+          )
+        );
+        break;
+      default:
+        matches = slice.call(context.getElementsByTagName(selector));
+    }
+  } else {
+    // If not a simple selector, query the DOM as usual
+    // and return an array for easier usage
+    matches = slice.call(context.querySelectorAll(selector));
+  }
+
+  return find_all ? matches : matches[0];
+}
+
+export function $(id: string) {
+  id = id[0] === "#" ? id.substr(1, id.length) : id;
+  return document.getElementById(id);
+}
+
+export function isElement(obj: unknown) {
+  // DOM, Level2
+  if ("HTMLElement" in window) {
+    return !!obj && obj instanceof HTMLElement;
+  }
+  // Older browsers
+  return (
+    !!obj &&
+    typeof obj === "object" &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (obj as any).nodeType === 1 &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    !!(obj as any).nodeName
+  );
+}
+
+export function offset(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  const docEl = document.documentElement;
+  return {
+    left: rect.left + window.pageXOffset - docEl.clientLeft,
+    top: rect.top + window.pageYOffset - docEl.clientTop,
+    width: element.offsetWidth,
+    height: element.offsetHeight
+  };
+}
+
+export function getViewportSize() {
+  return {
+    w: window.innerWidth || document.documentElement.clientWidth,
+    h: window.innerHeight || document.documentElement.clientHeight
+  };
+}
+
+export function getAllChildren(node: Element, tag: string) {
+  return [].slice.call(node.getElementsByTagName(tag));
+}
+
+export function removeAllChildren(node: Node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+export function removeAll(collection: HTMLElement[]) {
+  let node;
+
+  while ((node = collection[0])) node.parentNode!.removeChild(node);
+}
+
+export function getChildren(node: Node, tag: string | null) {
+  return [].filter.call(node.childNodes, (el: Node) =>
+    tag
+      ? el.nodeType === 1 && (el as Element).tagName.toLowerCase() === tag
+      : el.nodeType === 1
+  );
+}
+
+export function createFragment(html: string) {
+  const frag = document.createDocumentFragment(),
+    temp = document.createElement("div");
+  temp.innerHTML = html;
+  while (temp.firstChild) {
+    frag.appendChild(temp.firstChild);
+  }
+  return frag;
+}
+
+export function template(html: string, _row: Record<string, string>) {
+  return html.replace(/\{ *([\w_-]+) *\}/g, (_htm: string, key: string) => {
+    const value = _row[key] === undefined ? "" : _row[key];
+    return htmlEscape(value);
+  });
+}
+
+export function htmlEscape(str: string | number) {
+  return String(str)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export function createElement(
+  node:
+    | string
+    | [
+        string,
+        {
+          id?: string;
+          classname?: string;
+          attr?:
+            | { name: string; value: string }
+            | { name: string; value: string }[];
+        }
+      ],
+  html: string
+) {
+  let elem: HTMLElement;
+  if (Array.isArray(node)) {
+    elem = document.createElement(node[0]);
+    const attrs = node[1];
+
+    if (attrs.id) elem.id = attrs.id;
+    if (attrs.classname) elem.className = attrs.classname;
+
+    if (attrs.attr) {
+      const attr = attrs.attr;
+      if (Array.isArray(attr)) {
+        let i = -1;
+        while (++i < attr.length) {
+          elem.setAttribute(attr[i].name, attr[i].value);
+        }
+      } else {
+        elem.setAttribute(attr.name, attr.value);
+      }
+    }
+  } else {
+    elem = document.createElement(node);
+  }
+  elem.innerHTML = html;
+  const frag = document.createDocumentFragment();
+
+  while (elem.childNodes[0]) frag.appendChild(elem.childNodes[0]);
+  elem.appendChild(frag);
+  return elem;
+}
+
+function classRegex(classname: string) {
+  return new RegExp(`(^|\\s+) ${classname} (\\s+|$)`);
+}
+
+function _addClass(el: HTMLElement, klass: string, timeout: number | null) {
+  // use native if available
+  if (el.classList) {
+    el.classList.add(klass);
+  } else {
+    el.className = `${el.className} ${klass}`.trim();
+  }
+
+  if (timeout && isNumeric(timeout)) {
+    window.setTimeout(() => _removeClass(el, klass, null), timeout);
+  }
+}
+
+function _removeClass(el: HTMLElement, klass: string, timeout: number | null) {
+  if (el.classList) {
+    el.classList.remove(klass);
+  } else {
+    el.className = el.className.replace(classRegex(klass), " ").trim();
+  }
+  if (timeout && isNumeric(timeout)) {
+    window.setTimeout(() => _addClass(el, klass, null), timeout);
+  }
+}

package/src/contextmenu/helpers/mix.ts

@@ -0,0 +1,120 @@
+/**
+ * Overwrites obj1's values with obj2's and adds
+ * obj2's if non existent in obj1
+ * @returns obj3 a new object based on obj1 and obj2
+ */
+
+export function mergeOptions(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  obj1: Record<string, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  obj2: Record<string, any>
+) {
+  const obj3: Record<string, unknown> = {};
+  for (const attr1 in obj1) obj3[attr1] = obj1[attr1];
+  for (const attr2 in obj2) obj3[attr2] = obj2[attr2];
+  return obj3;
+}
+
+export function assert(
+  condition: boolean,
+  message: string = "Assertion failed"
+) {
+  if (!condition) {
+    if (typeof Error !== "undefined") throw new Error(message);
+    throw message; // Fallback
+  }
+}
+
+/**
+ * Does str contain test?
+ * @param {String} str_test
+ * @param {String} str
+ * @returns Boolean
+ */
+export function contains(str_test: string, str: string) {
+  return !!~str.indexOf(str_test);
+}
+
+export function getUniqueId(prefix: string = "id_") {
+  return `${prefix}${Math.random().toString(36).substring(2, 11)}`;
+}
+
+export function assertEqual(a: unknown, b: unknown, message: string) {
+  if (a !== b) {
+    throw new Error(`${message} mismatch: ${a} != ${b}`);
+  }
+}
+
+export function now() {
+  // Polyfill for window.performance.now()
+  // @license http://opensource.org/licenses/MIT
+  // copyright Paul Irish 2015
+  // https://gist.github.com/paulirish/5438650
+  if ("performance" in window === false) {
+    interface Performance {
+      now?: () => number;
+    }
+    (window as unknown as { performance: Performance }).performance = {};
+  }
+
+  Date.now =
+    Date.now ||
+    function () {
+      // thanks IE8
+      return new Date().getTime();
+    };
+
+  if ("now" in window.performance === false) {
+    let nowOffset = Date.now();
+
+    if (performance.timing && performance.timing.navigationStart) {
+      nowOffset = performance.timing.navigationStart;
+    }
+
+    interface PerformanceWithNow extends Performance {
+      now: () => number;
+    }
+    (window.performance as PerformanceWithNow).now = () =>
+      Date.now() - nowOffset;
+  }
+
+  return window.performance.now();
+}
+
+export function randomId(prefix: string) {
+  const id = now().toString(36);
+  return prefix ? prefix + id : id;
+}
+
+export function isNumeric(str: string | number) {
+  return /^\d+$/.test(String(str));
+}
+
+export function isEmpty(str: string | undefined | null) {
+  return !str || 0 === str.length;
+}
+
+export function emptyArray(array: unknown[]) {
+  while (array.length) array.pop();
+}
+
+export function anyMatchInArray(source: unknown[], target: unknown[]) {
+  return source.some((each: unknown) => target.indexOf(each) >= 0);
+}
+
+export function everyMatchInArray(arr1: unknown[], arr2: unknown[]) {
+  return arr2.every((each: unknown) => arr1.indexOf(each) >= 0);
+}
+
+export function anyItemHasValue(
+  obj: Record<string, unknown>,
+  has: boolean = false
+) {
+  const keys = Object.keys(obj);
+  keys.forEach(key => {
+    const value = obj[key];
+    if (!isEmpty(typeof value === "string" ? value : null)) has = true;
+  });
+  return has;
+}

package/src/contextmenu/html.ts

@@ -0,0 +1,161 @@
+import ContextMenuBase, { createContainer } from "./base";
+import { ContextMenuItem } from "../types";
+import { CSS_VARS, DEFAULT_ITEMS } from "./constants";
+import { createFragment, find } from "./helpers/dom";
+import { contains, getUniqueId } from "./helpers/mix";
+
+/**
+ * @class Html
+ */
+export class Html {
+  Base: ContextMenuBase;
+  container: HTMLElement;
+
+  /**
+   * @constructor
+   * @param {ContextMenuBase} base Base class.
+   */
+  constructor(base: ContextMenuBase) {
+    this.Base = base;
+    this.container = this.Base.container;
+    return this;
+  }
+
+  createMenu() {
+    let items: ContextMenuItem[] = [];
+
+    if ("items" in this.Base.options) {
+      items =
+        (this.Base.options.defaultItems
+          ? (this.Base.options.items || []).concat(DEFAULT_ITEMS)
+          : this.Base.options.items) || [];
+    } else if (this.Base.options.defaultItems) {
+      items = DEFAULT_ITEMS;
+    }
+    // no item
+    if (items.length === 0) return false;
+    // create entries
+    items.forEach(this.addMenuEntry, this);
+  }
+
+  addMenuEntry(item: ContextMenuItem) {
+    if (item.items && Array.isArray(item.items)) {
+      // submenu - only a second level
+      item.classname = item.classname || "";
+      if (!contains(CSS_VARS.submenu, item.classname)) {
+        item.classname = item.classname.length
+          ? ` ${CSS_VARS.submenu}`
+          : CSS_VARS.submenu;
+      }
+
+      const li = this.generateHtmlAndPublish(this.container, item);
+      const sub = createContainer(false, this.Base.options.width || 150);
+      sub.style.left =
+        this.Base.Internal.submenu.lastLeft || this.Base.Internal.submenu.left;
+      li.appendChild(sub);
+
+      item.items!.forEach((each: ContextMenuItem) => {
+        this.generateHtmlAndPublish(sub, each, true);
+      });
+    } else {
+      this.generateHtmlAndPublish(this.container, item);
+    }
+  }
+
+  generateHtmlAndPublish(
+    parent: HTMLElement,
+    item: ContextMenuItem | string,
+    submenu: boolean | undefined = undefined
+  ) {
+    const index = getUniqueId();
+    let html,
+      frag: DocumentFragment,
+      element: HTMLElement,
+      separator = false;
+
+    // separator
+    if (typeof item === "string" && item.trim() === "-") {
+      html = `<li id="${index}" class="${CSS_VARS.separator}"><hr></li>`;
+      frag = createFragment(html);
+      // http://stackoverflow.com/a/13347298/4640499
+      // http://stackoverflow.com/a/13347298/4640499
+      element = [].slice.call(frag.childNodes, 0)[0] as HTMLElement;
+      if (parent.firstChild) {
+        parent.firstChild.appendChild(frag);
+      } else {
+        parent.appendChild(frag);
+      }
+      // to exclude from lineHeight calculation
+      separator = true;
+    } else {
+      const cItem = item as ContextMenuItem;
+      cItem.classname = cItem.classname || "";
+      html = `<span>${cItem.text}</span>`;
+      frag = createFragment(html);
+      element = document.createElement("li");
+
+      if (cItem.icon) {
+        if (cItem.classname === "") {
+          cItem.classname = CSS_VARS.icon;
+        } else if (cItem.classname.indexOf(CSS_VARS.icon) === -1) {
+          cItem.classname += ` ${CSS_VARS.icon}`;
+        }
+        element.setAttribute("style", `background-image:url(${cItem.icon})`);
+      }
+
+      element.id = index;
+      element.className = cItem.classname;
+      element.appendChild(frag);
+      if (parent.firstChild) {
+        (parent.firstChild as HTMLElement).appendChild(element);
+      } else {
+        parent.appendChild(element); // Fallback if no firstChild
+      }
+    }
+
+    const cItem = item as ContextMenuItem;
+    this.Base.Internal.items[index] = {
+      id: index,
+      submenu: submenu ? 1 : 0,
+      separator,
+      callback: cItem.callback,
+      data: cItem.data || null
+    };
+    this.Base.Internal.setItemListener(element, index);
+    return element;
+  }
+
+  removeMenuEntry(index: string) {
+    const element = find(
+      `#${index}`,
+      this.container.firstChild as HTMLElement,
+      false
+    ) as HTMLElement;
+    if (element && this.container.firstChild) {
+      this.container.firstChild.removeChild(element);
+    }
+    delete this.Base.Internal.items[index];
+  }
+
+  cloneAndGetLineHeight() {
+    // for some reason I have to calculate with 2 items
+    const cloned = this.container.cloneNode() as HTMLElement;
+    const frag = createFragment("<span>Foo</span>");
+    const frag2 = createFragment("<span>Foo</span>");
+    const element = document.createElement("li");
+    const element2 = document.createElement("li");
+
+    element.appendChild(frag);
+    element2.appendChild(frag2);
+    cloned.appendChild(element);
+    cloned.appendChild(element2);
+
+    if (this.container.parentNode) {
+      this.container.parentNode.appendChild(cloned);
+      const height = cloned.offsetHeight / 2;
+      this.container.parentNode.removeChild(cloned);
+      return height;
+    }
+    return 0;
+  }
+}