pretty-ngx-translate
Version:
The internationalization (i18n) library for Angular 2+
166 lines (165 loc) • 6.69 kB
JavaScript
import { Directive, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
import { equals, isDefined } from './util';
import { TranslateService } from './translate.service';
var TranslateDirective = (function () {
function TranslateDirective(translateService, element, _ref) {
var _this = this;
this.translateService = translateService;
this.element = element;
this._ref = _ref;
// subscribe to onTranslationChange event, in case the translations of the current lang change
if (!this.onTranslationChangeSub) {
this.onTranslationChangeSub = this.translateService.onTranslationChange.subscribe(function (event) {
if (event.lang === _this.translateService.currentLang) {
_this.checkNodes(true, event.translations);
}
});
}
// subscribe to onLangChange event, in case the language changes
if (!this.onLangChangeSub) {
this.onLangChangeSub = this.translateService.onLangChange.subscribe(function (event) {
_this.checkNodes(true, event.translations);
});
}
// subscribe to onDefaultLangChange event, in case the default language changes
if (!this.onDefaultLangChangeSub) {
this.onDefaultLangChangeSub = this.translateService.onDefaultLangChange.subscribe(function (event) {
_this.checkNodes(true);
});
}
}
Object.defineProperty(TranslateDirective.prototype, "translate", {
set: function (key) {
if (key) {
this.key = key;
this.checkNodes();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TranslateDirective.prototype, "translateParams", {
set: function (params) {
if (!equals(this.currentParams, params)) {
this.currentParams = params;
this.checkNodes(true);
}
},
enumerable: true,
configurable: true
});
TranslateDirective.prototype.ngAfterViewChecked = function () {
this.checkNodes();
};
TranslateDirective.prototype.checkNodes = function (forceUpdate, translations) {
if (forceUpdate === void 0) { forceUpdate = false; }
var nodes = this.element.nativeElement.childNodes;
// if the element is empty
if (!nodes.length) {
// we add the key as content
this.setContent(this.element.nativeElement, this.key);
nodes = this.element.nativeElement.childNodes;
}
for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
if (node.nodeType === 3) {
var key = void 0;
if (this.key) {
key = this.key;
if (forceUpdate) {
node.lastKey = null;
}
}
else {
var content = this.getContent(node).trim();
if (content.length) {
// we want to use the content as a key, not the translation value
if (content !== node.currentValue) {
key = content;
// the content was changed from the user, we'll use it as a reference if needed
node.originalContent = this.getContent(node);
}
else if (node.originalContent && forceUpdate) {
node.lastKey = null;
// the current content is the translation, not the key, use the last real content as key
key = node.originalContent.trim();
}
}
}
this.updateValue(key, node, translations);
}
}
};
TranslateDirective.prototype.updateValue = function (key, node, translations) {
var _this = this;
if (key) {
if (node.lastKey === key && this.lastParams === this.currentParams) {
return;
}
this.lastParams = this.currentParams;
var onTranslation = function (res) {
if (res !== key) {
node.lastKey = key;
}
if (!node.originalContent) {
node.originalContent = _this.getContent(node);
}
node.currentValue = isDefined(res) ? res : (node.originalContent || key);
// we replace in the original content to preserve spaces that we might have trimmed
_this.setContent(node, _this.key ? node.currentValue : node.originalContent.replace(key, node.currentValue));
_this._ref.markForCheck();
};
if (isDefined(translations)) {
var res = this.translateService.getParsedResult(translations, key, this.currentParams);
if (typeof res.subscribe === "function") {
res.subscribe(onTranslation);
}
else {
onTranslation(res);
}
}
else {
this.translateService.get(key, this.currentParams).subscribe(onTranslation);
}
}
};
TranslateDirective.prototype.getContent = function (node) {
return isDefined(node.textContent) ? node.textContent : node.data;
};
TranslateDirective.prototype.setContent = function (node, content) {
if (isDefined(node.textContent)) {
node.textContent = content;
}
else {
node.data = content;
}
};
TranslateDirective.prototype.ngOnDestroy = function () {
if (this.onLangChangeSub) {
this.onLangChangeSub.unsubscribe();
}
if (this.onDefaultLangChangeSub) {
this.onDefaultLangChangeSub.unsubscribe();
}
if (this.onTranslationChangeSub) {
this.onTranslationChangeSub.unsubscribe();
}
};
return TranslateDirective;
}());
export { TranslateDirective };
TranslateDirective.decorators = [
{ type: Directive, args: [{
selector: '[translate],[ngx-translate]'
},] },
];
/** @nocollapse */
TranslateDirective.ctorParameters = function () { return [
{ type: TranslateService, },
{ type: ElementRef, },
{ type: ChangeDetectorRef, },
]; };
TranslateDirective.propDecorators = {
'translate': [{ type: Input },],
'translateParams': [{ type: Input },],
};