From cca878cb3c0e583ad39de2707a05c8bcc7d8d387 Mon Sep 17 00:00:00 2001
From: mhartington <mikehartington@gmail.com>
Date: Thu, 21 Dec 2017 13:10:05 -0500
Subject: [PATCH] chore(): overlay refactors

---
 .../components/action-sheet/action-sheet.tsx  |  8 +-
 .../action-sheet/test/basic/index.html        |  1 +
 packages/core/src/components/alert/alert.tsx  |  9 +--
 .../components/alert/test/basic/index.html    |  2 +
 .../core/src/components/loading/loading.tsx   | 13 +++-
 packages/core/src/components/modal/modal.tsx  | 70 +++++++++--------
 .../components/modal/test/basic/index.html    |  2 +
 .../core/src/components/popover/popover.tsx   | 77 +++++++++----------
 .../components/popover/test/basic/index.html  |  4 +
 .../components/toast/test/basic/index.html    |  3 +
 packages/core/src/components/toast/toast.tsx  |  8 +-
 11 files changed, 106 insertions(+), 91 deletions(-)

diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx
index 90cda9de03..318e76a612 100644
--- a/packages/core/src/components/action-sheet/action-sheet.tsx
+++ b/packages/core/src/components/action-sheet/action-sheet.tsx
@@ -175,14 +175,14 @@ export class ActionSheet {
       return playAnimationAsync(animation);
     }).then((animation) => {
       animation.destroy();
-      return domControllerAsync(this.dom.write, () => {
-        this.el.parentNode.removeChild(this.el);
-      });
-    }).then(() => {
       this.ionActionSheetDidDismiss.emit({
         data,
         role
       });
+    }).then(() => {
+      return domControllerAsync(this.dom.write, () => {
+        this.el.parentNode.removeChild(this.el);
+      });
     });
   }
 
diff --git a/packages/core/src/components/action-sheet/test/basic/index.html b/packages/core/src/components/action-sheet/test/basic/index.html
index a28623c23d..5fb2fb566e 100644
--- a/packages/core/src/components/action-sheet/test/basic/index.html
+++ b/packages/core/src/components/action-sheet/test/basic/index.html
@@ -36,6 +36,7 @@
 
   <script>
 
+    window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
     async function presentBasic() {
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 8c49e717c5..5357c05eea 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -178,15 +178,14 @@ export class Alert {
       return playAnimationAsync(animation);
     }).then((animation) => {
       animation.destroy();
-
-      return domControllerAsync(this.dom.write, () => {
-        this.el.parentNode.removeChild(this.el);
-      });
-    }).then(() => {
       this.ionAlertDidDismiss.emit({
         data: data,
         role: role
       });
+    }).then(() => {
+      return domControllerAsync(this.dom.write, () => {
+        this.el.parentNode.removeChild(this.el);
+      });
     });
   }
 
diff --git a/packages/core/src/components/alert/test/basic/index.html b/packages/core/src/components/alert/test/basic/index.html
index ddca698735..470b1c0604 100644
--- a/packages/core/src/components/alert/test/basic/index.html
+++ b/packages/core/src/components/alert/test/basic/index.html
@@ -35,6 +35,8 @@
 
   <script>
 
