Commit 021f8597 authored by Stephaus Volke's avatar Stephaus Volke

initial commit

parents
# 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
# 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.
{
"source": "./src",
"destination": "./doc"
}
export {HTMLCustomElement} from './src/html-custom-element.js';
{
"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"
}
}
export default {
entry: 'index.js',
format: 'iife',
moduleName: 'HTMLCustomElements',
dest: 'build/index.es5.js', // equivalent to --output
sourceMap: true
};
/**
* @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});
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment