It makes it a bit easier to create html widgets with the help of browserify.
To create a widget you need this and the inherits
module:
var Widget = require('browserify-widget');
var html = '<button id="like-button">Click to like</button><span class="text"></span>';
var events = {
'like-button:click': function() {
this.querySelector('.text').innerHTML = 'You like this!';
}
}
var myWidget = Widget(html);
myWidget.addEvents(events);
You can avoid writing the html directly into your javascripts by using the brfs browserify transform.
The following functions are defined through browserify-widget
:
Register custom events. The keys are the css selector plus the event (without
the 'on'), the value is the function which will be called when the event occurs
on this element. The this
of the to be called function is automatically set
to the container element of the widget itself (remember: a widget can
be rendered multiple times).
Basically the same like .addEvents
but with only one event.
Render the widget into an existing DOM element. el
can be an actual element or a selector.
Appends the widget to a DOM element. el
can be an actual element or a selector.