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

* 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.

* refactor: split dimensions method into two

* refactor: rename updateDimensions to updateSize

* refactor: add back _getOverlayState method

* chore: fix aot issue

Author: crisbeto

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

@@ -72,12 +72,29 @@ 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 dimensions</button>`
 })
 export class JazzDialog {
+  private _dimesionToggle = false;
+
   constructor(
     public dialogRef: MdDialogRef<JazzDialog>,
     @Inject(MD_DIALOG_DATA) public data: any) { }
+
+  togglePosition(): void {
+    this._dimesionToggle = !this._dimesionToggle;
+
+    if (this._dimesionToggle) {
+      this.dialogRef
+        .updateSize('500px', '500px')
+        .updatePosition({ top: '25px', left: '25px' });
+    } else {
+      this.dialogRef
+        .updateSize()
+        .updatePosition();
+    }
+  }
 }
 
 

src/lib/core/core.ts

@@ -50,6 +50,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';
@@ -51,4 +52,44 @@ export class MdDialogRef<T> {
   afterClosed(): Observable<any> {
     return this._afterClosed.asObservable();
   }
+
+  /**
+   * Updates the dialog's position.
+   * @param position New dialog position.
+   */
+  updatePosition(position?: DialogPosition): this {
+    let strategy = this._getPositionStrategy();
+
+    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();
+    }
+
+    this._overlayRef.updatePosition();
+
+    return this;
+  }
+
+  /**
+   * Updates the dialog's width and height.
+   * @param width New width of the dialog.
+   * @param height New height of the dialog.
+   */
+  updateSize(width = 'auto', height = 'auto'): this {
+    this._getPositionStrategy().width(width).height(height);
+    this._overlayRef.updatePosition();
+    return this;
+  }
+
+  /** Fetches the position strategy object from the overlay ref. */
+  private _getPositionStrategy(): GlobalPositionStrategy {
+    return this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
+  }
 }

src/lib/dialog/dialog.spec.ts

@@ -276,6 +276,38 @@ describe('MdDialog', () => {
     expect(overlayPane.style.marginRight).toBe('125px');
   });
 
+  it('should allow for the position 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.updatePosition({ left: '500px' });
+
+    expect(overlayPane.style.marginLeft).toBe('500px');
+  });
+
+  it('should allow for the dimensions to be updated', () => {
+    let dialogRef = dialog.open(PizzaMsg, { width: '100px' });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.width).toBe('100px');
+
+    dialogRef.updateSize('200px');
+
+    expect(overlayPane.style.width).toBe('200px');
+  });
+
   it('should close all of the dialogs', async(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);

src/lib/dialog/dialog.ts

@@ -92,14 +92,27 @@ 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 = this._getOverlayState(config);
     return this._overlay.create(overlayState);
   }
 
+  /**
+   * Creates an overlay state from a dialog config.
+   * @param dialogConfig The dialog configuration.
+   * @returns The overlay configuration.
+   */
+  private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
+    let overlayState = new OverlayState();
+    overlayState.hasBackdrop = true;
+    overlayState.positionStrategy = this._overlay.position().global();
+
+    return overlayState;
+  }
+
   /**
    * Attaches an MdDialogContainer to a dialog's already-created overlay.
    * @param overlay Reference to the dialog's underlying overlay.
@@ -129,10 +142,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 +167,11 @@ 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();
-    }
-
-    strategy.width(dialogConfig.width).height(dialogConfig.height);
+    dialogRef
+      .updateSize(config.width, config.height)
+      .updatePosition(config.position);
 
-    return state;
+    return dialogRef;
   }
 
   /**
@@ -221,10 +209,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);
 }