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