country-select.html

<link rel="import" href="../polymer/polymer.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">

<!--
`country-select`
A simple country selector web component using the paper-dropdown-menu that implements the app-localize-behavior and can translate the country names. Currently it supports localized country names for 253 languages. The country list is based on [umpirsky/country-list](https://github.com/umpirsky/country-list).

@demo demo/index.html 
-->
<dom-module id="country-select">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <paper-dropdown-menu label="{{label}}">
      <paper-listbox slot="dropdown-content" class="dropdown-content" attr-for-selected="code" selected="{{selectedCountry}}">
        <template is="dom-repeat" items="{{_countries}}">
          <paper-item code="{{item.code}}">[[item.name]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>

  </template>
  <script>
  Polymer({

    is: 'country-select',
    behaviors: [
        Polymer.AppLocalizeBehavior
    ],
    properties: {
      /**
       * The label to be displayed in the dropdown menu.
       *
       * @attribute label
       * @type String
       * @default 'Country'
       */
      label: {
        type: String,
        value: 'Country'
      },
      /**
       * The currently selected country. The country is represented by its [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2).
       *
       * @attribute selectedCountry
       * @type String
       */
      selectedCountry: {
        type: String,
        notify: true
      },
      /**
       * The language code that is used to display the country names. It is represented using a "locale code" defined in [BCP 47](https://tools.ietf.org/html/bcp47).
       *
       * @attribute language
       * @type String
       * @default 'en'
       */
      language: {
        type: String,
        value: 'en'
      },
      _codeUrl: {
        type: String,
        computed: '_calculateUrl(language)',
        observer: '_reloadResources'
      },
      _countries: {
        type: Array
      },
      _selectedIndex: {
        type: Number
      }
    },
    ready: function() {
      this.addEventListener('app-localize-resources-loaded', this._onTranslationLoaded);
    },
    attached: function() {
      this._reloadResources(this._codeUrl);
    },
    _reloadResources: function(url) {
      this.loadResources(this.resolveUrl(url));
    },
    _onTranslationLoaded: function() {
      var countries = [];
      var lang = this.language.replace('_', '-');
      var values = this.resources[lang];
      var codes = Object.keys(values);
      for (var i = 0; i < codes.length; i++) {
        var country = {};
        country.code = codes[i];
        country.name = values[country.code];
        countries.push(country);
      }
      countries.sort(this._compareCountry);
      this.set('_countries', countries);
    },
    _calculateUrl: function(language) {
      var lang = language.replace('-', '_');
      return '../country-list/data/' + lang + '/formatJsCountries.json';
    },
    _compareCountry: function(a, b) {
      if (a.name < b.name)
        return -1;
      if (a.name > b.name)
        return 1;
      return 0;
    }
  });
  </script>
</dom-module>