feat(datepicker): migrate to mdPanel

Migrates the datepicker's positioning logic to mdPanel. All the functionality should work as before.

Fixes angular#9564.

Author: crisbeto

src/components/datepicker/datePicker.js

@@ -7,5 +7,6 @@
 angular.module('material.components.datepicker', [
   'material.core',
   'material.components.icon',
-  'material.components.virtualRepeat'
+  'material.components.virtualRepeat',
+  'material.components.panel'
 ]);

src/components/datepicker/datePicker.scss

@@ -116,19 +116,8 @@ md-datepicker {
   }
 }
 
-.md-datepicker-is-showing .md-scroll-mask {
-  z-index: $z-index-calendar-pane - 1;
-}
-
 // Floating pane that contains the calendar at the bottom of the input.
 .md-datepicker-calendar-pane {
-  // On most browsers the `scale(0)` below prevents this element from
-  // overflowing it's parent, however IE and Edge seem to disregard it.
-  // The `left: -100%` pulls the element back in order to ensure that
-  // it doesn't cause an overflow.
-  position: absolute;
-  top: 0;
-  left: -100%;
   z-index: $z-index-calendar-pane;
   border-width: 1px;
   border-style: solid;
@@ -149,19 +138,15 @@ md-datepicker {
   width: $md-calendar-width;
   position: relative;
   overflow: hidden;
-
-  background: transparent;
-  pointer-events: none;
-  cursor: text;
 }
 
 // The calendar portion of the floating pane (vs. the input mask).
 .md-datepicker-calendar {
-  opacity: 0;
   // Use a modified timing function (from swift-ease-out) so that the opacity part of the
   // animation doesn't come in as quickly so that the floating pane doesn't ever seem to
   // cover up the trigger input.
   transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
+  opacity: 0;
 
   .md-pane-open & {
     opacity: 1;
@@ -194,7 +179,7 @@ md-datepicker {
 .md-datepicker-triangle-button {
   position: absolute;
   @include rtl-prop(right, left, 0, auto);
-  top: $md-date-arrow-size;
+  top: $md-date-arrow-size / 2;
 
   // TODO(jelbourn): This position isn't great on all platforms.
   @include rtl(transform, translateY(-25%) translateX(45%), translateY(-25%) translateX(-45%));

src/components/datepicker/js/calendar.js

@@ -58,7 +58,10 @@
         minDate: '=mdMinDate',
         maxDate: '=mdMaxDate',
         dateFilter: '=mdDateFilter',
-        _currentView: '@mdCurrentView'
+        _currentView: '@mdCurrentView',
+
+        // private way of passing in the panel from the datepicker
+        _panelRef: '=mdPanelRef'
       },
       require: ['ngModel', 'mdCalendar'],
       controller: CalendarCtrl,
@@ -197,13 +200,18 @@
 
     var boundKeyHandler = angular.bind(this, this.handleKeyEvent);
 
-    // Bind the keydown handler to the body, in order to handle cases where the focused
-    // element gets removed from the DOM and stops propagating click events.
-    angular.element(document.body).on('keydown', boundKeyHandler);
+    if (this._panelRef) {
+      // Bind the keydown handler to the body, in order to handle cases where the focused
+      // element gets removed from the DOM and stops propagating key events.
+      angular.element(document.body).on('keydown', boundKeyHandler);
 
-    $scope.$on('$destroy', function() {
-      angular.element(document.body).off('keydown', boundKeyHandler);
-    });
+      $scope.$on('$destroy', function() {
+        angular.element(document.body).off('keydown', boundKeyHandler);
+      });
+    } else {
+      // If the calendar on it's own, it shouldn't bind global key handlers.
+      $element.on('keydown', boundKeyHandler);
+    }
 
     if (this.minDate && this.minDate > $mdDateLocale.firstRenderableDate) {
       this.firstRenderableDate = this.minDate;
@@ -345,27 +353,25 @@
   CalendarCtrl.prototype.handleKeyEvent = function(event) {
     var self = this;
 
-    this.$scope.$apply(function() {
-      // Capture escape and emit back up so that a wrapping component
-      // (such as a date-picker) can decide to close.
-      if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) {
-        self.$scope.$emit('md-calendar-close');
-
-        if (event.which == self.keyCode.TAB) {
+    if (!this._panelRef || this._panelRef.isAttached) {
+      this.$scope.$apply(function() {
+        // Capture tabbing and emit back up so that a wrapping component
+        // (such as a date-picker) can decide to close.
+        if (event.which === self.keyCode.TAB) {
+          self.$scope.$emit('md-calendar-close');
           event.preventDefault();
+          return;
         }
 
-        return;
-      }
-
-      // Broadcast the action that any child controllers should take.
-      var action = self.getActionFromKeyEvent(event);
-      if (action) {
-        event.preventDefault();
-        event.stopPropagation();
-        self.$scope.$broadcast('md-calendar-parent-action', action);
-      }
-    });
+        // Broadcast the action that any child controllers should take.
+        var action = self.getActionFromKeyEvent(event);
+        if (action) {
+          event.preventDefault();
+          event.stopPropagation();
+          self.$scope.$broadcast('md-calendar-parent-action', action);
+        }
+      });
+    }
   };
 
   /**

src/components/datepicker/js/calendar.spec.js

@@ -113,7 +113,7 @@ describe('md-calendar', function() {
   function dispatchKeyEvent(keyCode, opt_modifiers) {
     var mod = opt_modifiers || {};
 
-    angular.element(document.body).triggerHandler({
+    calendarController.$element.triggerHandler({
       type: 'keydown',
       keyCode: keyCode,
       which: keyCode,
@@ -665,19 +665,19 @@ describe('md-calendar', function() {
       });
     });
 
-    it('should fire an event when escape is pressed', function() {
-      var escapeHandler = jasmine.createSpy('escapeHandler');
-      pageScope.$on('md-calendar-close', escapeHandler);
+    it('should fire an event when tabbing away', function() {
+      var tabHandler = jasmine.createSpy('tabHandler');
+      pageScope.$on('md-calendar-close', tabHandler);
 
       pageScope.myDate = new Date(2014, FEB, 11);
       applyDateChange();
       var selectedDate = element.querySelector('.md-calendar-selected-date');
       selectedDate.focus();
 
-      dispatchKeyEvent(keyCodes.ESCAPE);
+      dispatchKeyEvent(keyCodes.TAB);
       pageScope.$apply();
 
-      expect(escapeHandler).toHaveBeenCalled();
+      expect(tabHandler).toHaveBeenCalled();
     });
   });