hostabee-element-mixin.html

<!--
@license
Copyright (c) 2019 Hostabee SAS.
This program is available under Apache License Version 2.0.
-->

<link rel="import" href="../polymer/lib/legacy/class.html">
<link rel="import" href="../polymer/lib/utils/mixin.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">

<script>
  (function() {
    'user strict';

    /**
     * @namespace Hostabee
     */
    window.Hostabee = window.Hostabee || {};

    /**
     * @mixinFunction
     * @polymer
     * @memberof Hostabee
     */
    const ElementMixin = (superClass) => class extends Polymer.mixinBehaviors(
      [Polymer.AppLocalizeBehavior], superClass) {

      static get is() {
        return 'hostabee-element';
      }

      static get properties() {
        return {
          /**
           * The language used by the element. It defines which file to use for
           * translation. The file format is the same specified by the Polymer
           * [AppLocalizeBehavior](https://www.webcomponents.org/element/PolymerElements/app-localize-behavior/v2.0.2/behaviors/Polymer.AppLocalizeBehavior)
           * behavior. If the language defined is regional and there is no
           * associted file found, the element will try to load a more generic
           * one. For example, the navigator language is "en-US" and there is no
           * file "en-US.json" available. The element will try to load "en.json".
           * 
           * @type {String}
           * @default window.navigator.language
           */
          language: {
            type: String,
            value: window.navigator.language,
          },
          /**
           * Path to an external file containing locales. If the value is set, the
           * target file will be used instead of the default one. The target file
           * must be in JSON format. The file will be searched from the root of
           * your app and must contain translations for all supported language.
           * 
           * For example, if you app supports English and French the file looks like:
           * 
           * ```json
           * {
           *    "en": {
           *      "greetings": "Hello!"
           *    },
           *    "fr": {
           *      "greetings": "Bonjour !"
           *    }
           * }
           * ```
           *
           * For more detail about the file format, please read the
           * [AppLocalizeBehavior](https://github.com/PolymerElements/app-localize-behavior)
           * documentation.
           *
           * @type {String}
           */
          localesFile: {
            type: String,
            observer: '_localesFileChanged',
          },
          /**
           * Path of the folder where the locales files are. All supported
           * language has it own file. For example, if you app supports English
           * and French and the locales files folder is "locales", the "locales"
           * folder contains 2 files:
           * 
           * _en.json_
           * 
           * ```json
           * {
           *    "greetings": "Hello!"
           * }
           * ```
           * 
           * and _fr.json_
           * 
           * ```json
           * {
           *    "greetings": "Bonjour !"
           * }
           * ```
           * 
           * @type {String}
           */
          localesFolder: {
            type: String,
            value: '.',
          },
        };
      }

      static get observers() {
        return [
          '_onLanguageChanged(language)',
        ];
      }

      /**
       * Called every time the element is inserted into the DOM. Useful for 
       * running setup code, such as fetching resources or rendering.
       * Generally, you should try to delay work until this time.
       */
      connectedCallback() {
        super.connectedCallback();
        this.addEventListener('app-localize-resources-error',
          this._unregionalize.bind(this));
      }

      /**
       * Called every time the element is removed from the DOM. Useful for 
       * running clean up code (removing event listeners, etc.).
       */
      disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('app-localize-resources-error',
          this._unregionalize.bind(this));
      }

      _onLanguageChanged(language) {
        if (language) {
          var url = this.resolveUrl(`${this.localesFolder}/${language}.json`);
          this.loadResources(url, language, true);
        }
      }

      /**
       * Loads locales file for internationalization.
       */
      _localesFileChanged() {
        if (this.localesFile && this.localesFile.trim().length != 0) {
          this.loadResources(this.resolveUrl(this.localesFile, window.location.origin));
        }
      }

      /**
       * Resets the language without the region information. In the case the
       * resources load failed because of a file not found this brings one more
       * chance to find translations more suitable to the user.
       */
      _unregionalize() {
        if (this.language.includes('-')) {
          this.language = this.language.split('-')[0];
        }
      }

    };

    Hostabee.ElementMixin = Polymer.dedupingMixin(ElementMixin);
  })();
</script>