ebidel · kvsrohit · Jun 25, 2016 · Jun 25, 2016
diff --git a/demo/index.html b/demo/index.html
@@ -28,10 +28,18 @@
 <template is="dom-bind">
   <i18n-msg msgid="days" msg="{{days}}"></i18n-msg>
   <p>Example of updating an attribute: <input id="input" placeholder="[[days]]"></p>
+
+  <p>Example of placeholders:</p>
+  <i18n-msg msgid="welcome" placeholders='["John","Placeholders"]'>Default Welcome Message</i18n-msg>
+
 </template>
 
 <p>Example of dynamically created element: <span id="dynamic"></span></p>
 
+
+
+
+
 <script>
   var selector = document.querySelector('#selector');
   var input = document.querySelector('#input');
@@ -58,6 +66,8 @@
   });
 </script>
 
+
+
 <p>Example of an element using the <code>i18n-msg-behavior</code>:</p>
 
 <i18n-msg-behavior-example></i18n-msg-behavior-example>

diff --git 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
@@ -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"
+      }
+    }    
   }
-}
+}
diff --git 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"
+      }
+    }    
   }
-}
+}
diff --git 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"
+      }
+    }    
   }
 }
diff --git a/i18n-msg.html b/i18n-msg.html
@@ -48,6 +48,28 @@
 
     <i18n-msg msgid="unknownmsgid">fallback text</i18n-msg>
 
+### 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."
+            }
+       }
+    }
+
+
+    <i18-msg msgid="error" placeholders='["Failed to fetch data."]'></i18n-msg>
+
+ It's also possible to use {{}} and [[]] within the placeholders.
+
 ### Full example
 
     <html lang="es">
@@ -67,7 +89,7 @@
 
     // Get a message by an id:
     document.querySelector('i18n-msg').getMsg('days');
-
+ 
 @demo
 -->
 <dom-module id="i18n-msg"></dom-module>
@@ -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
@@ -27,6 +27,12 @@
       <i18n-msg msgid="UNKNOWN_MSG_ID" id="days2">PLACEHOLDER_STRING</i18n-msg>
     </template>
   </test-fixture>
+
+  <test-fixture id="fixture3">
+    <template>
+      <i18n-msg msgid="welcome" id="welcome" placeholders='["Shane","Messages"]'>PLACEHOLDER_STRING</i18n-msg>
+    </template>
+  </test-fixture>
 
   <script>
 
@@ -92,6 +98,20 @@
       });
 
     });
+
+    suite('<i18n-element>', function() {
+      var el = fixture('fixture3');
+
+      test('uses placeholders', function() {
+        assert.equal(el.textContent, 'Bienvenido Shane al mundo de la i18n Messages');
+      });
+
+      test('updates message when placeholders change', function() {
+        el.set('placeholders',["John","Placeholders"]);
+        assert.equal(el.textContent, 'Bienvenido John al mundo de la i18n Placeholders');
+      });
+
+    });
   </script>
 
 </body>