Add fallback language for localization

.gitignore

@@ -1,2 +1,4 @@
 bower_components*
 bower-1.x.json
+build/
+.idea

.travis.yml

@@ -10,16 +10,13 @@ addons:
     packages:
       - google-chrome-stable
 before_script:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start
   - npm install -g polymer-cli
   - polymer install --variants
 script:
-  - xvfb-run polymer test
+  - polymer test
   - >-
-    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
-    fi
-env:
-  global:
-    - secure: >-
-        DitCRBZSh4YLwnI3LjD1ukbftNDIx6RrUjEYwHi+RMt+OCAkKiY4N0FI9PujlGEnt7tNdaD0CTzLSu+R2vpNeMaqsrjyFKzLfWH8rFRQ1dHCvaqZ1upV92yadzqLW6dhFMMre1OzhMoU0r/4b7hUV93UYAxUZU70WYzJTSjKvv+1ul97UVLMThmulvMBDrOx8cA06SF3oRfZwdxRj7zc8knUZvRmub41exfVonEVYjXdhOstHGLvXBXxmUBOjaTdNNaIT4KvvwMMmMqyQpnoB1uZimTLAy4y4ogpnf9HttPHTSZSTdWI2avk75nlqQCFFCcBier0NWT3phgkQt0CKrKs62w2RwjAIij2/ZVhsUiGLezIuOilG3k3+UYzXHb86KtLMie573XfAsX6cC/DYozJB7NfPA79MOwa/BuzTlyDJdZfKKm8+6FCmh7xQj0OcXHdqqxzTZu40bXwjz32TLDNnkHBdJNjTQrBm//TTQsxZ8BiXiw2tg4r7vXMIr3NjiRLQSLuAiHHQ2MnryhJuvAeBf1cqgjZXxy4mG6ctdus7Fc8nl9GSkY/5VmT4BMGwxbUcdd5/EDf750jwgE/sXzYABABYXd1cwvYPwT5oPsIMOs3hUC5mls+DlTk6Y57EtezsGuvA+EWeyg0rRzuv/u3rfJtOvYV7I7kA9xe/ZU=
-    - secure: >-
-        hSCnfwhOhq23wOyRk3vBz4Gz+KBYRaCsekoW9leSQ5LRt7QYF6gESoaiqQaqQ6aL0FX4tW6DCxGStFhwvOcR8EU9J1dz04Xku21bf3haLEFGTpOyDtQwisxw2TKp6ki95FIaBsx6435UvLXn77M3c4X5YW+1N+GKfZ62A/RqP12u6q8c2Sooe70V5E4J7oQS+CW20CvdcfrlEoHgJ89hF7hyu1A5GEj0Y4TJMsNfgqBC7t3k0YMIZ8yEgXRyzxsamKVFaa69U8435Wokol4zcgyVtirXZyKyqVLGk5j5dcUlzlwx4+dpoETrtTsUcIvLyxQ/SxsqBKr3j4u8CMAmKSRkMrDI/Pf6c4Q4H9N+CVOv+VW/TAqD/CnncI9eGaTJ3Ba2HZUMmHImPgBD1a6DqHvaFLbU5J9MHWvwCRBcOwQTAVqaOppgOvmu/mpwNnq9+NJFrwR6aTDgovYzi4TMA9DdoB7O3L6fvwYjqMYRahfukBPSYX5da4DHiQV0P6wEr/Sdub/ERQSgWqXLE6e/jpl4sXBY2rII4Ao3Tc/Xg9suwHjUKvmi8axOyfm0LjE9fmGj1bkFFPKU1JIAbGOaDInbpE6fMjbgpoOeqe6hxRxdrjDn5+/odQhhhUoGNk3YIKuLSeK82lW/ZMgH0/z/NubIQjchIuKDbLqmyX7ZZ2w=
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test;
+    fi

README.md

@@ -12,9 +12,14 @@ thing! https://github.com/PolymerLabs/tedium/issues
 
 -->
 
