clearTimeout after toast is dismissed, add WP styles

ionic/components.wp.scss

@@ -27,6 +27,7 @@
   "components/select/select.wp",
   "components/tabs/tabs.wp",
   "components/toggle/toggle.wp",
+  "components/toast/toast.wp",
   "components/toolbar/toolbar.wp";
 
 

ionic/components/toast/test/basic/index.ts

@@ -43,31 +43,8 @@ class E2EPage {
 
     this.nav.present(toast);
   }
-
 }
 
-@Page({
-  template: `
-    <ion-toolbar>
-      <ion-buttons start>
-        <button (click)="dismiss()">Close</button>
-      </ion-buttons>
-      <ion-title>Toast</ion-title>
-    </ion-toolbar>
-    <ion-content padding>
-      Hi, I'm Bob, and I'm a modal.
-    </ion-content>
-  `
-})
-class ToastPage {
-  constructor(private viewCtrl: ViewController) { }
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
 @App({
   template: '<ion-nav [root]="root"></ion-nav>'
 })

ionic/components/toast/toast.ts

@@ -121,6 +121,7 @@ class ToastCmp {
   private hdrId: string;
   private id: number;
   private created: number;
+  private dismissTimeout: number = undefined;
 
   constructor(
     private _nav: NavController,
@@ -158,8 +159,7 @@ class ToastCmp {
     }
 
     // if there's a `duration` set, automatically dismiss.
-    setTimeout(() => this.dismiss('backdrop'), this.d.duration ? this.d.duration : 3000)
+    this.dismissTimeout = setTimeout(() => this.dismiss('backdrop'), this.d.duration ? this.d.duration : 3000)
-
   }
 
   click(button, dismissDelay?) {
@@ -182,6 +182,8 @@ class ToastCmp {
   }
 
   dismiss(role): Promise<any> {
+    clearTimeout(this.dismissTimeout);
+    this.dismissTimeout = undefined;
     return this._viewCtrl.dismiss(null, role);
   }
 
@@ -254,10 +256,51 @@ class ToastMdSlideOut extends Transition {
   }
 }
 
+class ToastWpPopIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this
+      .easing('cubic-bezier(0,0 0.05,1)')
+      .duration(200)
+      .add(backdrop)
+      .add(wrapper);
+  }
+}
+
+class ToastWpPopOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this
+      .easing('ease-out')
+      .duration(150)
+      .add(backdrop)
+      .add(wrapper);
+  }
+}
+
+
 Transition.register('toast-slide-in', ToastSlideIn);
 Transition.register('toast-slide-out', ToastSlideOut);
 Transition.register('toast-md-slide-in', ToastMdSlideIn);
 Transition.register('toast-md-slide-out', ToastMdSlideOut);
+Transition.register('toast-wp-slide-out', ToastWpPopOut);
+Transition.register('toast-wp-slide-in', ToastWpPopIn);
 
 
 let toastIds = -1;

ionic/components/toast/toast.wp.scss

@@ -0,0 +1,33 @@
+// Windows Phone Toast
+// --------------------------------------------------
+$toast-wp-text-align:                            left !default;
+$toast-wp-background:                            rgba(0, 0, 0, 1) !default;
+$toast-wp-border-radius:                         0 !default;
+$toast-wp-button-color:                          #fff !default;
+
+$toast-wp-title-color:                           #fff !default;
+$toast-wp-title-font-size:                       1.4rem !default;
+$toast-wp-title-padding:                         1.5rem !default;
+
+.toast-wrapper {
+  background: $toast-wp-background;
+  border-radius: $toast-wp-border-radius;
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-wp-title-color;
+  font-size: $toast-wp-title-font-size;
+  padding: $toast-wp-title-padding;
+}
+
+.toast-button {
+  color: $toast-wp-button-color;
+}