From 9f71fde27657522a2cdd06a5d34e6655e27b50e5 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Thu, 2 Mar 2017 15:02:07 -0600 Subject: [PATCH] refactor(toast): restructure toast component to separate modules restructure toast component to separate modules --- src/components/toast/toast-controller.ts | 84 ++++++++++++++++++++ src/components/toast/toast.ts | 99 ++++-------------------- 2 files changed, 98 insertions(+), 85 deletions(-) create mode 100644 src/components/toast/toast-controller.ts diff --git a/src/components/toast/toast-controller.ts b/src/components/toast/toast-controller.ts new file mode 100644 index 0000000000..51ed788f25 --- /dev/null +++ b/src/components/toast/toast-controller.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; + +import { App } from '../app/app'; +import { Config } from '../../config/config'; +import { Toast } from './toast'; +import { ToastOptions } from './toast-options'; + +/** + * @name ToastController + * @description + * A Toast is a subtle notification commonly used in modern applications. + * It can be used to provide feedback about an operation or to + * display a system message. The toast appears on top of the app's content, + * and can be dismissed by the app to resume user interaction with + * the app. + * + * ### Creating + * All of the toast options should be passed in the first argument of + * the create method: `create(opts)`. The message to display should be + * passed in the `message` property. The `showCloseButton` option can be set to + * true in order to display a close button on the toast. See the [create](#create) + * method below for all available options. + * + * ### Positioning + * Toasts can be positioned at the top, bottom or middle of the + * view port. The position can be passed to the `Toast.create(opts)` method. + * The position option is a string, and the values accepted are `top`, `bottom` and `middle`. + * If the position is not specified, the toast will be displayed at the bottom of the view port. + * + * ### Dismissing + * The toast can be dismissed automatically after a specific amount of time + * by passing the number of milliseconds to display it in the `duration` of + * the toast options. If `showCloseButton` is set to true, then the close button + * will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` + * method on the Toast instance. The `onDidDismiss` function can be called to perform an action after the toast + * is dismissed. + * + * @usage + * ```ts + * constructor(private toastCtrl: ToastController) { + * + * } + * + * presentToast() { + * let toast = this.toastCtrl.create({ + * message: 'User was added successfully', + * duration: 3000, + * position: 'top' + * }); + * + * toast.onDidDismiss(() => { + * console.log('Dismissed toast'); + * }); + * + * toast.present(); + * } + * ``` + * @advanced + * | Property | Type | Default | Description | + * |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------| + * | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. | + * | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | + * | position | `string` | "bottom" | The position of the toast on the screen. Accepted values: "top", "middle", "bottom". | + * | cssClass | `string` | - | Additional classes for custom styles, separated by spaces. | + * | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. | + * | closeButtonText | `string` | "Close" | Text to display in the close button. | + * | dismissOnPageChange | `boolean` | false | Whether to dismiss the toast when navigating to a new page. | + * + * @demo /docs/v2/demos/src/toast/ + */ +@Injectable() +export class ToastController { + + constructor(private _app: App, public config: Config) { } + + /** + * Create a new toast component. See options below + * @param {ToastOptions} opts Toast options. See the below table for available options. + */ + create(opts: ToastOptions = {}) { + return new Toast(this._app, opts, this.config); + } + +} diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index 128a165ac6..07b970810c 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -1,20 +1,21 @@ -import { Injectable } from '@angular/core'; - import { App } from '../app/app'; -import { AppPortal } from '../app/app-root'; +import { Config } from '../../config/config'; import { isPresent } from '../../util/util'; import { NavOptions } from '../../navigation/nav-util'; -import { ToastOptions } from './toast-options'; +import { PORTAL_TOAST } from '../app/app-constants'; import { ToastCmp } from './toast-component'; +import { ToastOptions } from './toast-options'; +import { ToastSlideIn, ToastSlideOut, ToastMdSlideIn, ToastMdSlideOut, ToastWpPopOut, ToastWpPopIn } from './toast-transitions'; import { ViewController } from '../../navigation/view-controller'; + /** * @private */ export class Toast extends ViewController { private _app: App; - constructor(app: App, opts: ToastOptions = {}) { + constructor(app: App, opts: ToastOptions = {}, config: Config) { opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false; super(ToastCmp, opts, null); this._app = app; @@ -25,6 +26,13 @@ export class Toast extends ViewController { } this.isOverlay = true; + + config.setTransition('toast-slide-in', ToastSlideIn); + config.setTransition('toast-slide-out', ToastSlideOut); + config.setTransition('toast-md-slide-in', ToastMdSlideIn); + config.setTransition('toast-md-slide-out', ToastMdSlideOut); + config.setTransition('toast-wp-slide-out', ToastWpPopOut); + config.setTransition('toast-wp-slide-in', ToastWpPopIn); } /** @@ -57,7 +65,7 @@ export class Toast extends ViewController { */ present(navOptions: NavOptions = {}) { navOptions.disableApp = false; - return this._app.present(this, navOptions, AppPortal.TOAST); + return this._app.present(this, navOptions, PORTAL_TOAST); } /** @@ -69,85 +77,6 @@ export class Toast extends ViewController { } - -/** - * @name ToastController - * @description - * A Toast is a subtle notification commonly used in modern applications. - * It can be used to provide feedback about an operation or to - * display a system message. The toast appears on top of the app's content, - * and can be dismissed by the app to resume user interaction with - * the app. - * - * ### Creating - * All of the toast options should be passed in the first argument of - * the create method: `create(opts)`. The message to display should be - * passed in the `message` property. The `showCloseButton` option can be set to - * true in order to display a close button on the toast. See the [create](#create) - * method below for all available options. - * - * ### Positioning - * Toasts can be positioned at the top, bottom or middle of the - * view port. The position can be passed to the `Toast.create(opts)` method. - * The position option is a string, and the values accepted are `top`, `bottom` and `middle`. - * If the position is not specified, the toast will be displayed at the bottom of the view port. - * - * ### Dismissing - * The toast can be dismissed automatically after a specific amount of time - * by passing the number of milliseconds to display it in the `duration` of - * the toast options. If `showCloseButton` is set to true, then the close button - * will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` - * method on the Toast instance. The `onDidDismiss` function can be called to perform an action after the toast - * is dismissed. - * - * @usage - * ```ts - * constructor(private toastCtrl: ToastController) { - * - * } - * - * presentToast() { - * let toast = this.toastCtrl.create({ - * message: 'User was added successfully', - * duration: 3000, - * position: 'top' - * }); - * - * toast.onDidDismiss(() => { - * console.log('Dismissed toast'); - * }); - * - * toast.present(); - * } - * ``` - * @advanced - * | Property | Type | Default | Description | - * |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------| - * | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. | - * | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | - * | position | `string` | "bottom" | The position of the toast on the screen. Accepted values: "top", "middle", "bottom". | - * | cssClass | `string` | - | Additional classes for custom styles, separated by spaces. | - * | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. | - * | closeButtonText | `string` | "Close" | Text to display in the close button. | - * | dismissOnPageChange | `boolean` | false | Whether to dismiss the toast when navigating to a new page. | - * - * @demo /docs/v2/demos/src/toast/ - */ -@Injectable() -export class ToastController { - - constructor(private _app: App) {} - - /** - * Create a new toast component. See options below - * @param {ToastOptions} opts Toast options. See the below table for available options. - */ - create(opts: ToastOptions = {}) { - return new Toast(this._app, opts); - } - -} - const TOAST_POSITION_TOP = 'top'; const TOAST_POSITION_MIDDLE = 'middle'; const TOAST_POSITION_BOTTOM = 'bottom';