-[![Build status](https://travis-ci.org/PolymerElements/app-localize-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/app-localize-behavior)
+[![Build status](https://travis-ci.org/toshovski/app-localize-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/app-localize-behavior)
 
 
+This is a fork of the AppLocalizeBehavior. There are some improved features:
+
+  * Support of structured files
+  * fallback Language
+
 ## Polymer.AppLocalizeBehavior
 
 `Polymer.AppLocalizeBehavior` wraps the [format.js](http://formatjs.io/) library to

app-localize-behavior.html

@@ -151,6 +151,21 @@
       type: String
     },
 
+    /**
+     * Fallback Language if the current language is not yet translated.
+     *
+     * For example having only english translation, but trying to open a french localization will return the fallback language
+     *
+     * this.resources = {
+     *  'en': { 'greeting': 'Hello!' }
+     * }
+     *
+     *
+     */
+    fallbackLanguage:{
+        type: String
+    },
+
     /**
      * The dictionary of localized messages, for each of the languages that
      * are going to be used. See http://formatjs.io/guides/message-syntax/ for
@@ -248,6 +263,8 @@
   __computeLocalize: function(language, resources, formats) {
     var proto = this.constructor.prototype;
 
+    var fallbackLanguage = this.fallbackLanguage;
+
     // Check if localCache exist just in case.
     this.__checkLocalizationCache(proto);
 
@@ -262,9 +279,14 @@
       if (!key || !resources || !language || !resources[language])
         return;
 
+
       // Cache the key/value pairs for the same language, so that we don't
       // do extra work if we're just reusing strings across an application.
-      var translatedValue = resources[language][key];
+      var translatedValue = this.__findTranslatedValue(resources,language,key);
+      //use fallback key if provided
+      if(!translatedValue && fallbackLanguage){
+          translatedValue = this.__findTranslatedValue(resources,fallbackLanguage,key)
+      }
 
       if (!translatedValue) {
         return this.useKeyIfMissing ? key : '';
@@ -287,6 +309,25 @@
     };
   },
 
+    __findTranslatedValue: function(resources, language, key){
+        var subKey = key.split(":");
+        var translatedValue = null;
+        if (subKey.length > 1) {
+            // use namesSpace multi level
+            translatedValue = resources[language][subKey[0]];
+            for (var i=1; i<subKey.length; i++) {
+                if (translatedValue) {
+                    translatedValue = translatedValue[subKey[i]];
+                } else {
+                    break;
+                }
+            }
+        } else {
+            translatedValue = resources[language][key];
+        }
+        return translatedValue;
+    },
+
   __onRequestResponse: function(event, language, merge) {
     var propertyUpdates = {};
     var newResources = event.response;

bower.json

@@ -22,7 +22,7 @@
   "ignore": [],
   "dependencies": {
     "iron-ajax": "PolymerElements/iron-ajax#1 - 2",
-    "intl-messageformat": "yahoo/intl-messageformat#^1.0.0",
+    "intl-messageformat": "yahoo/intl-messageformat#^2.2.0",
     "polymer": "Polymer/polymer#1.9 - 2"
   },
   "devDependencies": {

demo/index.html

@@ -19,6 +19,7 @@
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="../../paper-styles/typography.html">
     <link rel="import" href="x-translate.html">
+    <link rel="import" href="x-fallback.html">
     <link rel="import" href="x-local-translate.html">
 
     <!-- Intl polyfill -->
@@ -30,5 +31,6 @@
   <body unresolved>
     <x-translate use-key-if-missing></x-translate>
     <x-local-translate></x-local-translate>
+    <x-fallback></x-fallback>
   </body>
 </html>

demo/locales.json

@@ -7,7 +7,11 @@
     "cats": "I have {numCats, number} cats. Almost {pctBlack, number, percent} of them are black.",
     "sale": "Sale begins {start, date, medium}, at {time, time, short}. Everything is {price, number, USD}.",
     "fruit": "{num, plural, =0 {no apples} =1 {one apple} other {# apples}}",
-    "bananas": "{name} ate {num, plural, =0 {no bananas} =1 {a banana} other {# bananas}} {gender, select, male {at his house.} female {at her house.} other {at their house.}}"
+    "bananas": "{name} ate {num, plural, =0 {no bananas} =1 {a banana} other {# bananas}} {gender, select, male {at his house.} female {at her house.} other {at their house.}}",
+    "missing_translation": "Hello world!",
+    "fruits":{
+       "apple": "{num, plural, =0 {no apples} =1 {one apple} other {# apples}}"
+    }
   },
   "fr": {
     "header_1": "Traduction et localisation",
@@ -17,6 +21,12 @@
     "cats": "J'ai {numCats, number} chats. Près de {pctBlack, number, percent} d'entre eux sont noirs.",
     "sale": "La vente commence le {start, date, medium} à {time, time, short}. Tout est à {price, number, USD}.",
     "fruit": "{num, plural, =0 {pas de pommes} =1 {une pomme} other {# pommes}}",
-    "bananas": "{name} {num, plural, =0 {ne} =1 {} other {}} mange {num, plural, =0 {pas de bananes} =1 {une banane} other {# bananes}} {gender, select, male {chez lui.} female {chez elle.} other {chez eux.}}"
+    "bananas": "{name} {num, plural, =0 {ne} =1 {} other {}} mange {num, plural, =0 {pas de bananes} =1 {une banane} other {# bananes}} {gender, select, male {chez lui.} female {chez elle.} other {chez eux.}}",
+    "fruits":{
+      "apple": "{num, plural, =0 {pas de pommes} =1 {une pomme} other {# pommes}}"
+    }
+  },
+  "en_US": {
+    "missing_translation": "Default fallback language"
   }
 }

demo/x-fallback.html

@@ -0,0 +1,71 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../app-localize-behavior.html">
+<link rel="import" href="common-styles.html">
+
+<dom-module id="x-fallback">
+  <template>
+    <style include="common-styles"></style>
+
+    <div class="lang">
+      <span title="english">🇬🇧 EN</span>
+      <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
+      <span title="french">FR 🇫🇷</span>
+    </div>
+
+    <h4>This will fallback from FR to en_US and use this language, because there is no missing_translation key in french and fallbackLanguage is set to en_US</h4>
+    <div class="snippet">
+      <div class="demo">
+
+        <div>{{localize('missing_translation')}}</div>
+      </div>
+      <div class="code-container">
+        <code>localize('missing_translation')
+        </code>
+      </div>
+    </div>
+
+  </template>
+
+
+
+  <script>
+    Polymer({
+      is: "x-fallback",
+
+      behaviors: [
+        Polymer.AppLocalizeBehavior
+      ],
+
+      properties: {
+        /* Overriden from AppLocalizeBehavior */
+        language: {
+          value: 'en',
+          type: String
+        },
+        fallbackLanguage: {
+          value: 'en_US',
+          type: String
+        }
+      },
+
+      attached: function() {
+        this.loadResources(this.resolveUrl('locales.json'));
+      },
+
+      _toggle: function() {
+        this.language = this.$.switch.checked ? 'fr' : 'en';
+      }
+    });
+  </script>
+</dom-module>

demo/x-local-translate.html

@@ -18,7 +18,7 @@
     <style include="common-styles"></style>
 
     <div class="lang">
-      <span title="english">🇬🇧 EN</span>
+      <span title="english">🇬🇧 EN</span>qw
       <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
       <span title="french">FR 🇫🇷</span>
     </div>

demo/x-translate.html

@@ -34,6 +34,7 @@ <h4>{{localize('header_1')}}</h4>
       </div>
       <div class="code-container">
         <code>localize('greeting')</code>
+        <code>localize('missing_translation')</code>
         <code>localize('intro', 'name', 'Batman')</code>
         <code>localize('cats', 'numCats', 10000, 'pctBlack', 0.42)</code>
         <!-- Dates need to be a valid JavaScript object. For an example, we
@@ -57,6 +58,17 @@ <h4>{{localize('header_2')}}</h4>
         <code>localize('bananas', 'name', 'Robin', 'gender', 'other', 'num', 4)</code>
       </div>
     </div>
+
+
+    <h4>Structured locales</h4>
+    <div class="snippet">
+      <div class="demo">
+        <div>{{localize('fruits:apple', 'num', 0)}} / {{localize('fruit', 'num', 1)}}/ {{localize('fruit', 'num', 3)}}</div>
+      </div>
+      <div class="code-container">
+        <code>localize('fruits:apple', 'num', 0) / localize('fruits:apple', 'num', 1) / localize('fruits:apple', 'num', 3)</code>
+      </div>
+    </div>
   </template>
 
   <script>

test/basic.html

@@ -26,9 +26,11 @@
   <script src="../../intl/locale-data/jsonp/fr.js"></script>
 
   <link rel="import" href="x-translate.html">
+  <link rel="import" href="x-translate-fallback.html">
   <link rel="import" href="x-translate2.html">
   <link rel="import" href="x-translate-only-imperative.html">
   <link rel="import" href="x-translate-l10n.html">
+  <link rel="import" href="x-translate-structured.html">
 
 </head>
 <body>
@@ -39,6 +41,18 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="structured">
+    <template>
+      <x-translate-structured></x-translate-structured>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="fallback">
+    <template>
+      <x-translate-fallback></x-translate-fallback>
+    </template>
+  </test-fixture>
+
   <test-fixture id="missing">
     <template>
       <x-translate use-key-if-missing></x-translate>
@@ -69,6 +83,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="structured">
+    <template>
+      <x-translate-structured></x-translate-structured>
+    </template>
+  </test-fixture>
+
   <script>
     function getRequestsCache(elem) {
       return elem.constructor.prototype.__localizationCache.requests;
@@ -86,7 +106,37 @@
       elem.constructor.prototype.__localizationCache.messages = {};
     }
 
+
+    suite('structured', function(){
+        test('can handle structured translations', function() {
+            var app = fixture('structured');
+
+            assert.equal(app.language, 'en');
+            assert.equal(app.$.output.innerHTML, 'my name is batman. i have 3 cats.');
+            assert.equal(app.$.missing.innerHTML, '');
+            assert.equal(app.$.multi.innerHTML, 'search:search in the website');
+
+            app.language = 'fr';
+            assert.equal(app.language, 'fr');
+            assert.equal(app.$.output.innerHTML, 'je m\'apelle batman. j\'ai 3 chats.');
+            assert.equal(app.$.missing.innerHTML, '');
+            assert.equal(app.$.multi.innerHTML, 'chercher:chercher sur le site');
+        });
+    });
+
+
+    suite('fallback', function(){
+        test('uses fallback language, if translation is missing', function() {
+            var app = fixture('fallback');
+            assert.equal(app.language, 'fr');
+            assert.equal(app.fallbackLanguage, 'en');
+            assert.equal(app.$.fallback.innerHTML, 'français hello');
+
+        });
+    });
+
     suite('basic', function() {
+
       test('can translate a basic string', function() {
         var app = fixture('basic');
 
@@ -99,6 +149,7 @@
         assert.equal(app.$.output.innerHTML, 'bonjour');
       });
 
+
       test('can handle missing keys', function() {
         var app = fixture('missing');