app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
421 lines (342 loc) • 11.3 kB
JavaScript
System.register(['app-decorators/src/libs/element-to-function'], function (_export, _context) {
"use strict";
var _elementToFunc, _createClass, VARS, NO_VARS, PRE_COMPILED, EVENT_VIEW_RENDER, EVENT_VIEW_SLOT, EVENT_VIEW_DONE, classof, View;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
return {
setters: [function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
_export('VARS', VARS = 'VARS');
_export('VARS', VARS);
_export('NO_VARS', NO_VARS = 'NO_VARS');
_export('NO_VARS', NO_VARS);
_export('PRE_COMPILED', PRE_COMPILED = 'PRE_COMPILED');
_export('PRE_COMPILED', PRE_COMPILED);
_export('EVENT_VIEW_RENDER', EVENT_VIEW_RENDER = 'render');
_export('EVENT_VIEW_RENDER', EVENT_VIEW_RENDER);
_export('EVENT_VIEW_SLOT', EVENT_VIEW_SLOT = 'slotchange');
_export('EVENT_VIEW_SLOT', EVENT_VIEW_SLOT);
_export('EVENT_VIEW_DONE', EVENT_VIEW_DONE = 'done');
_export('EVENT_VIEW_DONE', EVENT_VIEW_DONE);
classof = function classof(value) {
return Object.prototype.toString.call(value).slice(8, -1);
};
_export('View', View = function () {
/**
* @param options {object}
*/
function View() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, View);
this._refs = null;
this._templateNode = document.createElement('div');
this._regex = /\{\{.*?\}\}/;
this._vars = {};
this._slot = 'slot';
this.renderedTemplate = '';
this.init(options);
}
/**
* _rootNode
* @type {WeakMap}
*/
/**
* _templateNode
* @type {Element}
*/
/**
* _regex
* @type {RegExp}
*/
/**
* View Vars
* @type {Object}
*/
/**
* _slot description
* @type {String}
*/
/**
* rendered template
* @type {String}
*/
_createClass(View, [{
key: 'initialized',
value: function initialized() {
return this._refs.has(this);
}
}, {
key: 'reinit',
value: function reinit(options) {
this.init(options);
}
}, {
key: 'init',
value: function init() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$vars = _ref.vars,
vars = _ref$vars === undefined ? {} : _ref$vars,
rootNode = _ref.rootNode,
prerenderer = _ref.prerenderer,
precompiler = _ref.precompiler,
template = _ref.template;
if (!rootNode) {
throw new Error('\n\t\t\t\tRequired: rootNode.\n\t\t\t\tOptional: use prerenderer when template/s are precompiled.\n\t\t\t\tOptional: use precompiler when render raw template string.\n\t\t\t');
}
// init refs
this._refs = new WeakMap([[this, new Map([['rootNode', rootNode], ['precompile', precompiler], ['prerender', prerenderer], ['templates', new Map([['base', '']])]])]]);
// init vars
Object.assign(this._vars, this._immutable(vars));
// init template
template ? this.setTemplate(template) : null;
}
}, {
key: 'destroy',
value: function destroy() {
this._refs.delete(this);
}
}, {
key: 'set',
value: function set(property, value) {
var classOf = classof(property);
if (!/Object|String/.test(classOf)) {
throw new Error('Allowed is string or object as arguments');
}
if (classOf === 'Object') {
Object.assign(this._vars, property);
}
if (classOf === 'String') {
this._vars[property] = value;
}
return this;
}
}, {
key: 'get',
value: function get(property) {
var classOf = classof(property);
if (!/String/.test(classOf)) {
throw new Error('Allowed is string as argument');
}
return this._vars[property];
}
}, {
key: 'getVars',
value: function getVars() {
return this._vars;
}
}, {
key: 'setTemplate',
value: function setTemplate() {
var template = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
if (this._getTemplateType(template) === NO_VARS) {
this.compile(NO_VARS, template, name);
} else if (this._getTemplateType(template) === VARS) {
this.compile(VARS, template, name);
} else if (this._getTemplateType(template) === PRE_COMPILED) {
this.compile(PRE_COMPILED, template, name);
} else {
throw new Error('\n\t\t\t\tsetTemplate: an error occurred: unknown template type.\n\t\t\t');
}
return this;
}
}, {
key: '_getTemplateType',
value: function _getTemplateType(template) {
if (/String/.test(classof(template)) && !this._regex.test(template)) {
return NO_VARS;
} else if (/String/.test(classof(template)) && this._regex.test(template)) {
return VARS;
} else if (/Object/.test(classof(template))) {
return PRE_COMPILED;
} else {
return null;
}
}
}, {
key: 'compile',
value: function compile() {
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'VARS';
var template = arguments[1];
var name = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'base';
var templates = this._refs.get(this).get('templates');
switch (type) {
case NO_VARS:
{
templates.set(name, function () {
return template;
});
break;
}
case VARS:
{
templates.set(name, this._compile(template));
break;
}
case PRE_COMPILED:
{
templates.set(name, this._prerender(template));
break;
}
}
return templates.get(name);
}
}, {
key: 'render',
value: function render() {
var passedVars = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref2$templateName = _ref2.templateName,
templateName = _ref2$templateName === undefined ? 'base' : _ref2$templateName,
_ref2$force = _ref2.force,
force = _ref2$force === undefined ? false : _ref2$force,
_ref2$renderedFlag = _ref2.renderedFlag,
renderedFlag = _ref2$renderedFlag === undefined ? true : _ref2$renderedFlag;
// merge passed passedViewVars into localViewVars
var _tmpLocalViewVars = Object.assign({}, this._vars, passedVars);
var _rootNode = this._getRootNode();
// do nothing if already rendered
if (this.getAttribute(_rootNode, 'rendered') && !force) {
return this;
}
if (force) {
this._emptyNode(_rootNode);
}
// keep rendered template
this.renderedTemplate = this._render(templateName, _tmpLocalViewVars);
this.trigger(EVENT_VIEW_RENDER);
// write template into dom
this._templateNode.innerHTML = this.renderedTemplate;
// if exists slot in "templateNode" then move rootNodes to there
var slotNode = this._getSlotNode(this._templateNode);
if (slotNode) {
this._moveRootNodesToSlotNode(_rootNode, slotNode);
this.trigger(EVENT_VIEW_SLOT);
}
// append templateNode to _rootNode
this.appendChildNodesTo(this._templateNode, _rootNode);
// set rendered flag
if (renderedFlag) {
this.setAttribute(_rootNode, 'rendered', renderedFlag);
}
this.trigger(EVENT_VIEW_DONE);
return this;
}
}, {
key: '_render',
value: function _render(templateName, tmpLocalViewVars) {
return this._refs.get(this).get('templates').get(templateName)(tmpLocalViewVars);
}
}, {
key: '_getSlotNode',
value: function _getSlotNode(node) {
return node.querySelector(this._slot);
}
}, {
key: '_moveRootNodesToSlotNode',
value: function _moveRootNodesToSlotNode(rootNode, slotNode) {
this.appendChildNodesTo(rootNode, slotNode);
}
}, {
key: '_emptyNode',
value: function _emptyNode(node) {
node.innerHTML = '';
}
}, {
key: '_compile',
value: function _compile(template) {
var precompiled = this._precompile(template);
var prerendered = this._prerender(precompiled);
return prerendered;
}
}, {
key: '_precompile',
value: function _precompile(template) {
var precompiledString = this._refs.get(this).get('precompile')(template);
var precompiledObject = new Function('return ' + precompiledString)();
return precompiledObject;
}
}, {
key: '_prerender',
value: function _prerender(precompiled) {
return this._refs.get(this).get('prerender')(precompiled);
}
}, {
key: '_getRootNode',
value: function _getRootNode() {
return this._refs.get(this).get('rootNode');
}
}, {
key: '_immutable',
value: function _immutable(value) {
return JSON.parse(JSON.stringify(value));
}
}, {
key: 'getAttribute',
value: function getAttribute(domNode, value) {
if (!domNode instanceof Element) {
throw new Error('Allowed is domNode as argument');
}
return domNode.getAttribute(value);
}
}, {
key: 'setAttribute',
value: function setAttribute(domNode, name, value) {
if (!domNode instanceof Element) {
throw new Error('Allowed is domNode as argument');
}
domNode.setAttribute(name, value);
}
}, {
key: 'getRootNode',
value: function getRootNode() {
return this._refs.get(this).get('rootNode');
}
}, {
key: 'appendChildNodesTo',
value: function appendChildNodesTo(domNode, targetNode) {
while (domNode.childNodes.length > 0) {
targetNode.appendChild(domNode.childNodes[0]);
}
}
}, {
key: 'trigger',
value: function trigger(type) {
var event = new Event(type);
var _rootNode = this._refs.get(this).get('rootNode');
_rootNode.dispatchEvent(event);
}
}, {
key: 'el',
get: function get() {
return this._refs.get(this).get('rootNode');
}
}]);
return View;
}());
_export('View', View);
}
};
});
//# sourceMappingURL=view.js.map