You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

101 lines
3.2 KiB

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