lupine.web 1.0.14

package/src/lib/dynamical-load.ts

@@ -0,0 +1,138 @@
+/*
+ * for my-apps
+ */
+export class DynamicalLoad {
+  constructor() {}
+
+  loadScript(url: string, idForReplace?: string, removeOnLoaded = false): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (this.existScript(url, idForReplace)) {
+        resolve(url);
+        return;
+      }
+      const scriptDom = document.createElement('script');
+      scriptDom.src = url;
+      if (idForReplace) {
+        scriptDom.id = idForReplace;
+      }
+
+      scriptDom.onload = () => {
+        resolve(url);
+        if (removeOnLoaded) {
+          scriptDom.remove();
+        }
+      };
+
+      scriptDom.onerror = () => {
+        reject(new Error('Failed to load module script with URL ' + url));
+        if (removeOnLoaded) {
+          scriptDom.remove();
+        }
+      };
+
+      const head = document.getElementsByTagName('head')[0];
+      head ? head.appendChild(scriptDom) : document.documentElement.appendChild(scriptDom);
+    });
+  }
+
+  // TODO: more accuracy
+  existScript(url: string, id?: string) {
+    if (id) {
+      const scriptDom = document.getElementById(id);
+      if (scriptDom && scriptDom.tagName === 'SCRIPT') {
+        const src = (scriptDom as HTMLScriptElement).src.split('?')[0];
+        if (src.substring(src.length - url.length) === url) {
+          return true;
+        }
+      }
+    }
+
+    const scripts = document.scripts;
+    for (let i = 0; i < scripts.length; i++) {
+      const src = scripts[i].src.split('?')[0];
+      if (src.substring(src.length - url.length) === url) {
+        return true;
+      }
+    }
+  }
+
+  loadCss(url: string, idForReplace?: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (this.existCss(url, idForReplace)) {
+        resolve(url);
+        return;
+      }
+      if (idForReplace) {
+        const sheet = document.getElementById(idForReplace);
+        if (sheet && sheet.tagName === 'LINK') {
+          sheet.parentNode!.removeChild(sheet);
+        }
+      }
+
+      const linkDom = document.createElement('link');
+      linkDom.rel = 'stylesheet';
+      linkDom.type = 'text/css';
+      linkDom.href = url;
+      linkDom.media = 'all';
+      if (idForReplace) {
+        linkDom.id = idForReplace;
+      }
+      linkDom.onload = () => {
+        resolve(url);
+      };
+
+      linkDom.onerror = () => {
+        reject(new Error('Failed to load css with URL ' + url));
+      };
+
+      document.getElementsByTagName('head')[0].appendChild(linkDom);
+    });
+  }
+
+  // TODO: more accuracy
+  existCss(url: string, id?: string) {
+    if (id) {
+      const linkDom = document.getElementById(id);
+      if (linkDom && linkDom.tagName === 'LINK') {
+        const href = (<any>linkDom).href.split('?')[0];
+        if (href.substring(href.length - url.length) === url) {
+          return true;
+        }
+      }
+    }
+
+    const styles = document.styleSheets;
+    for (let i = 0; i < styles.length; i++) {
+      const linkDom = styles[i] as any;
+      const href = linkDom.href.split('?')[0];
+      if (href.substring(href.length - url.length) === url) {
+        return true;
+      }
+    }
+  }
+
+  // removeCss(url: string, id?: string) {
+  //     if (id) {
+  //         const sheet = document.getElementById(id);
+  //         if (sheet && sheet instanceof HTMLElement) {
+  //             const href = (<any>sheet).href;
+  //             if (href.substring(href.length - url.length) === url) {
+  //                 (<any>sheet).disabled = true;
+  //                 sheet.parentNode.removeChild(sheet);
+  //                 return;
+  //             }
+  //         }
+  //     }
+  //     const styles = document.styleSheets;
+  //     for (const i = 0; i < styles.length; i++) {
+  //         const sheet = styles[i] as any;
+  //         if (sheet.href.substring(sheet.href.length - url.length) === url) {
+  //             sheet.disabled = true;
+  //             sheet.ownerNode.parentNode.removeChild(sheet.ownerNode);
+  //             return;
+  //         }
+  //     }
+  // }
+}
+
+export default new DynamicalLoad();

package/src/lib/format-bytes.ts

@@ -0,0 +1,11 @@
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (!+bytes) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};

