1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | goog.provide('ngmaterial.components.backdrop');
|
---|
8 | goog.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 |
|
---|
28 | angular
|
---|
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 |
|
---|
93 | ngmaterial.components.backdrop = angular.module("material.components.backdrop"); |
---|