0
1
Fork 0
hedera-web-mindshore/js/vn/component.js

208 lines
3.6 KiB
JavaScript
Raw Normal View History

2016-09-26 09:28:47 +00:00
2022-06-06 12:49:18 +00:00
const NodeBuilder = require('./node-builder');
2016-10-16 14:16:08 +00:00
2022-06-06 12:49:18 +00:00
const Klass = new Class();
module.exports = Klass;
Klass.extend({Classes: ''});
const ComponentClass = {
2022-06-06 16:02:17 +00:00
Extends: NodeBuilder,
Tag: 'vn-component',
Properties: {
2016-10-16 14:16:08 +00:00
/**
2022-06-06 12:49:18 +00:00
* Main HTML node that represents the component
2022-05-24 21:11:12 +00:00
*/
node: {
2016-10-14 10:58:35 +00:00
type: Object
2022-05-24 21:11:12 +00:00
,get: function() {
this.renderBase();
2016-10-14 10:58:35 +00:00
return this._node;
}
},
2022-05-28 15:49:46 +00:00
/**
* CSS syle.
*/
style: {
type: String
,set: function(x) {
this.node.style = x;
}
,get: function() {
2022-05-28 19:27:36 +00:00
return this._node.style;
2022-05-28 15:49:46 +00:00
}
},
2016-10-16 14:16:08 +00:00
/**
* CSS classes to be appendend to the node classes.
2022-05-24 21:11:12 +00:00
*/
class: {
2015-03-06 23:33:54 +00:00
type: String
2022-05-24 21:11:12 +00:00
,set: function(x) {
2022-06-06 12:49:18 +00:00
this._className = x;
this._refreshClass();
}
,get: function() {
return this._className;
}
},
/**
* CSS classes to be appendend to the node classes.
*/
className: {
type: String
,set: function(x) {
this._className = x;
2022-05-24 21:11:12 +00:00
this._refreshClass();
2015-03-06 23:33:54 +00:00
}
2022-05-24 21:11:12 +00:00
,get: function() {
2022-06-06 12:49:18 +00:00
return this._className;
2015-03-06 23:33:54 +00:00
}
2022-05-28 00:37:24 +00:00
},
2022-05-28 15:49:46 +00:00
/**
* CSS class list.
*/
classList: {
type: Object
,get: function() {
2022-05-28 19:27:36 +00:00
return this._node.classList;
2022-05-28 15:49:46 +00:00
}
},
2022-05-28 00:37:24 +00:00
/**
* Title of the element.
*/
title: {
type: String
,set: function(x) {
2022-05-28 19:27:36 +00:00
this._node.title = x;
2022-05-28 00:37:24 +00:00
}
,get: function() {
2022-05-28 19:27:36 +00:00
return this._node.title;
2022-05-28 00:37:24 +00:00
}
2022-05-28 19:27:36 +00:00
},
/**
* The HTML id of the element.
*/
htmlId:
{
type: String
,set: function(x) {
this._htmlId = x;
2022-05-30 01:30:33 +00:00
if (this._node)
this._node.id = x;
2022-05-28 19:27:36 +00:00
}
,get: function() {
return this._htmlId;
}
},
2015-03-06 23:33:54 +00:00
}
2016-10-14 10:58:35 +00:00
,_node: null
2022-06-06 12:49:18 +00:00
,scope: null
2015-03-06 23:33:54 +00:00
2022-05-24 21:11:12 +00:00
,initialize: function(props) {
2016-10-16 14:16:08 +00:00
this.doc = document;
2022-05-24 21:11:12 +00:00
this.renderBase();
2022-06-06 16:02:17 +00:00
NodeBuilder.prototype.initialize.call(this, props);
2016-09-26 09:28:47 +00:00
}
2022-05-24 21:11:12 +00:00
,createRoot: function(tagName) {
2022-05-30 01:30:33 +00:00
const node = this._node = this.createElement(tagName);
2022-07-15 05:55:18 +00:00
node.$ctrl = this;
2022-06-06 12:49:18 +00:00
if (this._htmlId)
node.id = this._htmlId;
if (this.$constructor.Classes)
node.className = this.$constructor.Classes;
2022-05-30 01:30:33 +00:00
return node;
2016-09-26 09:28:47 +00:00
}
2022-06-06 12:49:18 +00:00
,appendChild: function(child) {
if (child instanceof Klass)
this._node.appendChild(child.node);
else if (child instanceof Element)
this._node.appendChild(child);
}
2022-05-24 21:11:12 +00:00
,renderBase: function() {
2016-10-16 14:16:08 +00:00
if (this._node)
return;
2016-05-02 13:05:49 +00:00
2022-05-24 21:11:12 +00:00
this.render();
this._refreshClass();
}
2016-05-02 13:05:49 +00:00
2022-05-24 21:11:12 +00:00
,_refreshClass: function() {
2022-06-06 12:49:18 +00:00
if (this._node && this._className)
2022-06-06 17:13:57 +00:00
this._node.className = this._className +' '+ (this._node.className || '');
2016-05-02 13:05:49 +00:00
}
2015-03-15 12:44:57 +00:00
2022-05-24 21:11:12 +00:00
,remove: function() {
Vn.Node.remove(this._node);
2015-03-15 12:44:57 +00:00
}
2022-05-28 15:49:46 +00:00
,on: function(id, callback, instance) {
if (htmlEventMap[id]) {
2022-06-06 12:49:18 +00:00
this.addEventListener(id,
2022-05-28 15:49:46 +00:00
callback.bind(instance, this));
} else
2022-06-06 16:02:17 +00:00
NodeBuilder.prototype.on.call(this, id, callback, instance);
2022-05-28 15:49:46 +00:00
}
2022-06-06 12:49:18 +00:00
,loadTemplateFromFile: function(path) {
const builder = new Vn.Builder();
builder.compileFile(path);
this.loadScope(builder);
}
,loadTemplateFromString: function(xmlString) {
const builder = new Vn.Builder();
builder.compileString(xmlString);
this.loadScope(builder);
}
,loadScope: function(builder) {
const scope = this.scope = builder.load(this.doc, this);
scope.link();
this.$ = scope.$;
this._node = scope.$.main;
}
,_destroy: function() {
if (this.scope)
this.scope.unref();
2022-06-06 16:02:17 +00:00
NodeBuilder.prototype._destroy.call(this, );
2022-06-06 12:49:18 +00:00
}
2022-06-06 08:53:59 +00:00
};
2022-05-28 15:49:46 +00:00
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 => {
2022-06-06 12:49:18 +00:00
ComponentClass[method] = function() {
2022-06-06 08:53:59 +00:00
this.node[method].apply(this.node, arguments);
2022-05-28 15:49:46 +00:00
};
});
2016-09-26 09:28:47 +00:00
2022-06-06 12:49:18 +00:00
Klass.implement(ComponentClass);