ebidel · benjaminpg · Feb 26, 2016 · Feb 29, 2016 · Feb 29, 2016 · Mar 1, 2016
diff --git a/demo/currentDate.html b/demo/currentDate.html
@@ -0,0 +1,39 @@
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../i18n-msg.html">
+<dom-module id="current-date">
+  <style>
+    :host {
+
+    }
+  </style>
+  <template>
+    <p>If you were to say the current date in the selected languange it would be like:
+      <b>
+        <i18n-msg msgid="current" placeholders$='["[[current.day]]","[[current.month]]","[[current.year]]"]'>PLACEHOLDER_STRING</i18n-msg>
+      </b>.
+    </p>
+  </template>
+
+  <script>
+  (function() {
+    Polymer({
+      is: 'current-date',
+
+      properties: {
+        current: {
+          type: Object,
+          value: {
+            day: new Date().getDate(),
+            month: (new Date().getMonth() + 1),
+            year: new Date().getUTCFullYear()
+          }
+        }
+      },
+
+      ready: function() {
+      }
+    });
+  })();
+  </script>
+
+</dom-module>
diff --git a/demo/index.html b/demo/index.html
@@ -6,12 +6,14 @@
   <title>i18n-msg element Demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../i18n-msg.html">
+  <link rel="import" href="currentDate.html">
 </head>
 <body>
 
 <p>"Days" in selected language is: <b><i18n-msg id="daysMsgEl" msgid="days">PLACEHOLDER_STRING</i18n-msg></b>!</p>
 <p>"Hours" in selected language is: <b><i18n-msg msgid="hours">PLACEHOLDER_STRING</i18n-msg></b>!</p>
 <p>"Minutes" in selected language is: <b><i18n-msg msgid="minutes">PLACEHOLDER_STRING</i18n-msg></b>!</p>
+<current-date></current-date>
 
 <p>Example fallback text when a message id isn't found: <i18n-msg msgid="UNKNOWN_MSG_ID">PLACEHOLDER_STRING</i18n-msg></b></p>
 
@@ -34,6 +36,12 @@
 <script>
   var selector = document.querySelector('#selector');
   var input = document.querySelector('#input');
+  /*
+  var current = new Date();
+  var currentDay = current.getDate();
+  var currentMonth = current.getMonth();
+  var currentYear = current.getUTCFullYear();
+  */
 
   // Event is only needed when running under the HTMLImports polyfill.
   document.addEventListener('HTMLImportsLoaded', function() {

diff --git a/demo/locales/en.json b/demo/locales/en.json
@@ -10,5 +10,23 @@
   "minutes": {
     "description": "...",
     "message": "minutes"
+  },
+  "current": {
+    "description": "Example using placeholder values passed through attributes.",
+    "message": "Today it is $day$/$month$/$year$",
+    "placeholders": {
+      "day": {
+        "content": "$1",
+        "example": "29"
+      },
+      "month": {
+        "content": "$2",
+        "example": "2"
+      },
+      "year": {
+        "content": "$3",
+        "example": "2016"
+      }
+    }
   }
 }
diff --git a/demo/locales/es.json b/demo/locales/es.json
@@ -10,5 +10,23 @@
   "minutes": {
     "description": "...",
     "message": "minutos"
+  },
+  "current": {
+    "description": "Example using placeholder values passed through attributes.",
+    "message": "Hoy es $day$/$month$/$year$",
+    "placeholders": {
+      "day": {
+        "content": "$1",
+        "example": "29"
+      },
+      "month": {
+        "content": "$2",
+        "example": "2"
+      },
+      "year": {
+        "content": "$3",
+        "example": "2016"
+      }
+    }
   }
 }
diff --git a/demo/locales/fr.json b/demo/locales/fr.json
@@ -10,5 +10,23 @@
   "minutes": {
     "description": "...",
     "message": "minutes"
+  },
+  "current": {
+    "description": "Example using placeholder values passed through attributes.",
+    "message": "Aujourd'hui est $day$/$month$/$year$",
+    "placeholders": {
+      "day": {
+        "content": "$1",
+        "example": "29"
+      },
+      "month": {
+        "content": "$2",
+        "example": "2"
+      },
+      "year": {
+        "content": "$3",
+        "example": "2016"
+      }
+    }
   }
 }
diff --git a/demo/locales/pt-br.json b/demo/locales/pt-br.json
@@ -10,5 +10,23 @@
   "minutes": {
     "description": "...",
     "message": "Minutos"
+  },
+  "current": {
+    "description": "Example using placeholder values passed through attributes.",
+    "message": "Hoje é $day$/$month$/$year$",
+    "placeholders": {
+      "day": {
+        "content": "$1",
+        "example": "29"
+      },
+      "month": {
+        "content": "$2",
+        "example": "2"
+      },
+      "year": {
+        "content": "$3",
+        "example": "2016"
+      }
+    }
   }
-}
+}
diff --git a/i18n-msg.html b/i18n-msg.html
@@ -49,6 +49,22 @@
 
     <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 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
+    <i18-msg msgid="textwithplaceholders" paremeters="John Doe;;Seattle"></i18n-msg>
+
+It's also possible to use {{}} and [[]] within the placeholders.
+
 ### Full example
 
     <html lang="es">
@@ -105,6 +121,18 @@
         observer: '_msgidChanged'
       },
 
+      /**
+       * 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'
+      },
+
       /**
        * The language being used.
        */
@@ -202,6 +230,12 @@
       }
     },
 
+    _placeholdersChanged: function() {
+      if (this.language && this.locales[this.language] && this.placeholders) {
+        this._updateElementMessage(this);
+      }
+    },
+
     _languageChanged: function() {
       // Don't fetch .json file if it has already been
       // fetched or another instance is already trying to.
@@ -263,8 +297,24 @@
 
       var msg = instance.locales[instance.language][instance.msgid];
       if (msg && msg.message) {
+        var message = msg.message;
+        var placeholders = msg.placeholders;
+        var phData = instance.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);
+          }
+        }
         instance.msg = msg.message;
-        instance.innerHTML = msg.message;
+        instance.innerHTML = message;
       }
     },
 

diff --git a/test/basic-test.html b/test/basic-test.html
@@ -15,6 +15,7 @@
 
   <i18n-msg msgid="days" id="days">PLACEHOLDER_STRING</i18n-msg>
   <i18n-msg msgid="UNKNOWN_MSG_ID" id="days2">PLACEHOLDER_STRING</i18n-msg>
+  <i18n-msg msgid="current" id="current" placeholders='["29"]'>PLACEHOLDER_STRING</i18n-msg>
 
   <script>
 
@@ -69,6 +70,7 @@
     suite('<i18n-element> other', function() {
 
       var el = document.querySelector('#days2');
+      var elp = document.getElementById('current');
 
       test('an unknown message id is not replaced', function() {
         assert.equal(el.textContent, 'PLACEHOLDER_STRING');
@@ -80,6 +82,14 @@
         assert.equal(el2.textContent, 'minutos');
       });
 
+      test('Use placeholders', function() {
+        assert.equal(elp.textContent, 'Hoy es 29//');
+      });
+
+      test('Updating placeholders property', function() {
+        elp.placeholders = ["29","2","2016"];
+        assert.equal(elp.innerHTML, 'Hoy es 29/2/2016');
+      });
     });
   </script>