diff --git a/src/components/modal/modal-component.ts b/src/components/modal/modal-component.ts index e0e086ae78..7b659b236e 100644 --- a/src/components/modal/modal-component.ts +++ b/src/components/modal/modal-component.ts @@ -1,6 +1,6 @@ import { Component, ComponentFactoryResolver, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core'; -import { Key } from '../../platform/key'; +import { KEY_ESCAPE } from '../../platform/key'; import { NavParams } from '../../navigation/nav-params'; import { NavOptions } from '../../navigation/nav-util'; import { ViewController } from '../../navigation/view-controller'; @@ -90,7 +90,7 @@ export class ModalCmp { @HostListener('body:keyup', ['$event']) _keyUp(ev: KeyboardEvent) { - if (this._enabled && this._viewCtrl.isLast() && ev.keyCode === Key.ESCAPE) { + if (this._enabled && this._viewCtrl.isLast() && ev.keyCode === KEY_ESCAPE) { this._bdClick(); } } diff --git a/src/components/modal/modal-controller.ts b/src/components/modal/modal-controller.ts new file mode 100644 index 0000000000..86ef2775db --- /dev/null +++ b/src/components/modal/modal-controller.ts @@ -0,0 +1,131 @@ +import { Injectable } from '@angular/core'; + +import { App } from '../app/app'; +import { Config } from '../../config/config'; +import { Modal } from './modal'; +import { ModalOptions } from './modal-options'; + +/** + * @name ModalController + * @description + * A Modal is a content pane that goes over the user's current page. + * Usually it is used for making a choice or editing an item. A modal uses the + * `NavController` to + * {@link /docs/v2/api/components/nav/NavController/#present present} + * itself in the root nav stack. It is added to the stack similar to how + * {@link /docs/v2/api/components/nav/NavController/#push NavController.push} + * works. + * + * When a modal (or any other overlay such as an alert or actionsheet) is + * "presented" to a nav controller, the overlay is added to the app's root nav. + * After the modal has been presented, from within the component instance The + * modal can later be closed or "dismissed" by using the ViewController's + * `dismiss` method. Additionally, you can dismiss any overlay by using `pop` + * on the root nav controller. Modals are not reusable. When a modal is dismissed + * it is destroyed. + * + * Data can be passed to a new modal through `Modal.create()` as the second + * argument. The data can then be accessed from the opened page by injecting + * `NavParams`. Note that the page, which opened as a modal, has no special + * "modal" logic within it, but uses `NavParams` no differently than a + * standard page. + * + * @usage + * ```ts + * import { ModalController, NavParams } from 'ionic-angular'; + * + * @Component(...) + * class HomePage { + * + * constructor(public modalCtrl: ModalController) { + * + * } + * + * presentProfileModal() { + * let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 }); + * profileModal.present(); + * } + * + * } + * + * @Component(...) + * class Profile { + * + * constructor(params: NavParams) { + * console.log('UserId', params.get('userId')); + * } + * + * } + * ``` + * + * @advanced + * + * | Option | Type | Description | + * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| + * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | + * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | + * + * A modal can also emit data, which is useful when it is used to add or edit + * data. For example, a profile page could slide up in a modal, and on submit, + * the submit button could pass the updated profile data, then dismiss the + * modal. + * + * ```ts + * import { Component } from '@angular/core'; + * import { ModalController, ViewController } from 'ionic-angular'; + * + * @Component(...) + * class HomePage { + * + * constructor(public modalCtrl: ModalController) { + * + * } + * + * presentContactModal() { + * let contactModal = this.modalCtrl.create(ContactUs); + * contactModal.present(); + * } + * + * presentProfileModal() { + * let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 }); + * profileModal.onDidDismiss(data => { + * console.log(data); + * }); + * profileModal.present(); + * } + * + * } + * + * @Component(...) + * class Profile { + * + * constructor(public viewCtrl: ViewController) { + * + * } + * + * dismiss() { + * let data = { 'foo': 'bar' }; + * this.viewCtrl.dismiss(data); + * } + * + * } + * ``` + * @demo /docs/v2/demos/src/modal/ + * @see {@link /docs/v2/components#modals Modal Component Docs} + */ +@Injectable() +export class ModalController { + + constructor(private _app: App, public config: Config) { } + + /** + * Create a modal to display. See below for options. + * + * @param {object} component The Modal view + * @param {object} data Any data to pass to the Modal view + * @param {object} opts Modal options + */ + create(component: any, data: any = {}, opts: ModalOptions = {}) { + return new Modal(this._app, component, data, opts, this.config); + } +} diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index aa6077a35d..243f45e9a3 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,10 +1,10 @@ -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 { PORTAL_MODAL } from '../app/app-constants'; import { ModalCmp } from './modal-component'; import { ModalOptions } from './modal-options'; +import { ModalSlideIn, ModalSlideOut, ModalMDSlideIn, ModalMDSlideOut } from './modal-transitions'; import { NavOptions } from '../../navigation/nav-util'; import { ViewController } from '../../navigation/view-controller'; @@ -17,7 +17,7 @@ export class Modal extends ViewController { private _enterAnimation: string; private _leaveAnimation: string; - constructor(app: App, component: any, data: any, opts: ModalOptions = {}) { + constructor(app: App, component: any, data: any, opts: ModalOptions = {}, config: Config) { data = data || {}; data.component = component; opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true; @@ -30,6 +30,11 @@ export class Modal extends ViewController { this._leaveAnimation = opts.leaveAnimation; this.isOverlay = true; + + config.setTransition('modal-slide-in', ModalSlideIn); + config.setTransition('modal-slide-out', ModalSlideOut); + config.setTransition('modal-md-slide-in', ModalMDSlideIn); + config.setTransition('modal-md-slide-out', ModalMDSlideOut); } /** @@ -59,132 +64,7 @@ export class Modal extends ViewController { */ present(navOptions: NavOptions = {}) { navOptions.minClickBlockDuration = navOptions.minClickBlockDuration || 400; - return this._app.present(this, navOptions, AppPortal.MODAL); + return this._app.present(this, navOptions, PORTAL_MODAL); } } - - -/** - * @name ModalController - * @description - * A Modal is a content pane that goes over the user's current page. - * Usually it is used for making a choice or editing an item. A modal uses the - * `NavController` to - * {@link /docs/v2/api/components/nav/NavController/#present present} - * itself in the root nav stack. It is added to the stack similar to how - * {@link /docs/v2/api/components/nav/NavController/#push NavController.push} - * works. - * - * When a modal (or any other overlay such as an alert or actionsheet) is - * "presented" to a nav controller, the overlay is added to the app's root nav. - * After the modal has been presented, from within the component instance The - * modal can later be closed or "dismissed" by using the ViewController's - * `dismiss` method. Additionally, you can dismiss any overlay by using `pop` - * on the root nav controller. Modals are not reusable. When a modal is dismissed - * it is destroyed. - * - * Data can be passed to a new modal through `Modal.create()` as the second - * argument. The data can then be accessed from the opened page by injecting - * `NavParams`. Note that the page, which opened as a modal, has no special - * "modal" logic within it, but uses `NavParams` no differently than a - * standard page. - * - * @usage - * ```ts - * import { ModalController, NavParams } from 'ionic-angular'; - * - * @Component(...) - * class HomePage { - * - * constructor(public modalCtrl: ModalController) { - * - * } - * - * presentProfileModal() { - * let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 }); - * profileModal.present(); - * } - * - * } - * - * @Component(...) - * class Profile { - * - * constructor(params: NavParams) { - * console.log('UserId', params.get('userId')); - * } - * - * } - * ``` - * - * @advanced - * - * | Option | Type | Description | - * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| - * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | - * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | - * - * A modal can also emit data, which is useful when it is used to add or edit - * data. For example, a profile page could slide up in a modal, and on submit, - * the submit button could pass the updated profile data, then dismiss the - * modal. - * - * ```ts - * import { Component } from '@angular/core'; - * import { ModalController, ViewController } from 'ionic-angular'; - * - * @Component(...) - * class HomePage { - * - * constructor(public modalCtrl: ModalController) { - * - * } - * - * presentContactModal() { - * let contactModal = this.modalCtrl.create(ContactUs); - * contactModal.present(); - * } - * - * presentProfileModal() { - * let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 }); - * profileModal.onDidDismiss(data => { - * console.log(data); - * }); - * profileModal.present(); - * } - * - * } - * - * @Component(...) - * class Profile { - * - * constructor(public viewCtrl: ViewController) { - * - * } - * - * dismiss() { - * let data = { 'foo': 'bar' }; - * this.viewCtrl.dismiss(data); - * } - * - * } - * ``` - * @demo /docs/v2/demos/src/modal/ - * @see {@link /docs/v2/components#modals Modal Component Docs} - */ -@Injectable() -export class ModalController { - - constructor(private _app: App) {} - /** - * Create a modal to display. See below for options. - * - * @param {object} component The Modal view - * @param {object} data Any data to pass to the Modal view - * @param {object} opts Modal options - */ - create(component: any, data: any = {}, opts: ModalOptions = {}) { - return new Modal(this._app, component, data, opts); - } -}