Rev element and update docs

ebidel · Sep 10, 2015 · 399cac4 · 399cac4
1 parent 3a51625
commit 399cac4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "i18n-msg",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "authors": [
     "Eric Bidelman <ebidel@>"
   ],
@@ -22,7 +22,7 @@
     "/tests/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.3",
+    "polymer": "Polymer/polymer#^1.1.3",
     "observe-js": "Polymer/observe-js"
   },
   "devDependencies": {

diff --git a/demo/index.html b/demo/index.html
@@ -4,10 +4,8 @@
 <head>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>i18n-msg element Demo</title>
-
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../i18n-msg.html">
-
 </head>
 <body>
 
@@ -26,6 +24,8 @@
 
 <p>Example of updating an attribute: <input id="input" placeholder="Days"></p>
 
+<p>Example of dynamically created element: <span id="dynamic"></span></p>
+
 <script>
   var selector = document.querySelector('#selector');
   var input = document.querySelector('#input');
@@ -43,6 +43,10 @@
   document.addEventListener('i18n-language-ready', function(e) {
     var daysMsgEl = document.querySelector('#daysMsgEl');
     input.placeholder = daysMsgEl.getMsg(daysMsgEl.msgid);
+
+    var el = document.createElement('i18n-msg');
+    el.msgid = 'minutes';
+    document.querySelector('#dynamic').appendChild(el);
   });
 </script>
 <script>

diff --git a/i18n-msg.html b/i18n-msg.html
@@ -11,6 +11,7 @@
 
     document.addEventListener('HTMLImportsLoaded', function() {
       I18nMsg.lang = 'es';
+      // I18nMsg.url = 'locales'; // optionally use custom folder for locales.
     });
 
 <b>Note:</b> this is done in `HTMLImportsLoaded` so `I18nMsg` will be defined by
@@ -25,8 +26,17 @@
 
 The directory name can be configured by using the `messagesUrl` property, but the file
 cannot. `<i18n-msg>` will always attempt to use messages from `<messagesUrl>/<LANG_YOU_SET>.json`.
+You can also set and/or change this location globally, at any time, by setting `I18nMsg.url`.
 
-<b>Note:</b> - message files are read once and reused for all instances of `<i18n-msg>`.
+**Example** - using a custom locales folder, setting it globally for all `<i18n-msg>` instances:
+
+    I18nMsg.url = 'locales';
+
+**Example** - set locales folder path on individual element:
+
+    <i18n-msg message-url="path/to/locales">fallback text</i18n-msg>
+
+<b>Note:</b> message files are read once and reused for all instances of `<i18n-msg>`.
 
 ### Fallback text
 
@@ -54,12 +64,9 @@
     // Get a message by an id:
     document.querySelector('i18n-msg').getMsg('days');
 
-@element i18n-msg
 @demo
-@homepage https://ebidel.github.io/i18n-msg
 -->
-<dom-module id="i18n-msg">
-</dom-module>
+<dom-module id="i18n-msg"></dom-module>
 <script>
 (function () {
 
@@ -104,7 +111,7 @@
 
       /**
        * The folder name where the localized `<lang>.json` files are located.
-       * Overrides `window.I18nMsg` if not `null`.
+       * Overrides `window.I18nMsg.url` if not `null`.
        */
       messagesUrl: {
         type: String,
@@ -132,7 +139,7 @@
         this._setLanguage(newValue);
       }.bind(this));
 
-      // Have instances observe window.I18nMsg.lang changes
+      // Have instances observe window.I18nMsg.url changes
       // and go fetch the localized messages.json file.
       var observerUrl = new PathObserver(window.I18nMsg, 'url');
       observerUrl.open(function(newValue, oldValue) {