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.content
  13  *
  14  * @description
  15  * Scrollable content
  16  */
  17 mdContentDirective['$inject'] = ["$mdTheming"];
  18 angular.module('material.components.content', [
  19   'material.core'
  20 ])
  21   .directive('mdContent', mdContentDirective);
  22
  23 /**
  24  * @ngdoc directive
  25  * @name mdContent
  26  * @module material.components.content
  27  *
  28  * @restrict E
  29  *
  30  * @description
  31  *
  32  * The `<md-content>` directive is a container element useful for scrollable content. It achieves
  33  * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
  34  *
  35  * In general, `<md-content>` components are not designed to be nested inside one another. If
  36  * possible, it is better to make them siblings. This often results in a better user experience as
  37  * having nested scrollbars may confuse the user.
  38  *
  39  * ## Troubleshooting
  40  *
  41  * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
  42  * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
  43  * SVG icons and some other components.
  44  *
  45  * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element
  46  * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements
  47  * inside (which eliminates the flicker on iOS devices).
  48  *
  49  * _<b>Note:</b> Forcing an element to render on the GPU can have unintended side-effects, especially
  50  * related to the z-index of elements. Please use with caution and only on the elements needed._
  51  *
  52  * @usage
  53  *
  54  * Add the `[layout-padding]` attribute to make the content padded.
  55  *
  56  * <hljs lang="html">
  57  *  <md-content layout-padding>
  58  *      Lorem ipsum dolor sit amet, ne quod novum mei.
  59  *  </md-content>
  60  * </hljs>
  61  */
  62
  63 function mdContentDirective($mdTheming) {
  64   return {
  65     restrict: 'E',
  66     controller: ['$scope', '$element', ContentController],
  67     link: function(scope, element) {
  68       element.addClass('_md');     // private md component indicator for styling
  69
  70       $mdTheming(element);
  71       scope.$broadcast('$mdContentLoaded', element);
  72
  73       iosScrollFix(element[0]);
  74     }
  75   };
  76
  77   function ContentController($scope, $element) {
  78     this.$scope = $scope;
  79     this.$element = $element;
  80   }
  81 }
  82
  83 function iosScrollFix(node) {
  84   // IOS FIX:
  85   // If we scroll where there is no more room for the webview to scroll,
  86   // by default the webview itself will scroll up and down, this looks really
  87   // bad.  So if we are scrolling to the very top or bottom, add/subtract one
  88   angular.element(node).on('$md.pressdown', function(ev) {
  89     // Only touch events
  90     if (ev.pointer.type !== 't') return;
  91     // Don't let a child content's touchstart ruin it for us.
  92     if (ev.$materialScrollFixed) return;
  93     ev.$materialScrollFixed = true;
  94
  95     if (node.scrollTop === 0) {
  96       node.scrollTop = 1;
  97     } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
  98       node.scrollTop -= 1;
  99     }
 100   });
 101 }
 102
 103 })(window, window.angular);