content.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.content
  12. *
  13. * @description
  14. * Scrollable content
  15. */
  16. angular.module('material.components.content', [
  17. 'material.core'
  18. ])
  19. .directive('mdContent', mdContentDirective);
  20. /**
  21. * @ngdoc directive
  22. * @name mdContent
  23. * @module material.components.content
  24. *
  25. * @restrict E
  26. *
  27. * @description
  28. * The `<md-content>` directive is a container element useful for scrollable content
  29. *
  30. * @usage
  31. *
  32. * - Add the `[layout-padding]` attribute to make the content padded.
  33. *
  34. * <hljs lang="html">
  35. * <md-content layout-padding>
  36. * Lorem ipsum dolor sit amet, ne quod novum mei.
  37. * </md-content>
  38. * </hljs>
  39. *
  40. */
  41. function mdContentDirective($mdTheming) {
  42. return {
  43. restrict: 'E',
  44. controller: ['$scope', '$element', ContentController],
  45. link: function(scope, element, attr) {
  46. var node = element[0];
  47. $mdTheming(element);
  48. scope.$broadcast('$mdContentLoaded', element);
  49. iosScrollFix(element[0]);
  50. }
  51. };
  52. function ContentController($scope, $element) {
  53. this.$scope = $scope;
  54. this.$element = $element;
  55. }
  56. }
  57. mdContentDirective.$inject = ["$mdTheming"];
  58. function iosScrollFix(node) {
  59. // IOS FIX:
  60. // If we scroll where there is no more room for the webview to scroll,
  61. // by default the webview itself will scroll up and down, this looks really
  62. // bad. So if we are scrolling to the very top or bottom, add/subtract one
  63. angular.element(node).on('$md.pressdown', function(ev) {
  64. // Only touch events
  65. if (ev.pointer.type !== 't') return;
  66. // Don't let a child content's touchstart ruin it for us.
  67. if (ev.$materialScrollFixed) return;
  68. ev.$materialScrollFixed = true;
  69. if (node.scrollTop === 0) {
  70. node.scrollTop = 1;
  71. } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
  72. node.scrollTop -= 1;
  73. }
  74. });
  75. }
  76. })(window, window.angular);