134 lines
2.1 KiB
JavaScript
134 lines
2.1 KiB
JavaScript
|
|
const NodeBuilder = require('./node-builder');
|
|
|
|
const Widget = new Class({
|
|
Extends: NodeBuilder
|
|
,Properties:
|
|
{
|
|
/**
|
|
* Main HTML node that represents the widget
|
|
*/
|
|
node: {
|
|
type: Object
|
|
,get: function() {
|
|
this.renderBase();
|
|
return this._node;
|
|
}
|
|
},
|
|
/**
|
|
* CSS syle.
|
|
*/
|
|
style: {
|
|
type: String
|
|
,set: function(x) {
|
|
this.node.style = x;
|
|
}
|
|
,get: function() {
|
|
return this.node.style;
|
|
}
|
|
},
|
|
/**
|
|
* CSS classes to be appendend to the node classes.
|
|
*/
|
|
class: {
|
|
type: String
|
|
,set: function(x) {
|
|
this._cssClass = x;
|
|
this._refreshClass();
|
|
}
|
|
,get: function() {
|
|
return this._node.className;
|
|
}
|
|
},
|
|
/**
|
|
* CSS class list.
|
|
*/
|
|
classList: {
|
|
type: Object
|
|
,get: function() {
|
|
return this.node.classList;
|
|
}
|
|
},
|
|
/**
|
|
* Title of the element.
|
|
*/
|
|
title: {
|
|
type: String
|
|
,set: function(x) {
|
|
this.node.title = x;
|
|
}
|
|
,get: function() {
|
|
return this.node.title;
|
|
}
|
|
}
|
|
}
|
|
|
|
,_node: null
|
|
|
|
,initialize: function(props) {
|
|
this.doc = document;
|
|
this.renderBase();
|
|
this.parent(props);
|
|
}
|
|
|
|
,createRoot: function(tagName) {
|
|
return this._node = this.createElement(tagName);
|
|
}
|
|
|
|
,renderBase: function() {
|
|
if (this._node)
|
|
return;
|
|
|
|
this.render();
|
|
this._refreshClass();
|
|
}
|
|
|
|
,_refreshClass: function() {
|
|
if (this._node && this._cssClass)
|
|
this._node.className = this._cssClass +' '+ this._node.className;
|
|
}
|
|
|
|
,remove: function() {
|
|
Vn.Node.remove(this._node);
|
|
}
|
|
|
|
,on: function(id, callback, instance) {
|
|
if (htmlEventMap[id]) {
|
|
this.node.addEventListener(id,
|
|
callback.bind(instance, this));
|
|
} else
|
|
this.parent(id, callback, instance);
|
|
}
|
|
});
|
|
|
|
htmlEventMap = {};
|
|
htmlEvents = [
|
|
'click',
|
|
'dblclick',
|
|
'keydown',
|
|
'keypress',
|
|
'keyup',
|
|
'mousedown',
|
|
'mousemove',
|
|
'mouseout',
|
|
'mouseover',
|
|
'mouseup',
|
|
'mousewheel',
|
|
'wheel',
|
|
'focus',
|
|
'focusout',
|
|
'focusin'
|
|
];
|
|
htmlEvents.forEach(x => htmlEventMap[x] = true);
|
|
|
|
htmlMethods = [
|
|
'addEventListener'
|
|
];
|
|
htmlMethods.forEach(method => {
|
|
Widget[method] = function() {
|
|
this.node.apply(this.node, arguments);
|
|
};
|
|
});
|
|
|
|
module.exports = Widget;
|