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.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -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';
@@ -104,7 +103,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) {}
@@ -368,7 +366,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 = 'reposition';
     return overlayState;
   }
 

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

@@ -16,7 +16,7 @@ import {
 import {Overlay, OVERLAY_PROVIDERS} from './overlay';
 import {OverlayRef} from './overlay-ref';
 import {TemplatePortal} from '../portal/portal';
-import {OverlayState} from './overlay-state';
+import {OverlayState, OverlayStateScrollStrategy} from './overlay-state';
 import {
     ConnectionPositionPair,
     ConnectedOverlayPositionChange
@@ -29,7 +29,6 @@ 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 +124,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: OverlayStateScrollStrategy = 'reposition';
 
   /** Whether the overlay is open. */
   @Input() open: boolean = false;
@@ -157,7 +156,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,11 @@ 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,
+        typeof _state.scrollStrategy === 'string' ? null : _state.scrollStrategy.config);
   }
 
   /** The overlay's HTML element */
@@ -44,7 +46,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);
@@ -67,7 +69,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();
@@ -81,9 +83,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

@@ -3,6 +3,7 @@ import {LayoutDirection} from '../rtl/dir';
 import {ScrollStrategy} from './scroll/scroll-strategy';
 import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
 
+export type OverlayStateScrollStrategy = string | {name: string; config: any};
 
 /**
  * OverlayState is a bag of values for either the initial configuration or current state of an
@@ -13,7 +14,7 @@ export class OverlayState {
   positionStrategy: PositionStrategy;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  scrollStrategy: ScrollStrategy = new NoopScrollStrategy();
+  scrollStrategy: OverlayStateScrollStrategy = 'noop';
 
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;

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

@@ -27,9 +27,7 @@ describe('Overlay', () => {
           return {getContainerElement: () => overlayContainerElement};
         }}
       ]
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(inject([Overlay], (o: Overlay) => {
@@ -340,10 +338,31 @@ describe('Overlay', () => {
     let fakeScrollStrategy: FakeScrollStrategy;
     let config: OverlayState;
 
+    class FakeScrollStrategy implements ScrollStrategy {
+      isEnabled = false;
+      overlayRef: OverlayRef;
+
+      constructor() {
+        fakeScrollStrategy = this;
+      }
+
+      attach(overlayRef: OverlayRef) {
+        this.overlayRef = overlayRef;
+      }
+
+      enable() {
+        this.isEnabled = true;
+      }
+
+      disable() {
+        this.isEnabled = false;
+      }
+    }
+
     beforeEach(() => {
       config = new OverlayState();
-      fakeScrollStrategy = new FakeScrollStrategy();
-      config.scrollStrategy = fakeScrollStrategy;
+      overlay.registerScrollStrategy('fake', FakeScrollStrategy);
+      config.scrollStrategy = 'fake';
     });
 
     it('should attach the overlay ref to the scroll strategy', () => {
@@ -450,20 +469,3 @@ class FakePositionStrategy implements PositionStrategy {
 
   dispose() {}
 }
-
-class FakeScrollStrategy implements ScrollStrategy {
-  isEnabled = false;
-  overlayRef: OverlayRef;
-
-  attach(overlayRef: OverlayRef) {
-    this.overlayRef = overlayRef;
-  }
-
-  enable() {
-    this.isEnabled = true;
-  }
-
-  disable() {
-    this.isEnabled = false;
-  }
-}

src/lib/core/overlay/overlay.ts

@@ -5,13 +5,19 @@ import {
   Injector,
   NgZone,
   Provider,
+  ReflectiveInjector,
 } from '@angular/core';
 import {OverlayState} from './overlay-state';
 import {DomPortalHost} from '../portal/dom-portal-host';
 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} from './scroll/scroll-strategy';
+import {RepositionScrollStrategy} from './scroll/reposition-scroll-strategy';
+import {BlockScrollStrategy} from './scroll/block-scroll-strategy';
+import {CloseScrollStrategy} from './scroll/close-scroll-strategy';
+import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
 
 
 /** Next overlay unique ID. */
@@ -31,12 +37,22 @@ let defaultState = new OverlayState();
  */
 @Injectable()
 export class Overlay {
+  // Create a child ReflectiveInjector, allowing us to instantiate scroll
+  // strategies without going throught the injector cache.
+  private _reflectiveInjector = ReflectiveInjector.resolveAndCreate([], this._injector);
+  private _scrollStrategies = {
+    reposition: RepositionScrollStrategy,
+    block: BlockScrollStrategy,
+    close: CloseScrollStrategy,
+    noop: NoopScrollStrategy
+  };
+
   constructor(private _overlayContainer: OverlayContainer,
               private _componentFactoryResolver: ComponentFactoryResolver,
               private _positionBuilder: OverlayPositionBuilder,
               private _appRef: ApplicationRef,
               private _injector: Injector,
-              private _ngZone: NgZone) {}
+              private _ngZone: NgZone) { }
 
   /**
    * Creates an overlay.
@@ -55,15 +71,26 @@ export class Overlay {
     return this._positionBuilder;
   }
 
+  /**
+   * Registers a scroll strategy to be available for use when creating an overlay.
+   * @param name Name of the scroll strategy.
+   * @param constructor Class to be used to instantiate the scroll strategy.
+   */
+  registerScrollStrategy(name: string, constructor: Function): void {
+    if (name && constructor) {
+      this._scrollStrategies[name] = constructor;
+    }
+  }
+
   /**
    * Creates the DOM element for an overlay and appends it to the overlay container.
    * @returns Newly-created pane element
    */
   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 +111,28 @@ export class Overlay {
    * @param state
    */
   private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef {
-    return new OverlayRef(this._createPortalHost(pane), pane, state, this._ngZone);
+    let portalHost = this._createPortalHost(pane);
+    let scrollStrategy = this._createScrollStrategy(state);
+    return new OverlayRef(portalHost, pane, state, scrollStrategy, this._ngZone);
+  }
+
+  /**
+   * Resolves the scroll strategy of an overlay state.
+   * @param state State for which to resolve the scroll strategy.
+   */
+  private _createScrollStrategy(state: OverlayState): ScrollStrategy {
+    let strategyName = typeof state.scrollStrategy === 'string' ?
+        state.scrollStrategy :
+        state.scrollStrategy.name;
+
+    if (!this._scrollStrategies.hasOwnProperty(strategyName)) {
+      throw new Error(`Unsupported scroll strategy "${strategyName}". The available scroll ` +
+                      `strategies are ${Object.keys(this._scrollStrategies).join(', ')}.`);
+    }
+
+    // Note that we use `resolveAndInstantiate` which will instantiate
+    // the scroll strategy without putting it in the injector cache.
+    return this._reflectiveInjector.resolveAndInstantiate(this._scrollStrategies[strategyName]);
   }
 }