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

@@ -72,12 +72,28 @@ export class DialogDemo {
   <p>It's Jazz!</p>
   <p><label>How much? <input #howMuch></label></p>
   <p> {{ data.message }} </p>
-  <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
+  <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
+  <button (click)="togglePosition()">Change position</button>`
 })
 export class JazzDialog {
+  private _positionToggle = false;
+
   constructor(
     public dialogRef: MdDialogRef<JazzDialog>,
     @Inject(MD_DIALOG_DATA) public data: any) { }
+
+  togglePosition(): void {
+    this._positionToggle = !this._positionToggle;
+
+    if (this._positionToggle) {
+      this.dialogRef.updateDimensions(null, null, {
+        top: '25px',
+        left: '25px'
+      });
+    } else {
+      this.dialogRef.updateDimensions();
+    }
+  }
 }
 
 

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';
 import {MdDialogContainer, MdDialogContainerAnimationState} from './dialog-container';
@@ -50,4 +51,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

@@ -274,6 +274,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', async(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);

src/lib/dialog/dialog.ts

@@ -92,11 +92,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);
   }
 
@@ -129,10 +134,11 @@ export class MdDialog {
       componentOrTemplateRef: ComponentType<T> | TemplateRef<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 = new MdDialogRef(overlayRef, dialogContainer) as MdDialogRef<T>;
+
+    let dialogRef = new MdDialogRef<T>(overlayRef, dialogContainer);
 
     if (!config.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.
@@ -153,37 +159,9 @@ export class MdDialog {
       dialogRef.componentInstance = contentRef.instance;
     }
 
-    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();
-    }
+    dialogRef.updateDimensions(config.width, config.height, config.position);
 
-    strategy.width(dialogConfig.width).height(dialogConfig.height);
-
-    return state;
+    return dialogRef;
   }
 
   /**
@@ -221,10 +199,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);
 }