diff --git a/ionic/components/toast/test/basic/index.ts b/ionic/components/toast/test/basic/index.ts
index 27d12585af..51934592fe 100644
--- a/ionic/components/toast/test/basic/index.ts
+++ b/ionic/components/toast/test/basic/index.ts
@@ -1,19 +1,21 @@
-import {App, Page, Toast, NavController, Platform} from 'ionic-angular';
+import {App, Page, Toast, NavController} from 'ionic-angular';
@Page({
templateUrl: 'main.html'
})
class E2EPage {
- constructor(
- private nav: NavController,
- private platform: Platform)
- {}
+
+ private dismissMessage: string;
+
+
+ constructor(private nav: NavController) { }
showToast() {
const toast = Toast.create({
message: 'User was created successfully',
});
+ toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
@@ -22,16 +24,17 @@ class E2EPage {
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
});
+ toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
showDismissDurationToast() {
- const toast = Toast.create({
- message: 'I am dismissed after 1.5 seconds',
- duration: 1500
- });
-
- this.nav.present(toast);
+ const toast = Toast.create({
+ message: 'I am dismissed after 1.5 seconds',
+ duration: 1500
+ });
+ toast.onDismiss(this.dismissHandler);
+ this.nav.present(toast);
}
showToastWithCloseButton() {
@@ -40,9 +43,15 @@ class E2EPage {
showCloseButton: true,
closeButtonText: 'Ok'
});
-
+ toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
+
+ private dismissHandler(toast: Toast) {
+ console.info('Toast onDismiss()');
+
+ }
+
}
@App({
diff --git a/ionic/components/toast/test/basic/main.html b/ionic/components/toast/test/basic/main.html
index f6407aa6d2..e3d4c63eb9 100644
--- a/ionic/components/toast/test/basic/main.html
+++ b/ionic/components/toast/test/basic/main.html
@@ -8,4 +8,6 @@
+
+ {{ dismissMessage }}
diff --git a/ionic/components/toast/toast.ts b/ionic/components/toast/toast.ts
index 5d177c882b..3bd0285712 100644
--- a/ionic/components/toast/toast.ts
+++ b/ionic/components/toast/toast.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer} from 'angular2/core';
+import {Component, ElementRef, Renderer, Output, EventEmitter} from 'angular2/core';
import {NgClass, NgIf, NgFor} from 'angular2/common';
import {Button} from '../button/button';
@@ -18,7 +18,6 @@ import {ViewController} from '../nav/view-controller';
* @description
* An Toast is a small message that appears in the lower part of the screen.
* It's useful for displaying success messages, error messages, etc.
- * `title`, `subTitle` and `message`.
*
* @usage
* ```ts
@@ -40,11 +39,10 @@ import {ViewController} from '../nav/view-controller';
export class Toast extends ViewController {
constructor(opts: ToastOptions = {}) {
- console.log('Toast Constructor');
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
-
super(ToastCmp, opts);
+
this.viewType = 'toast';
this.isOverlay = false;
@@ -54,6 +52,8 @@ export class Toast extends ViewController {
this.fireOtherLifecycles = false;
}
+
+
/**
* @private
*/
@@ -75,14 +75,14 @@ export class Toast extends ViewController {
*
* | Property | Type | Description |
* |-----------------------|-----------|--------------------------------------------------------------------------- |
- * | message | `string` | The message for the toast |
- * | duration | `number` | The amount of time in milliseconds the toast should appear (optional) |
- * | cssClass | `string` | Any additional class for the toast (optional) |
- * | showCloseButton | `boolean` | Whether or not to show an optional button to close the toast. (optional) |
- * | closeButtonText | `string` | Text to display in the close button. (optional) |
- * | enableBackdropDismiss | `boolean` | Whether the the toast should be dismissed by tapping the backdrop (optional) |
+ * | message | `string` | The message for the toast. Long strings will wrap and the toast container will expand. **(required)** |
+ * | duration | `number` | The amount of time in milliseconds the toast should appear *(optional)* |
+ * | cssClass | `string` | Any additional class for the toast *(optional)* |
+ * | showCloseButton | `boolean` | Whether or not to show an optional button to close the toast. *(optional)* |
+ * | closeButtonText | `string` | Text to display in the close button. *(optional)* |
+ * | enableBackdropDismiss | `boolean` | Whether the the toast should be dismissed by tapping the backdrop *(optional)* |
*
- * @param {object} opts Toast. See the tabel above
+ * @param {object} ToastOptions Toast. See the above table for available options.
*/
static create(opts: ToastOptions = {}) {
return new Toast(opts);
@@ -119,7 +119,6 @@ class ToastCmp {
private d: any;
private descId: string;
private hdrId: string;
- private id: number;
private created: number;
private dismissTimeout: number = undefined;
@@ -139,16 +138,14 @@ class ToastCmp {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
}
- this.id = (++toastIds);
-
if (this.d.message) {
this.hdrId = 'acst-hdr-' + this.id;
}
}
onPageDidEnter() {
- let activeElement: any = document.activeElement;
- if (document.activeElement) {
+ const { activeElement }: any = document;
+ if (activeElement) {
activeElement.blur();
}
@@ -267,11 +264,7 @@ class ToastWpPopIn extends Transition {
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);
+ this.easing('cubic-bezier(0,0 0.05,1)').duration(200).add(backdrop).add(wrapper);
}
}
@@ -286,11 +279,7 @@ class ToastWpPopOut extends Transition {
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);
+ this.easing('ease-out').duration(150).add(backdrop).add(wrapper);
}
}
@@ -301,6 +290,3 @@ 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;