feat(overlay): more flexible scroll strategy API and ability to define/override custom strategies (#4855)

* feat(overlay): more flexible scroll strategy API and ability to define/override custom strategies

* Refactors the overlay setup to allow for scroll strategies to be passed in by name, instead of by instance.
* Handles the scroll strategy dependency injection automatically.
* Adds an API for registering custom scroll strategies and overriding the existing ones.
* Adds a second parameter to the `attach` method, allowing for a config object to be passed in.
* Throws an error if there's an attempt to attach a scroll strategy multiple times. This is mostly a sanity check to ensure that we don't cache the scroll strategy instances.

Relates to #4093.

* refactor: switch to new approach without ReflectiveInjector

* refactor: switch to better approach

* refactor: switch to even simpler approach

* chore: address feedback

Author: crisbeto

src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {BlockScrollStrategy, ViewportRuler} from '@angular/material';
+import {Overlay, ScrollStrategy} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -8,6 +8,6 @@ import {BlockScrollStrategy, ViewportRuler} from '@angular/material';
   styleUrls: ['block-scroll-strategy-e2e.css'],
 })
 export class BlockScrollStrategyE2E {
-  constructor(private _viewportRuler: ViewportRuler) { }
-  scrollStrategy = new BlockScrollStrategy(this._viewportRuler);
+  constructor(private _overlay: Overlay) { }
+  scrollStrategy: ScrollStrategy = this._overlay.scrollStrategies.block();
 }

src/lib/autocomplete/autocomplete-trigger.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {DOCUMENT} from '@angular/platform-browser';
-import {Overlay, OverlayRef, OverlayState, TemplatePortal, RepositionScrollStrategy} from '../core';
+import {Overlay, OverlayRef, OverlayState, TemplatePortal} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {PositionStrategy} from '../core/overlay/position/position-strategy';
 import {ConnectedPositionStrategy} from '../core/overlay/position/connected-position-strategy';
@@ -22,7 +22,6 @@ import {MdOptionSelectionChange, MdOption} from '../core/option/option';
 import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
 import {Dir} from '../core/rtl/dir';
 import {MdInputContainer} from '../input/input-container';
-import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/fromEvent';
@@ -113,7 +112,6 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _scrollDispatcher: ScrollDispatcher,
               @Optional() private _dir: Dir, private _zone: NgZone,
               @Optional() @Host() private _inputContainer: MdInputContainer,
               @Optional() @Inject(DOCUMENT) private _document: any) {}
@@ -381,7 +379,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     overlayState.positionStrategy = this._getOverlayPosition();
     overlayState.width = this._getHostWidth();
     overlayState.direction = this._dir ? this._dir.value : 'ltr';
-    overlayState.scrollStrategy = new RepositionScrollStrategy(this._scrollDispatcher);
+    overlayState.scrollStrategy = this._overlay.scrollStrategies.reposition();
     return overlayState;
   }
 

src/lib/core/overlay/overlay-directives.ts

@@ -25,11 +25,9 @@ import {PortalModule} from '../portal/portal-directives';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {Dir, LayoutDirection} from '../rtl/dir';
 import {Scrollable} from './scroll/scrollable';
-import {RepositionScrollStrategy} from './scroll/reposition-scroll-strategy';
 import {ScrollStrategy} from './scroll/scroll-strategy';
 import {coerceBooleanProperty} from '../coercion/boolean-property';
 import {ESCAPE} from '../keyboard/keycodes';
-import {ScrollDispatcher} from './scroll/scroll-dispatcher';
 import {Subscription} from 'rxjs/Subscription';
 import {ScrollDispatchModule} from './scroll/index';
 
@@ -125,7 +123,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   @Input() backdropClass: string;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  @Input() scrollStrategy: ScrollStrategy = new RepositionScrollStrategy(this._scrollDispatcher);
+  @Input() scrollStrategy: ScrollStrategy = this._overlay.scrollStrategies.reposition();
 
   /** Whether the overlay is open. */
   @Input() open: boolean = false;
