123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. (function (factory) {
  2. if (typeof module === "object" && typeof module.exports === "object") {
  3. var v = factory(require, exports);
  4. if (v !== undefined) module.exports = v;
  5. }
  6. else if (typeof define === "function" && define.amd) {
  7. define(["require", "exports", "@angular/core", "../app/app", "../../config/config", "./popover", "../../navigation/deep-linker"], factory);
  8. }
  9. })(function (require, exports) {
  10. "use strict";
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var app_1 = require("../app/app");
  14. var config_1 = require("../../config/config");
  15. var popover_1 = require("./popover");
  16. var deep_linker_1 = require("../../navigation/deep-linker");
  17. /**
  18. * @name PopoverController
  19. * @description
  20. * A Popover is a dialog that appears on top of the current page.
  21. * It can be used for anything, but generally it is used for overflow
  22. * actions that don't fit in the navigation bar.
  23. *
  24. * ### Creating
  25. * A popover can be created by calling the `create` method. The view
  26. * to display in the popover should be passed as the first argument.
  27. * Any data to pass to the popover view can optionally be passed in
  28. * the second argument. Options for the popover can optionally be
  29. * passed in the third argument. See the [create](#create) method
  30. * below for all available options.
  31. *
  32. * ### Presenting
  33. * To present a popover, call the `present` method on a PopoverController instance.
  34. * In order to position the popover relative to the element clicked, a click event
  35. * needs to be passed into the options of the the `present method. If the event
  36. * is not passed, the popover will be positioned in the center of the current
  37. * view. See the [usage](#usage) section for an example of passing this event.
  38. *
  39. * ### Dismissing
  40. * To dismiss the popover after creation, call the `dismiss()` method on the
  41. * `Popover` instance. The popover can also be dismissed from within the popover's
  42. * view by calling the `dismiss()` method on the [ViewController](../../navigation/ViewController).
  43. * The `dismiss()` call accepts an optional parameter that will be passed to the callback described
  44. * as follows. The `onDidDismiss(<func>)` function can be called to set up a callback action that will
  45. * be performed after the popover is dismissed, receiving the parameter passed to `dismiss()`.
  46. * The popover will dismiss when the backdrop is clicked by implicitly performing `dismiss(null)`,
  47. * but this can be disabled by setting `enableBackdropDismiss` to `false` in the popover options.
  48. *
  49. * > Note that after the component is dismissed, it will not be usable anymore and
  50. * another one must be created. This can be avoided by wrapping the creation and
  51. * presentation of the component in a reusable function as shown in the [usage](#usage)
  52. * section below.
  53. *
  54. * @usage
  55. *
  56. * To open a popover on the click of a button, pass `$event` to the method
  57. * which creates and presents the popover:
  58. *
  59. * ```html
  60. * <button ion-button icon-only (click)="presentPopover($event)">
  61. * <ion-icon name="more"></ion-icon>
  62. * </button>
  63. * ```
  64. *
  65. * ```ts
  66. * import { PopoverController } from 'ionic-angular';
  67. *
  68. * @Component({})
  69. * class MyPage {
  70. * constructor(public popoverCtrl: PopoverController) {}
  71. *
  72. * presentPopover(myEvent) {
  73. * let popover = this.popoverCtrl.create(PopoverPage);
  74. * popover.present({
  75. * ev: myEvent
  76. * });
  77. * }
  78. * }
  79. * ```
  80. *
  81. * The `PopoverPage` will display inside of the popover, and
  82. * can be anything. Below is an example of a page with items
  83. * that close the popover on click.
  84. *
  85. * ```ts
  86. * @Component({
  87. * template: `
  88. * <ion-list>
  89. * <ion-list-header>Ionic</ion-list-header>
  90. * <button ion-item (click)="close()">Learn Ionic</button>
  91. * <button ion-item (click)="close()">Documentation</button>
  92. * <button ion-item (click)="close()">Showcase</button>
  93. * <button ion-item (click)="close()">GitHub Repo</button>
  94. * </ion-list>
  95. * `
  96. * })
  97. * class PopoverPage {
  98. * constructor(public viewCtrl: ViewController) {}
  99. *
  100. * close() {
  101. * this.viewCtrl.dismiss();
  102. * }
  103. * }
  104. * ```
  105. * @advanced
  106. * Popover Options
  107. *
  108. * | Option | Type | Description |
  109. * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
  110. * | cssClass |`string` | Additional classes for custom styles, separated by spaces. |
  111. * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
  112. * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. |
  113. *
  114. *
  115. *
  116. * @demo /docs/demos/src/popover/
  117. */
  118. var PopoverController = (function () {
  119. function PopoverController(_app, config, _deepLinker) {
  120. this._app = _app;
  121. this.config = config;
  122. this._deepLinker = _deepLinker;
  123. }
  124. /**
  125. * Present a popover. See below for options
  126. * @param {object} component The Popover
  127. * @param {object} data Any data to pass to the Popover view
  128. * @param {PopoverOptions} opts Popover options
  129. */
  130. PopoverController.prototype.create = function (component, data, opts) {
  131. if (data === void 0) { data = {}; }
  132. if (opts === void 0) { opts = {}; }
  133. return new popover_1.Popover(this._app, component, data, opts, this.config, this._deepLinker);
  134. };
  135. PopoverController.decorators = [
  136. { type: core_1.Injectable },
  137. ];
  138. /** @nocollapse */
  139. PopoverController.ctorParameters = function () { return [
  140. { type: app_1.App, },
  141. { type: config_1.Config, },
  142. { type: deep_linker_1.DeepLinker, },
  143. ]; };
  144. return PopoverController;
  145. }());
  146. exports.PopoverController = PopoverController;
  147. });
  148. //# sourceMappingURL=popover-controller.js.map