gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   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 /**
  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");