package/src/lib/index.ts

@@ -0,0 +1,17 @@
+export * from './dom';
+export * from './date-utils';
+export * from './debug-watch';
+export * from './deep-merge';
+export * from './document-ready';
+export * from './dynamical-load';
+export * from './format-bytes';
+export * from './lite-dom';
+export * from './logger';
+export * from './message-hub';
+export * from './observable';
+export * from './promise-timeout';
+export * from './simple-storage';
+export * from './stop-propagation';
+export * from './unique-id';
+export * from './upload-file';
+export * from './web-env';

package/src/lib/lite-dom.ts

@@ -0,0 +1,227 @@
+// Lite Dom Utils
+/*
+  Don't judge whether this.node is valid, so it throws error when this.node is not found or undefined
+*/
+export class LiteDom {
+  private node: Element;
+
+  static queryOne(selector?: string | Element | LiteDom, docRoot?: Element): LiteDom | null {
+    if (!selector) {
+      return null;
+    }
+    if (selector instanceof LiteDom) {
+      return selector;
+    }
+    if (selector instanceof Element) {
+      return new LiteDom(selector);
+    }
+    const el = (docRoot || document).querySelector(selector) as Element;
+    return el ? new LiteDom(el) : null;
+  }
+
+  static queryAll(selector?: string | Element | LiteDom, docRoot?: Element): LiteDom[] {
+    if (!selector) {
+      return [];
+    }
+    if (selector instanceof LiteDom) {
+      return [selector];
+    }
+    if (selector instanceof Element) {
+      return [new LiteDom(selector)];
+    }
+    const el = (docRoot || document).querySelectorAll(selector);
+    const ret = [];
+    for (let i in el) {
+      ret.push(new LiteDom(el[i] as Element));
+    }
+    return ret;
+  }
+
+  static createElement(html: string, docRoot?: Document): LiteDom {
+    const dom = (docRoot || document).createElement(html);
+    const domLib = new LiteDom(dom);
+    return domLib;
+  }
+
+  constructor(selector?: string | Element | LiteDom, docRoot?: Element) {
+    if (selector instanceof LiteDom) {
+      this.node = selector.node;
+    } else if (selector instanceof Element) {
+      this.node = selector;
+    } else {
+      const el = selector && ((docRoot || document).querySelector(selector) as Element);
+      if (el) {
+        this.node = el;
+      } else {
+        throw new TypeError('Element is not defined for a new LibDom');
+      }
+    }
+  }
+
+  getElement(): Element {
+    return this.node;
+  }
+
+  // query children and set value or innerHTML
+  $(selector: string, value?: string | number | boolean | null): LiteDom | null {
+    const dom = LiteDom.queryOne(selector, this.node);
+    if (dom && typeof value !== 'undefined') {
+      if ('checked' in dom.node) {
+        dom.node.checked = !!value;
+      } else if ('value' in dom.node) {
+        dom.node.value = value;
+      } else if ('innerHTML' in dom.node) {
+        dom.node.innerHTML = '' + value;
+      }
+    }
+    return dom;
+  }
+
+  // query children
+  query(selector: string): LiteDom | null {
+    return LiteDom.queryOne(selector, this.node);
+  }
+
+  // query children
+  queryAll(selector: string): LiteDom[] {
+    return LiteDom.queryAll(selector, this.node);
+  }
+
+  on(eventName: string, eventHandler: (this: Element, ev: any) => any) {
+    this.node.addEventListener(eventName, eventHandler, false);
+    return this;
+  }
+
+  off(eventName: string, eventHandler: (this: Element, ev: any) => any) {
+    this.node.removeEventListener(eventName, eventHandler, false);
+    return this;
+  }
+
+  fire(event: Event) {
+    this.node.dispatchEvent(event);
+    return this;
+  }
+
+  isCheckbox(): boolean {
+    return this.tagName === 'INPUT' && (this.node as any).type === 'checkbox';
+  }
+  isRadio(): boolean {
+    return this.tagName === 'INPUT' && (this.node as any).type === 'radio';
+  }
+
+  val(value?: string): string | LiteDom {
+    if (typeof value === 'undefined') {
+      return (<any>this.node).value;
+    }
+    'value' in this.node && (this.node.value = value);
+    return this;
+  }
+
+  checked(value?: boolean) {
+    if (typeof value === 'undefined') {
+      return (<any>this.node).checked;
+    }
+    'checked' in this.node && (this.node.checked = !!value);
+    return this;
+  }
+
+  selectedIndex(value?: number) {
+    if (typeof value === 'undefined') {
+      return (<any>this.node).selectedIndex;
+    }
+    'selectedIndex' in this.node && (this.node.selectedIndex = value);
+    return this;
+  }
+
+  html(value?: string): string | LiteDom {
+    if (typeof value === 'undefined') {
+      return this.node.innerHTML;
+    }
+    'innerHTML' in this.node && (this.node.innerHTML = value);
+    return this;
+  }
+
+  /*
+    element.style.backgroundColor = 'blue' // works
+    element.style['backgroundColor'] = 'blue' // works
+    element.style['background-color'] = 'blue' // does not work
+
+    element.style.setProperty('background-color','blue') // works
+    element.style.setProperty('backgroundColor','blue') // does not work
+  */
+  css(propertyName: string, value?: string): string | false | LiteDom {
+    if (typeof value === 'undefined') {
+      return this.node instanceof HTMLElement && this.node.style.getPropertyValue(propertyName);
+    }
+    if (this.node instanceof HTMLElement) {
+      if (value === null) {
+        this.node.style.removeProperty(propertyName);
+      } else {
+        this.node.style.setProperty(propertyName, value);
+      }
+    }
+    return this;
+  }
+
+  attribute(attributeName: string, value?: string): string | null | LiteDom {
+    if (typeof value === 'undefined') {
+      return this.node.getAttribute(attributeName);
+    }
+    if (value === null) {
+      this.node.removeAttribute(attributeName);
+    } else {
+      this.node.setAttribute(attributeName, value);
+    }
+    return this;
+  }
+
+  class(addClass?: string | string[], removeClass?: string | string[]): string | LiteDom {
+    if (!addClass && !removeClass) {
+      return (<any>this.node).className;
+    }
+    const classList = this.node.classList;
+    if (addClass) {
+      addClass instanceof Array ? classList.add(...addClass) : classList.add(addClass);
+    }
+    if (removeClass) {
+      removeClass instanceof Array ? classList.remove(...removeClass) : classList.remove(removeClass);
+    }
+    return this;
+  }
+
+  appendChild(child: Element | LiteDom) {
+    const dom = child instanceof LiteDom ? child.getElement() : child;
+    dom && this.node.appendChild(dom);
+    return this;
+  }
+
+  removeChild(child: Element | LiteDom) {
+    const dom = child instanceof LiteDom ? child.getElement() : child;
+    dom && this.node.removeChild(dom);
+    return this;
+  }
+
+  removeSelf() {
+    // this.node.parentElement!.removeChild(this.node);
+    this.node.remove();
+    return this;
+  }
+
+  get children(): LiteDom[] {
+    if (!this.node.children) {
+      return [];
+    }
+    const ret = [];
+    for (let i = 0; i < this.node.children.length; i++) {
+      ret.push(new LiteDom(this.node.children[i]));
+    }
+    return ret;
+  }
+
+  // originally returns the HTML-uppercased qualified name.
+  get tagName(): string {
+    return this.node.tagName.toUpperCase();
+  }
+}
+
+export default LiteDom.queryOne;

package/src/lib/logger.ts

@@ -0,0 +1,55 @@
+// Colors for console
+export const ConsoleColors = {
+  Red: '#f44336',
+  Pink: '#e81e63',
+  Purple: '#9c27b0',
+  DeepPurple: '#673ab7',
+  Indigo: '#3f51b5',
+  Blue: '#2196f3',
+  LightBlue: '#03a9f4',
+  Cyan: '#00bcd4',
+  Teal: '#009688',
+  Green: '#4caf50',
+  LightGreen: '#8bc34a',
+  Lime: '#cddc39',
+  DarkYellow: '#bfa40e',
+  Amber: '#ffc107',
+  Orange: '#ff9800',
+  DeepOrange: '#ff5722',
+  Silver: '#c0c0c0',
+  Gray: '#808080',
+  Black: '#000000',
+};
+
+export class Logger {
+  private static enabled = true;
+  private namespace = '';
+  private color = '';
+  constructor(namespace: string, color?: string) {
+    this.namespace = namespace ? `[${namespace}] ` : '';
+    if (color) {
+      this.color = 'color:' + color;
+    }
+  }
+
+  static setEnabled(enabled: boolean) {
+    enabled && !Logger.enabled && console.log(`Logger is enabled.`);
+    Logger.enabled = enabled;
+  }
+
+  log(message: string, ...data: (string | object | number | undefined)[]) {
+    Logger.enabled && console.log(`%c${this.timestamp()} ${this.namespace}${message}`, this.color, ...data);
+  }
+
+  timestamp(date?: Date) {
+    return (date || new Date()).toJSON().substring(11, 23);
+  }
+
+  warn(message: string, ...data: (string | object | number | undefined)[]) {
+    console.warn(`%c${this.timestamp()} ${this.namespace}${message}`, this.color, ...data);
+  }
+
+  error(message: string, ...data: (string | object | number | undefined)[]) {
+    console.error(`%c${this.timestamp()} ${this.namespace}${message}`, this.color, ...data);
+  }
+}

