refactor to use CdkScrollable

mmalerba · mmalerba · commit 5fb3b9a3c008 · 2018-08-13T17:28:34.000-07:00
diff --git a/src/cdk/scrolling/scrollable.ts b/src/cdk/scrolling/scrollable.ts
@@ -48,21 +48,21 @@ export class CdkScrollable implements OnInit, OnDestroy {
   private _destroyed = new Subject();
 
   private _elementScrolled: Observable<Event> = Observable.create(observer =>
-      this._ngZone.runOutsideAngular(() =>
-          fromEvent(this._elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed))
+      this.ngZone.runOutsideAngular(() =>
+          fromEvent(this.elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed))
               .subscribe(observer)));
 
-  constructor(private _elementRef: ElementRef<HTMLElement>,
-              private _scroll: ScrollDispatcher,
-              private _ngZone: NgZone,
-              @Optional() private _dir?: Directionality) {}
+  constructor(protected elementRef: ElementRef<HTMLElement>,
+              protected scrollDispatcher: ScrollDispatcher,
+              protected ngZone: NgZone,
+              @Optional() protected dir?: Directionality) {}
 
   ngOnInit() {
-    this._scroll.register(this);
+    this.scrollDispatcher.register(this);
   }
 
   ngOnDestroy() {
-    this._scroll.deregister(this);
+    this.scrollDispatcher.deregister(this);
     this._destroyed.next();
     this._destroyed.complete();
   }
