calendar-months2.0

calendar-months.component.js

import Ember from 'ember';
import moment from 'moment';

function withLocale(locale, fn) {
  let returnValue;
  if (locale) {
    let previousLocale = moment.locale();
    moment.locale(locale);
    returnValue = fn();
    moment.locale(previousLocale);
  } else {
    returnValue = fn();
  }
  return returnValue;
}

export default Ember.Component.extend({
  focusedId: null,
  classNames: ['ember-power-calendar-months'],
  monthFormat: 'short',

  months: Ember.computed('calendar', 'focusedId', 'selected', function() {
    return Ember.A(this.get('monthNames').map((monthName, index) => {
      return this._buildMonth(index, monthName);
    }));
  }),

  longMonthNames: Ember.computed('calendar.locale', function() {
    return withLocale(this.get('calendar.locale'), () => moment.months());
  }),

  shortMonthNames: Ember.computed('calendar.locale', function() {
    return withLocale(this.get('calendar.locale'), () => moment.monthsShort());
  }),

  monthNames: Ember.computed('monthFormat', 'calendar.locale', function() {
    let monthFormat = this.get('monthFormat');
    return this.get(`${monthFormat}MonthNames`);
  }),

  thirds: Ember.computed('calendar', 'selected', function() {
    let thirds = Ember.A();
    let mid = 0;
    let months = this.get('months');
    for(let i = 0; i < 3; i++) {
      let monthObjects = Ember.A();
      for(let j = 0; j < 4; j++) {
        monthObjects.push(months.objectAt(mid++));
      }
      thirds.push({
        id: i,
        months: monthObjects
      });
    }
    return thirds;
  }),

  actions: {
    onFocusMonth(month) {
      console.log("onFocusMonth", month);
      Ember.run.scheduleOnce('actions', this, this._updateFocused, month.id);
    },

    onBlurMonth() {
      Ember.run.scheduleOnce('actions', this, this._updateFocused, null);
    },
    
    selectMonth(month) {
    	console.log("selectMonth", month);
      this.get('onSelect')(month);
    },
    
    onKeyDown() {
    	console.log("onKeyDown");
    }
  },

  _buildMonth(index, monthName, calendar = this.get('calendar')) {
    let date = moment([2016, index]);

    return {
      id: index,
      date: date.toDate(),
      moment: date,
      name: monthName,
      isDisabled: false,
      isFocused: this.get('focusedId') === index,
      isSelected: this.monthIsSelected(date, calendar)
    };
  },

  monthIsSelected(date, calendar = this.get('calendar')) {
    return this.get('selected') ? date.isSame(this.get('selected'), 'month') : false;
  },

  _updateFocused(id) {
    this.set('focusedId', id);
  },
});

calendar-months.template.hbs

<div class="ember-power-calendar-month-grid" onkeydown={{action "onKeyDown"}}>
  {{#each thirds as |third|}}
    <div class="ember-power-calendar-row ember-power-calendar-third">
      {{#each third.months as |month|}}
        <button type="button"
          data-month="{{month.id}}"
          class="ember-power-calendar-month {{if onSelect 'ember-power-calendar-month--interactive'}} {{if month.isSelected "ember-power-calendar-month--selected"}} {{if month.isFocused 'ember-power-calendar-month--focused'}}"
          onfocus={{action "onFocusMonth" month}}
          onclick={{action "selectMonth" month}}>
					{{month.name}}
        </button>
      {{/each}}
    </div>
  {{/each}}
</div>

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  currentDate: moment(),
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{moment-format currentDate "MMMM YYYY"}}
{{calendar-months selected=currentDate onSelect=(action (mut currentDate) value="moment")}}
<br>
<br>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-moment": "7.4.1"
  }
}