widgetize
v2.0.1
Published
Custom Element based HTML5 Widgets and Views using Browserify
Downloads
7
Readme
Widgetize 
Custom Element based HTML5 Widgets and Views using Browserify or Webpack
Create reusable and encapsulated HTML5 Widgets and Application Views using HTML5, CSS3 and Javascript.
Simply npm install and require() / import a widget and it will be automatically included in your Browserify or Webpack project, for use in your HTML page as a custom element.
Install
npm install widgetize --saveYou may also require a custom element polyfill.
npm install document-register-element --saveUsage
ES6 Syntax is optional
JS
import widgetize from 'widgetize';
/**
* Time Widget
*/
class TimeWidget extends HTMLElement
{
init() {
this._timer = null;
this._timeElement = null;
}
attach(dom, content) {
this._timeElement = dom.querySelector('time');
this._timer = setInterval(() => {
this.invalidate();
}, 1000);
}
update(dom) {
this._timeElement.textContent = new Date();
}
detach(dom) {
clearInterval(this._timer);
}
}
export default widgetize('time-widget', TimeWidget, 'The Time is: <span></span>');HTML
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<time-widget></time-widget>
</body>
</html>API
widgetize(tagName, constructor [, template] [, options])
Creates a widget and registers it with the browser. Returns a reference to the widget's constructor.
tagName String Tag name of the element to use in HTML. Must contain at least one -. e.g. my-tag
constructor Function Constructor function for the widgets definition. Can be null. Instances are created with the new operator.
template String Template to use for the elements HTML content.
options Object Options
.shadow
StringWhether to use the ShadowDOM if it is available. Defaults totrue.
The created widget has a lifecycle which can be programmatically accessed by the object defined by the Constructor function.
The following instance methods are available to be overridden by the widget
init()
Called when a widget is created, either by being called with new Widget() or when parsed by the browser in the DOM.
A good place to initialise instance variables.
attach(dom, content)
Called when the widget is added to the DOM, either by being used with .appendChild(widget) or when rendered by the browser in the DOM.
dom is a reference to the element's shadow DOM if supported, or the element itself.
content is a Document Fragment containing any content the element had.
The place to make one time modifications to the widget DOM, available as dom, and to add event listeners.
update(dom)
Called after attach() and then once per Event Loop execution after a call to invalidate.
dom is a reference to the element's shadow DOM if supported, or the element itself.
The place to make updates to the DOM after a change of state of the widget.
By waiting for update() to be called, DOM updates for multiple changes of state can be scheduled together.
detach(dom)
Called when the widget is removed from the DOM, either by being used with `` or when the browser removes the element from the DOM.
dom is a reference to the element's shadow DOM if supported, or the element itself.
The place to clean up references and event listeners etc.
The following instance methods are available to be used by the widget
invalidate()
Invalidates the widget, so that update() will be called in the next Event Loop execution.
Multiple calls to invalidate() within the same Event Loop execution, will only tigger one call to update() in the next Event Loop execution.
Examples
Test
npm install
npm run install:examples
npm test