lupine.components 1.1.13 → 1.1.15

package/src/lib/lite-dom.ts

@@ -1,225 +1,225 @@
-// 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();
-  }
-}
+// 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();
+  }
+}

package/src/lib/message-hub.ts

@@ -1,104 +1,103 @@
-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);
-  }
-}
-
-
-// /*[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]*/
+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);
+  }
+}
+
+// /*[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]*/