1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.1
  6 */
  7goog.provide('ngmaterial.components.content');
  8goog.require('ngmaterial.core');
  9/**
 10 * @ngdoc module
 11 * @name material.components.content
 12 *
 13 * @description
 14 * Scrollable content
 15 */
 16mdContentDirective.$inject = ["$mdTheming"];
 17angular.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
 62function 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
 82function 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
102ngmaterial.components.content = angular.module("material.components.content");