@@ -1034,10 +1034,10 @@ MdPanelService.prototype._closeFirstOpenedPanel = function(groupName) {
1034
1034
1035
1035
1036
1036
/**
1037
- * Wraps the users template in two elements, md-panel-outer-wrapper, which
1038
- * covers the entire attachTo element, and md-panel, which contains only the
1039
- * template. This allows the panel control over positioning, animations,
1040
- * and similar properties .
1037
+ * Wraps the user's template in three elements:
1038
+ * - md-panel-outer-wrapper - covers the entire ` attachTo` element.
1039
+ * - md- panel-inner-wrapper - handles the positioning.
1040
+ * - md-panel - contains the user's content and deals with the animations .
1041
1041
* @param {string } origTemplate The original template.
1042
1042
* @returns {string } The wrapped template.
1043
1043
* @private
@@ -1049,26 +1049,32 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) {
1049
1049
// height and width for positioning.
1050
1050
return '' +
1051
1051
'<div class="md-panel-outer-wrapper">' +
1052
- ' <div class="md-panel" style="left: -9999px;">' + template + '</div>' +
1052
+ '<div class="md-panel-inner-wrapper" style="left: -9999px;">' +
1053
+ '<div class="md-panel">' + template + '</div>' +
1054
+ '</div>' +
1053
1055
'</div>' ;
1054
1056
} ;
1055
1057
1056
1058
1057
1059
/**
1058
- * Wraps a content element in a md-panel-outer wrapper and
1059
- * positions it off-screen. Allows for proper control over positoning
1060
- * and animations.
1060
+ * Wraps a content element in a ` md-panel-outer- wrapper`, as well as
1061
+ * a `md-panel-inner-wrapper`, and positions it off-screen. Allows for
1062
+ * proper control over positoning and animations.
1061
1063
* @param {!angular.JQLite } contentElement Element to be wrapped.
1062
1064
* @return {!angular.JQLite } Wrapper element.
1063
1065
* @private
1064
1066
*/
1065
1067
MdPanelService . prototype . _wrapContentElement = function ( contentElement ) {
1066
- var wrapper = angular . element ( '<div class="md-panel-outer-wrapper">' ) ;
1068
+ var outerWrapper = angular . element (
1069
+ '<div class="md-panel-outer-wrapper">' +
1070
+ '<div class="md-panel-inner-wrapper" style="left: -9999px;"></div>' +
1071
+ '</div>'
1072
+ ) ;
1067
1073
1068
- contentElement . addClass ( 'md-panel' ) . css ( 'left' , '-9999px' ) ;
1069
- wrapper . append ( contentElement ) ;
1074
+ contentElement . addClass ( 'md-panel' ) ;
1075
+ outerWrapper . children ( ) . eq ( 0 ) . append ( contentElement ) ;
1070
1076
1071
- return wrapper ;
1077
+ return outerWrapper ;
1072
1078
} ;
1073
1079
1074
1080
@@ -1132,6 +1138,9 @@ function MdPanelRef(config, $injector) {
1132
1138
/** @type {!angular.JQLite|undefined } */
1133
1139
this . panelEl ;
1134
1140
1141
+ /** @type {!angular.JQLite|undefined } */
1142
+ this . innerWrapper ;
1143
+
1135
1144
/**
1136
1145
* Whether the panel is attached. This is synchronous. When attach is called,
1137
1146
* isAttached is set to true. When detach is called, isAttached is set to
@@ -1574,6 +1583,11 @@ MdPanelRef.prototype._compile = function() {
1574
1583
) ;
1575
1584
}
1576
1585
1586
+ // Save a reference to the inner wrapper.
1587
+ self . innerWrapper = angular . element (
1588
+ self . panelContainer [ 0 ] . querySelector ( '.md-panel-inner-wrapper' )
1589
+ ) ;
1590
+
1577
1591
// Save a reference to the cleanup function from the compiler.
1578
1592
self . _compilerCleanup = compileData . cleanup ;
1579
1593
@@ -1648,11 +1662,11 @@ MdPanelRef.prototype._addStyles = function() {
1648
1662
var self = this ;
1649
1663
return this . _$q ( function ( resolve ) {
1650
1664
self . panelContainer . css ( 'z-index' , self . config [ 'zIndex' ] ) ;
1651
- self . panelEl . css ( 'z-index' , self . config [ 'zIndex' ] + 1 ) ;
1665
+ self . innerWrapper . css ( 'z-index' , self . config [ 'zIndex' ] + 1 ) ;
1652
1666
1653
1667
var hideAndResolve = function ( ) {
1654
1668
// Remove left: -9999px and add hidden class.
1655
- self . panelEl . css ( 'left' , '' ) ;
1669
+ self . innerWrapper . css ( 'left' , '' ) ;
1656
1670
self . panelContainer . addClass ( MD_PANEL_HIDDEN ) ;
1657
1671
resolve ( self ) ;
1658
1672
} ;
@@ -1704,26 +1718,26 @@ MdPanelRef.prototype._updatePosition = function(init) {
1704
1718
var positionConfig = this . config [ 'position' ] ;
1705
1719
1706
1720
if ( positionConfig ) {
1707
- positionConfig . _setPanelPosition ( this . panelEl ) ;
1721
+ positionConfig . _setPanelPosition ( this . innerWrapper ) ;
1708
1722
1709
1723
// Hide the panel now that position is known.
1710
1724
if ( init ) {
1711
1725
this . panelContainer . addClass ( MD_PANEL_HIDDEN ) ;
1712
1726
}
1713
1727
1714
- this . panelEl . css (
1728
+ this . innerWrapper . css (
1715
1729
MdPanelPosition . absPosition . TOP ,
1716
1730
positionConfig . getTop ( )
1717
1731
) ;
1718
- this . panelEl . css (
1732
+ this . innerWrapper . css (
1719
1733
MdPanelPosition . absPosition . BOTTOM ,
1720
1734
positionConfig . getBottom ( )
1721
1735
) ;
1722
- this . panelEl . css (
1736
+ this . innerWrapper . css (
1723
1737
MdPanelPosition . absPosition . LEFT ,
1724
1738
positionConfig . getLeft ( )
1725
1739
) ;
1726
- this . panelEl . css (
1740
+ this . innerWrapper . css (
1727
1741
MdPanelPosition . absPosition . RIGHT ,
1728
1742
positionConfig . getRight ( )
1729
1743
) ;
@@ -2605,37 +2619,37 @@ MdPanelPosition.prototype.getTransform = function() {
2605
2619
2606
2620
/**
2607
2621
* Sets the `transform` value for a panel element.
2608
- * @param {!angular.JQLite } panelEl
2622
+ * @param {!angular.JQLite } element
2609
2623
* @returns {!angular.JQLite }
2610
2624
* @private
2611
2625
*/
2612
- MdPanelPosition . prototype . _setTransform = function ( panelEl ) {
2613
- return panelEl . css ( this . _$mdConstant . CSS . TRANSFORM , this . getTransform ( ) ) ;
2626
+ MdPanelPosition . prototype . _setTransform = function ( element ) {
2627
+ return element . css ( this . _$mdConstant . CSS . TRANSFORM , this . getTransform ( ) ) ;
2614
2628
} ;
2615
2629
2616
2630
2617
2631
/**
2618
2632
* True if the panel is completely on-screen with this positioning; false
2619
2633
* otherwise.
2620
- * @param {!angular.JQLite } panelEl
2634
+ * @param {!angular.JQLite } element
2621
2635
* @return {boolean }
2622
2636
* @private
2623
2637
*/
2624
- MdPanelPosition . prototype . _isOnscreen = function ( panelEl ) {
2638
+ MdPanelPosition . prototype . _isOnscreen = function ( element ) {
2625
2639
// this works because we always use fixed positioning for the panel,
2626
2640
// which is relative to the viewport.
2627
2641
var left = parseInt ( this . getLeft ( ) ) ;
2628
2642
var top = parseInt ( this . getTop ( ) ) ;
2629
2643
2630
2644
if ( this . _translateX . length || this . _translateY . length ) {
2631
2645
var prefixedTransform = this . _$mdConstant . CSS . TRANSFORM ;
2632
- var offsets = getComputedTranslations ( panelEl , prefixedTransform ) ;
2646
+ var offsets = getComputedTranslations ( element , prefixedTransform ) ;
2633
2647
left += offsets . x ;
2634
2648
top += offsets . y ;
2635
2649
}
2636
2650
2637
- var right = left + panelEl [ 0 ] . offsetWidth ;
2638
- var bottom = top + panelEl [ 0 ] . offsetHeight ;
2651
+ var right = left + element [ 0 ] . offsetWidth ;
2652
+ var bottom = top + element [ 0 ] . offsetHeight ;
2639
2653
2640
2654
return ( left >= 0 ) &&
2641
2655
( top >= 0 ) &&
@@ -2675,52 +2689,52 @@ MdPanelPosition.prototype._reduceTranslateValues =
2675
2689
/**
2676
2690
* Sets the panel position based on the created panel element and best x/y
2677
2691
* positioning.
2678
- * @param {!angular.JQLite } panelEl
2692
+ * @param {!angular.JQLite } element
2679
2693
* @private
2680
2694
*/
2681
- MdPanelPosition . prototype . _setPanelPosition = function ( panelEl ) {
2695
+ MdPanelPosition . prototype . _setPanelPosition = function ( element ) {
2682
2696
// Remove the class in case it has been added before.
2683
- panelEl . removeClass ( '_md-panel-position-adjusted' ) ;
2697
+ element . removeClass ( '_md-panel-position-adjusted' ) ;
2684
2698
2685
2699
// Only calculate the position if necessary.
2686
2700
if ( this . _absolute ) {
2687
- this . _setTransform ( panelEl ) ;
2701
+ this . _setTransform ( element ) ;
2688
2702
return ;
2689
2703
}
2690
2704
2691
2705
if ( this . _actualPosition ) {
2692
- this . _calculatePanelPosition ( panelEl , this . _actualPosition ) ;
2693
- this . _setTransform ( panelEl ) ;
2706
+ this . _calculatePanelPosition ( element , this . _actualPosition ) ;
2707
+ this . _setTransform ( element ) ;
2694
2708
return ;
2695
2709
}
2696
2710
2697
2711
for ( var i = 0 ; i < this . _positions . length ; i ++ ) {
2698
2712
this . _actualPosition = this . _positions [ i ] ;
2699
- this . _calculatePanelPosition ( panelEl , this . _actualPosition ) ;
2700
- this . _setTransform ( panelEl ) ;
2713
+ this . _calculatePanelPosition ( element , this . _actualPosition ) ;
2714
+ this . _setTransform ( element ) ;
2701
2715
2702
- if ( this . _isOnscreen ( panelEl ) ) {
2716
+ if ( this . _isOnscreen ( element ) ) {
2703
2717
return ;
2704
2718
}
2705
2719
}
2706
2720
2707
2721
// Class that can be used to re-style the panel if it was repositioned.
2708
- panelEl . addClass ( '_md-panel-position-adjusted' ) ;
2709
- this . _constrainToViewport ( panelEl ) ;
2722
+ element . addClass ( '_md-panel-position-adjusted' ) ;
2723
+ this . _constrainToViewport ( element ) ;
2710
2724
} ;
2711
2725
2712
2726
2713
2727
/**
2714
2728
* Constrains a panel's position to the viewport.
2715
- * @param {!angular.JQLite } panelEl
2729
+ * @param {!angular.JQLite } element
2716
2730
* @private
2717
2731
*/
2718
- MdPanelPosition . prototype . _constrainToViewport = function ( panelEl ) {
2732
+ MdPanelPosition . prototype . _constrainToViewport = function ( element ) {
2719
2733
var margin = MdPanelPosition . viewportMargin ;
2720
2734
2721
2735
if ( this . getTop ( ) ) {
2722
2736
var top = parseInt ( this . getTop ( ) ) ;
2723
- var bottom = panelEl [ 0 ] . offsetHeight + top ;
2737
+ var bottom = element [ 0 ] . offsetHeight + top ;
2724
2738
var viewportHeight = this . _$window . innerHeight ;
2725
2739
2726
2740
if ( top < margin ) {
@@ -2732,7 +2746,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
2732
2746
2733
2747
if ( this . getLeft ( ) ) {
2734
2748
var left = parseInt ( this . getLeft ( ) ) ;
2735
- var right = panelEl [ 0 ] . offsetWidth + left ;
2749
+ var right = element [ 0 ] . offsetWidth + left ;
2736
2750
var viewportWidth = this . _$window . innerWidth ;
2737
2751
2738
2752
if ( left < margin ) {
@@ -2775,13 +2789,13 @@ MdPanelPosition.prototype._bidi = function(position) {
2775
2789
/**
2776
2790
* Calculates the panel position based on the created panel element and the
2777
2791
* provided positioning.
2778
- * @param {!angular.JQLite } panelEl
2792
+ * @param {!angular.JQLite } element
2779
2793
* @param {!{x:string, y:string} } position
2780
2794
* @private
2781
2795
*/
2782
- MdPanelPosition . prototype . _calculatePanelPosition = function ( panelEl , position ) {
2796
+ MdPanelPosition . prototype . _calculatePanelPosition = function ( element , position ) {
2783
2797
2784
- var panelBounds = panelEl [ 0 ] . getBoundingClientRect ( ) ;
2798
+ var panelBounds = element [ 0 ] . getBoundingClientRect ( ) ;
2785
2799
var panelWidth = panelBounds . width ;
2786
2800
var panelHeight = panelBounds . height ;
2787
2801
0 commit comments