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