hedera-web/js/htk/widget.js

const NodeBuilder = require('../vn/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;
			}
		},
		/**
		 * The HTML id of the element.
		 */
		htmlId:
		{
			type: String
			,set: function(x) {
				this._htmlId = x;
				if (this._node)
					this._node.id = x;
			}
			,get: function() {
				return this._htmlId;
			}
		},
	}

	,_node: null
	
	,initialize: function(props) {
		this.doc = document;
		this.renderBase();
		this.parent(props);
	}
	
	,createRoot: function(tagName) {
		const node = this._node = this.createElement(tagName);
		if (this._htmlId) node.id = this._htmlId;
		return node;
	}
	
	,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;