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