From ba1d0e3e673abe751f5aa96da272f0b84d20e6f4 Mon Sep 17 00:00:00 2001 From: Rohit Khode Date: Sat, 25 Jun 2016 22:31:43 +0530 Subject: [PATCH 1/2] placeholders similar to Chrome.i18n APIs --- demo/index.html | 10 ++++++++ demo/locales/en.json | 14 ++++++++++ demo/locales/es.json | 16 +++++++++++- demo/locales/fr.json | 16 +++++++++++- demo/locales/pt-br.json | 14 ++++++++++ i18n-msg.html | 57 +++++++++++++++++++++++++++++++++++++---- test/basic-test.html | 20 +++++++++++++++ 7 files changed, 140 insertions(+), 7 deletions(-) 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..c766daf 100644 --- a/i18n-msg.html +++ b/i18n-msg.html @@ -48,6 +48,22 @@ 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 contains $n (being n a numeric value) whenever a parameter + should be used, and to use these add the attribute "placeholders" and separate each parameter with ";;". Example: + JSON + "textwithplaceholders" { + "description" : "...", + "message" : "I am $0 and I live in $1" + } + + HTML + + + It's also possible to use {{}} and [[]] within the placeholders. + ### Full example @@ -67,7 +83,7 @@ // Get a message by an id: document.querySelector('i18n-msg').getMsg('days'); - + @demo --> @@ -96,7 +112,18 @@ 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: [], + observer: '_placeholdersChanged' + }, }, /** @@ -112,7 +139,11 @@ return msg; }, - + _placeholdersChanged: function() { + if (this.language && this.locales[this.language] && this.placeholders) { + this._updateMessages(this); + } + }, _updateMessages: function() { if (this.locales && this.locales[this.language]) { if (!this.msgid in this.locales[this.language]) { @@ -121,8 +152,24 @@ } var msg = this.locales[this.language][this.msgid]; if (msg && msg.message) { - this.msg = msg.message; - this.innerHTML = 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); + } + } + this.msg = message; + this.innerHTML = message; } } }, 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 + + + + From 90567471c4b282aba6d3d452718be6d43a6c4c72 Mon Sep 17 00:00:00 2001 From: Rohit Khode Date: Sun, 26 Jun 2016 00:20:38 +0530 Subject: [PATCH 2/2] fixed build errors. 'attached' sets interpolated message now. --- i18n-msg.html | 54 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/i18n-msg.html b/i18n-msg.html index c766daf..b8502f6 100644 --- a/i18n-msg.html +++ b/i18n-msg.html @@ -51,17 +51,23 @@ ### 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 contains $n (being n a numeric value) whenever a parameter - should be used, and to use these add the attribute "placeholders" and separate each parameter with ";;". Example: - JSON - "textwithplaceholders" { - "description" : "...", - "message" : "I am $0 and I live in $1" - } - - HTML - - + 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 @@ -121,7 +127,9 @@ */ placeholders: { type: Array, - value: [], + value: function() { + return []; + }, observer: '_placeholdersChanged' }, }, @@ -144,12 +152,8 @@ this._updateMessages(this); } }, - _updateMessages: function() { + _getInterpolatedMsg: 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) { var message = msg.message; @@ -168,14 +172,26 @@ 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 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;