initial commit

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# tern data
+*.tern-port
+
+# exclude build and doc
+build
+doc
+

README.md

+# HTML custom elements
+
+This module provides a collection of custom elements. Instead of
+inheriting your own elements from the standard HTMLElement interface
+you may use the classes provided by this module because they are
+expanded by often used features and functionalities to reduce
+redundant code.
+
+For details please see the reference documentation.
+
+## Usage
+
+Using the classes is simple as defining normal custom elements.
+
+``` javascript
+import {HTMLCustomElement} from 'path/to/this/class'
+
+class MyElement extends HTMLCustomElement {
+    constructor() {
+        super(); //instantiate parent class
+        // your code
+    }
+    
+    connectedCallback() {
+        // your code executed when elemend is attached to the dom
+    }
+    
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        // executed every time an attribute has changed
+    }
+
+}
+
+window.customElements.define('my-element', MyElement);
+```
+
+Now you can use your element like any other html tag:
+
+``` html
+<bod>
+    <my-element id="elem1"></my-element>
+</bod>
+```
+
+## Features
+
+This section summarizes the aviable methods for each class. For
+details please see the API documentation.
+
+### HTMLCustomElement
+- *waitForElementById*: equivalent of native getElementById, but works
+  asynchroneous and returns a Promise which resolves when the
+  requested element is aviable.
+- *addAttributeListener*: like an event listener but for
+  attributes. It observes an element attribute for changes and invokes
+  a pre defined callback function. For this js MutationObservers are
+  used.
+

esdoc.json

+{
+  "source": "./src",
+  "destination": "./doc"
+}

index.js

+export {HTMLCustomElement} from './src/html-custom-element.js';

package.json

+{
+  "name": "html-custom-elements",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "node_modules/.bin/rollup -c rollup.config.js",
+    "watch": "onchange '*.js' -v -- npm run build",
+    "doc": "esdoc -c ./esdoc.json"
+  },
+  "author": "S.Volke",
+  "license": "MIT",
+  "devDependencies": {
+    "browser-es-module-loader": "^0.1.6",
+    "doxdox": "^0.1.15",
+    "onchange": "~3.0.2",
+    "rollup": "~0.35.10"
+  }
+}

rollup.config.js

+export default {
+    entry: 'index.js',
+    format: 'iife',
+    moduleName: 'HTMLCustomElements',
+    dest: 'build/index.es5.js', // equivalent to --output
+    sourceMap: true
+};

src/html-custom-element.js

+/**
+ * @fileOverview Provides some useful core features and abstraction layer code
+ * @name index.js
+ * @author Stephanus Volke <stephanus.volke@jade-hs.de>
+ * @license MIT
+ */
+
+/**
+ * Class extending the native HTMLElement. To reduce redundant code it
+ * provides methods often used while creating custom elements. If
+ * possible your own custom elements should inherit from this class.
+ */
+
+export class HTMLCustomElement extends HTMLElement {
+
+  constructor() {
+    super();
+    this._observers = [];
+  }
+
+  /**
+   * This method is an extension of the nativ getElementById() JS
+   * function but works asynchroneous.
+   *
+   * @param {string} id - id of DOM element waiting for
+   * @return {Promise<Node>} - A Promise to the requested Element
+   */
+  waitForElementById(id) {
+    let prom = new Promise((resolve, reject) => {
+      let elem = undefined;
+      let timer = window.setInterval((id) => {
+        elem = document.getElementById(id);
+        if (elem) {
+          window.clearInterval(timer);
+          resolve(elem);
+        }
+      }, 50);
+    });
+    return prom;
+  }
+
+  /**
+   * This method offers an easy way to bind a mutationObserver to an
+   * element. Every time an attribute of Node changes, function fn
+   * gets called.
+   *
+   * @param {HTMLNode} Node - reference to the HTML Node
+   * @param {string} Attr - attribute name to observe
+   * @param {function} fn - callback function to execute on change
+   * @param {bool} IMT - if true, callback is executed immediately at registration
+   */
+  addAttributeListener(Node, Attr, fn, IMT) {
+    // loop over all registred Nodes
+    if (!(Node.nodeName in this._observers)) {
+      this._observers[Node.nodeName] = {Node: Node.nodeName,
+                                        Attr: {},
+                                        Observer: undefined};
+    }
+    let elem = this._observers[Node.nodeName];
+    if (elem.observer) elem.Observer.disconnect();
+    if (!(Attr in elem.Attr)) {
+      elem.Attr[Attr] = [];
+    }
+    elem.Attr[Attr].push(fn);
+    elem.Observer = new window.MutationObserver((mutations) => {
+      mutations.forEach((mut) => {
+        if (mut.attributeName in elem.Attr) {
+          for (let fun of elem.Attr[mut.attributeName]) {
+            fun(mut.oldValue, mut.target[mut.attributeName]);
+          }
+        }
+      });
+    });
+    if (IMT == true) {
+      fn(Node, Node.getAttribute(Attr));
+    }
+    elem.Observer.observe(Node, {attributes: true});
+  }
+}