+    window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
 
     async function presentAlert() {
       var alertController = document.querySelector('ion-alert-controller');
diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx
index fe3001ddc2..946fc68204 100644
--- a/packages/core/src/components/loading/loading.tsx
+++ b/packages/core/src/components/loading/loading.tsx
@@ -171,17 +171,22 @@ export class Loading {
 
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
+      if (!this.animate) {
+        // if the duration is 0, it won't actually animate I don't think
+        // TODO - validate this
+        this.animation = animation.duration(0);
+      }
       return playAnimationAsync(animation);
     }).then((animation) => {
       animation.destroy();
-      return domControllerAsync(this.dom.write, () => {
-        this.el.parentNode.removeChild(this.el);
-      });
-    }).then(() => {
       this.ionLoadingDidDismiss.emit({
         data,
         role
       });
+    }).then(() => {
+      return domControllerAsync(this.dom.write, () => {
+        this.el.parentNode.removeChild(this.el);
+      });
     });
   }
 
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index c937da111d..2a31b820eb 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -78,14 +78,14 @@ export class Modal {
 
   @Prop() enterAnimation: AnimationBuilder;
   @Prop() leaveAnimation: AnimationBuilder;
-  @Prop() animate: boolean;
+  @Prop() animate: boolean = true;
   @Prop({ mutable: true }) delegate: FrameworkDelegate;
 
   private animation: Animation;
   private usersComponentElement: HTMLElement;
 
   @Method()
-  async present() {
+  present() {
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
@@ -111,29 +111,30 @@ export class Modal {
     // add the modal by default to the data being passed
     this.data = this.data || {};
     this.data.modal = this.el;
-    const mountingData = await this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses);
-    this.usersComponentElement = mountingData.element;
-    this.animation = await this.animationCtrl.create(animationBuilder, this.el);
-    if (!this.animate) {
-      // if the duration is 0, it won't actually animate I don't think
-      // TODO - validate this
-      this.animation = this.animation.duration(0);
-    }
-    await playAnimationAsync(this.animation);
-    this.animation.destroy();
-    this.ionModalDidPresent.emit();
+    this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
+     .then((mountingData) => {
+       this.usersComponentElement = mountingData.element;
+     });
+
+     return this.animationCtrl.create(animationBuilder, this.el)
+     .then(animation => {
+      this.animation = animation;
+      if (!this.animate) this.animation = animation.duration(0);
+      return playAnimationAsync(animation);
+    })
+    .then((animation) => {
+      animation.destroy();
+      this.ionModalDidPresent.emit();
+    });
   }
 
   @Method()
-  async dismiss(data?: any, role?: string) {
+  dismiss(data?: any, role?: string) {
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
     }
-    this.ionModalWillDismiss.emit({
-      data,
-      role
-    });
+    this.ionModalWillDismiss.emit({data, role});
 
     if (!this.delegate) {
       this.delegate = new DomFrameworkDelegate();
@@ -142,22 +143,25 @@ export class Modal {
     // get the user's animation fn if one was provided
     const animationBuilder = this.leaveAnimation || this.config.get('modalLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
-    this.animation = await this.animationCtrl.create(animationBuilder, this.el);
-    await playAnimationAsync(this.animation);
-    this.animation.destroy();
 
-
-    await domControllerAsync(this.dom.write, () => {});
-
-    // TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
-    const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
-    await this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
-
-    this.el.parentElement.removeChild(this.el);
-
-    this.ionModalDidDismiss.emit({
-      data,
-      role
+    return this.animationCtrl.create(animationBuilder, this.el)
+    .then(animation => {
+      this.animation = animation;
+      if (!this.animate) {
+        this.animation = animation.duration(0);
+      }
+      return playAnimationAsync(animation);
+    })
+    .then((animation) => {
+      animation.destroy();
+      this.ionModalDidDismiss.emit({data, role});
+    })
+    .then(() => {
+      return domControllerAsync(this.dom.write, () => {
+        const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
+        this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
+        this.el.parentNode.removeChild(this.el);
+      });
     });
   }
 
diff --git a/packages/core/src/components/modal/test/basic/index.html b/packages/core/src/components/modal/test/basic/index.html
index baea9f3b3b..76d916ca65 100644
--- a/packages/core/src/components/modal/test/basic/index.html
+++ b/packages/core/src/components/modal/test/basic/index.html
@@ -27,6 +27,8 @@
   </ion-app>
 
   <script>
+    window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
+    window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
     async function presentModal() {
       const element = document.createElement('div');
       element.innerHTML = `
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index a238c62fcd..2dc23a8197 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -108,27 +108,26 @@ export class Popover {
       cssClasses.push(this.cssClass);
     }
 
-     // add the modal by default to the data being passed
-     this.data = this.data || {};
-     this.data.modal = this.el;
-     return this.delegate.attachViewToDom(userComponentParent, this.component,
-                        this.data, cssClasses).then((mountingData) => {
-      this.usersComponentElement = mountingData.element;
-      return this.animationCtrl.create(animationBuilder, this.el, this.ev);
-     }).then((animation) => {
-      this.animation = animation;
-      if (!this.animate) {
-        // if the duration is 0, it won't actually animate I don't think
-        // TODO - validate this
-        this.animation = animation.duration(0);
-      }
-      return playAnimationAsync(animation);
-     }).then((animation) => {
-      animation.destroy();
-      this.componentDidEnter();
-    });
-  }
+    // add the modal by default to the data being passed
+    this.data = this.data || {};
+    this.data.modal = this.el;
 
+    return this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
+      .then((mountingData) => {
+        this.usersComponentElement = mountingData.element;
+        return domControllerAsync(this.dom.raf, () => { })
+        .then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev))
+      })
+      .then((animation) => {
+        this.animation = animation;
+        if (!this.animate) this.animation = animation.duration(0);
+        return playAnimationAsync(animation);
+      })
+      .then((animation) => {
+        animation.destroy();
+        this.componentDidEnter();
+      });
+  }
 
   @Method()
   dismiss(data?: any, role?: string) {
@@ -137,10 +136,7 @@ export class Popover {
       this.animation = null;
     }
 
-    this.ionPopoverWillDismiss.emit({
-      data,
-      role
-    });
+    this.ionPopoverWillDismiss.emit({ data, role });
 
     if (!this.delegate) {
       this.delegate = new DomFrameworkDelegate();
@@ -148,23 +144,22 @@ export class Popover {
 
     const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
-    return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
-      this.animation = animation;
-      return playAnimationAsync(animation);
-    }).then((animation) => {
-      animation.destroy();
-      return domControllerAsync(this.dom.write, () => {});
-    }).then(() => {
-      // TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
-      const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
-      return this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
-    }).then(() => {
-      this.el.parentElement.removeChild(this.el);
-      this.ionPopoverDidDismiss.emit({
-        data,
-        role
+    return this.animationCtrl.create(animationBuilder, this.el)
+      .then(animation => {
+        this.animation = animation;
+        return playAnimationAsync(animation);
+      })
+      .then((animation) => {
+        animation.destroy();
+        this.ionPopoverDidDismiss.emit({ data, role });
+      })
+      .then(() => {
+        return domControllerAsync(this.dom.write, () => {
+          const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
+          this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
+          this.el.parentNode.removeChild(this.el);
+        });
       });
-    });
   }
 
   componentDidLoad() {
@@ -217,7 +212,7 @@ export class Popover {
         class='popover-backdrop'
       />,
       <div class={wrapperClasses}>
-        <div class='popover-arrow'/>
+        <div class='popover-arrow' />
         <div class='popover-content'>
           <div class={USER_COMPONENT_POPOVER_CONTAINER_CLASS}>
           </div>
diff --git a/packages/core/src/components/popover/test/basic/index.html b/packages/core/src/components/popover/test/basic/index.html
index 3e21d19877..0b34856e05 100644
--- a/packages/core/src/components/popover/test/basic/index.html
+++ b/packages/core/src/components/popover/test/basic/index.html
@@ -44,6 +44,10 @@
     </ion-page>
   </ion-app>
   <script>
+
+
+    // window.addEventListener('ionPopoverDidDismiss', function(e){console.log('didDismiss', e)})
+    // window.addEventListener('ionPopoverWillDismiss', function(e){console.log('willDismiss', e)})
     async function presentPopover(opts) {
       const popoverController = document.querySelector('ion-popover-controller');
       await popoverController.componentOnReady();
diff --git a/packages/core/src/components/toast/test/basic/index.html b/packages/core/src/components/toast/test/basic/index.html
index fb09ab5f86..f2f8a102ca 100644
--- a/packages/core/src/components/toast/test/basic/index.html
+++ b/packages/core/src/components/toast/test/basic/index.html
@@ -59,6 +59,9 @@
     </ion-page>
   </ion-app>
   <script>
+    window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
+    
     async function presentToast(position) {
       const toastController = document.querySelector('ion-toast-controller');
       await toastController.componentOnReady();
diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
index 3d31023b51..fbf587cea9 100644
--- a/packages/core/src/components/toast/toast.tsx
+++ b/packages/core/src/components/toast/toast.tsx
@@ -121,14 +121,14 @@ export class Toast {
       return playAnimationAsync(animation);
     }).then((animation) => {
       animation.destroy();
-      return domControllerAsync(this.dom.write, () => {
-        this.el.parentNode.removeChild(this.el);
-      });
-    }).then(() => {
       this.ionToastDidDismiss.emit({
         data,
         role
       });
+    }).then(() => {
+      return domControllerAsync(this.dom.write, () => {
+        this.el.parentNode.removeChild(this.el);
+      });
     });
   }