scroll.js 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
  2. import { isTrueProperty } from '../../util/util';
  3. /**
  4. * @name Scroll
  5. * @description
  6. * Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. `ion-Scroll` Can be used in places where you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.
  7. * @usage
  8. * ```html
  9. * <ion-scroll scrollX="true">
  10. * </ion-scroll>
  11. *
  12. * <ion-scroll scrollY="true">
  13. * </ion-scroll>
  14. *
  15. * <ion-scroll scrollX="true" scrollY="true">
  16. * </ion-scroll>
  17. * ```
  18. * @demo /docs/demos/src/scroll/
  19. */
  20. var Scroll = (function () {
  21. function Scroll() {
  22. this._scrollX = false;
  23. this._scrollY = false;
  24. this._zoom = false;
  25. this._maxZoom = 1;
  26. /**
  27. * @hidden
  28. */
  29. this.maxScale = 3;
  30. /**
  31. * @hidden
  32. */
  33. this.zoomDuration = 250;
  34. }
  35. Object.defineProperty(Scroll.prototype, "scrollX", {
  36. /**
  37. * @input {boolean} If true, scrolling along the X axis is enabled.
  38. */
  39. get: function () {
  40. return this._scrollX;
  41. },
  42. set: function (val) {
  43. this._scrollX = isTrueProperty(val);
  44. },
  45. enumerable: true,
  46. configurable: true
  47. });
  48. Object.defineProperty(Scroll.prototype, "scrollY", {
  49. /**
  50. * @input {boolean} If true, scrolling along the Y axis is enabled; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
  51. */
  52. get: function () {
  53. return this._scrollY;
  54. },
  55. set: function (val) {
  56. this._scrollY = isTrueProperty(val);
  57. },
  58. enumerable: true,
  59. configurable: true
  60. });
  61. Object.defineProperty(Scroll.prototype, "zoom", {
  62. /**
  63. * @input {boolean} If true, zooming is enabled.
  64. */
  65. get: function () {
  66. return this._zoom;
  67. },
  68. set: function (val) {
  69. this._zoom = isTrueProperty(val);
  70. },
  71. enumerable: true,
  72. configurable: true
  73. });
  74. Object.defineProperty(Scroll.prototype, "maxZoom", {
  75. /**
  76. * @input {number} Set the max zoom amount.
  77. */
  78. get: function () {
  79. return this._maxZoom;
  80. },
  81. set: function (val) {
  82. this._maxZoom = val;
  83. },
  84. enumerable: true,
  85. configurable: true
  86. });
  87. /**
  88. * @hidden
  89. * Add a scroll event handler to the scroll element if it exists.
  90. * @param {Function} handler The scroll handler to add to the scroll element.
  91. * @returns {?Function} a function to remove the specified handler, otherwise
  92. * undefined if the scroll element doesn't exist.
  93. */
  94. Scroll.prototype.addScrollEventListener = function (handler) {
  95. (void 0) /* assert */;
  96. var ele = this._scrollContent.nativeElement;
  97. ele.addEventListener('scroll', handler);
  98. return function () {
  99. ele.removeEventListener('scroll', handler);
  100. };
  101. };
  102. Scroll.decorators = [
  103. { type: Component, args: [{
  104. selector: 'ion-scroll',
  105. template: '<div class="scroll-content" #scrollContent>' +
  106. '<div class="scroll-zoom-wrapper">' +
  107. '<ng-content></ng-content>' +
  108. '</div>' +
  109. '</div>',
  110. host: {
  111. '[class.scroll-x]': 'scrollX',
  112. '[class.scroll-y]': 'scrollY'
  113. },
  114. changeDetection: ChangeDetectionStrategy.OnPush,
  115. encapsulation: ViewEncapsulation.None,
  116. },] },
  117. ];
  118. /** @nocollapse */
  119. Scroll.ctorParameters = function () { return []; };
  120. Scroll.propDecorators = {
  121. 'scrollX': [{ type: Input },],
  122. 'scrollY': [{ type: Input },],
  123. 'zoom': [{ type: Input },],
  124. 'maxZoom': [{ type: Input },],
  125. '_scrollContent': [{ type: ViewChild, args: ['scrollContent', { read: ElementRef },] },],
  126. };
  127. return Scroll;
  128. }());
  129. export { Scroll };
  130. //# sourceMappingURL=scroll.js.map