@@ -74,7 +74,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
 
   /** Gets the ElementRef for the viewport. */
   getElementRef(): ElementRef<HTMLElement> {
-    return this._elementRef;
+    return this.elementRef;
   }
 
   /**
@@ -86,8 +86,8 @@ export class CdkScrollable implements OnInit, OnDestroy {
    * @param options specified the offsets to scroll to.
    */
   scrollTo(options: ExtendedScrollToOptions): void {
-    const el = this._elementRef.nativeElement;
-    const isRtl = this._dir && this._dir.value == 'rtl';
+    const el = this.elementRef.nativeElement;
+    const isRtl = this.dir && this.dir.value == 'rtl';
 
     // Rewrite start & end offsets as right or left offsets.
     options.left = options.left == null ? (isRtl ? options.end : options.start) : options.left;
@@ -119,7 +119,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
   }
 
   private _applyScrollToOptions(options: ScrollToOptions): void {
-    const el = this._elementRef.nativeElement;
+    const el = this.elementRef.nativeElement;
 
     if (supportsScrollBehavior()) {
       el.scrollTo(options);
@@ -145,7 +145,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
   measureScrollOffset(from: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {
     const LEFT = 'left';
     const RIGHT = 'right';
-    const el = this._elementRef.nativeElement;
+    const el = this.elementRef.nativeElement;
     if (from == 'top') {
       return el.scrollTop;
     }
@@ -154,7 +154,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
     }
 
     // Rewrite start & end as left or right offsets.
-    const isRtl = this._dir && this._dir.value == 'rtl';
+    const isRtl = this.dir && this.dir.value == 'rtl';
     if (from == 'start') {
       from = isRtl ? RIGHT : LEFT;
     } else if (from == 'end') {
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
@@ -1,5 +1,10 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
-import {CdkVirtualForOf, CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling';
+import {
+  CdkVirtualForOf,
+  CdkVirtualScrollViewport,
+  ScrollDispatcher,
+  ScrollingModule
+} from '@angular/cdk/scrolling';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {
   Component,
@@ -9,7 +14,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {animationFrameScheduler, Subject} from 'rxjs';
 
 
@@ -577,6 +582,16 @@ describe('CdkVirtualScrollViewport', () => {
       testComponent.maxBufferPx = 99;
       expect(() => finishInit(fixture)).toThrow();
     }));
+
+    it('should register and degregister with ScrollDispatcher',
+        fakeAsync(inject([ScrollDispatcher], (dispatcher: ScrollDispatcher) => {
+          spyOn(dispatcher, 'register').and.callThrough();
+          spyOn(dispatcher, 'deregister').and.callThrough();
+          finishInit(fixture);
+          expect(dispatcher.register).toHaveBeenCalledWith(testComponent.viewport);
+          fixture.destroy();
+          expect(dispatcher.deregister).toHaveBeenCalledWith(testComponent.viewport);
+        })));
   });
 
   describe('with RTL direction', () => {
@@ -751,9 +766,9 @@ class FixedSizeVirtualScroll {
 @Component({
   template: `
     <cdk-virtual-scroll-viewport dir="rtl"
-        [itemSize]="itemSize" [bufferSize]="bufferSize" [orientation]="orientation"
-        [style.height.px]="viewportHeight" [style.width.px]="viewportWidth"
-        (scrolledIndexChange)="scrolledToIndex = $event">
+        [itemSize]="itemSize" [minBufferPx]="minBufferPx" [maxBufferPx]="maxBufferPx" 
+        [orientation]="orientation" [style.height.px]="viewportHeight" 
+        [style.width.px]="viewportWidth" (scrolledIndexChange)="scrolledToIndex = $event">
       <div class="item"
            *cdkVirtualFor="let item of items; let i = index; trackBy: trackBy; \
                            templateCacheSize: templateCacheSize"
@@ -782,7 +797,8 @@ class FixedSizeVirtualScrollWithRtlDirection {
   @Input() viewportSize = 200;
   @Input() viewportCrossSize = 100;
   @Input() itemSize = 50;
-  @Input() bufferSize = 0;
+  @Input() minBufferPx = 0;
+  @Input() maxBufferPx = 0;
   @Input() items = Array(10).fill(0).map((_, i) => i);
   @Input() trackBy: TrackByFunction<number>;
   @Input() templateCacheSize = 20;
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
@@ -8,7 +8,6 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {ListRange} from '@angular/cdk/collections';
-import {supportsScrollBehavior} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -24,8 +23,10 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {animationFrameScheduler, fromEvent, Observable, Subject} from 'rxjs';
+import {animationFrameScheduler, Observable, Subject} from 'rxjs';
 import {sampleTime, startWith, takeUntil} from 'rxjs/operators';
+import {ScrollDispatcher} from './scroll-dispatcher';
+import {CdkScrollable, ExtendedScrollToOptions} from './scrollable';
 import {CdkVirtualForOf} from './virtual-for-of';
 import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
 
@@ -50,7 +51,7 @@ function rangesEqual(r1: ListRange, r2: ListRange): boolean {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
+export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, OnDestroy {
   /** Emits when the viewport is detached from a CdkVirtualForOf. */
   private _detachedSubject = new Subject<void>();
 
@@ -67,7 +68,7 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
   /** Emits when the index of the first element visible in the viewport changes. */
   @Output() scrolledIndexChange: Observable<number> = Observable.create(observer =>
       this._scrollStrategy.scrolledIndexChange.subscribe(index =>
-          Promise.resolve().then(() => this._ngZone.run(() => observer.next(index)))));
+          Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
 
   /** The element that wraps the rendered content. */
   @ViewChild('contentWrapper') _contentWrapper: ElementRef<HTMLElement>;
@@ -113,9 +114,6 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
    */
   private _renderedContentOffsetNeedsRewrite = false;
 
-  /** Observable that emits when the viewport is destroyed. */
-  private _destroyed = new Subject<void>();
-
   /** Whether there is a pending change detection cycle. */
   private _isChangeDetectionPending = false;
 
@@ -124,27 +122,31 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
 
   constructor(public elementRef: ElementRef<HTMLElement>,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _ngZone: NgZone,
+              ngZone: NgZone,
               @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy,
-              @Optional() private _dir: Directionality) {}
+              @Optional() dir: Directionality,
+              scrollDispatcher: ScrollDispatcher) {
+    super(elementRef, scrollDispatcher, ngZone, dir);
+  }
 
   ngOnInit() {
+    super.ngOnInit();
+
     // It's still too early to measure the viewport at this point. Deferring with a promise allows
     // the Viewport to be rendered with the correct size before we measure. We run this outside the
     // zone to avoid causing more change detection cycles. We handle the change detection loop
     // ourselves instead.
-    this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
+    this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
       this._measureViewportSize();
       this._scrollStrategy.attach(this);
 
-      fromEvent(this.elementRef.nativeElement, 'scroll')
+      this.elementScrolled()
           .pipe(
               // Start off with a fake scroll event so we properly detect our initial position.
               startWith(null!),
               // Sample the scroll stream at every animation frame. This way if there are multiple
               // scroll events in the same frame we only need to recheck our layout once.
-              sampleTime(0, animationFrameScheduler),
-              takeUntil(this._destroyed))
+              sampleTime(0, animationFrameScheduler))
           .subscribe(() => this._scrollStrategy.onContentScrolled());
 
       this._markChangeDetectionNeeded();
@@ -154,12 +156,12 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.detach();
     this._scrollStrategy.detach();
-    this._destroyed.next();
 
     // Complete all subjects
     this._renderedRangeSubject.complete();
     this._detachedSubject.complete();
-    this._destroyed.complete();
+
+    super.ngOnDestroy();
   }
 
   /** Attaches a `CdkVirtualForOf` to this viewport. */
@@ -171,7 +173,7 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
     // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
     // changes. Run outside the zone to avoid triggering change detection, since we're managing the
     // change detection loop ourselves.
-    this._ngZone.runOutsideAngular(() => {
+    this.ngZone.runOutsideAngular(() => {
       this._forOf = forOf;
       this._forOf.dataStream.pipe(takeUntil(this._detachedSubject)).subscribe(data => {
         const newLength = data.length;
@@ -244,7 +246,7 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
   setRenderedContentOffset(offset: number, to: 'to-start' | 'to-end' = 'to-start') {
     // For a horizontal viewport in a right-to-left language we need to translate along the x-axis
     // in the negative direction.
-    const axisDirection = this.orientation == 'horizontal' && this._dir && this._dir.value == 'rtl'
+    const axisDirection = this.orientation == 'horizontal' && this.dir && this.dir.value == 'rtl'
         ? -1 : 1;
     const axis = this.orientation === 'horizontal' ? 'X' : 'Y';
     let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;
@@ -280,23 +282,13 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
    * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
    */
   scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto') {
-    const viewportElement = this.elementRef.nativeElement;
-
-    // For a horizontal viewport in a right-to-left language we need to calculate what `scrollRight`
-    // would be.
-    offset = this.orientation == 'horizontal' && this._dir && this._dir.value == 'rtl' ?
-        this._getRightOffsetAsLeftOffset(offset) : offset;
-
-    if (supportsScrollBehavior()) {
-      const offsetDirection = this.orientation === 'horizontal' ? 'left' : 'top';
-      viewportElement.scrollTo({[offsetDirection]: offset, behavior});
+    const options: ExtendedScrollToOptions = {behavior};
+    if (this.orientation === 'horizontal') {
+      options.start = offset;
     } else {
-      if (this.orientation === 'horizontal') {
-        viewportElement.scrollLeft = offset;
-      } else {
-        viewportElement.scrollTop = offset;
-      }
+      options.top = offset;
     }
+    this.scrollTo(options);
   }
 
   /**
@@ -308,16 +300,14 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
     this._scrollStrategy.scrollToIndex(index, behavior);
   }
 
-  /** Gets the current scroll offset from the start of the viewport (in pixels). */
-  measureScrollOffset(): number {
-    if (this.orientation == 'horizontal') {
-      const offset = this.elementRef.nativeElement.scrollLeft;
-      // For a horizontal viewport in a right-to-left language we need to calculate what
-      // `scrollRight` would be.
-      return this._dir && this._dir.value == 'rtl' ?
-          this._getRightOffsetAsLeftOffset(offset) : offset;
-    }
-    return this.elementRef.nativeElement.scrollTop;
+  /**
+   * Gets the current scroll offset from the start of the viewport (in pixels).
+   * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
+   *     in horizontal mode.
+   */
+  measureScrollOffset(from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {
+    return super.measureScrollOffset(
+        from ? from : this.orientation === 'horizontal' ? 'start' : 'top');
   }
 
   /** Measure the combined size of all of the rendered items. */
@@ -361,7 +351,7 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
     // properties sequentially we only have to run `_doChangeDetection` once at the end.
     if (!this._isChangeDetectionPending) {
       this._isChangeDetectionPending = true;
-      this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
+      this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
         this._doChangeDetection();
       }));
     }
@@ -374,7 +364,7 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
     // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
     // from the root, since the repeated items are content projected in. Calling `detectChanges`
     // instead does not properly check the projected content.
-    this._ngZone.run(() => this._changeDetectorRef.markForCheck());
+    this.ngZone.run(() => this._changeDetectorRef.markForCheck());
     // Apply the content transform. The transform can't be set via an Angular binding because
     // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
     // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
@@ -387,9 +377,4 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
       fn();
     }
   }
-
-  /** Expresses an offset from the right as the equivalent offset from the left. */
-  private _getRightOffsetAsLeftOffset(offset: number): number {
-    return Math.max(0, this._totalContentSize - this._viewportSize - offset);
-  }
 }
