chore(): overlay refactors

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);
+      });
     });
   }
 

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();

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);
+      });
     });
   }
 

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');

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);
+      });
     });
   }
 

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.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
-    this.usersComponentElement = mountingData.element;
+     .then((mountingData) => {
-    this.animation = await this.animationCtrl.create(animationBuilder, this.el);
+       this.usersComponentElement = mountingData.element;
-    if (!this.animate) {
+     });
-      // if the duration is 0, it won't actually animate I don't think
+
-      // TODO - validate this
+     return this.animationCtrl.create(animationBuilder, this.el)
-      this.animation = this.animation.duration(0);
+     .then(animation => {
-    }
+      this.animation = animation;
-    await playAnimationAsync(this.animation);
+      if (!this.animate) this.animation = animation.duration(0);
-    this.animation.destroy();
+      return playAnimationAsync(animation);
-    this.ionModalDidPresent.emit();
+    })
+    .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({
+    this.ionModalWillDismiss.emit({data, role});
-      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();
 
-
+    return this.animationCtrl.create(animationBuilder, this.el)
-    await domControllerAsync(this.dom.write, () => {});
+    .then(animation => {
-
+      this.animation = animation;
-    // TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
+      if (!this.animate) {
-    const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
+        this.animation = animation.duration(0);
-    await this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
+      }
-
+      return playAnimationAsync(animation);
-    this.el.parentElement.removeChild(this.el);
+    })
-
+    .then((animation) => {
-    this.ionModalDidDismiss.emit({
+      animation.destroy();
-      data,
+      this.ionModalDidDismiss.emit({data, role});
-      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);
+      });
     });
   }
 

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 = `

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
+    // add the modal by default to the data being passed
-     this.data = this.data || {};
+    this.data = this.data || {};
-     this.data.modal = this.el;
+    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();
-    });
-  }
 
+    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({
+    this.ionPopoverWillDismiss.emit({ data, role });
-      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 => {
+    return this.animationCtrl.create(animationBuilder, this.el)
-      this.animation = animation;
+      .then(animation => {
-      return playAnimationAsync(animation);
+        this.animation = animation;
-    }).then((animation) => {
+        return playAnimationAsync(animation);
-      animation.destroy();
+      })
-      return domControllerAsync(this.dom.write, () => {});
+      .then((animation) => {
-    }).then(() => {
+        animation.destroy();
-      // TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
+        this.ionPopoverDidDismiss.emit({ data, role });
-      const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
+      })
-      return this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
+      .then(() => {
-    }).then(() => {
+        return domControllerAsync(this.dom.write, () => {
-      this.el.parentElement.removeChild(this.el);
+          const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
-      this.ionPopoverDidDismiss.emit({
+          this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
-        data,
+          this.el.parentNode.removeChild(this.el);
-        role
+        });
       });
-    });
   }
 
   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>

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();

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();

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);
+      });
     });
   }