diff --git a/demo/index.html b/demo/index.html index e5c2fc3..ed48e5c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -28,10 +28,18 @@

Example of dynamically created element:

+ + + + + +

Example of an element using the i18n-msg-behavior:

diff --git a/demo/locales/en.json b/demo/locales/en.json index 98dc3bb..c15e742 100644 --- a/demo/locales/en.json +++ b/demo/locales/en.json @@ -10,5 +10,19 @@ "minutes": { "description": "...", "message": "minutes" + }, + "welcome": { + "description": "...", + "message": "Welcome $name$ to the world of i18n $feature$", + "placeholders":{ + "name":{ + "content":"$1", + "example":"John" + }, + "feature":{ + "content":"$2", + "example":"Placeholders" + } + } } } diff --git a/demo/locales/es.json b/demo/locales/es.json index 87af86e..b9055f6 100644 --- a/demo/locales/es.json +++ b/demo/locales/es.json @@ -10,5 +10,19 @@ "minutes": { "description": "...", "message": "minutos" + }, + "welcome": { + "description": "...", + "message": "Bienvenido $name$ al mundo de la i18n $feature$", + "placeholders":{ + "name":{ + "content":"$1", + "example":"John" + }, + "feature":{ + "content":"$2", + "example":"Placeholders" + } + } } -} +} \ No newline at end of file diff --git a/demo/locales/fr.json b/demo/locales/fr.json index 188c0b8..9260e63 100644 --- a/demo/locales/fr.json +++ b/demo/locales/fr.json @@ -10,5 +10,19 @@ "minutes": { "description": "...", "message": "minutes" + }, + "welcome": { + "description": "...", + "message": "Bienvenue $name$ dans le monde de i18n $feature$", + "placeholders":{ + "name":{ + "content":"$1", + "example":"John" + }, + "feature":{ + "content":"$2", + "example":"Placeholders" + } + } } -} +} \ No newline at end of file diff --git a/demo/locales/pt-br.json b/demo/locales/pt-br.json index ccb66b8..1f11ce9 100644 --- a/demo/locales/pt-br.json +++ b/demo/locales/pt-br.json @@ -10,5 +10,19 @@ "minutes": { "description": "...", "message": "Minutos" + }, + "welcome": { + "description": "...", + "message": "Bem-vindo $name$ para o mundo da i18n $feature$", + "placeholders":{ + "name":{ + "content":"$1", + "example":"John" + }, + "feature":{ + "content":"$2", + "example":"Placeholders" + } + } } } \ No newline at end of file diff --git a/i18n-msg.html b/i18n-msg.html index c9b12b8..b8502f6 100644 --- a/i18n-msg.html +++ b/i18n-msg.html @@ -48,6 +48,28 @@ fallback text +### Placeholders + + It's possible to insert text within the message which requires no translation (e.g: names, dates, numbers). + To make available the use of placeholders the message must contain placeholders in Chrome.i18n format ($name$) whenever a parameter + should be used, and to use these add the attribute "placeholders" having value array. Example: + + "error": { + "message": "Error: $details$", + "description": "Generic error template. Expects error parameter to be passed in.", + "placeholders": { + "details": { + "content": "$1", + "example": "Failed to fetch RSS feed." + } + } + } + + + + + It's also possible to use {{}} and [[]] within the placeholders. + ### Full example @@ -67,7 +89,7 @@ // Get a message by an id: document.querySelector('i18n-msg').getMsg('days'); - + @demo --> @@ -96,7 +118,20 @@ type: String, value: null, notify: true - } + }, + /** + * Placeholders used to insert within the message if it contains replacement + * patterns to switch with. To use this feature you must include the "placeholders" + * attribute and use '' for the array and "" for each element. + * Example: placeholders = '["John Doe","Seattle"]' + */ + placeholders: { + type: Array, + value: function() { + return []; + }, + observer: '_placeholdersChanged' + }, }, /** @@ -112,23 +147,51 @@ return msg; }, - + _placeholdersChanged: function() { + if (this.language && this.locales[this.language] && this.placeholders) { + this._updateMessages(this); + } + }, + _getInterpolatedMsg: function() { + if (this.locales && this.locales[this.language]) { + var msg = this.locales[this.language][this.msgid]; + if (msg && msg.message) { + var message = msg.message; + var placeholders = msg.placeholders; + var phData = this.placeholders; + if ((placeholders) && (phData)) { + var content, pos; + for (var p in placeholders) { + content = placeholders[p].content; + if (content[0] == '$') { + pos = content.substring(1, content.length); + if (!isNaN(pos)) { + content = (phData.length < pos) ? '' : phData[pos - 1]; + } + } + message = message.split('$' + p + '$').join(content); + } + } + return message; + } + } + return null; + }, _updateMessages: function() { if (this.locales && this.locales[this.language]) { if (!this.msgid in this.locales[this.language]) { console.warn(this.localName + ': "' + this.msgid + '" message id was not found in ' + url); return; } - var msg = this.locales[this.language][this.msgid]; - if (msg && msg.message) { - this.msg = msg.message; - this.innerHTML = msg.message; + var message = this._getInterpolatedMsg(); + if(message) { + this.msg = message; + this.innerHTML = message; } } }, - attached: function() { - var msg = this.getMsg(); + var msg = this._getInterpolatedMsg(); if (msg) { this.msg = msg; this.innerHTML = msg; diff --git a/test/basic-test.html b/test/basic-test.html index 4e2f08c..3813ac3 100644 --- a/test/basic-test.html +++ b/test/basic-test.html @@ -27,6 +27,12 @@ PLACEHOLDER_STRING + + + +