UNPKG

5.56 kBJavaScriptView Raw
1import { Directive, ElementRef, Input } from '@angular/core';
2import { isDefined } from './util';
3import { TranslateService } from './translate.service';
4export var TranslateDirective = (function () {
5 function TranslateDirective(translateService, element) {
6 var _this = this;
7 this.translateService = translateService;
8 this.element = element;
9 // subscribe to onTranslationChange event, in case the translations of the current lang change
10 if (!this.onTranslationChangeSub) {
11 this.onTranslationChangeSub = this.translateService.onTranslationChange.subscribe(function (event) {
12 if (event.lang === _this.translateService.currentLang) {
13 _this.checkNodes(true, event.translations);
14 }
15 });
16 }
17 // subscribe to onLangChange event, in case the language changes
18 if (!this.onLangChangeSub) {
19 this.onLangChangeSub = this.translateService.onLangChange.subscribe(function (event) {
20 _this.checkNodes(true, event.translations);
21 });
22 }
23 // subscribe to onDefaultLangChange event, in case the default language changes
24 if (!this.onDefaultLangChangeSub) {
25 this.onDefaultLangChangeSub = this.translateService.onDefaultLangChange.subscribe(function (event) {
26 _this.checkNodes(true);
27 });
28 }
29 }
30 Object.defineProperty(TranslateDirective.prototype, "translate", {
31 set: function (key) {
32 if (key) {
33 this.key = key;
34 this.checkNodes();
35 }
36 },
37 enumerable: true,
38 configurable: true
39 });
40 TranslateDirective.prototype.ngAfterViewChecked = function () {
41 this.checkNodes();
42 };
43 TranslateDirective.prototype.checkNodes = function (forceUpdate, translations) {
44 if (forceUpdate === void 0) { forceUpdate = false; }
45 var nodes = this.element.nativeElement.childNodes;
46 for (var i = 0; i < nodes.length; ++i) {
47 var node = nodes[i];
48 if (node.nodeType === 3) {
49 var key = void 0;
50 if (this.key) {
51 key = this.key;
52 }
53 else {
54 var content = node.textContent.trim();
55 if (content.length) {
56 // we want to use the content as a key, not the translation value
57 if (content !== node.currentValue) {
58 key = content;
59 // the content was changed from the user, we'll use it as a reference if needed
60 node.originalContent = node.textContent;
61 }
62 else if (node.originalContent && forceUpdate) {
63 node.lastKey = null;
64 // the current content is the translation, not the key, use the last real content as key
65 key = node.originalContent.trim();
66 }
67 }
68 }
69 this.updateValue(key, node, translations);
70 }
71 }
72 };
73 TranslateDirective.prototype.updateValue = function (key, node, translations) {
74 var _this = this;
75 if (key) {
76 var interpolateParams = this.translateParams;
77 if (node.lastKey === key && this.lastParams === interpolateParams) {
78 return;
79 }
80 this.lastParams = interpolateParams;
81 var onTranslation = function (res) {
82 if (res !== key) {
83 node.lastKey = key;
84 }
85 if (!node.originalContent) {
86 node.originalContent = node.textContent;
87 }
88 node.currentValue = isDefined(res) ? res : (node.originalContent || key);
89 // we replace in the original content to preserve spaces that we might have trimmed
90 node.textContent = _this.key ? node.currentValue : node.originalContent.replace(key, node.currentValue);
91 };
92 if (isDefined(translations)) {
93 var res = this.translateService.getParsedResult(translations, key, interpolateParams);
94 if (typeof res.subscribe === "function") {
95 res.subscribe(onTranslation);
96 }
97 else {
98 onTranslation(res);
99 }
100 }
101 else {
102 this.translateService.get(key, interpolateParams).subscribe(onTranslation);
103 }
104 }
105 };
106 TranslateDirective.prototype.ngOnDestroy = function () {
107 if (this.onLangChangeSub) {
108 this.onLangChangeSub.unsubscribe();
109 }
110 if (this.onDefaultLangChangeSub) {
111 this.onDefaultLangChangeSub.unsubscribe();
112 }
113 if (this.onTranslationChangeSub) {
114 this.onTranslationChangeSub.unsubscribe();
115 }
116 };
117 TranslateDirective.decorators = [
118 { type: Directive, args: [{
119 selector: '[translate],[ng2-translate]'
120 },] },
121 ];
122 /** @nocollapse */
123 TranslateDirective.ctorParameters = function () { return [
124 { type: TranslateService, },
125 { type: ElementRef, },
126 ]; };
127 TranslateDirective.propDecorators = {
128 'translate': [{ type: Input },],
129 'translateParams': [{ type: Input },],
130 };
131 return TranslateDirective;
132}());