package/src/lib/message-hub.ts

@@ -0,0 +1,105 @@
+export class MessageHubData<T> {
+  constructor(public actionId: string, public message: string, public extraData?: T) {}
+}
+export class MessageHub {
+  private subscriptions: { [key: string]: { [key: string]: Function } } = {};
+  private subscriptionValues: { [key: string]: any } = {};
+  private lastId = 0;
+  constructor(public passLastMsgWhenSubscribe = false) {}
+
+  // * for listening to all events
+  public subscribe(targetType: string, fn: Function, recessiveLassMsg = true) {
+    const id = this.lastId++;
+    if (!this.subscriptions[targetType]) {
+      this.subscriptions[targetType] = {};
+    }
+    this.subscriptions[targetType][id] = fn;
+    if (recessiveLassMsg && this.passLastMsgWhenSubscribe && this.subscriptionValues[targetType]) {
+      this.notify(fn, this.subscriptionValues[targetType]);
+    }
+
+    return () => {
+      delete this.subscriptions[targetType][id];
+      var needDestroy = true;
+      for (var key in this.subscriptions[targetType]) {
+        needDestroy = false;
+        break;
+      }
+      if (needDestroy) {
+        delete this.subscriptions[targetType];
+      }
+    };
+  }
+
+  public send(targetType: string, arg: any) {
+    if (targetType === '*') {
+      for (var groupKey in this.subscriptions) {
+        for (var key in this.subscriptions[groupKey]) {
+          this.notify(this.subscriptions[groupKey][key], arg);
+        }
+      }
+      return;
+    }
+
+    if (this.passLastMsgWhenSubscribe) {
+      this.subscriptionValues[targetType] = arg;
+    }
+
+    if (this.subscriptions[targetType]) {
+      for (var key in this.subscriptions[targetType]) {
+        this.notify(this.subscriptions[targetType][key], arg);
+      }
+    }
+    if (this.subscriptions['*']) {
+      for (var key in this.subscriptions['*']) {
+        this.notify(this.subscriptions['*'][key], arg);
+      }
+    }
+  }
+
+  public hasListener(targetType: string): boolean {
+    if (targetType === '*') {
+      // if has any subscriptions
+      for (var groupKey in this.subscriptions) {
+        return true;
+      }
+    } else {
+      // if has any subscriptions of eventType
+      for (var groupKey in this.subscriptions[targetType]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private notify(fn: Function, arg: any) {
+    setTimeout(() => {
+      fn(arg);
+    }, 0);
+  }
+}
+
+export const defaultMessageHub = new MessageHub();
+
+// /*[TEST-START]*/
+// function TEST_sample() {
+//   var mHub = new MessageHub(true);
+//   var unsubscribeA = mHub.subscribe('test', (msg: string) => {
+//     console.log('MessageHub test', msg);
+//   });
+//   var unsubscribeB = mHub.subscribe('*', (msg: string) => {
+//     console.log('MessageHub *', msg);
+//   });
+//   console.log(mHub.hasListener('test'));
+
+//   mHub.send('test', new MessageHubData('aa', 'bb'));
+//   mHub.send('*', new MessageHubData('aa*', 'bb*'));
+
+//   unsubscribeA();
+//   mHub.send('test', new MessageHubData('aa', 'bb'));
+//   unsubscribeB();
+//   mHub.send('*', new MessageHubData<string>('aa to * 2', 'bb', 'extra message'));
+//   console.log(mHub.hasListener('test'));
+// }
+// // TEST_sample();
+// /*[TEST-END]*/