Calendar tweaks

README.md

@@ -102,7 +102,6 @@ Apply a loading indicator to an element.  See the [Loading Indicator section](#l
 All of this functionality is provided through a combination of leveraging the best-of-breed of other component offerings as well as our own implementations when the existing offerings were deficient. Existing offerings that were leveraged include:
 
 * [Twitter Bootstrap](http://getbootstrap.com/)
-* [Bootstrap-Datepicker](http://bootstrap-datepicker.readthedocs.org/en/release/#)
 * [Highcharts](http://www.highcharts.com/)
 * [Select2](http://ivaynberg.github.io/select2/)
 * [typeahead.js](https://twitter.github.io/typeahead.js/)
@@ -112,9 +111,6 @@ All of this functionality is provided through a combination of leveraging the be
 While this library is MIT licensed not all of the third-party component libraries are. Specifically, Highcharts is only free for non-commercial use and requires a license for any other use. See
 [this FAQ page](http://shop.highsoft.com/faq/non-commercial#what-is-commercial-website) for more information.
 
-Other libraries that are not MIT licensed, though it should not pose a problem, are:
-
-* [Bootstrap-Datepicker](https://github.com/eternicode/bootstrap-datepicker/blob/release/LICENSE)
 
 
 

addon/components/sl-calendar-day.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import layout from '../templates/components/sl-calendar-day';
 
 /**
  * @module
@@ -13,59 +12,101 @@ export default Ember.Component.extend({
     // -------------------------------------------------------------------------
     // Attributes
 
+    /** @type {String[]} */
+    attributeBindings: [
+        'ariaSelected:aria-selected',
+        'tabIndex'
+    ],
+
     /** @type {String[]} */
     classNameBindings: [
-        'active',
+        'active:selected',
         'new',
-        'old'
+        'old',
+        'isToday:today',
+        'restricted:disabled',
+        'hasEvents'
     ],
 
     /** @type {String[]} */
     classNames: [
         'day'
     ],
 
-    /** @type {Object} */
-    layout,
-
     /** @type {String} */
     tagName: 'td',
 
     // -------------------------------------------------------------------------
     // Actions
 
+    /** @type {Object} */
+    actions: {},
+
     // -------------------------------------------------------------------------
     // Events
 
     /**
-     * @function
+     * Send the click event up to sl-calendar
+     *
      * @returns {undefined}
      */
     click() {
-        const content = this.get( 'content' );
+        const events = this.get( 'events' );
+        const date = this.get( 'date' );
 
-        if ( content ) {
-            this.sendAction( 'action', content );
-        }
+        this.sendAction( 'action', date, events );
+    },
+
+    /**
+     * Focus this date on insert.
+     * Needed for keyboard navigation across months.
+     *
+     * @returns {undefined}
+     */
+    didInsertElement() {
+        this._super( ...arguments );
+
+        this.focus();
     },
 
     // -------------------------------------------------------------------------
     // Properties
 
     /**
-     * Whether the calendar day this cell represents is actively selected day
+     * Whether the calendar day this cell represents is actively selected
      *
      * @type {Boolean}
      */
     active: false,
 
     /**
-     * The various data representing the day (created and passed in through
-     * sl-calendar)
+     * The role attribute to apply
+     *
+     * @private
+     * @type {String}
+     */
+    ariaRole: 'gridcell',
+
+    /**
+     * The specific moment date that this cell represents
+     *
+     * @type {?moment}
+     */
+    date: null,
+
+    /**
+     * An array of events bound to the date this cell represents
      *
-     * @type {?Object}
+     * @type {Object[]}
      */
-    content: null,
+    events: [],
+
+    /**
+     * Whether this day is currently focused by keyboard navigation
+     *
+     * @type {Boolean}
+     */
+    focused: false,
 
     /**
      * Whether the calendar day this cell represents is part of the next month
@@ -81,12 +122,90 @@ export default Ember.Component.extend({
      *
      * @type {Boolean}
      */
-    old: false
+    old: false,
+
+    /**
+     * Whether the calendar day this cell represents is restricted by parent
+     * calendar's selectConstraint
+     *
+     * @type {Boolean}
+     */
+    restricted: false,
 
     // -------------------------------------------------------------------------
     // Observers
 
+    /**
+     * When tabIndex changes, check if we should apply focus.
+     *
+     * @function
+     * @returns {undefined}
+     */
+    focus: Ember.observer(
+        'tabIndex',
+        function() {
+            if ( this.get( 'focused' ) ) {
+                Ember.run.scheduleOnce( 'afterRender', this, function() {
+                    this.$().get( 0 ).focus();
+                });
+            }
+        }
+    ),
+
     // -------------------------------------------------------------------------
     // Methods
 
+    /**
+     * Sets aria-selected attribute when active state is true.
+     *
+     * @function
+     * @returns {?Boolean}
+     */
+    ariaSelected: Ember.computed(
+        'active',
+        function() {
+            const active = this.get( 'active' );
+            return active ? active : null;
+        }
+    ),
+
+    /**
+     * Whether there are events bound to this date.
+     *
+     * @function
+     * @returns {Boolean}
+     */
+    hasEvents: Ember.computed(
+        'events',
+        function() {
+            return !Ember.isEmpty( this.get( 'events' ) );
+        }
+    ),
+
+    /**
+     * Calculate if this day is today's date.
+     *
+     * @function
+     * @returns {Boolean}
+     */
+    isToday: Ember.computed(
+        'date',
+        function() {
+            return window.moment().isSame( this.get( 'date' ), 'day' );
+        }
+    ),
+
+    /**
+     * Sets tabIndex attribute based on focused property.
+     *
+     * @function
+     * @returns {Number}
+     */
+    tabIndex: Ember.computed(
+        'focused',
+        function() {
+            return this.get( 'focused' ) ? 0 : -1;
+        }
+    )
+
 });

addon/components/sl-calendar-month.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import layout from '../templates/components/sl-calendar-month';
 
 /**
  * @module
@@ -15,14 +14,16 @@ export default Ember.Component.extend({
 
     /** @type {String[]} */
     classNameBindings: [
-        'active'
+        'active:selected'
     ],
 
-    /** @type {Object} */
-    layout,
+    /** @type {String[]} */
+    classNames: [
+        'month'
+    ],
 
     /** @type {String} */
-    tagName: 'span',
+    tagName: 'td',
 
     // -------------------------------------------------------------------------
     // Actions
@@ -31,7 +32,8 @@ export default Ember.Component.extend({
     // Events
 
     /**
-     * @function
+     * Send the click event up to sl-calendar
+     *
      * @returns {undefined}
      */
     click() {
@@ -42,46 +44,23 @@ export default Ember.Component.extend({
     // Properties
 
     /**
-     * Whether the month that this component represents is selected by the
-     * overall calendar component
+     * Whether the month that this component represents is actively selected
      *
      * @type {Boolean}
      */
     active: false,
 
-    /**
-     * The locale string to use for moment dates
-     *
-     * @type {String}
-     */
-    locale: 'en',
-
     /**
      * The number of the month (1-12)
      *
      * @type {?Number}
      */
-    month: null,
+    month: null
 
     // -------------------------------------------------------------------------
     // Observers
 
     // -------------------------------------------------------------------------
     // Methods
 
-    /**
-     * The short string name of the represented month
-     *
-     * @function
-     * @returns {String}
-     */
-    shortName: Ember.computed(
-        'month',
-        function() {
-            return window.moment([ 1, this.get( 'month' ) - 1 ])
-                .locale( this.get( 'locale' ) )
-                .format( 'MMM' );
-        }
-    )
-
 });

addon/components/sl-calendar-year.js

@@ -15,16 +15,21 @@ export default Ember.Component.extend({
 
     /** @type {String[]} */
     classNameBindings: [
-        'active',
+        'active:selected',
         'new',
         'old'
     ],
 
+    /** @type {String[]} */
+    classNames: [
+        'year'
+    ],
+
     /** @type {Object} */
     layout,
 
     /** @type {String} */
-    tagName: 'span',
+    tagName: 'td',
 
     // -------------------------------------------------------------------------
     // Actions
@@ -33,7 +38,8 @@ export default Ember.Component.extend({
     // Events
 
     /**
-     * @function
+     * Send the click event up to sl-calendar
+     *
      * @returns {undefined}
      */
     click() {
@@ -44,8 +50,7 @@ export default Ember.Component.extend({
     // Properties
 
     /**
-     * Whether the year this component represents is the currently active year
-     * of the parent calendar component
+     * Whether the year this component represents is actively selected
      *
      * @type {Boolean}
      */