| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /*!
- * AngularJS Material Design
- * https://github.com/angular/material
- * @license MIT
- * v1.1.8-master-aba7b2b
- */
- goog.provide('ngmaterial.components.backdrop');
- goog.require('ngmaterial.core');
- /*
- * @ngdoc module
- * @name material.components.backdrop
- * @description Backdrop
- */
- /**
- * @ngdoc directive
- * @name mdBackdrop
- * @module material.components.backdrop
- *
- * @restrict E
- *
- * @description
- * `<md-backdrop>` is a backdrop element used by other components, such as dialog and bottom sheet.
- * Apply class `opaque` to make the backdrop use the theme backdrop color.
- *
- */
- angular
- .module('material.components.backdrop', ['material.core'])
- .directive('mdBackdrop', ["$mdTheming", "$mdUtil", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
- var ERROR_CSS_POSITION = '<md-backdrop> may not work properly in a scrolled, static-positioned parent container.';
- 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);
- var bodyStyles;
- $$rAF(function() {
- // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
- // adjust the 'backdrop' height to account for the fixed 'body' top offset.
- // Note that this can be pretty expensive and is better done inside the $$rAF.
- bodyStyles = $window.getComputedStyle($document[0].body);
- if (bodyStyles.position === 'fixed') {
- var resizeHandler = $mdUtil.debounce(function(){
- bodyStyles = $window.getComputedStyle($document[0].body);
- resize();
- }, 60, null, false);
- resize();
- angular.element($window).on('resize', resizeHandler);
- scope.$on('$destroy', function() {
- angular.element($window).off('resize', resizeHandler);
- });
- }
- // Often $animate.enter() is used to append the backDrop element
- // so let's wait until $animate is done...
- var parent = element.parent();
- if (parent.length) {
- if (parent[0].nodeName === 'BODY') {
- element.css('position', 'fixed');
- }
- var styles = $window.getComputedStyle(parent[0]);
- if (styles.position === 'static') {
- // backdrop uses position:absolute and will not work properly with parent position:static (default)
- $log.warn(ERROR_CSS_POSITION);
- }
- // Only inherit the parent if the backdrop has a parent.
- $mdTheming.inherit(element, parent);
- }
- });
- function resize() {
- var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));
- element.css('height', viewportHeight + 'px');
- }
- }
- }]);
- ngmaterial.components.backdrop = angular.module("material.components.backdrop");
|