add OpenCloseRect as an additional option for openFrom and closeTo

Author: mseemann

src/lib/components/dialog/mdl-dialog-configuration.ts

@@ -32,6 +32,15 @@ export interface IMdlDialogAction {
   isClosingAction?: boolean;
 }
 
+/**
+ * rect from where the dialog should be opened or closed to.
+ */
+export interface OpenCloseRect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
 /**
  * Dialog configuration for all dialogs (simple or custom)
  */
@@ -67,12 +76,12 @@ export interface IMdlDialogConfiguration {
   /**
    * MdlButtonComponent or mouse event the dialog open animation should start from.
    */
-  openFrom?: MdlButtonComponent | MouseEvent;
+  openFrom?: MdlButtonComponent | MouseEvent | OpenCloseRect;
 
   /**
    *  MdlButtonComponent or mouse event  the dialog close animation shoul end.
    */
-  closeTo?: MdlButtonComponent | MouseEvent;
+  closeTo?: MdlButtonComponent | MouseEvent | OpenCloseRect;
 
 }
 

src/lib/components/dialog/mdl-dialog-host.component.ts

@@ -16,7 +16,7 @@ import {
   MIN_DIALOG_Z_INDEX,
   MDL_CONFIGUARTION
 } from './mdl-dialog.service';
-import { IMdlDialogConfiguration } from './mdl-dialog-configuration';
+import { IMdlDialogConfiguration, OpenCloseRect } from './mdl-dialog-configuration';
 import { MdlButtonComponent } from '../button/mdl-button.component';
 import { InternalMdlDialogReference } from './internal-dialog-reference';
 
@@ -242,26 +242,37 @@ export class MdlDialogHostComponent implements OnInit {
     return this.config.animate;
   }
 
-  private getClientRect(input: MdlButtonComponent | MouseEvent): ClientRect {
+  private getClientRect(input: MdlButtonComponent | MouseEvent | OpenCloseRect): OpenCloseRect {
 
     if(input instanceof MdlButtonComponent){
 
       const elRef = (input as MdlButtonComponent).elementRef;
-      return elRef.nativeElement.getBoundingClientRect();
+      const rect: ClientRect = elRef.nativeElement.getBoundingClientRect();
+      return this.createOpenCloseRect(rect);
 
-    } else if(input instanceof MouseEvent){
+    } else if (input instanceof MouseEvent) {
 
       const evt: MouseEvent = input as MouseEvent;
       // just to make it possible to test this code with a fake event - target is
       // readonly and con not be mutated.
       const htmlElement = (evt.target || evt['testtarget']) as HTMLElement;
-      return htmlElement.getBoundingClientRect();
+      const rect: ClientRect = htmlElement.getBoundingClientRect();
+      return this.createOpenCloseRect(rect);
 
     }
+    return input as OpenCloseRect;
+  }
 
+  private createOpenCloseRect(rect: ClientRect) : OpenCloseRect {
+    return {
+      height: rect.top - rect.bottom,
+      left: rect.left,
+      top: rect.top,
+      width: rect.right-rect.left
+    }
   }
 
-  private getCenterInScreen(rect: ClientRect) {
+  private getCenterInScreen(rect: OpenCloseRect) {
     return {
       cx: Math.round(rect.left + (rect.width / 2)),
       cy: Math.round(rect.top + (rect.height / 2))

src/lib/components/dialog/mdl-dialog.service.spec.ts

@@ -12,7 +12,7 @@ import {
 } from './mdl-dialog.service';
 import { MdlDialogHostComponent } from './mdl-dialog-host.component';
 import { MdlSimpleDialogComponent } from './mdl-simple-dialog.component';
-import { IMdlDialogAction } from './mdl-dialog-configuration';
+import { IMdlDialogAction, OpenCloseRect } from './mdl-dialog-configuration';
 import { MdlDialogOutletModule } from '../dialog-outlet/index';
 import { MdlBackdropOverlayComponent } from '../dialog-outlet/mdl-backdrop-overlay.component';
 import { MdlDialogOutletService } from '../dialog-outlet/mdl-dialog-outlet.service';
@@ -371,6 +371,26 @@ describe('Service: MdlDialog', () => {
 
   }));
 
+  it('should open a dialog from a OpenCloseRect ', async(() => {
+
+    let fixture = TestBed.createComponent(MdlTestViewComponent);
+    fixture.detectChanges();
+
+    let p = mdlDialogService.showCustomDialog({
+      component: TestCustomDialog,
+      styles: {'width':'350px'},
+      classes: 'a b',
+      openFrom: ({ height: 10, left: 0, top: 0, width: 0} as OpenCloseRect)
+    });
+
+    p.subscribe( ( dialogRef ) => {
+
+      dialogRef.hide();
+
+    });
+
+  }));
+
 
 });