tsante-localize-mixin.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">
<script>
/**
* `TSPolymer.TsanteLocalizeMixin` wraps the Polymer.AppLocalizeBehavior.
* It simplifies the loading of json locale resources.
* In the folder of your create a folder 'lang' and add the json locale files in it : 
* - lang/
* - lang/fr.json
* - lang/en.json
* - lang/de.json
* The mixin will automatically get those files according to its locale array content.
* The default locales loaded are fr, en, de, it, es. If a file is not found no worries, it won't fail, but you may have a few error messages in the console.
*     <dom-module id="x-app">
*        <template>
*         <div>{{localize('hello', 'name', 'Batman')}}</div>
*        </template>
*        <script>
*           class XApp extends TSPolymer.TsanteLocalizeMixin(Polymer.Element) {
*              static get is() { return 'x-app' }
*              static get properties() {
*                 return { language: { value: 'fr' } }
*              }
*           }
*        &lt;/script>
*     </dom-module>
*
* @polymer
* @demo demo/index.html French and english localization
* @mixinFunction TSPolymer.TsanteLocalizeMixin
*/
const TsanteLocalizeMixin = superClass => {
  return class extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], superClass) {
    static get properties() {
      return {
        locales: {
          type: Array,
          value: ['fr', 'en', 'de', 'es', 'it']
        },
        _folder: { type: String, value: 'lang' },
        _extension: { type: String, value: 'json' },
        _prefix: { type: String, value: '' },
        _suffix: { type: String, value: '' }
      }
    }
    async connectedCallback(){
      super.connectedCallback()
      const fetches = this.locales.map(locale => fetch(this.resolveUrl(`${this._folder}/${this._prefix}${locale}${this._suffix}.${this._extension}`)))
      const results = await Promise.all(fetches)
      const correct = results.filter(result => result.status === 200)
      const jsons = await Promise.all(correct.map(e => e.json()))
      const json = Object.assign({}, ...jsons)
      this.resources = json
      this.fire('app-localize-resources-loaded', '', { bubbles: this.bubbleEvent});
    }
  }
}

window.TSPolymer = window.TSPolymer || {}
window.TSPolymer.TsanteLocalizeMixin =  TsanteLocalizeMixin
</script>