backdrop.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  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", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $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. // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
  36. // adjust the 'backdrop' height to account for the fixed 'body' top offset
  37. var body = $window.getComputedStyle($document[0].body);
  38. if (body.position == 'fixed') {
  39. var hViewport = parseInt(body.height, 10) + Math.abs(parseInt(body.top, 10));
  40. element.css({
  41. height: hViewport + 'px'
  42. });
  43. }
  44. // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
  45. if ($animate.pin) $animate.pin(element, $rootElement);
  46. $$rAF(function () {
  47. // Often $animate.enter() is used to append the backDrop element
  48. // so let's wait until $animate is done...
  49. var parent = element.parent()[0];
  50. if (parent) {
  51. var styles = $window.getComputedStyle(parent);
  52. if (styles.position == 'static') {
  53. // backdrop uses position:absolute and will not work properly with parent position:static (default)
  54. $log.warn(ERROR_CSS_POSITION);
  55. }
  56. }
  57. $mdTheming.inherit(element, element.parent());
  58. });
  59. }
  60. }]);
  61. })(window, window.angular);