complete api; fix: #143 - Dialog that starts animating from a specific element

Author: mseemann

src/demo-app/app/dialog-declarative/dialog-declarative.component.html

@@ -176,7 +176,9 @@ <h5>Attributes of the mdl-dialog component</h5>
 </table>
 
 <h5>Dialog configuration object</h5>
-
+<p>Not all of these parameters are available for <i>alert</i> and <i>confirm</i>. If you need these
+  parameters please use the <i>showDialog</i> method of the <i>MdlDialogService</i> to create these
+  dialogs.</p>
 <table class="docu" mdl-shadow="2">
   <thead>
   <tr>
@@ -224,5 +226,22 @@ <h5>Dialog configuration object</h5>
     </td>
   </tr>
 
+  <tr>
+    <td>openFrom?: <br/>MdlButtonComponent | <br/>MouseEvent | <br/>OpenCloseRect</td>
+    <td>
+      Use a show animation for the dialag that starts at a MdlButtonComponent, a MousEvent or a OpenCloseRect. From all
+      of these types the top, left, width and height will be used to create the starting point and startings size of
+      the dialog animation.
+    </td>
+  </tr>
+
+  <tr>
+    <td>closeTo?: <br/>MdlButtonComponent | <br/>MouseEvent | <br/>OpenCloseRect</td>
+    <td>
+      Use a show animation for the dialag that ends at a MdlButtonComponent, a MousEvent or a OpenCloseRect. From all
+      of these types the top, left, width and height will be used to create the end point and end size of
+      the dialog animation.
+    </td>
+  </tr>
   </tbody>
 </table>

src/demo-app/app/dialog/dialog.component.html

@@ -73,7 +73,7 @@ <h5>Dialog with choises</h5>
         mdl-button-type="raised"
         mdl-colored="primary"
         mdl-ripple
-        (click)="showDialogFullWidthAction()">Show Dialog with full width actions</button>
+        (click)="showDialogFullWidthAction($event)">Show Dialog with full width actions</button>
 
 
 <pre prism>
@@ -105,7 +105,13 @@ <h5>Dialog with choises</h5>
       }
     ],
     fullWidthAction: true,
-    isModal: false
+    isModal: false,
+    openFrom: $event,
+    closeTo: {
+      left: document.body.offsetWidth/2,
+      height: 0,
+      top: document.body.offsetHeight/2,
+      width: 0} as OpenCloseRect
   });
   pDialog.then( (dialogReference) => console.log('dialog visible', dialogReference) );
 

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

@@ -16,6 +16,7 @@ import {
   LoginDialogComponent,
   TEST_VALUE
 } from './login-dialog.component';
+import { OpenCloseRect } from '../../../lib/components/dialog/mdl-dialog-configuration';
 
 
 @Component({
@@ -60,7 +61,7 @@ export class DialogDemo extends AbstractDemoComponent {
     })
   }
 
-  public showDialogFullWidthAction() {
+  public showDialogFullWidthAction($event: MouseEvent) {
     let pDialog = this.dialogService.showDialog({
       title: 'Your choice?',
       message: 'What drink do you prefer to your meal?',
@@ -86,7 +87,13 @@ export class DialogDemo extends AbstractDemoComponent {
         }
       ],
       fullWidthAction: true,
-      isModal: false
+      isModal: false,
+      openFrom: $event,
+      closeTo: {
+        left: document.body.offsetWidth/2,
+        height: 0,
+        top: document.body.offsetHeight/2,
+        width: 0} as OpenCloseRect
     });
     pDialog.subscribe( (dialogReference) => console.log('dialog visible', dialogReference) );
   }