diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index f82ecbfbce4c..5ccd67a0ec68 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -72,12 +72,29 @@ export class DialogDemo {

It's Jazz!

{{ data.message }}

- ` + + ` }) export class JazzDialog { + private _dimesionToggle = false; + constructor( public dialogRef: MdDialogRef, @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(); + } + } } 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..f8ad6488e623 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,44 @@ export class MdDialogRef { afterClosed(): Observable { 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; + } } diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 53e67ca2066a..d1e547888af4 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -274,6 +274,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); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 3cc1c57ebe67..3ef37383b4fe 100644 --- a/src/lib/dialog/dialog.ts +++ b/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 | 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 +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); }