feat(dialog): allow for the dialog dimensions to be updated

Adds an `updateDimensions` method to the `MdDialogRef` which allows the user to update a dialog's dimensions after it has been created.

Fixes #2930.

Author: crisbeto

src/demo-app/dialog/dialog-demo.ts

@@ -57,15 +57,32 @@ export class DialogDemo {
 @Component({
   selector: 'demo-jazz-dialog',
   template: `
-  <p>It's Jazz!</p>
-  <p><label>How much? <input #howMuch></label></p>
-  <p> {{ jazzMessage }} </p>
-  <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
+    <p>It's Jazz!</p>
+    <p><label>How much? <input #howMuch></label></p>
+    <p>{{ jazzMessage }}</p>
+    <button (click)="dialogRef.close(howMuch.value)">Close dialog</button>
+    <button (click)="togglePosition()">Change position</button>
+  `
 })
 export class JazzDialog {
+  private _positionToggle = false;
+
   jazzMessage = 'Jazzy jazz jazz';
 
   constructor(public dialogRef: MdDialogRef<JazzDialog>) { }
+
+  togglePosition(): void {
+    this._positionToggle = !this._positionToggle;
+
+    if (this._positionToggle) {
+      this.dialogRef.updateDimensions(null, null, {
+        top: '25px',
+        left: '25px'
+      });
+    } else {
+      this.dialogRef.updateDimensions();
+    }
+  }
 }
 
 
@@ -104,7 +121,7 @@ export class JazzDialog {
         color="primary"
         href="https://en.wikipedia.org/wiki/Neptune"
         target="_blank">Read more on Wikipedia</a>
-      
+
       <button
         md-button
         color="secondary"

src/lib/core/core.ts

@@ -53,6 +53,7 @@ export {
   OverlayOrigin,
   OverlayModule,
 } from './overlay/overlay-directives';
+export * from './overlay/position/global-position-strategy';
 export * from './overlay/position/connected-position-strategy';
 export * from './overlay/position/connected-position';
 export {ScrollDispatcher} from './overlay/scroll/scroll-dispatcher';

src/lib/dialog/dialog-ref.ts

@@ -1,4 +1,5 @@
-import {OverlayRef} from '../core';
+import {OverlayRef, GlobalPositionStrategy} from '../core';
+import {DialogPosition} from './dialog-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
@@ -35,4 +36,29 @@ export class MdDialogRef<T> {
   afterClosed(): Observable<any> {
     return this._afterClosed.asObservable();
   }
+
+  /**
+   * Updates the dialog's dimensions.
+   * @param width New width of the dialog.
+   * @param height New height of the dialog.
+   * @param position New position of the dialog.
+   */
+  updateDimensions(width?: string, height?: string, position?: DialogPosition): void {
+    let strategy = this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
+
+    if (position && (position.left || position.right)) {
+      position.left ? strategy.left(position.left) : strategy.right(position.right);
+    } else {
+      strategy.centerHorizontally();
+    }
+
+    if (position && (position.top || position.bottom)) {
+      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+    } else {
+      strategy.centerVertically();
+    }
+
+    strategy.width(width).height(height);
+    this._overlayRef.updatePosition();
+  }
 }

src/lib/dialog/dialog.spec.ts

@@ -259,6 +259,26 @@ describe('MdDialog', () => {
     expect(overlayPane.style.marginRight).toBe('125px');
   });
 
+  it('should allow for the dimensions to be updated', () => {
+    let dialogRef = dialog.open(PizzaMsg, {
+      position: {
+        left: '250px'
+      }
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.marginLeft).toBe('250px');
+
+    dialogRef.updateDimensions(null, null, {
+      left: '500px'
+    });
+
+    expect(overlayPane.style.marginLeft).toBe('500px');
+  });
+
   it('should close all of the dialogs', () => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);

src/lib/dialog/dialog.ts

@@ -88,11 +88,16 @@ export class MdDialog {
 
   /**
    * Creates the overlay into which the dialog will be loaded.
-   * @param dialogConfig The dialog configuration.
+   * @param config The dialog configuration.
    * @returns A promise resolving to the OverlayRef for the created overlay.
    */
-  private _createOverlay(dialogConfig: MdDialogConfig): OverlayRef {
-    let overlayState = this._getOverlayState(dialogConfig);
+  private _createOverlay(config: MdDialogConfig): OverlayRef {
+    let overlayState = new OverlayState();
+    let strategy = this._overlay.position().global();
+
+    overlayState.hasBackdrop = true;
+    overlayState.positionStrategy = strategy;
+
     return this._overlay.create(overlayState);
   }
 
@@ -124,10 +129,10 @@ export class MdDialog {
       component: ComponentType<T>,
       dialogContainer: MdDialogContainer,
       overlayRef: OverlayRef,
-      config?: MdDialogConfig): MdDialogRef<T> {
+      config: MdDialogConfig): MdDialogRef<T> {
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
-    let dialogRef = <MdDialogRef<T>> new MdDialogRef(overlayRef);
+    let dialogRef = new MdDialogRef<T>(overlayRef);
 
     if (!dialogContainer.dialogConfig.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.
@@ -140,47 +145,17 @@ export class MdDialog {
     // We create an injector specifically for the component we're instantiating so that it can
     // inject the MdDialogRef. This allows a component loaded inside of a dialog to close itself
     // and, optionally, to return a value.
-    let userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    let userInjector = config.viewContainerRef && config.viewContainerRef.injector;
     let dialogInjector = new DialogInjector(dialogRef, userInjector || this._injector);
-
     let contentPortal = new ComponentPortal(component, null, dialogInjector);
-
     let contentRef = dialogContainer.attachComponentPortal(contentPortal);
+
     dialogRef.componentInstance = contentRef.instance;
+    dialogRef.updateDimensions(config.width, config.height, config.position);
 
     return dialogRef;
   }
 
-  /**
-   * Creates an overlay state from a dialog config.
-   * @param dialogConfig The dialog configuration.
-   * @returns The overlay configuration.
-   */
-  private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
-    let state = new OverlayState();
-    let strategy = this._overlay.position().global();
-    let position = dialogConfig.position;
-
-    state.hasBackdrop = true;
-    state.positionStrategy = strategy;
-
-    if (position && (position.left || position.right)) {
-      position.left ? strategy.left(position.left) : strategy.right(position.right);
-    } else {
-      strategy.centerHorizontally();
-    }
-
-    if (position && (position.top || position.bottom)) {
-      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
-    } else {
-      strategy.centerVertically();
-    }
-
-    strategy.width(dialogConfig.width).height(dialogConfig.height);
-
-    return state;
-  }
-
   /**
    * Removes a dialog from the array of open dialogs.
    * @param dialogRef Dialog to be removed.
@@ -201,10 +176,10 @@ export class MdDialog {
 
 /**
  * Applies default options to the dialog config.
- * @param dialogConfig Config to be modified.
+ * @param config Config to be modified.
  * @returns The new configuration object.
  */
-function _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig {
-  return extendObject(new MdDialogConfig(), dialogConfig);
+function _applyConfigDefaults(config: MdDialogConfig): MdDialogConfig {
+  return extendObject(new MdDialogConfig(), config);
 }