feat(panel): allow passing in a function to the offset methods (#9615)

* Allows for a function to be passed to the `withOffsetX` and `withOffsetY` methods which will help when trying to determine the offset dynamically.
* Switches to assigning the offset before the position, in order to avoid tiny jumps in the UI on slower browsers.

Fixes #9608.

Author: crisbeto

src/components/panel/panel.js

@@ -1337,6 +1337,12 @@ MdPanelRef.prototype._updatePosition = function(init) {
   var positionConfig = this.config['position'];
 
   if (positionConfig) {
+    // Use the vendor prefixed version of transform.
+    // Note that the offset should be assigned before the position, in
+    // order to avoid tiny jumps in the panel's position, on slower browsers.
+    var prefixedTransform = this._$mdConstant.CSS.TRANSFORM;
+    this.panelEl.css(prefixedTransform, positionConfig.getTransform());
+
     positionConfig._setPanelPosition(this.panelEl);
 
     // Hide the panel now that position is known.
@@ -1360,10 +1366,6 @@ MdPanelRef.prototype._updatePosition = function(init) {
       MdPanelPosition.absPosition.RIGHT,
       positionConfig.getRight()
     );
-
-    // Use the vendor prefixed version of transform.
-    var prefixedTransform = this._$mdConstant.CSS.TRANSFORM;
-    this.panelEl.css(prefixedTransform, positionConfig.getTransform());
   }
 };
 
@@ -2003,7 +2005,7 @@ MdPanelPosition.prototype._validateXPosition = function(xPosition) {
 /**
  * Sets the value of the offset in the x-direction. This will add to any
  * previously set offsets.
- * @param {string} offsetX
+ * @param {string|function(MdPanelPosition): string} offsetX
  * @returns {!MdPanelPosition}
  */
 MdPanelPosition.prototype.withOffsetX = function(offsetX) {
@@ -2015,7 +2017,7 @@ MdPanelPosition.prototype.withOffsetX = function(offsetX) {
 /**
  * Sets the value of the offset in the y-direction. This will add to any
  * previously set offsets.
- * @param {string} offsetY
+ * @param {string|function(MdPanelPosition): string} offsetY
  * @returns {!MdPanelPosition}
  */
 MdPanelPosition.prototype.withOffsetY = function(offsetY) {
@@ -2117,8 +2119,11 @@ MdPanelPosition.prototype.getActualPosition = function() {
 MdPanelPosition.prototype._reduceTranslateValues =
     function(translateFn, values) {
       return values.map(function(translation) {
-        return translateFn + '(' + translation + ')';
-      }).join(' ');
+        // TODO(crisbeto): this should add the units after #9609 is merged.
+        var translationValue = angular.isFunction(translation) ?
+            translation(this) : translation;
+        return translateFn + '(' + translationValue + ')';
+      }, this).join(' ');
     };
 
 

src/components/panel/panel.spec.js

@@ -1372,6 +1372,34 @@ describe('$mdPanel', function() {
             .toBeApproximately(parseInt(left) + parseInt(offset));
       });
 
+      it('horizontally with a function', function() {
+        var left = '50px';
+        var offset = '-15px';
+        var obj = {
+          getOffsetX: function() {
+            return offset;
+          }
+        };
+
+        spyOn(obj, 'getOffsetX').and.callThrough();
+
+        var position = mdPanelPosition
+            .absolute()
+            .left(left)
+            .withOffsetX(obj.getOffsetX);
+
+        config['position'] = position;
+
+        openPanel(config);
+
+        var panelRect = document.querySelector(PANEL_EL)
+            .getBoundingClientRect();
+
+        expect(obj.getOffsetX).toHaveBeenCalledWith(position);
+        expect(panelRect.left)
+            .toBeApproximately(parseInt(left) + parseInt(offset));
+      });
+
       it('horizontally with centering', function() {
         var offset = '15px';
 
@@ -1414,6 +1442,34 @@ describe('$mdPanel', function() {
             .toBeApproximately(parseInt(top) + parseInt(offset));
       });
 
+      it('vertically with a function', function() {
+        var top = '50px';
+        var offset = '-15px';
+        var obj = {
+          getOffsetY: function() {
+            return offset;
+          }
+        };
+
+        spyOn(obj, 'getOffsetY').and.callThrough();
+
+        var position = mdPanelPosition
+            .absolute()
+            .top(top)
+            .withOffsetY(obj.getOffsetY);
+
+        config['position'] = position;
+
+        openPanel(config);
+
+        var panelRect = document.querySelector(PANEL_EL)
+            .getBoundingClientRect();
+
+        expect(obj.getOffsetY).toHaveBeenCalledWith(position);
+        expect(panelRect.top)
+            .toBeApproximately(parseInt(top) + parseInt(offset));
+      });
+
       it('vertically with centering', function() {
         var offset = '15px';