d-calendar-years.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html"/>
<link rel="import" href="d-calendar-theme.html"/>
<link rel="import" href="d-date-utils.html"/>

<polymer-element name="d-calendar-years" attributes="startYear years viewingYear">
  <template> 
    <core-style ref="d-calendar-theme-years"></core-style>

    <d-date-utils id="dateUtils"></d-date-utils>

    <div id="years" layout horizontal wrap>
      <template repeat="{{year, i in yearsArray}}">
        <div class="year" layout horizontal center center-justified hero?="{{i + startYear == viewingYear}}" hero-id="poo">
          <paper-button year="{{i + startYear}}" on-tap="{{yearSelected}}" recenteringTouch>{{i + startYear}}</paper-button>
        </div>  
      </template>
    </div>
     
  </template>
 
  <script>
  (function(){

    Polymer({
      startYear: null,
      years: null,
      yearsArray: Array(this.years),
      
      ready: function(){
        var now = this.viewingYear || new Date().getFullYear();
        this.startYear = this.startYear || now - 2;
        this.years = this.years || 15;
      },

      yearsChanged: function() {
        this.yearsArray = Array(this.years)
      },

      yearSelected: function(e, detail, sender) {
        this.fire('d-calendar-year-selected', {year: sender.getAttribute('year')})
      }
    })
    
  })()
  </script>
</polymer-element>