fix(backdrop, dialog, css): improve position and animations of backdrop

improve backdrop animations and css to account for scroll and parenting:
-  backdrop
  - css uses transition and ng-enter/ng-leav
  - css transitions opacity instead of background-color
  - css no longer uses key frames
  - postLink uses $animate.pin if available
  - postLink logs a warning if the backdrop parent has a style 'position:static'
-  util
  - disableElementScroll uses specified element or body; used by dialog to disable dialog parent scrolling when parent is explicitly specified
  - refactor(util): centralize use of backdrop $compile
-  dialog
  - css for 'md-dialog-container' is now 'position:absolute'; 'fixed' is deprecated
  - hide backdrop now runs in parallel with hide dialog
  - basic demo #1 now uses element '#popupContainer' as parent; instead of document.body
  - basic demo #1 has #popupContainer 'position:relative' styling

Fixes #3826, Fixes #3828, Fixes #1967, Fixes #1106. Closes #3841.

Author: ThomasBurleson

config/build.config.js

@@ -3,7 +3,7 @@ var fs = require('fs');
 var versionFile = __dirname + '/../dist/commit';
 
 module.exports = {
-  ngVersion: '1.3.15',
+  ngVersion: '1.4.3',
   version: pkg.version,
   repository: pkg.repository.url
     .replace(/^git/,'https')

src/components/backdrop/backdrop.js

@@ -17,11 +17,35 @@
  *
  */
 
-angular.module('material.components.backdrop', [
-  'material.core'
-])
-  .directive('mdBackdrop', BackdropDirective);
-
-function BackdropDirective($mdTheming) {
-  return $mdTheming;
-}
+angular
+  .module('material.components.backdrop', ['material.core'])
+  .directive('mdBackdrop', function BackdropDirective($mdTheming, $animate, $rootElement, $window, $log, $$rAF) {
+
+    return {
+        restrict: 'E',
+        link: postLink
+      };
+
+    function postLink(scope, element, attrs) {
+      // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
+      if( $animate.pin ) $animate.pin(element,$rootElement);
+
+      $$rAF(function(){
+        // Often $animate.enter() is used to append the backDrop element
+        // so let's wait until $animate is done...
+
+        var parent = element.parent()[0];
+        if ( parent ) {
+          var position = $window.getComputedStyle(parent).getPropertyValue('position');
+          if (position == 'static') {
+            // backdrop uses position:absolute and will not work properly with parent position:static (default)
+            var positionError = "<md-backdrop> may not work properly in a scrolled, static-positioned parent container.";
+            $log.warn( positionError );
+          }
+        }
+
+        $mdTheming.inherit(element, element.parent());
+      });
+
+    };
+  });

src/components/backdrop/backdrop.scss

@@ -16,6 +16,9 @@ md-backdrop {
     z-index: $z-index-sidenav - 1;
   }
 
+  opacity: 1;
+  transition: opacity 600ms $swift-ease-in-timing-function;
+
   background-color: rgba(0,0,0,0);
 
   position: absolute;
@@ -25,27 +28,27 @@ md-backdrop {
   right: 0;
 
   &.md-click-catcher {
-    top: 0;
     position: fixed;
   }
 
   &.ng-enter {
-    animation: $swift-ease-out-timing-function mdBackdropFadeIn 0.5s both;
+    opacity: 0;
+    &.ng-enter-active {
+      opacity: 1;
+    }
   }
+
   &.ng-leave {
-    animation: $swift-ease-in-timing-function mdBackdropFadeOut 0.4s both;
+    opacity: 1;
+    transition: opacity 400ms linear;
+
+    &.ng-leave-active {
+      opacity: 0;
+    }
   }
 
   &.md-opaque {
     background-color: rgba(0,0,0,0.42);
   }
 }
 
-@keyframes mdBackdropFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes mdBackdropFadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}

src/components/bottomSheet/bottomSheet.js

@@ -125,7 +125,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
     });
 
   /* @ngInject */
