From f5b9474452b4fefc9bf408e38a0df1c21d137a8a Mon Sep 17 00:00:00 2001 From: Dave Ackerman Date: Mon, 18 Apr 2016 15:36:05 -0700 Subject: [PATCH] some docs updates, cleanup --- ionic/components/toast/test/basic/index.ts | 33 ++++++++++------ ionic/components/toast/test/basic/main.html | 2 + ionic/components/toast/toast.ts | 44 +++++++-------------- 3 files changed, 38 insertions(+), 41 deletions(-) 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;