Merge branch 'master' into translate

Author: Luisetelo

README.md

@@ -70,7 +70,7 @@ The picker is decoupled from any single form element for simplicity. However, it
 import MaterialDateTimePicker from 'material-datetime-picker';
 
 const input = document.querySelector('.c-datepicker-input');
-const picker = new MaterialDatePicker()
+const picker = new MaterialDateTimePicker()
     .on('submit', (val) => {
       input.value = val.format("DD/MM/YYYY");
     });

dist/material-datetime-picker.css

@@ -104,7 +104,7 @@
 .c-datepicker__header-date span {
   display: block;
   color: white;
-  margin: 4px 0;
+  margin: 0;
   transition: opacity 100ms ease-in-out; }
 
 .c-datepicker__header-date__month {

dist/material-datetime-picker.js

@@ -210,6 +210,8 @@ var Events = function () {
   return Events;
 }();
 
+var ESC_KEY = 27;
+
 var prefix = 'c-datepicker';
 var defaults$$1 = function defaults$$1() {
   return {
@@ -310,18 +312,24 @@ var DateTimePicker = function (_Events) {
         //  and deal with updating the view only).
         // For now this allows us to set the default time using the same quantize
         // rules as setting the date explicitly. Setting this.value meets setTime|Date's
-        // expectation that we have a value, and `0` guarantees that we will detect 
+        // expectation that we have a value, and `0` guarantees that we will detect
         this.value = moment(0);
         this.setDate(this.options.default);
         this.setTime(this.options.default);
+      } else {
+        this.setDate(this.value);
+        this.setTime(this.value);
       }
 
       this.initializeRome(this.$('.' + this.options.styles.container), this.options.dateValidator);
+      this._listenForCloseEvents();
+
       this._show();
     }
   }, {
     key: 'close',
     value: function close() {
+      this._stopListeningForCloseEvents();
       this._hide();
     }
   }, {
@@ -352,68 +360,91 @@ var DateTimePicker = function (_Events) {
       });
       return this;
     }
+  }, {
+    key: '_listenForCloseEvents',
+    value: function _listenForCloseEvents() {
+      var _this4 = this;
+
+      this._onWindowKeypress = function (e) {
+        if (e.which === ESC_KEY) {
+          _this4.close();
+        }
+      };
+
+      window.addEventListener("keydown", this._onWindowKeypress);
+    }
+  }, {
+    key: '_stopListeningForCloseEvents',
+    value: function _stopListeningForCloseEvents() {
+      window.removeEventListener("keydown", this._onWindowKeypress);
+      this._closeHandler = null;
+    }
   }, {
     key: 'delegateEvents',
     value: function delegateEvents() {
-      var _this4 = this;
+      var _this5 = this;
 
       this.$('.js-cancel').addEventListener('click', function () {
-        return _this4.clickCancel();
+        return _this5.clickCancel();
       }, false);
       this.$('.js-ok').addEventListener('click', function () {
-        return _this4.clickSubmit();
+        return _this5.clickSubmit();
       }, false);
 
       this.$('.js-date-hours').addEventListener('click', function (e) {
-        return _this4.showHourClock(e);
+        return _this5.showHourClock(e);
       }, false);
       this.$('.js-date-minutes').addEventListener('click', function (e) {
-        return _this4.showMinuteClock(e);
+        return _this5.showMinuteClock(e);
       }, false);
 
       this.$('.js-clock-hours').addEventListener('mouseleave', function (e) {
-        return _this4.mouseOutHourClock(e);
+        return _this5.mouseOutHourClock(e);
       }, false);
       this.$('.js-clock-hours .' + this.options.styles.clockNum).forEach(function (el) {
         el.addEventListener('click', function (e) {
-          return _this4.clickClickHour(e);
+          return _this5.clickClickHour(e).showMinuteClock();
         }, false);
         el.addEventListener('mouseenter', function (e) {
-          return _this4.mouseInHourClock(e);
+          return _this5.mouseInHourClock(e);
         }, false);
       });
 
       this.$('.js-clock-minutes').addEventListener('mouseleave', function (e) {
-        return _this4.mouseOutMinuteClock(e);
+        return _this5.mouseOutMinuteClock(e);
       }, false);
       this.$('.js-clock-minutes .' + this.options.styles.clockNum).forEach(function (el) {
         el.addEventListener('click', function (e) {
-          return _this4.clickClockMinute(e);
+          return _this5.clickClockMinute(e);
         }, false);
         el.addEventListener('mouseenter', function (e) {
-          return _this4.mouseInMinuteClock(e);
+          return _this5.mouseInMinuteClock(e);
         }, false);
       });
 
       this.$('.c-datepicker__clock--am').addEventListener('click', function (e) {
-        return _this4.clickAm(e);
+        return _this5.clickAm(e);
       }, false);
       this.$('.c-datepicker__clock--pm').addEventListener('click', function (e) {
-        return _this4.clickPm(e);
+        return _this5.clickPm(e);
       }, false);
 
       this.$('.js-show-calendar').addEventListener('click', function (e) {
-        return _this4.clickShowCalendar(e);
+        return _this5.clickShowCalendar(e);
       }, false);
       this.$('.js-date-day').addEventListener('click', function (e) {
-        return _this4.clickShowCalendar(e);
+        return _this5.clickShowCalendar(e);
       }, false);
       this.$('.js-date-month').addEventListener('click', function (e) {
-        return _this4.clickShowCalendar(e);
+        return _this5.clickShowCalendar(e);
       }, false);
 
       this.$('.js-show-clock').addEventListener('click', function (e) {
-        return _this4.clickShowClock(e);
+        return _this5.clickShowClock(e);
+      }, false);
+
+      this.scrimEl.addEventListener('click', function () {
+        return _this5.close();
       }, false);
 
       return this;

dist/material-datetime-picker.js.map

@@ -16,23 +16,45 @@ test("opening the picker ads backdrop and picker elements to the dom", () => {
 
   const $backdrop = $(".c-scrim");
   const $picker = $(".c-datepicker");
-  
+
   expect($picker).not.toBeNull();
   expect($backdrop).not.toBeNull();
 });
 
 test("closing the picker removes elements from the dom", async () => {
-  const picker = await openPicker()
+  const picker = await openPicker();
   picker.close();
   await delay(300);
-  
+
   const $backdrop = $(".c-scrim");
   const $picker = $(".c-datepicker");
 
   expect($picker).toBeNull();
   expect($backdrop).toBeNull();
 });
 
+test("the picker closes when the escape key is pressed", async () => {
+  const picker = await openPicker();
+
+  const event = new window.KeyboardEvent('keydown', { which: 27, keyCode: 27 });
+  window.dispatchEvent(event);
+
+  await delay(300);
+  const $picker = $(".c-datepicker");
+  expect($picker).toBeNull();
+});
+
+test("the picker closes when the scrim element is clicked", async () => {
+  const picker = await openPicker();
+
+  const event = new MouseEvent('click');
+  $(".c-scrim").dispatchEvent(event);
+
+  await delay(300);
+  const $picker = $(".c-datepicker");
+  expect($picker).toBeNull();
+});
+
 test("opening the picker with a default time", async () => {
   // time divides 5 minutes; set exactly
   const time = "2017-02-01T17:30:00.000Z";
@@ -126,4 +148,4 @@ test("picker#set quanitizes to the nearest 5 minutes", async () => {
   // test round up
   picker.set("2017-02-01T18:35:04.941Z");
   expect(picker.data().toISOString()).toEqual( "2017-02-01T18:35:00.000Z");
-})
+})