scroller.component.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * @fileoverview added by tsickle
  3. * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4. */
  5. import { Component, Input, ElementRef, Output, EventEmitter, Renderer2, NgZone, HostBinding, ChangeDetectionStrategy } from '@angular/core';
  6. export class ScrollerComponent {
  7. /**
  8. * @param {?} ngZone
  9. * @param {?} element
  10. * @param {?} renderer
  11. */
  12. constructor(ngZone, element, renderer) {
  13. this.ngZone = ngZone;
  14. this.renderer = renderer;
  15. this.scrollbarV = false;
  16. this.scrollbarH = false;
  17. this.scroll = new EventEmitter();
  18. this.scrollYPos = 0;
  19. this.scrollXPos = 0;
  20. this.prevScrollYPos = 0;
  21. this.prevScrollXPos = 0;
  22. this._scrollEventListener = null;
  23. this.element = element.nativeElement;
  24. }
  25. /**
  26. * @return {?}
  27. */
  28. ngOnInit() {
  29. // manual bind so we don't always listen
  30. if (this.scrollbarV || this.scrollbarH) {
  31. /** @type {?} */
  32. const renderer = this.renderer;
  33. this.parentElement = renderer.parentNode(renderer.parentNode(this.element));
  34. this._scrollEventListener = this.onScrolled.bind(this);
  35. this.parentElement.addEventListener('scroll', this._scrollEventListener);
  36. }
  37. }
  38. /**
  39. * @return {?}
  40. */
  41. ngOnDestroy() {
  42. if (this._scrollEventListener) {
  43. this.parentElement.removeEventListener('scroll', this._scrollEventListener);
  44. this._scrollEventListener = null;
  45. }
  46. }
  47. /**
  48. * @param {?} offsetY
  49. * @return {?}
  50. */
  51. setOffset(offsetY) {
  52. if (this.parentElement) {
  53. this.parentElement.scrollTop = offsetY;
  54. }
  55. }
  56. /**
  57. * @param {?} event
  58. * @return {?}
  59. */
  60. onScrolled(event) {
  61. /** @type {?} */
  62. const dom = (/** @type {?} */ (event.currentTarget));
  63. requestAnimationFrame((/**
  64. * @return {?}
  65. */
  66. () => {
  67. this.scrollYPos = dom.scrollTop;
  68. this.scrollXPos = dom.scrollLeft;
  69. this.updateOffset();
  70. }));
  71. }
  72. /**
  73. * @return {?}
  74. */
  75. updateOffset() {
  76. /** @type {?} */
  77. let direction;
  78. if (this.scrollYPos < this.prevScrollYPos) {
  79. direction = 'down';
  80. }
  81. else if (this.scrollYPos > this.prevScrollYPos) {
  82. direction = 'up';
  83. }
  84. this.scroll.emit({
  85. direction,
  86. scrollYPos: this.scrollYPos,
  87. scrollXPos: this.scrollXPos
  88. });
  89. this.prevScrollYPos = this.scrollYPos;
  90. this.prevScrollXPos = this.scrollXPos;
  91. }
  92. }
  93. ScrollerComponent.decorators = [
  94. { type: Component, args: [{
  95. selector: 'datatable-scroller',
  96. template: `
  97. <ng-content></ng-content>
  98. `,
  99. host: {
  100. class: 'datatable-scroll'
  101. },
  102. changeDetection: ChangeDetectionStrategy.OnPush
  103. }] }
  104. ];
  105. /** @nocollapse */
  106. ScrollerComponent.ctorParameters = () => [
  107. { type: NgZone },
  108. { type: ElementRef },
  109. { type: Renderer2 }
  110. ];
  111. ScrollerComponent.propDecorators = {
  112. scrollbarV: [{ type: Input }],
  113. scrollbarH: [{ type: Input }],
  114. scrollHeight: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
  115. scrollWidth: [{ type: HostBinding, args: ['style.width.px',] }, { type: Input }],
  116. scroll: [{ type: Output }]
  117. };
  118. if (false) {
  119. /** @type {?} */
  120. ScrollerComponent.prototype.scrollbarV;
  121. /** @type {?} */
  122. ScrollerComponent.prototype.scrollbarH;
  123. /** @type {?} */
  124. ScrollerComponent.prototype.scrollHeight;
  125. /** @type {?} */
  126. ScrollerComponent.prototype.scrollWidth;
  127. /** @type {?} */
  128. ScrollerComponent.prototype.scroll;
  129. /** @type {?} */
  130. ScrollerComponent.prototype.scrollYPos;
  131. /** @type {?} */
  132. ScrollerComponent.prototype.scrollXPos;
  133. /** @type {?} */
  134. ScrollerComponent.prototype.prevScrollYPos;
  135. /** @type {?} */
  136. ScrollerComponent.prototype.prevScrollXPos;
  137. /** @type {?} */
  138. ScrollerComponent.prototype.element;
  139. /** @type {?} */
  140. ScrollerComponent.prototype.parentElement;
  141. /** @type {?} */
  142. ScrollerComponent.prototype.onScrollListener;
  143. /**
  144. * @type {?}
  145. * @private
  146. */
  147. ScrollerComponent.prototype._scrollEventListener;
  148. /**
  149. * @type {?}
  150. * @private
  151. */
  152. ScrollerComponent.prototype.ngZone;
  153. /**
  154. * @type {?}
  155. * @private
  156. */
  157. ScrollerComponent.prototype.renderer;
  158. }
  159. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHN3aW1sYW5lL25neC1kYXRhdGFibGUvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9ib2R5L3Njcm9sbGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsVUFBVSxFQUNWLE1BQU0sRUFDTixZQUFZLEVBQ1osU0FBUyxFQUNULE1BQU0sRUFHTixXQUFXLEVBQ1gsdUJBQXVCLEVBQ3hCLE1BQU0sZUFBZSxDQUFDO0FBY3ZCLE1BQU0sT0FBTyxpQkFBaUI7Ozs7OztJQXdCNUIsWUFBb0IsTUFBYyxFQUFFLE9BQW1CLEVBQVUsUUFBbUI7UUFBaEUsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUErQixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBdkIzRSxlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFVM0IsV0FBTSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRXpELGVBQVUsR0FBVyxDQUFDLENBQUM7UUFDdkIsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUN2QixtQkFBYyxHQUFXLENBQUMsQ0FBQztRQUMzQixtQkFBYyxHQUFXLENBQUMsQ0FBQztRQUtuQix5QkFBb0IsR0FBUSxJQUFJLENBQUM7UUFHdkMsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsYUFBYSxDQUFDO0lBQ3ZDLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sd0NBQXdDO1FBQ3hDLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFOztrQkFDaEMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRO1lBQzlCLElBQUksQ0FBQyxhQUFhLEdBQUcsUUFBUSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQzVFLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN2RCxJQUFJLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztTQUMxRTtJQUNILENBQUM7Ozs7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDN0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7WUFDNUUsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQztTQUNsQztJQUNILENBQUM7Ozs7O0lBRUQsU0FBUyxDQUFDLE9BQWU7UUFDdkIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQztTQUN4QztJQUNILENBQUM7Ozs7O0lBRUQsVUFBVSxDQUFDLEtBQWlCOztjQUNwQixHQUFHLEdBQVksbUJBQVMsS0FBSyxDQUFDLGFBQWEsRUFBQTtRQUNqRCxxQkFBcUI7OztRQUFDLEdBQUcsRUFBRTtZQUN6QixJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxTQUFTLENBQUM7WUFDaEMsSUFBSSxDQUFDLFVBQVUsR0FBRyxHQUFHLENBQUMsVUFBVSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN0QixDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7SUFFRCxZQUFZOztZQUNOLFNBQWlCO1FBQ3JCLElBQUksSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3pDLFNBQVMsR0FBRyxNQUFNLENBQUM7U0FDcEI7YUFBTSxJQUFJLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUNoRCxTQUFTLEdBQUcsSUFBSSxDQUFDO1NBQ2xCO1FBRUQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDZixTQUFTO1lBQ1QsVUFBVSxFQUFFLElBQUksQ0FBQyxVQUFVO1lBQzNCLFVBQVUsRUFBRSxJQUFJLENBQUMsVUFBVTtTQUM1QixDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7UUFDdEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3hDLENBQUM7OztZQXRGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsUUFBUSxFQUFFOztHQUVUO2dCQUNELElBQUksRUFBRTtvQkFDSixLQUFLLEVBQUUsa0JBQWtCO2lCQUMxQjtnQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTthQUNoRDs7OztZQWxCQyxNQUFNO1lBSk4sVUFBVTtZQUdWLFNBQVM7Ozt5QkFxQlIsS0FBSzt5QkFDTCxLQUFLOzJCQUVMLFdBQVcsU0FBQyxpQkFBaUIsY0FDN0IsS0FBSzswQkFHTCxXQUFXLFNBQUMsZ0JBQWdCLGNBQzVCLEtBQUs7cUJBR0wsTUFBTTs7OztJQVhQLHVDQUFxQzs7SUFDckMsdUNBQXFDOztJQUVyQyx5Q0FFcUI7O0lBRXJCLHdDQUVvQjs7SUFFcEIsbUNBQXlEOztJQUV6RCx1Q0FBdUI7O0lBQ3ZCLHVDQUF1Qjs7SUFDdkIsMkNBQTJCOztJQUMzQiwyQ0FBMkI7O0lBQzNCLG9DQUFhOztJQUNiLDBDQUFtQjs7SUFDbkIsNkNBQXNCOzs7OztJQUV0QixpREFBeUM7Ozs7O0lBRTdCLG1DQUFzQjs7Ozs7SUFBdUIscUNBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgRWxlbWVudFJlZixcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIFJlbmRlcmVyMixcbiAgTmdab25lLFxuICBPbkluaXQsXG4gIE9uRGVzdHJveSxcbiAgSG9zdEJpbmRpbmcsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBNb3VzZUV2ZW50IH0gZnJvbSAnLi4vLi4vZXZlbnRzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZGF0YXRhYmxlLXNjcm9sbGVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIGAsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2RhdGF0YWJsZS1zY3JvbGwnXG4gIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFNjcm9sbGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBzY3JvbGxiYXJWOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNjcm9sbGJhckg6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodC5weCcpXG4gIEBJbnB1dCgpXG4gIHNjcm9sbEhlaWdodDogbnVtYmVyO1xuXG4gIEBIb3N0QmluZGluZygnc3R5bGUud2lkdGgucHgnKVxuICBASW5wdXQoKVxuICBzY3JvbGxXaWR0aDogbnVtYmVyO1xuXG4gIEBPdXRwdXQoKSBzY3JvbGw6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIHNjcm9sbFlQb3M6IG51bWJlciA9IDA7XG4gIHNjcm9sbFhQb3M6IG51bWJlciA9IDA7XG4gIHByZXZTY3JvbGxZUG9zOiBudW1iZXIgPSAwO1xuICBwcmV2U2Nyb2xsWFBvczogbnVtYmVyID0gMDtcbiAgZWxlbWVudDogYW55O1xuICBwYXJlbnRFbGVtZW50OiBhbnk7XG4gIG9uU2Nyb2xsTGlzdGVuZXI6IGFueTtcblxuICBwcml2YXRlIF9zY3JvbGxFdmVudExpc3RlbmVyOiBhbnkgPSBudWxsO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbmdab25lOiBOZ1pvbmUsIGVsZW1lbnQ6IEVsZW1lbnRSZWYsIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xuICAgIHRoaXMuZWxlbWVudCA9IGVsZW1lbnQubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIC8vIG1hbnVhbCBiaW5kIHNvIHdlIGRvbid0IGFsd2F5cyBsaXN0ZW5cbiAgICBpZiAodGhpcy5zY3JvbGxiYXJWIHx8IHRoaXMuc2Nyb2xsYmFySCkge1xuICAgICAgY29uc3QgcmVuZGVyZXIgPSB0aGlzLnJlbmRlcmVyO1xuICAgICAgdGhpcy5wYXJlbnRFbGVtZW50ID0gcmVuZGVyZXIucGFyZW50Tm9kZShyZW5kZXJlci5wYXJlbnROb2RlKHRoaXMuZWxlbWVudCkpO1xuICAgICAgdGhpcy5fc2Nyb2xsRXZlbnRMaXN0ZW5lciA9IHRoaXMub25TY3JvbGxlZC5iaW5kKHRoaXMpO1xuICAgICAgdGhpcy5wYXJlbnRFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuX3Njcm9sbEV2ZW50TGlzdGVuZXIpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLl9zY3JvbGxFdmVudExpc3RlbmVyKSB7XG4gICAgICB0aGlzLnBhcmVudEVsZW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5fc2Nyb2xsRXZlbnRMaXN0ZW5lcik7XG4gICAgICB0aGlzLl9zY3JvbGxFdmVudExpc3RlbmVyID0gbnVsbDtcbiAgICB9XG4gIH1cblxuICBzZXRPZmZzZXQob2Zmc2V0WTogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFyZW50RWxlbWVudCkge1xuICAgICAgdGhpcy5wYXJlbnRFbGVtZW50LnNjcm9sbFRvcCA9IG9mZnNldFk7XG4gICAgfVxuICB9XG5cbiAgb25TY3JvbGxlZChldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGRvbTogRWxlbWVudCA9IDxFbGVtZW50PmV2ZW50LmN1cnJlbnRUYXJnZXQ7XG4gICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgIHRoaXMuc2Nyb2xsWVBvcyA9IGRvbS5zY3JvbGxUb3A7XG4gICAgICB0aGlzLnNjcm9sbFhQb3MgPSBkb20uc2Nyb2xsTGVmdDtcbiAgICAgIHRoaXMudXBkYXRlT2Zmc2V0KCk7XG4gICAgfSk7XG4gIH1cblxuICB1cGRhdGVPZmZzZXQoKTogdm9pZCB7XG4gICAgbGV0IGRpcmVjdGlvbjogc3RyaW5nO1xuICAgIGlmICh0aGlzLnNjcm9sbFlQb3MgPCB0aGlzLnByZXZTY3JvbGxZUG9zKSB7XG4gICAgICBkaXJlY3Rpb24gPSAnZG93bic7XG4gICAgfSBlbHNlIGlmICh0aGlzLnNjcm9sbFlQb3MgPiB0aGlzLnByZXZTY3JvbGxZUG9zKSB7XG4gICAgICBkaXJlY3Rpb24gPSAndXAnO1xuICAgIH1cblxuICAgIHRoaXMuc2Nyb2xsLmVtaXQoe1xuICAgICAgZGlyZWN0aW9uLFxuICAgICAgc2Nyb2xsWVBvczogdGhpcy5zY3JvbGxZUG9zLFxuICAgICAgc2Nyb2xsWFBvczogdGhpcy5zY3JvbGxYUG9zXG4gICAgfSk7XG5cbiAgICB0aGlzLnByZXZTY3JvbGxZUG9zID0gdGhpcy5zY3JvbGxZUG9zO1xuICAgIHRoaXMucHJldlNjcm9sbFhQb3MgPSB0aGlzLnNjcm9sbFhQb3M7XG4gIH1cbn1cbiJdfQ==