Merge pull request #158 from mseemann/dialog-animations

dialog openFrom / closeTo

Author: mseemann

src/demo-app/app/app.component.scss

@@ -121,5 +121,3 @@ table.docu {
   height: 16px;
   vertical-align: middle;
 }
-
-

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

@@ -93,11 +93,16 @@ <h5>A custom Dialog - template</h5>
 <p>Username: {{ username }}</p>
 
 <button
+    #editUserButton
     mdl-button mdl-button-type="raised" mdl-colored="primary"
     mdl-ripple (click)="editUserDialog.show()">Edit User Dialog</button>
 
 <mdl-dialog #editUserDialog
-            [mdl-dialog-config]="{clickOutsideToClose: true, styles:{'width': '350px'}, isModal: true}"
+            [mdl-dialog-config]="{
+              clickOutsideToClose: true,
+              styles:{'width': '350px'},
+              isModal: true,
+              openFrom: editUserButton }"
             (show)="onDialogShow($event)"
             (hide)="onDialogHide()">
   <h3 class="mdl-dialog__title">Edit User</h3>
@@ -112,11 +117,15 @@ <h3 class="mdl-dialog__title">Edit User</h3>
 
 <pre prism>
 <![CDATA[
-<button mdl-button mdl-button-type="raised" mdl-colored="primary"
+<button #editUserButton mdl-button mdl-button-type="raised" mdl-colored="primary"
         mdl-ripple (click)="editUserDialog.show()">Edit User Dialog</button>
 
 <mdl-dialog #editUserDialog
-            [mdl-dialog-config]="{clickOutsideToClose: true, styles:{'width': '350px'}, isModal:true}"
+            [mdl-dialog-config]="{
+              clickOutsideToClose: true,
+              styles:{'width': '300px'},
+              isModal:true,
+              openFrom: editUserButton}"
             (show)="onDialogShow(dialogRef)"
             (hide)="onDialogHide()">
   <h3 class="mdl-dialog__title">Edit User</h3>
@@ -167,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>
@@ -215,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-declarative/dialog-declarative.component.ts

@@ -50,13 +50,12 @@ export class DialogDeclarativeDemo extends AbstractDemoComponent {
   }
 
   public onDialogShow(dialogRef: MdlDialogReference){
-    this.editedUsername = this.username;
     console.log(`dialog shown`, dialogRef);
-    setTimeout( () => {
-      this.tfName.setFocus();
-    });
+    this.editedUsername = this.username;
+    this.tfName.setFocus();
   }
 
+
   public onDialogHide(){
     console.log(`dialog hidden`);
   }

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({
@@ -54,13 +55,13 @@ export class DialogDemo extends AbstractDemoComponent {
         console.log('declined');
       }
     );
-    // if you only need the conform answer
+    // if you only need the confirm answer
     result.onErrorResumeNext().subscribe( () => {
       console.log('confirmed 2');
     })
   }
 
-  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) );
   }
@@ -97,8 +104,9 @@ export class DialogDemo extends AbstractDemoComponent {
       component: LoginDialogComponent,
       providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
       isModal: true,
-      styles: {'width': '350px'},
-      clickOutsideToClose: true
+      styles: {'width': '300px'},
+      clickOutsideToClose: true,
+      openFrom: $event
     });
     pDialog.subscribe( (dialogReference: MdlDialogReference) => {
       console.log('dialog visible', dialogReference);

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

@@ -47,8 +47,14 @@ export class LoginDialogComponent implements OnInit {
     // just if you want to be informed if the dialog is hidden
     this.dialog.onHide().subscribe( () => console.log('login dialog hidden') );
 
+    this.dialog.onVisible().subscribe( () => {
+      console.log('set focus');
+      this.inputElement.setFocus();
+    });
+
   }
 
+
   public ngOnInit() {
     this.form = this.fb.group({
       'username':  this.username,
@@ -57,11 +63,6 @@ export class LoginDialogComponent implements OnInit {
   }
 
 
-  public ngAfterViewInit() {
-    // set the focus - autofocus only works once :(
-    this.inputElement.setFocus();
-  }
-
   public login() {
     this.processingLogin = true;
     this.statusMessage = 'checking your credentials ...';

src/demo-app/favicon.ico

@@ -103,6 +103,20 @@ describe('Component: MdlButton', () => {
 
   });
 
+  it('should expose the elementRef to be used as openFrom for dialogs', () => {
+
+    TestBed.overrideComponent(MdlTestButtonComponent, { set: {
+      template: '<mdl-button>x</mdl-button>' }
+    });
+    let fixture = TestBed.createComponent(MdlTestButtonComponent);
+
+    fixture.detectChanges();
+
+    let button = fixture.debugElement.query(By.directive(MdlButtonComponent)).componentInstance;
+
+    expect(button.elementRef).toBeDefined('elementRef must be present!')
+  });
+
 });
 
 

src/lib/components/button/mdl-button.component.spec.ts

@@ -64,7 +64,7 @@ export class MdlButtonComponent implements OnChanges {
   @Input('mdl-colored') private mdlColoredType: 'primary' | 'accent' | '';
   @Input() @BooleanProperty() public disabled = false;
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer) {
+  constructor(public elementRef: ElementRef, private renderer: Renderer) {
     this.element = elementRef.nativeElement;
   }
 

src/lib/components/button/mdl-button.component.ts

@@ -7,6 +7,7 @@ import { MdlCommonsModule } from '../common/index';
 import { MdlDialogHostComponent } from './mdl-dialog-host.component';
 import { MdlAlertComponent } from './mdl-alert.component';
 import { MdlDialogOutletModule } from '../dialog-outlet/index';
+import { MdlButtonModule } from '../button/mdl-button.component';
 
 export * from './mdl-dialog.component';
 export * from './mdl-dialog.service';
@@ -27,6 +28,7 @@ const PRIVATE_COMPONENTS = [
   imports: [
     CommonModule,
     MdlCommonsModule,
+    MdlButtonModule,
     MdlDialogOutletModule.forRoot()
   ],
   exports: [