Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 6a0d592

Browse files
crisbetokara
authored andcommitted
fix(panel): make the actual position available in the offset methods (#9732)
* Makes the panel's current actual position available, when passing in a function to the `withOffsetX` and `withOffsetY` methods. This allows users to make better decisions when determining the offset. * Fixes some extra indentation that was throwing off IDEs when determining the file's indentation level. * Fixes the `_isOnScreen` method not being marked as private. This PR is a followup to #9697.
1 parent 13fba2c commit 6a0d592

File tree

2 files changed

+77
-11
lines changed

2 files changed

+77
-11
lines changed

src/components/panel/panel.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
* @name material.components.panel
44
*/
55
angular
6-
.module('material.components.panel', [
7-
'material.core',
8-
'material.components.backdrop'
9-
])
10-
.service('$mdPanel', MdPanelService);
6+
.module('material.components.panel', [
7+
'material.core',
8+
'material.components.backdrop'
9+
])
10+
.service('$mdPanel', MdPanelService);
1111

1212

1313
/*****************************************************************************
@@ -1578,12 +1578,6 @@ MdPanelRef.prototype._updatePosition = function(init) {
15781578
var positionConfig = this.config['position'];
15791579

15801580
if (positionConfig) {
1581-
// Use the vendor prefixed version of transform.
1582-
// Note that the offset should be assigned before the position, in
1583-
// order to avoid tiny jumps in the panel's position, on slower browsers.
1584-
var prefixedTransform = this._$mdConstant.CSS.TRANSFORM;
1585-
this.panelEl.css(prefixedTransform, positionConfig.getTransform());
1586-
15871581
positionConfig._setPanelPosition(this.panelEl);
15881582

15891583
// Hide the panel now that position is known.
@@ -2465,11 +2459,24 @@ MdPanelPosition.prototype.getTransform = function() {
24652459
return (translateX + ' ' + translateY).trim();
24662460
};
24672461

2462+
2463+
/**
2464+
* Sets the `transform` value for a panel element.
2465+
* @param {!angular.JQLite} panelEl
2466+
* @returns {!angular.JQLite}
2467+
* @private
2468+
*/
2469+
MdPanelPosition.prototype._setTransform = function(panelEl) {
2470+
return panelEl.css(this._$mdConstant.CSS.TRANSFORM, this.getTransform());
2471+
};
2472+
2473+
24682474
/**
24692475
* True if the panel is completely on-screen with this positioning; false
24702476
* otherwise.
24712477
* @param {!angular.JQLite} panelEl
24722478
* @return {boolean}
2479+
* @private
24732480
*/
24742481
MdPanelPosition.prototype._isOnscreen = function(panelEl) {
24752482
// this works because we always use fixed positioning for the panel,
@@ -2531,17 +2538,21 @@ MdPanelPosition.prototype._reduceTranslateValues =
25312538
MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
25322539
// Only calculate the position if necessary.
25332540
if (this._absolute) {
2541+
this._setTransform(panelEl);
25342542
return;
25352543
}
25362544

25372545
if (this._actualPosition) {
25382546
this._calculatePanelPosition(panelEl, this._actualPosition);
2547+
this._setTransform(panelEl);
25392548
return;
25402549
}
25412550

25422551
for (var i = 0; i < this._positions.length; i++) {
25432552
this._actualPosition = this._positions[i];
25442553
this._calculatePanelPosition(panelEl, this._actualPosition);
2554+
this._setTransform(panelEl);
2555+
25452556
if (this._isOnscreen(panelEl)) {
25462557
break;
25472558
}

src/components/panel/panel.spec.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2077,6 +2077,61 @@ describe('$mdPanel', function() {
20772077
});
20782078
});
20792079

2080+
it('should have assigned the actual position by the time the offset' +
2081+
'methods have been called', function() {
2082+
var positionSnapshot = null;
2083+
var getOffsetX = function(mdPanelPosition) {
2084+
positionSnapshot = angular.copy(mdPanelPosition.getActualPosition());
2085+
};
2086+
2087+
var position = mdPanelPosition
2088+
.relativeTo(myButton[0])
2089+
.withOffsetX(getOffsetX)
2090+
.addPanelPosition(xPosition.ALIGN_START, yPosition.ALIGN_TOPS);
2091+
2092+
config.position = position;
2093+
2094+
openPanel(config);
2095+
expect(positionSnapshot).toEqual({
2096+
x: xPosition.ALIGN_START,
2097+
y: yPosition.ALIGN_TOPS
2098+
});
2099+
});
2100+
2101+
it('should have assigned the actual position when using ' +
2102+
'multiple positions', function() {
2103+
var positionSnapshots = [];
2104+
var getOffsetX = function(mdPanelPosition) {
2105+
positionSnapshots.push(
2106+
angular.copy(mdPanelPosition.getActualPosition())
2107+
);
2108+
};
2109+
var position = mdPanelPosition
2110+
.relativeTo(myButton[0])
2111+
.addPanelPosition(xPosition.ALIGN_END, yPosition.BELOW)
2112+
.addPanelPosition(xPosition.ALIGN_START, yPosition.ABOVE)
2113+
.withOffsetX(getOffsetX);
2114+
2115+
myButton.css({
2116+
position: 'absolute',
2117+
right: 0,
2118+
bottom: 0
2119+
});
2120+
2121+
config.position = position;
2122+
openPanel(config);
2123+
2124+
expect(positionSnapshots[0]).toEqual({
2125+
x: xPosition.ALIGN_END,
2126+
y: yPosition.BELOW
2127+
});
2128+
2129+
expect(positionSnapshots[1]).toEqual({
2130+
x: xPosition.ALIGN_START,
2131+
y: yPosition.ABOVE
2132+
});
2133+
});
2134+
20802135
describe('vertically', function() {
20812136
it('above an element', function() {
20822137
var position = mdPanelPosition

0 commit comments

Comments
 (0)