feat(panel): Allows centering to be used with animation transforms.

Author: ErinCoughlan

src/components/panel/panel.js

@@ -1128,40 +1128,29 @@ MdPanelRef.prototype._createPanel = function() {
 
 /**
  * Adds the styles for the panel, such as positioning and z-index.
- * @return {!angular.$q.Promise}
+ * @return {!angular.$q.Promise<MdPanelRef>}
  * @private
  */
 MdPanelRef.prototype._addStyles = function() {
-  this._panelContainer.css('z-index', this._config['zIndex']);
-  this._panelEl.css('z-index', this._config['zIndex'] + 1);
-
-
-  if (this._config['fullscreen']) {
-    this._panelEl.addClass('_md-panel-fullscreen');
-    return this._$q.resolve(this); // Don't setup positioning.
-  }
-
-  return this._configurePosition();
-};
-
-
-/**
- * Configure the position of the panel.
- * @return {!angular.$q.Promise}
- * @private
- */
-MdPanelRef.prototype._configurePosition = function() {
-  var positionConfig = this._config['position'];
-  if (!positionConfig) {
-    return this._$q.resolve(this);
-  }
-
   var self = this;
   return this._$q(function(resolve) {
+    self._panelContainer.css('z-index', self._config['zIndex']);
+    self._panelEl.css('z-index', self._config['zIndex'] + 1);
+    
+    if (self._config['fullscreen']) {
+      self._panelEl.addClass('_md-panel-fullscreen');
+      return resolve(self); // Don't setup positioning.
+    }
+
+    var positionConfig = self._config['position'];
+    if (!positionConfig) {
+      return resolve(self); // Don't setup positioning.
+    }
+
     // Wait for angular to finish processing the template, then position it
-    // correctly. This is necessary so that the panel will have a defined
-    // height and width.
-    return self._$rootScope['$$postDigest'](function () {
+    // correctly. This is necessary so that the panel will have a defined height
+    // and width.
+    self._$rootScope['$$postDigest'](function() {
       self._panelEl.css('top', positionConfig.getTop(self._panelEl));
       self._panelEl.css('bottom', positionConfig.getBottom(self._panelEl));
       self._panelEl.css('left', positionConfig.getLeft(self._panelEl));
@@ -1171,7 +1160,7 @@ MdPanelRef.prototype._configurePosition = function() {
       var prefixedTransform = self._$mdConstant.CSS.TRANSFORM;
       self._panelEl.css(prefixedTransform, positionConfig.getTransform());
 
-      return resolve(self);
+      resolve(self);
     });
   });
 };
@@ -1960,10 +1949,14 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
   this._fixBounds(panelEl);
   var animationOptions = {};
   var reverseAnimationOptions = {};
-  var openFrom = animator.toTransformCss("");
-  var openTo = animator.toTransformCss("");
-  var closeFrom = animator.toTransformCss("");
-  var closeTo = animator.toTransformCss("");
+
+  // Include the panel transformations when calculating the animations.
+  var panelTransform = panelEl[0].style.transform || '';
+
+  var openFrom = animator.toTransformCss(panelTransform);
+  var openTo = animator.toTransformCss(panelTransform);
+  var closeFrom = animator.toTransformCss(panelTransform);
+  var closeTo = animator.toTransformCss(panelTransform);
 
   switch (this._animationClass) {
     case MdPanelAnimation.animation.SLIDE:
@@ -1976,23 +1969,33 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
       reverseAnimationOptions = {
         transitionInClass: '_md-panel-animate-leave'
       };
-      openFrom = animator.toTransformCss(animator.calculateSlideToOrigin(
-          panelEl, this._openFrom) || "");
-      closeTo = animator.toTransformCss(animator.calculateSlideToOrigin(
-          panelEl, this._closeTo));
+
+      var openSlide = animator.calculateSlideToOrigin(
+          panelEl, this._openFrom) || '';
+      openFrom = animator.toTransformCss(openSlide + ' ' + panelTransform);
+
+      var closeSlide = animator.calculateSlideToOrigin(
+          panelEl, this._closeTo) || '';
+      closeTo = animator.toTransformCss(closeSlide + ' ' + panelTransform);
       break;
+
     case MdPanelAnimation.animation.SCALE:
       animationOptions = {
         transitionInClass: '_md-panel-animate-enter'
       };
       reverseAnimationOptions = {
         transitionInClass: '_md-panel-animate-scale-out _md-panel-animate-leave'
       };
-      openFrom = animator.toTransformCss(animator.calculateZoomToOrigin(
-          panelEl, this._openFrom) || "");
-      closeTo = animator.toTransformCss(animator.calculateZoomToOrigin(
-          panelEl, this._closeTo));
+
+      var openScale = animator.calculateZoomToOrigin(
+          panelEl, this._openFrom) || '';
+      openFrom = animator.toTransformCss(openScale + ' ' + panelTransform);
+
+      var closeScale = animator.calculateZoomToOrigin(
+          panelEl, this._closeTo) || '';
+      closeTo = animator.toTransformCss(closeScale + ' ' + panelTransform);
       break;
+
     case MdPanelAnimation.animation.FADE:
       animationOptions = {
         transitionInClass: '_md-panel-animate-enter'
@@ -2001,6 +2004,7 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
         transitionInClass: '_md-panel-animate-fade-out _md-panel-animate-leave'
       };
       break;
+
     default:
       if (angular.isString(this._animationClass)) {
         animationOptions = {
@@ -2019,6 +2023,9 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
           transitionOutClass: this._animationClass['open']
         };
       }
+
+      // TODO(ErinCoughlan): Combine the user's custom transforms with the
+      // panel transform.
   }
 
   var self = this;