refactor to use CdkScrollable

Author: mmalerba

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') {

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';
 
 
@@ -157,7 +162,7 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.elementRef.nativeElement.scrollTop).toBe(testComponent.itemSize * 2);
+      expect(viewport.measureScrollOffset()).toBe(testComponent.itemSize * 2);
       expect(viewport.getRenderedRange()).toEqual({start: 2, end: 6});
     }));
 
@@ -169,7 +174,7 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.elementRef.nativeElement.scrollTop).toBe(testComponent.itemSize * 2);
+      expect(viewport.measureScrollOffset()).toBe(testComponent.itemSize * 2);
       expect(viewport.getRenderedRange()).toEqual({start: 2, end: 6});
     }));
 
@@ -182,7 +187,7 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.elementRef.nativeElement.scrollLeft).toBe(testComponent.itemSize * 2);
+      expect(viewport.measureScrollOffset()).toBe(testComponent.itemSize * 2);
       expect(viewport.getRenderedRange()).toEqual({start: 2, end: 6});
     }));
 
@@ -195,7 +200,7 @@ describe('CdkVirtualScrollViewport', () => {
       fixture.detectChanges();
       flush();
 
-      expect(viewport.elementRef.nativeElement.scrollLeft).toBe(testComponent.itemSize * 2);
+      expect(viewport.measureScrollOffset()).toBe(testComponent.itemSize * 2);
       expect(viewport.getRenderedRange()).toEqual({start: 2, end: 6});
     }));
 
@@ -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', () => {
@@ -605,8 +620,7 @@ describe('CdkVirtualScrollViewport', () => {
           testComponent.orientation = 'horizontal';
           finishInit(fixture);
 
-          expect(viewportEl.scrollLeft).toBe(
-              testComponent.itemSize * testComponent.items.length - testComponent.viewportSize);
+          expect(viewport.measureScrollOffset()).toBe(0);
           expect(contentWrapperEl.style.transform).toMatch(/translateX\(0(px)?\)/);
           expect((contentWrapperEl.children[0] as HTMLElement).innerText).toBe('0 - 0');
         }));
@@ -616,7 +630,7 @@ describe('CdkVirtualScrollViewport', () => {
           testComponent.orientation = 'horizontal';
           finishInit(fixture);
 
-          triggerScroll(viewport, 0);
+          triggerScroll(viewport, 300);
           fixture.detectChanges();
           flush();
 
@@ -634,8 +648,7 @@ describe('CdkVirtualScrollViewport', () => {
           fixture.detectChanges();
           flush();
 
-          expect(viewportEl.scrollLeft).toBe(testComponent.itemSize * testComponent.items.length -
-              testComponent.viewportSize - 100);
+          expect(viewport.measureScrollOffset('right')).toBe(100);
         }));
 
     it('should scroll to the correct index in horizontal mode', fakeAsync(() => {
@@ -686,11 +699,7 @@ function finishInit(fixture: ComponentFixture<any>) {
 /** Trigger a scroll event on the viewport (optionally setting a new scroll offset). */
 function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
   if (offset !== undefined) {
-    if (viewport.orientation == 'horizontal') {
-      viewport.elementRef.nativeElement.scrollLeft = offset;
-    } else {
-      viewport.elementRef.nativeElement.scrollTop = offset;
-    }
+    viewport.scrollToOffset(offset);
   }
   dispatchFakeEvent(viewport.elementRef.nativeElement, 'scroll');
   animationFrameScheduler.flush();
@@ -751,9 +760,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 +791,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;