angular2-platform-node
Version:
Universal (isomorphic) javascript support for Angular2
559 lines • 20.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var get_dom_1 = require('./get-dom');
var core_1 = require('@angular/core');
var platform_browser_1 = require('@angular/platform-browser');
var helper_1 = require('./helper');
var node_shared_styles_host_1 = require('./node-shared-styles-host');
var NAMESPACE_URIS = {
'xlink': 'http://www.w3.org/1999/xlink',
'svg': 'http://www.w3.org/2000/svg',
'xhtml': 'http://www.w3.org/1999/xhtml'
};
var TEMPLATE_COMMENT_TEXT = 'template bindings={}';
var TEMPLATE_BINDINGS_EXP = /^template bindings=(.*)$/;
var NodeDomRootRenderer = (function () {
function NodeDomRootRenderer(document, eventManager, sharedStylesHost, _animationDriver) {
this.document = document;
this.eventManager = eventManager;
this.sharedStylesHost = sharedStylesHost;
this._animationDriver = _animationDriver;
this.registeredComponents = new Map();
}
NodeDomRootRenderer.prototype.renderComponent = function (componentProto) {
var renderer = this.registeredComponents.get(componentProto.id);
if (helper_1.isBlank(renderer)) {
renderer = new NodeDomRenderer(this, componentProto, this._animationDriver);
this.registeredComponents.set(componentProto.id, renderer);
}
return renderer;
};
NodeDomRootRenderer.decorators = [
{ type: core_1.Injectable },
];
NodeDomRootRenderer.ctorParameters = [
{ type: undefined, decorators: [{ type: core_1.Inject, args: [platform_browser_1.DOCUMENT,] },] },
{ type: platform_browser_1.EventManager, },
{ type: node_shared_styles_host_1.NodeSharedStylesHost, },
{ type: platform_browser_1.AnimationDriver, },
];
return NodeDomRootRenderer;
}());
exports.NodeDomRootRenderer = NodeDomRootRenderer;
exports.ATTRIBUTES = {
textarea: [
'autocapitalize',
'autocomplete',
'autofocus',
'cols',
'disabled',
'form',
'maxlength',
'minlength',
'name',
'placeholder',
'readonly',
'required',
'rows',
'selectionDirection',
'selectionEnd',
'selectionStart',
'spellcheck',
'wrap'
],
script: [
'async',
'integrity',
'src',
'type',
'text',
'defer',
'crossorigin'
],
button: [
'autofocus',
'autocomplete',
'disabled',
'form',
'formaction',
'formenctype',
'formmethod',
'formnovalidate',
'formtarget',
'name',
'type',
'value'
],
fieldset: [
'disabled',
'form',
'name'
],
a: [
'download',
'href',
'hreflang',
'ping',
'referrerpolicy',
'rel',
'target',
'type'
],
img: [
'alt',
'crossorigin',
'height',
'ismap',
'longdesc',
'referrerpolicy',
'sizesHTML5',
'src',
'srcsetHTML5',
'width',
'usemap'
],
input: [
'id',
'type',
'accept',
'mozactionhint',
'autocapitalize',
'autocomplete',
'autocorrect',
'autofocus',
'autosave',
'checked',
'disabled',
'form',
'formaction',
'formenctype',
'formmethod',
'formnovalidate',
'formtarget',
'height',
'incremental',
'inputmode',
'list',
'max',
'maxlength',
'min',
'minlength',
'multiple',
'name',
'pattern',
'placeholder',
'readonly',
'required',
'results',
'selectionDirection',
'size',
'spellcheck',
'src',
'step',
'tabindex',
'value',
'width',
'x-moz-errormessage'
],
output: [
'for',
'form',
'name'
],
progress: [
'max',
'value'
],
label: [
'accesskey',
'for',
'form'
],
option: [
'disabled',
'label',
'selected',
'value'
],
select: [
'autofocus',
'disabled',
'multiple',
'form',
'multiple',
'name',
'required',
'size'
],
optgroup: [
'disabled',
'label'
],
form: [
'accept-charset',
'action',
'autocapitalize',
'autocomplete',
'enctype',
'method',
'name',
'novalidate',
'target'
]
};
exports.IGNORE_ATTRIBUTES = {
'innerHTML': true,
'hidden': true
};
var DomRenderer = (function () {
function DomRenderer(_rootRenderer, componentProto, _animationDriver) {
this._rootRenderer = _rootRenderer;
this.componentProto = componentProto;
this._animationDriver = _animationDriver;
this._styles = _flattenStyles(componentProto.id, componentProto.styles, []);
if (componentProto.encapsulation !== core_1.ViewEncapsulation.Native) {
this._rootRenderer.sharedStylesHost.addStyles(this._styles);
}
if (this.componentProto.encapsulation === core_1.ViewEncapsulation.Emulated) {
this._contentAttr = _shimContentAttribute(componentProto.id);
this._hostAttr = _shimHostAttribute(componentProto.id);
}
else {
this._contentAttr = null;
this._hostAttr = null;
}
}
DomRenderer.prototype.selectRootElement = function (_selectorOrNode, _debugInfo) {
};
DomRenderer.prototype.createElement = function (parent, name, _debugInfo) {
var nsAndName = splitNamespace(name);
var el = helper_1.isPresent(nsAndName[0]) ?
get_dom_1.getDOM().createElementNS(NAMESPACE_URIS[nsAndName[0]], nsAndName[1]) :
get_dom_1.getDOM().createElement(nsAndName[1]);
if (helper_1.isPresent(this._contentAttr)) {
get_dom_1.getDOM().setAttribute(el, this._contentAttr, '');
}
if (helper_1.isPresent(parent)) {
get_dom_1.getDOM().appendChild(parent, el);
}
return el;
};
DomRenderer.prototype.createViewRoot = function (hostElement) {
var nodesParent;
if (this.componentProto.encapsulation === core_1.ViewEncapsulation.Native) {
nodesParent = get_dom_1.getDOM().createShadowRoot(hostElement);
this._rootRenderer.sharedStylesHost.addHost(nodesParent);
for (var i = 0; i < this._styles.length; i++) {
get_dom_1.getDOM().appendChild(nodesParent, get_dom_1.getDOM().createStyleElement(this._styles[i]));
}
}
else {
if (helper_1.isPresent(this._hostAttr)) {
get_dom_1.getDOM().setAttribute(hostElement, this._hostAttr, '');
}
nodesParent = hostElement;
}
return nodesParent;
};
DomRenderer.prototype.createTemplateAnchor = function (parentElement, _debugInfo) {
var comment = get_dom_1.getDOM().createComment(TEMPLATE_COMMENT_TEXT);
if (helper_1.isPresent(parentElement)) {
get_dom_1.getDOM().appendChild(parentElement, comment);
}
return comment;
};
DomRenderer.prototype.createText = function (parentElement, value, _debugInfo) {
var node = get_dom_1.getDOM().createTextNode(value);
if (helper_1.isPresent(parentElement)) {
get_dom_1.getDOM().appendChild(parentElement, node);
}
return node;
};
DomRenderer.prototype.projectNodes = function (parentElement, nodes) {
if (helper_1.isBlank(parentElement)) {
return;
}
appendNodes(parentElement, nodes);
};
DomRenderer.prototype.attachViewAfter = function (node, viewRootNodes) {
moveNodesAfterSibling(node, viewRootNodes);
};
DomRenderer.prototype.detachView = function (viewRootNodes) {
for (var i = 0; i < viewRootNodes.length; i++) {
get_dom_1.getDOM().remove(viewRootNodes[i]);
}
};
DomRenderer.prototype.destroyView = function (hostElement, _viewAllNodes) {
if (this.componentProto.encapsulation === core_1.ViewEncapsulation.Native && helper_1.isPresent(hostElement)) {
this._rootRenderer.sharedStylesHost.removeHost(get_dom_1.getDOM().getShadowRoot(hostElement));
}
};
DomRenderer.prototype.listen = function (renderElement, name, callback) {
return this._rootRenderer.eventManager.addEventListener(renderElement, name, decoratePreventDefault(callback));
};
DomRenderer.prototype.listenGlobal = function (target, name, callback) {
return this._rootRenderer.eventManager.addGlobalEventListener(target, name, decoratePreventDefault(callback));
};
DomRenderer.prototype.setElementProperty = function (renderElement, propertyName, propertyValue) {
get_dom_1.getDOM().setProperty(renderElement, propertyName, propertyValue);
};
DomRenderer.prototype.setElementAttribute = function (renderElement, attributeName, attributeValue) {
var attrNs;
var nsAndName = splitNamespace(attributeName);
if (helper_1.isPresent(nsAndName[0])) {
attributeName = nsAndName[0] + ':' + nsAndName[1];
attrNs = NAMESPACE_URIS[nsAndName[0]];
}
if (helper_1.isPresent(attributeValue)) {
if (helper_1.isPresent(attrNs)) {
get_dom_1.getDOM().setAttributeNS(renderElement, attrNs, attributeName, attributeValue);
}
else {
get_dom_1.getDOM().setAttribute(renderElement, attributeName, attributeValue);
}
}
else {
if (helper_1.isPresent(attrNs)) {
get_dom_1.getDOM().removeAttributeNS(renderElement, attrNs, nsAndName[1]);
}
else {
get_dom_1.getDOM().removeAttribute(renderElement, attributeName);
}
}
};
DomRenderer.prototype.setBindingDebugInfo = function (renderElement, propertyName, propertyValue) {
var dashCasedPropertyName = helper_1.camelCaseToDashCase(propertyName);
if (get_dom_1.getDOM().isCommentNode(renderElement)) {
var existingBindings = get_dom_1.getDOM().getText(renderElement)
.replace(/\n/g, '')
.match(TEMPLATE_BINDINGS_EXP);
var parsedBindings = JSON.parse(existingBindings[1]);
parsedBindings[dashCasedPropertyName] = propertyValue;
get_dom_1.getDOM().setText(renderElement, TEMPLATE_COMMENT_TEXT.replace('{}', JSON.stringify(parsedBindings)));
}
else {
this.setElementAttribute(renderElement, propertyName, propertyValue);
}
};
DomRenderer.prototype.setElementClass = function (renderElement, className, isAdd) {
if (isAdd) {
get_dom_1.getDOM().addClass(renderElement, className);
}
else {
get_dom_1.getDOM().removeClass(renderElement, className);
}
};
DomRenderer.prototype.setElementStyle = function (renderElement, styleName, styleValue) {
if (helper_1.isPresent(styleValue)) {
get_dom_1.getDOM().setStyle(renderElement, styleName, helper_1.stringify(styleValue));
}
else {
get_dom_1.getDOM().removeStyle(renderElement, styleName);
}
};
DomRenderer.prototype.invokeElementMethod = function (renderElement, methodName, args) {
get_dom_1.getDOM().invoke(renderElement, methodName, args);
};
DomRenderer.prototype.setText = function (renderNode, text) {
get_dom_1.getDOM().setText(renderNode, text);
};
DomRenderer.prototype.animate = function (element, startingStyles, keyframes, duration, delay, easing) {
return this._animationDriver.animate(element, startingStyles, keyframes, duration, delay, easing);
};
return DomRenderer;
}());
exports.DomRenderer = DomRenderer;
var NodeDomRenderer = (function (_super) {
__extends(NodeDomRenderer, _super);
function NodeDomRenderer(_rootRenderer, _componentProto, _animationDriver) {
if (_componentProto.encapsulation === core_1.ViewEncapsulation.Native) {
_componentProto.encapsulation = core_1.ViewEncapsulation.Emulated;
}
_super.call(this, _rootRenderer, _componentProto, _animationDriver);
this.__rootRenderer = _rootRenderer;
}
NodeDomRenderer.prototype.selectRootElement = function (selectorOrNode, _debugInfo) {
var el;
if (typeof selectorOrNode === 'string') {
el = get_dom_1.getDOM().querySelector(this.__rootRenderer.document, selectorOrNode);
if (helper_1.isBlank(el)) {
throw new Error("The selector \"" + selectorOrNode + "\" did not match any elements");
}
}
else {
el = selectorOrNode;
}
get_dom_1.getDOM().clearNodes(el);
return el;
};
NodeDomRenderer.prototype._isObject = function (val) {
if (val === null) {
return false;
}
return ((typeof val === 'function') || (typeof val === 'object'));
};
NodeDomRenderer.prototype.setElementProperty = function (renderElement, propertyName, propertyValue) {
if (this._isObject(propertyValue)) {
propertyValue = JSON.stringify(propertyValue);
}
else if (typeof propertyValue === 'number') {
propertyValue.toString();
}
if (propertyValue === null || propertyValue === undefined) {
propertyValue = false;
if (propertyName === 'innerHTML') {
propertyValue = '';
}
}
if (propertyName === 'innerHTML') {
return _super.prototype.setElementProperty.call(this, renderElement, propertyName, propertyValue);
}
if ((propertyName === 'autofocus' || propertyName === 'spellcheck') && propertyValue === false) {
return;
}
var setProp = _super.prototype.setElementProperty.call(this, renderElement, propertyName, propertyValue);
if (exports.IGNORE_ATTRIBUTES[propertyName]) {
return setProp;
}
var el = get_dom_1.getDOM().nodeName(renderElement);
var attrList = exports.ATTRIBUTES[el];
if (attrList) {
var booleanAttr = helper_1.listContains(attrList, propertyName);
if (booleanAttr) {
if (propertyName === 'autocomplete') {
return this._setOnOffAttribute(renderElement, propertyName, propertyValue);
}
else if (propertyName === 'checked') {
return this._setCheckedAttribute(renderElement, propertyName, propertyValue);
}
else if (propertyName === 'disabled') {
return this._setDisabledAttribute(renderElement, propertyName, propertyValue);
}
else {
return this._setBooleanAttribute(renderElement, propertyName, propertyValue);
}
}
}
if (typeof propertyValue === 'string') {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyName, propertyValue);
}
};
NodeDomRenderer.prototype.setElementStyle = function (renderElement, styleName, styleValue) {
var styleNameCased = helper_1.cssHyphenate(styleName);
return _super.prototype.setElementStyle.call(this, renderElement, styleNameCased, styleValue);
};
NodeDomRenderer.prototype.invokeElementMethod = function (renderElement, methodName, args) {
if (methodName === 'focus') {
if (get_dom_1.getDOM().nodeName(renderElement) === 'input') {
return _super.prototype.setElementAttribute.call(this, renderElement, 'autofocus', '');
}
}
return _super.prototype.invokeElementMethod.call(this, location, methodName, args);
};
NodeDomRenderer.prototype._setDisabledAttribute = function (renderElement, _propertyName, propertyValue) {
if (helper_1.isPresent(propertyValue)) {
if (propertyValue === true || propertyValue.toString() !== 'false') {
return _super.prototype.setElementAttribute.call(this, renderElement, 'disabled', 'disabled');
}
}
};
NodeDomRenderer.prototype._setCheckedAttribute = function (renderElement, _propertyName, propertyValue) {
if (helper_1.isPresent(propertyValue)) {
if (propertyValue === true) {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyValue, 'checked');
}
else if (propertyValue === false) {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyValue, '');
}
}
};
NodeDomRenderer.prototype._setOnOffAttribute = function (renderElement, propertyName, propertyValue) {
if (helper_1.isPresent(propertyValue)) {
if (propertyValue === true) {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyValue, 'on');
}
else if (propertyValue === false) {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyValue, 'off');
}
}
return _super.prototype.setElementAttribute.call(this, renderElement, propertyName, String(propertyValue));
};
NodeDomRenderer.prototype._setBooleanAttribute = function (renderElement, propertyName, propertyValue) {
if (helper_1.isPresent(propertyValue) && propertyValue !== false) {
if (propertyValue === true) {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyName, '');
}
else {
return _super.prototype.setElementAttribute.call(this, renderElement, propertyName, String(propertyValue));
}
}
return _super.prototype.setElementAttribute.call(this, renderElement, propertyName, String(propertyValue));
};
return NodeDomRenderer;
}(DomRenderer));
exports.NodeDomRenderer = NodeDomRenderer;
function moveNodesAfterSibling(sibling, nodes) {
var parent = get_dom_1.getDOM().parentElement(sibling);
if (nodes.length > 0 && helper_1.isPresent(parent)) {
var nextSibling = get_dom_1.getDOM().nextSibling(sibling);
if (helper_1.isPresent(nextSibling)) {
for (var i = 0; i < nodes.length; i++) {
get_dom_1.getDOM().insertBefore(nextSibling, nodes[i]);
}
}
else {
for (var i = 0; i < nodes.length; i++) {
get_dom_1.getDOM().appendChild(parent, nodes[i]);
}
}
}
}
function appendNodes(parent, nodes) {
for (var i = 0; i < nodes.length; i++) {
get_dom_1.getDOM().appendChild(parent, nodes[i]);
}
}
function decoratePreventDefault(eventHandler) {
return function (event) {
var allowDefaultBehavior = eventHandler(event);
if (allowDefaultBehavior === false) {
get_dom_1.getDOM().preventDefault(event);
}
};
}
var COMPONENT_REGEX = /%COMP%/g;
exports.COMPONENT_VARIABLE = '%COMP%';
exports.HOST_ATTR = "_nghost-" + exports.COMPONENT_VARIABLE;
exports.CONTENT_ATTR = "_ngcontent-" + exports.COMPONENT_VARIABLE;
function _shimContentAttribute(componentShortId) {
return exports.CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
}
function _shimHostAttribute(componentShortId) {
return exports.HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
}
function _flattenStyles(compId, styles, target) {
for (var i = 0; i < styles.length; i++) {
var style = styles[i];
if (Array.isArray(style)) {
_flattenStyles(compId, style, target);
}
else {
style = style.replace(COMPONENT_REGEX, compId);
target.push(style);
}
}
return target;
}
var NS_PREFIX_RE = /^:([^:]+):(.+)$/;
function splitNamespace(name) {
if (name[0] !== ':') {
return [null, name];
}
var match = name.match(NS_PREFIX_RE);
return [match[1], match[2]];
}
//# sourceMappingURL=node-renderer.js.map