You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
3.0 KiB

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