From 02daf3f2fabbbfb49a84dfa517cb87a86061e105 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 5 Feb 2017 13:17:32 +0100 Subject: [PATCH] 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. --- src/demo-app/dialog/dialog-demo.ts | 18 +++++++++- src/lib/core/core.ts | 1 + src/lib/dialog/dialog-ref.ts | 28 +++++++++++++++- src/lib/dialog/dialog.spec.ts | 20 +++++++++++ src/lib/dialog/dialog.ts | 54 +++++++++--------------------- 5 files changed, 81 insertions(+), 40 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index f82ecbfbce4c..89bc0fec9e11 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -72,12 +72,28 @@ export class DialogDemo {

It's Jazz!

{{ data.message }}

- ` + + ` }) export class JazzDialog { + private _positionToggle = false; + constructor( public dialogRef: MdDialogRef, @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(); + } + } } diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index ac0e148798dd..46d33184499d 100644 --- a/src/lib/core/core.ts +++ b/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'; diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts index fa70a0b78741..d7df7e31b1a0 100644 --- a/src/lib/dialog/dialog-ref.ts +++ b/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 { afterClosed(): Observable { 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(); + } } diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 53e67ca2066a..1a56aeba645f 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/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); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 3cc1c57ebe67..4c1c3efca996 100644 --- a/src/lib/dialog/dialog.ts +++ b/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 | TemplateRef, dialogContainer: MdDialogContainer, overlayRef: OverlayRef, - config?: MdDialogConfig): MdDialogRef { + config: MdDialogConfig): MdDialogRef { // 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; + + let dialogRef = new MdDialogRef(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); }