@@ -157,7 +155,6 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   constructor(
       private _overlay: Overlay,
       private _renderer: Renderer2,
-      private _scrollDispatcher: ScrollDispatcher,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
       @Optional() private _dir: Dir) {

src/lib/core/overlay/overlay-ref.ts

@@ -20,9 +20,10 @@ export class OverlayRef implements PortalHost {
       private _portalHost: PortalHost,
       private _pane: HTMLElement,
       private _state: OverlayState,
+      private _scrollStrategy: ScrollStrategy,
       private _ngZone: NgZone) {
 
-    this._state.scrollStrategy.attach(this);
+    _scrollStrategy.attach(this);
   }
 
   /** The overlay's HTML element */
@@ -44,7 +45,7 @@ export class OverlayRef implements PortalHost {
     this.updateDirection();
     this.updatePosition();
     this._attachments.next();
-    this._state.scrollStrategy.enable();
+    this._scrollStrategy.enable();
 
     // Enable pointer events for the overlay pane element.
     this._togglePointerEvents(true);
@@ -71,7 +72,7 @@ export class OverlayRef implements PortalHost {
     // This is necessary because otherwise the pane element will cover the page and disable
     // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
     this._togglePointerEvents(false);
-    this._state.scrollStrategy.disable();
+    this._scrollStrategy.disable();
     this._detachments.next();
 
     return this._portalHost.detach();
@@ -85,9 +86,13 @@ export class OverlayRef implements PortalHost {
       this._state.positionStrategy.dispose();
     }
 
+    if (this._scrollStrategy) {
+      this._scrollStrategy.disable();
+      this._scrollStrategy = null;
+    }
+
     this.detachBackdrop();
     this._portalHost.dispose();
-    this._state.scrollStrategy.disable();
     this._detachments.next();
     this._detachments.complete();
     this._attachments.complete();

src/lib/core/overlay/overlay-state.ts

@@ -1,7 +1,6 @@
 import {PositionStrategy} from './position/position-strategy';
 import {LayoutDirection} from '../rtl/dir';
 import {ScrollStrategy} from './scroll/scroll-strategy';
-import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
 
 
 /**
@@ -13,7 +12,7 @@ export class OverlayState {
   positionStrategy: PositionStrategy;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  scrollStrategy: ScrollStrategy = new NoopScrollStrategy();
+  scrollStrategy: ScrollStrategy;
 
   /** Custom class to add to the overlay pane. */
   panelClass: string = '';

src/lib/core/overlay/overlay.spec.ts

@@ -8,7 +8,8 @@ import {OverlayState} from './overlay-state';
 import {OverlayRef} from './overlay-ref';
 import {PositionStrategy} from './position/position-strategy';
 import {OverlayModule} from './overlay-directives';
-import {ScrollStrategy} from './scroll/scroll-strategy';
+import {ViewportRuler} from './position/viewport-ruler';
+import {ScrollStrategy, ScrollDispatcher} from './scroll/index';
 
 
 describe('Overlay', () => {
@@ -21,15 +22,14 @@ describe('Overlay', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [OverlayModule, PortalModule, OverlayTestModule],
-      providers: [
-        {provide: OverlayContainer, useFactory: () => {
+      providers: [{
+        provide: OverlayContainer,
+        useFactory: () => {
           overlayContainerElement = document.createElement('div');
           return {getContainerElement: () => overlayContainerElement};
-        }}
-      ]
-    });
-
-    TestBed.compileComponents();
+        }
+      }]
+    }).compileComponents();
   }));
 
   beforeEach(inject([Overlay], (o: Overlay) => {
@@ -354,30 +354,25 @@ describe('Overlay', () => {
   describe('scroll strategy', () => {
     let fakeScrollStrategy: FakeScrollStrategy;
     let config: OverlayState;
+    let overlayRef: OverlayRef;
 
     beforeEach(() => {
       config = new OverlayState();
-      fakeScrollStrategy = new FakeScrollStrategy();
-      config.scrollStrategy = fakeScrollStrategy;
+      fakeScrollStrategy = config.scrollStrategy = new FakeScrollStrategy();
+      overlayRef = overlay.create(config);
     });
 
     it('should attach the overlay ref to the scroll strategy', () => {
-      let overlayRef = overlay.create(config);
-
       expect(fakeScrollStrategy.overlayRef).toBe(overlayRef,
           'Expected scroll strategy to have been attached to the current overlay ref.');
     });
 
     it('should enable the scroll strategy when the overlay is attached', () => {
-      let overlayRef = overlay.create(config);
-
       overlayRef.attach(componentPortal);
       expect(fakeScrollStrategy.isEnabled).toBe(true, 'Expected scroll strategy to be enabled.');
     });
 
     it('should disable the scroll strategy once the overlay is detached', () => {
-      let overlayRef = overlay.create(config);
-
       overlayRef.attach(componentPortal);
       expect(fakeScrollStrategy.isEnabled).toBe(true, 'Expected scroll strategy to be enabled.');
 
@@ -386,8 +381,6 @@ describe('Overlay', () => {
     });
 
     it('should disable the scroll strategy when the overlay is destroyed', () => {
-      let overlayRef = overlay.create(config);
-
       overlayRef.dispose();
       expect(fakeScrollStrategy.isEnabled).toBe(false, 'Expected scroll strategy to be disabled.');
     });
@@ -466,6 +459,7 @@ class FakePositionStrategy implements PositionStrategy {
   dispose() {}
 }
 
+
 class FakeScrollStrategy implements ScrollStrategy {
   isEnabled = false;
   overlayRef: OverlayRef;

src/lib/core/overlay/overlay.ts

@@ -12,6 +12,7 @@ import {OverlayRef} from './overlay-ref';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {VIEWPORT_RULER_PROVIDER} from './position/viewport-ruler';
 import {OverlayContainer, OVERLAY_CONTAINER_PROVIDER} from './overlay-container';
+import {ScrollStrategy, ScrollStrategyOptions} from './scroll/index';
 
 
 /** Next overlay unique ID. */
@@ -31,12 +32,13 @@ let defaultState = new OverlayState();
  */
 @Injectable()
 export class Overlay {
-  constructor(private _overlayContainer: OverlayContainer,
+  constructor(public scrollStrategies: ScrollStrategyOptions,
+              private _overlayContainer: OverlayContainer,
               private _componentFactoryResolver: ComponentFactoryResolver,
               private _positionBuilder: OverlayPositionBuilder,
               private _appRef: ApplicationRef,
               private _injector: Injector,
-              private _ngZone: NgZone) {}
+              private _ngZone: NgZone) { }
 
   /**
    * Creates an overlay.
@@ -61,9 +63,9 @@ export class Overlay {
    */
   private _createPaneElement(): HTMLElement {
     let pane = document.createElement('div');
+
     pane.id = `cdk-overlay-${nextUniqueId++}`;
     pane.classList.add('cdk-overlay-pane');
-
     this._overlayContainer.getContainerElement().appendChild(pane);
 
     return pane;
@@ -84,7 +86,9 @@ export class Overlay {
    * @param state
    */
   private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef {
-    return new OverlayRef(this._createPortalHost(pane), pane, state, this._ngZone);
+    let scrollStrategy = state.scrollStrategy || this.scrollStrategies.noop();
+    let portalHost = this._createPortalHost(pane);
+    return new OverlayRef(portalHost, pane, state, scrollStrategy, this._ngZone);
   }
 }