-  function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $compile, $mdTheming, $mdBottomSheet, $rootElement, $mdGesture) {
+  function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement, $mdGesture) {
     var backdrop;
 
     return {
@@ -143,7 +143,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
       element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
 
       // Add a backdrop that will close on click
-      backdrop = $compile('<md-backdrop class="md-opaque md-bottom-sheet-backdrop">')(scope);
+      backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
       backdrop.on('click', function() {
         $mdUtil.nextTick($mdBottomSheet.cancel,true);
       });

src/components/dialog/demoBasicUsage/index.html

@@ -1,10 +1,10 @@
-<div ng-controller="AppCtrl" class="md-padding">
+<div ng-controller="AppCtrl" class="md-padding" id="popupContainer">
   <p class="inset">
     Open a dialog over the app's content. Press escape or click outside to close the dialog and
     send focus back to the triggering button.
   </p>
 
-  <div class="dialog-demo-content" layout="row" layout-wrap>
+  <div class="dialog-demo-content" layout="row" layout-wrap >
     <md-button class="md-primary md-raised" ng-click="showAlert($event)" flex flex-md="100">
       Alert Dialog
     </md-button>

src/components/dialog/demoBasicUsage/script.js

@@ -9,7 +9,7 @@ angular.module('dialogDemo1', ['ngMaterial'])
     // to prevent interaction outside of dialog
     $mdDialog.show(
       $mdDialog.alert()
-        .parent(angular.element(document.body))
+        .parent(angular.element(document.querySelector('#popupContainer')))
         .clickOutsideToClose(true)
         .title('This is an alert title')
         .content('You can specify some description text in here.')
@@ -22,7 +22,6 @@ angular.module('dialogDemo1', ['ngMaterial'])
   $scope.showConfirm = function(ev) {
     // Appending dialog to document.body to cover sidenav in docs app
     var confirm = $mdDialog.confirm()
-          .parent(angular.element(document.body))
           .title('Would you like to delete your debt?')
           .content('All of the banks have agreed to forgive you your debts.')
           .ariaLabel('Lucky day')

src/components/dialog/demoBasicUsage/style.css

@@ -0,0 +1,3 @@
+#popupContainer {
+    position:relative;
+}

src/components/dialog/dialog.js

@@ -430,8 +430,7 @@ function MdDialogProvider($$interimElementProvider) {
   }
 
   /* @ngInject */
-  function dialogDefaultOptions($mdAria, $document, $mdUtil, $mdConstant, $mdTheming, $mdDialog, $animate, $q ) {
-
+  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document) {
     return {
       hasBackdrop: true,
       isolateScope: true,
@@ -456,7 +455,7 @@ function MdDialogProvider($$interimElementProvider) {
 
       captureSourceAndParent(element, options);
       configureAria(element.find('md-dialog'), options);
-      showBackdrop(element, options);
+      showBackdrop(scope, element, options);
 
       return dialogPopIn(element, options)
         .then(function () {
@@ -492,10 +491,11 @@ function MdDialogProvider($$interimElementProvider) {
       options.deactivateListeners();
       options.unlockScreenReader();
 
+      options.hideBackdrop();
+
       return dialogPopOut(element, options)
         .finally(function () {
           angular.element($document[0].body).removeClass('md-dialog-is-showing');
-          options.hideBackdrop();
           element.remove();
 
           options.origin.focus();
@@ -522,7 +522,7 @@ function MdDialogProvider($$interimElementProvider) {
          options.parent = angular.element(options.parent);
 
          if (options.disableParentScroll) {
-           options.restoreScroll = $mdUtil.disableScrollAround(element);
+           options.restoreScroll = $mdUtil.disableScrollAround(element,options.parent);
          }
        }
 
@@ -594,7 +594,7 @@ function MdDialogProvider($$interimElementProvider) {
     /**
      * Show modal backdrop element...
      */
-    function showBackdrop(element, options) {
+    function showBackdrop(scope, element, options) {
 
       if (options.hasBackdrop) {
         // Fix for IE 10
@@ -605,9 +605,7 @@ function MdDialogProvider($$interimElementProvider) {
 
         element.css('top', parentOffset + 'px');
 
-        options.backdrop = angular.element('<md-backdrop class="md-dialog-backdrop md-opaque">');
-        options.backdrop.css('top', parentOffset + 'px');
-        $mdTheming.inherit(options.backdrop, options.parent);
+        options.backdrop = $mdUtil.createBackdrop(scope, "md-dialog-backdrop md-opaque");
 
         $animate.enter(options.backdrop, options.parent);
       }

src/components/dialog/dialog.scss

@@ -7,7 +7,7 @@ $dialog-padding: $baseline-grid * 3;
   display: flex;
   justify-content: center;
   align-items: center;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;

src/components/menu/_menu.js

@@ -151,7 +151,6 @@ function MenuDirective($mdMenu) {
       triggerElement = triggerElement.querySelector('[ng-click]');
     }
     triggerElement && triggerElement.setAttribute('aria-haspopup', 'true');
-    triggerElement.setAttribute('type', 'button');
     if (templateElement.children().length != 2) {
       throw Error('Invalid HTML for md-menu. Expected two children elements.');
     }