1/*!
 2 * Angular Material Design
 3 * https://github.com/angular/material
 4 * @license MIT
 5 * v1.1.3
 6 */
 7(function( window, angular, undefined ){
 8"use strict";
 9
10/*
11 * @ngdoc module
12 * @name material.components.backdrop
13 * @description Backdrop
14 */
15
16/**
17 * @ngdoc directive
18 * @name mdBackdrop
19 * @module material.components.backdrop
20 *
21 * @restrict E
22 *
23 * @description
24 * `<md-backdrop>` is a backdrop element used by other components, such as dialog and bottom sheet.
25 * Apply class `opaque` to make the backdrop use the theme backdrop color.
26 *
27 */
28
29angular
30  .module('material.components.backdrop', ['material.core'])
31  .directive('mdBackdrop', ["$mdTheming", "$mdUtil", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
32    var ERROR_CSS_POSITION = '<md-backdrop> may not work properly in a scrolled, static-positioned parent container.';
33
34    return {
35      restrict: 'E',
36      link: postLink
37    };
38
39    function postLink(scope, element, attrs) {
40      // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
41      if ($animate.pin) $animate.pin(element, $rootElement);
42
43      var bodyStyles;
44
45      $$rAF(function() {
46        // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
47        // adjust the 'backdrop' height to account for the fixed 'body' top offset.
48        // Note that this can be pretty expensive and is better done inside the $$rAF.
49        bodyStyles = $window.getComputedStyle($document[0].body);
50
51        if (bodyStyles.position === 'fixed') {
52          var resizeHandler = $mdUtil.debounce(function(){
53            bodyStyles = $window.getComputedStyle($document[0].body);
54            resize();
55          }, 60, null, false);
56
57          resize();
58          angular.element($window).on('resize', resizeHandler);
59
60          scope.$on('$destroy', function() {
61            angular.element($window).off('resize', resizeHandler);
62          });
63        }
64
65        // Often $animate.enter() is used to append the backDrop element
66        // so let's wait until $animate is done...
67        var parent = element.parent();
68
69        if (parent.length) {
70          if (parent[0].nodeName === 'BODY') {
71            element.css('position', 'fixed');
72          }
73
74          var styles = $window.getComputedStyle(parent[0]);
75
76          if (styles.position === 'static') {
77            // backdrop uses position:absolute and will not work properly with parent position:static (default)
78            $log.warn(ERROR_CSS_POSITION);
79          }
80
81          // Only inherit the parent if the backdrop has a parent.
82          $mdTheming.inherit(element, parent);
83        }
84      });
85
86      function resize() {
87        var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));
88        element.css('height', viewportHeight + 'px');
89      }
90    }
91
92  }]);
93
94})(window, window.angular);