moment-import-behavior.html

<script>
  window.MomentJs = window.MomentJs || {};

  // Language shared by all instances of `moment-js`.
  window.MomentJs.language = navigator.language || 'en';

  /**
   * @polymerBehavior MomentJs.MomentImportBehavior
   */
  window.MomentJs.MomentImportBehavior = {

    properties: {
      /**
       * Locale settings.
       */
      locale: {
        type: String,
        value: window.MomentJs.language,
        observer: '_localeChanged'
      }
    },

    ready: function() {
      if (typeof window.moment === 'undefined') {
        if (!window.MomentJs.isLoading) {
          window.MomentJs.isLoading = true;
          this._loadMomentJs();
        } else {
          this._waitToLoadMomentJs();
        }
      } else {
        // Moment is already loaded. e.g. by other components.
        this.fire('moment-is-ready');
      }
    },

    /**
     * Dispatches a custom event. The event is composed, cancellable and bubbles
     * through the DOM tree. It does not contain any detail.
     *
     * @param {String} name The name of the event to be dispatched.
     */
    fire: function(name) {
      this.dispatchEvent(new CustomEvent(name, {
        bubbles: true,
        composed: true,
        cancellable: true,
      }));
    },

    /**
     * Loads momentjs library from local.
     *
     * @private
     */
    _loadMomentJs: function() {
      console.debug('[moment-js] momentjs library is loading...');
      var script = document.createElement('script');
      script.src = this.resolveUrl('../moment/min/moment.min.js');
      script.onload = function() {
        window.MomentJs.isLoading = false;
        console.debug('[moment-js] momentjs library is loaded!');
        this._localizeGlobalMoment().then(() => this.fire('moment-is-ready'));
      }.bind(this);
      document.body.appendChild(script);
    },

    /**
     * Wait till loading momentjs complete and then fire the event `moment-is-ready`.
     *
     * @private
     */
    _waitToLoadMomentJs: function() {
      if (typeof window.moment !== 'undefined') {
        this.fire('moment-is-ready');
      } else {
        window.setTimeout(this._waitToLoadMomentJs.bind(this), 1);
      }
    },

    /**
     * Checks if the given locale is valid. A valid locale contains only letters,
     * has a length of 2 (en, de, fr, etc...) or between 5 and 8 with a dash
     * (en-ca, de-ch, fr-ca, gom-latn, x-pseudo, etc...).
     * 
     * @private
     */
    _isValidLocale: function(locale) {
      return !!locale && locale.length >= 2 &&
        /^[a-zA-Z]{1,3}(-[a-zA-Z]{2,6})?$/.test(locale);
    },

    /**
     * Updates all `moment-js` instances when the locale of one changed. The
     * value of `locale` must pass the test `_isValidLocale` else the setting
     * stay unchanged.
     *
     * @private
     */
    _localeChanged: function(language) {
      var lang = language || navigator.language || 'en';
      if (lang === window.MomentJs.language) {
        this.fire('moment-locale-changed');
      } else if (this._isValidLocale(lang)) {
        window.MomentJs.language = lang;
        this._localizeGlobalMoment().then(this._syncMomentsLanguage);
      }
    },

    /**
     * Synchronizes all moment-js language with the global momentjs locale
     * setting.
     *
     * @private
     */
    _syncMomentsLanguage() {
      let moments = document.querySelectorAll('moment-js');
      let lang = window.MomentJs.language;
      for (let i = 0, l = moments.length; i < l; i++) {
        moments[i].locale = lang;
      }
    },

    /**
     * Asks to `momentjs` to use the defined locales to display the dates. All
     * instances use the same language (defined by MomentJs.language). If the
     * locales file is not loaded, the first element having changed will load it
     * and the others wait until the end of the import. Then the global of
     * `momentjs` locale is changed and all instances refreshes their display.
     *
     * @private
     */
    _localizeGlobalMoment: function() {
      return new Promise((resolve) => {
        // Check if the script is already loaded.
        var lang = window.MomentJs.language;
        var fileName = '/moment/locale/' + lang + '.js';
        var scripts = document.querySelectorAll('script');
        for (var i = 0; i < scripts.length; i++) {
          if (scripts[i].src.includes(fileName)) {
            // Update momentjs locale once.
            if (window.moment.locale() !== lang) {
              window.moment.locale(lang);
            }
            this.fire('moment-locale-changed');
            return resolve();
          }
        }

        // Load language and set it as momentjs locale.
        var script = document.createElement('script');
        script.src = this.resolveUrl('..' + fileName);
        script.onload = () => {
          console.debug('[moment-js] locales file for "' + lang + '" loaded');
          window.moment.locale(lang);
          console.debug('[moment-js] language set to "' + lang + '"');
          this.fire('moment-locale-changed');
          resolve();
        };
        script.onerror = () => resolve();
        document.body.appendChild(script);
      });
    }
  };
</script>