From 51f4c19d77de3e83a8603cadf4e32147468a49ba Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Thu, 2 Mar 2017 14:57:09 -0600 Subject: [PATCH] refactor(popover): restructure popover component to separate modules restructure popover component to separate modules --- src/components/popover/popover-component.ts | 4 +- src/components/popover/popover-controller.ts | 124 ++++++++++++++++++ src/components/popover/popover.ts | 130 ++----------------- 3 files changed, 134 insertions(+), 124 deletions(-) create mode 100644 src/components/popover/popover-controller.ts diff --git a/src/components/popover/popover-component.ts b/src/components/popover/popover-component.ts index 04f37a74c7..458695f490 100644 --- a/src/components/popover/popover-component.ts +++ b/src/components/popover/popover-component.ts @@ -1,7 +1,7 @@ import { Component, ComponentFactoryResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core'; import { Config } from '../../config/config'; -import { Key } from '../../platform/key'; +import { KEY_ESCAPE } from '../../platform/key'; import { NavParams } from '../../navigation/nav-params'; import { Platform } from '../../platform/platform'; import { ViewController } from '../../navigation/view-controller'; @@ -105,7 +105,7 @@ export class PopoverCmp { @HostListener('body:keyup', ['$event']) _keyUp(ev: KeyboardEvent) { - if (this._enabled && ev.keyCode === Key.ESCAPE && this._viewCtrl.isLast()) { + if (this._enabled && ev.keyCode === KEY_ESCAPE && this._viewCtrl.isLast()) { this._bdClick(); } } diff --git a/src/components/popover/popover-controller.ts b/src/components/popover/popover-controller.ts new file mode 100644 index 0000000000..59ac558422 --- /dev/null +++ b/src/components/popover/popover-controller.ts @@ -0,0 +1,124 @@ +import { Injectable } from '@angular/core'; + +import { App } from '../app/app'; +import { Config } from '../../config/config'; +import { Popover } from './popover'; +import { PopoverOptions } from './popover-options'; + +/** + * @name PopoverController + * @description + * A Popover is a dialog that appears on top of the current page. + * It can be used for anything, but generally it is used for overflow + * actions that don't fit in the navigation bar. + * + * ### Creating + * A popover can be created by calling the `create` method. The view + * to display in the popover should be passed as the first argument. + * Any data to pass to the popover view can optionally be passed in + * the second argument. Options for the popover can optionally be + * passed in the third argument. See the [create](#create) method + * below for all available options. + * + * ### Presenting + * To present a popover, call the `present` method on a PopoverController instance. + * In order to position the popover relative to the element clicked, a click event + * needs to be passed into the options of the the `present method. If the event + * is not passed, the popover will be positioned in the center of the current + * view. See the [usage](#usage) section for an example of passing this event. + * + * ### Dismissing + * To dismiss the popover after creation, call the `dismiss()` method on the + * `Popover` instance. The popover can also be dismissed from within the popover's + * view by calling the `dismiss()` method on the [ViewController](../../navigation/ViewController). + * The `dismiss()` call accepts an optional parameter that will be passed to the callback described + * as follows. The `onDidDismiss()` function can be called to set up a callback action that will + * be performed after the popover is dismissed, receiving the parameter passed to `dismiss()`. + * The popover will dismiss when the backdrop is clicked by implicitly performing `dismiss(null)`, + * but this can be disabled by setting `enableBackdropDismiss` to `false` in the popover options. + * + * > Note that after the component is dismissed, it will not be usable anymore and + * another one must be created. This can be avoided by wrapping the creation and + * presentation of the component in a reusable function as shown in the [usage](#usage) + * section below. + * + * @usage + * + * To open a popover on the click of a button, pass `$event` to the method + * which creates and presents the popover: + * + * ```html + * + * ``` + * + * ```ts + * import { PopoverController } from 'ionic-angular'; + * + * @Component({}) + * class MyPage { + * constructor(public popoverCtrl: PopoverController) {} + * + * presentPopover(myEvent) { + * let popover = this.popoverCtrl.create(PopoverPage); + * popover.present({ + * ev: myEvent + * }); + * } + * } + * ``` + * + * The `PopoverPage` will display inside of the popover, and + * can be anything. Below is an example of a page with items + * that close the popover on click. + * + * ```ts + * @Component({ + * template: ` + * + * Ionic + * + * + * + * + * + * ` + * }) + * class PopoverPage { + * constructor(public viewCtrl: ViewController) {} + * + * close() { + * this.viewCtrl.dismiss(); + * } + * } + * ``` + * @advanced + * Popover Options + * + * | Option | Type | Description | + * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| + * | cssClass |`string` | Additional classes for custom styles, separated by spaces. | + * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | + * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | + * + * + * + * @demo /docs/v2/demos/src/popover/ + */ +@Injectable() +export class PopoverController { + + constructor(private _app: App, public config: Config) { } + + /** + * Present a popover. See below for options + * @param {object} component The Popover + * @param {object} data Any data to pass to the Popover view + * @param {PopoverOptions} opts Popover options + */ + create(component: any, data = {}, opts: PopoverOptions = {}): Popover { + return new Popover(this._app, component, data, opts, this.config); + } + +} diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index 52c325fa9c..8a48f7ce4b 100644 --- a/src/components/popover/popover.ts +++ b/src/components/popover/popover.ts @@ -1,10 +1,10 @@ -import { Injectable } from '@angular/core'; - import { App } from '../app/app'; +import { Config } from '../../config/config'; import { isPresent } from '../../util/util'; import { NavOptions } from '../../navigation/nav-util'; import { PopoverCmp } from './popover-component'; import { PopoverOptions } from './popover-options'; +import { PopoverPopIn, PopoverPopOut, PopoverMdPopIn, PopoverMdPopOut } from './popover-transitions'; import { ViewController } from '../../navigation/view-controller'; @@ -14,7 +14,7 @@ import { ViewController } from '../../navigation/view-controller'; export class Popover extends ViewController { private _app: App; - constructor(app: App, component: any, data: any = {}, opts: PopoverOptions = {}) { + constructor(app: App, component: any, data: any = {}, opts: PopoverOptions = {}, config: Config) { opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true; opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true; @@ -23,6 +23,11 @@ export class Popover extends ViewController { super(PopoverCmp, data, null); this._app = app; this.isOverlay = true; + + config.setTransition('popover-pop-in', PopoverPopIn); + config.setTransition('popover-pop-out', PopoverPopOut); + config.setTransition('popover-md-pop-in', PopoverMdPopIn); + config.setTransition('popover-md-pop-out', PopoverMdPopOut); } /** @@ -44,122 +49,3 @@ export class Popover extends ViewController { } } - - -/** - * @name PopoverController - * @description - * A Popover is a dialog that appears on top of the current page. - * It can be used for anything, but generally it is used for overflow - * actions that don't fit in the navigation bar. - * - * ### Creating - * A popover can be created by calling the `create` method. The view - * to display in the popover should be passed as the first argument. - * Any data to pass to the popover view can optionally be passed in - * the second argument. Options for the popover can optionally be - * passed in the third argument. See the [create](#create) method - * below for all available options. - * - * ### Presenting - * To present a popover, call the `present` method on a PopoverController instance. - * In order to position the popover relative to the element clicked, a click event - * needs to be passed into the options of the the `present method. If the event - * is not passed, the popover will be positioned in the center of the current - * view. See the [usage](#usage) section for an example of passing this event. - * - * ### Dismissing - * To dismiss the popover after creation, call the `dismiss()` method on the - * `Popover` instance. The popover can also be dismissed from within the popover's - * view by calling the `dismiss()` method on the [ViewController](../../navigation/ViewController). - * The `dismiss()` call accepts an optional parameter that will be passed to the callback described - * as follows. The `onDidDismiss()` function can be called to set up a callback action that will - * be performed after the popover is dismissed, receiving the parameter passed to `dismiss()`. - * The popover will dismiss when the backdrop is clicked by implicitly performing `dismiss(null)`, - * but this can be disabled by setting `enableBackdropDismiss` to `false` in the popover options. - * - * > Note that after the component is dismissed, it will not be usable anymore and - * another one must be created. This can be avoided by wrapping the creation and - * presentation of the component in a reusable function as shown in the [usage](#usage) - * section below. - * - * @usage - * - * To open a popover on the click of a button, pass `$event` to the method - * which creates and presents the popover: - * - * ```html - * - * ``` - * - * ```ts - * import { PopoverController } from 'ionic-angular'; - * - * @Component({}) - * class MyPage { - * constructor(public popoverCtrl: PopoverController) {} - * - * presentPopover(myEvent) { - * let popover = this.popoverCtrl.create(PopoverPage); - * popover.present({ - * ev: myEvent - * }); - * } - * } - * ``` - * - * The `PopoverPage` will display inside of the popover, and - * can be anything. Below is an example of a page with items - * that close the popover on click. - * - * ```ts - * @Component({ - * template: ` - * - * Ionic - * - * - * - * - * - * ` - * }) - * class PopoverPage { - * constructor(public viewCtrl: ViewController) {} - * - * close() { - * this.viewCtrl.dismiss(); - * } - * } - * ``` - * @advanced - * Popover Options - * - * | Option | Type | Description | - * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| - * | cssClass |`string` | Additional classes for custom styles, separated by spaces. | - * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | - * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | - * - * - * - * @demo /docs/v2/demos/src/popover/ - */ -@Injectable() -export class PopoverController { - - constructor(private _app: App) {} - - /** - * Present a popover. See below for options - * @param {object} component The Popover - * @param {object} data Any data to pass to the Popover view - * @param {PopoverOptions} opts Popover options - */ - create(component: any, data = {}, opts: PopoverOptions = {}): Popover { - return new Popover(this._app, component, data, opts); - } - -}