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 updating an attribute:
+
+ Example of placeholders:
+ Default Welcome Message
+
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
+
+
+
+ PLACEHOLDER_STRING
+
+