calendar-months

components.calendar-months.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import layout from '../../templates/components/power-calendar/months';
import { scheduleOnce } from '@ember/runloop';
import { A as emberA } from '@ember/array';
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 Component.extend({
  layout,
  focusedId: null,
  classNames: ['ember-power-calendar-months'],
  attributeBindings: ['data-power-calendar-id'],
  monthFormat: 'short',

  'data-power-calendar-id': computed.oneWay('calendar.uniqueId'),

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

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

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

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

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

  actions: {
    onFocusMonth(month) {
      scheduleOnce('actions', this, this._updateFocused, month.id);
    },

    onBlurMonth() {
      scheduleOnce('actions', this, this._updateFocused, null);
    }
  },

  // Methods
  _buildMonth(index, monthName, calendar = this.get('calendar')) {
    let date = moment([calendar.center.get('year'), 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 calendar.selected ? date.isSame(calendar.selected, 'month') : false;
  },

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

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>
{{calendar-months calendar=calendar onSelect=(action (mut currentDate) value="moment")}}

{{outlet}}
<br>
<br>
<h1>Welcome to {{appName}}</h1>

templates.components.calendar-months.hbs

{{! template-lint-disable invalid-interactive }}
<div class="ember-power-calendar-month-grid">
  {{#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'}}"
          onmouseup={{action calendar.actions.select month calendar}}
          onmousedown={{action 'onFocusMonth' month}}
          onblur={{action 'onBlurMonth'}}
          disabled={{day.isDisabled}}>
          {{#if hasBlock}}
            {{yield day publicAPI}}
          {{else}}
            {{month.name}}
          {{/if}}
        </button>
      {{/each}}
    </div>
  {{/each}}
</div>

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.11.2",
    "ember-template-compiler": "2.11.2",
    "ember-testing": "2.11.2"
  },
  "addons": {
    "ember-data": "2.5.5",
    "ember-moment": "7.4.1"
  }
}