basic-month-name.html

<!--
Shows a culture's name for a given month.

To the degree possible, all language/culture-specific aspects of this component
are localizable with the Globalize library (https://github.com/jquery/globalize).

@element basic-month-name
@demo http://basic-web-components.github.io/basic-web-components/src/basic-month-name/?dom=shadow
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../basic-shared/basic-shared.html">

<dom-module id="basic-month-name">
  <style>
    :host {
      display: inline-block;
    }
  </style>

  <template>
    <span id="name"></span>
  </template>
</dom-module>

<script>

Polymer({

  behaviors: [Basic.CalendarHelpers],

  is: 'basic-month-name',

  properties: {
    /**
     * The Globalize culture/language assigned to this element.
     *
     * @attribute culture
     */
    culture: {
      value: null,
      observer: '_cultureChanged'
    },

    /**
     * The index of the month to show: 0 = January, 1 = February, etc.
     *
     * @attribute month
     * @type integer
     * @default The index of the current month
     */
    month: {
      value: null,
      type: Number,
      reflectToAttribute: true,
      observer: '_monthChanged'
    }

  },

  ready: function() {
    if (!this.month) {
      // If no month is supplied, default to the current month.
      this.month = (new Date()).getMonth();
    }
  },

  _cultureChanged: function() {
    // Force update of month name.
    this._monthChanged();
  },

  _monthChanged: function() {
    culture = this.culture;
    monthNameEnum = this.monthsOfYear(culture);
    monthName = monthNameEnum['wide'][this.month + 1];
    this.$.name.textContent = monthName;
  }

});
</script>

</polymer-element>