123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { Component, ComponentFactoryResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
  2. import { KEY_ESCAPE } from '../../platform/key';
  3. import { NavParams } from '../../navigation/nav-params';
  4. import { ViewController } from '../../navigation/view-controller';
  5. import { GESTURE_GO_BACK_SWIPE, GESTURE_MENU_SWIPE, GestureController } from '../../gestures/gesture-controller';
  6. import { ModuleLoader } from '../../util/module-loader';
  7. /**
  8. * @hidden
  9. */
  10. export class ModalCmp {
  11. constructor(_cfr, _renderer, _elementRef, _navParams, _viewCtrl, gestureCtrl, moduleLoader) {
  12. this._cfr = _cfr;
  13. this._renderer = _renderer;
  14. this._elementRef = _elementRef;
  15. this._navParams = _navParams;
  16. this._viewCtrl = _viewCtrl;
  17. this.moduleLoader = moduleLoader;
  18. let opts = _navParams.get('opts');
  19. (void 0) /* assert */;
  20. this._gestureBlocker = gestureCtrl.createBlocker({
  21. disable: [GESTURE_MENU_SWIPE, GESTURE_GO_BACK_SWIPE]
  22. });
  23. this._bdDismiss = opts.enableBackdropDismiss;
  24. if (opts.cssClass) {
  25. opts.cssClass.split(' ').forEach((cssClass) => {
  26. // Make sure the class isn't whitespace, otherwise it throws exceptions
  27. if (cssClass.trim() !== '')
  28. _renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
  29. });
  30. }
  31. }
  32. ionViewPreLoad() {
  33. const component = this._navParams.data.component;
  34. if (!component) {
  35. console.warn('modal\'s page was not defined');
  36. return;
  37. }
  38. let cfr = this.moduleLoader.getComponentFactoryResolver(component);
  39. if (!cfr) {
  40. cfr = this._cfr;
  41. }
  42. const componentFactory = cfr.resolveComponentFactory(component);
  43. // ******** DOM WRITE ****************
  44. const componentRef = this._viewport.createComponent(componentFactory, this._viewport.length, this._viewport.parentInjector, []);
  45. this._setCssClass(componentRef, 'ion-page');
  46. this._setCssClass(componentRef, 'show-page');
  47. // Change the viewcontroller's instance to point the user provided page
  48. // Lifecycle events will be sent to the new instance, instead of the modal's component
  49. // we need to manually subscribe to them
  50. this._viewCtrl._setInstance(componentRef.instance);
  51. this._viewCtrl.willEnter.subscribe(this._viewWillEnter.bind(this));
  52. this._viewCtrl.didLeave.subscribe(this._viewDidLeave.bind(this));
  53. this._enabled = true;
  54. }
  55. _viewWillEnter() {
  56. this._gestureBlocker.block();
  57. }
  58. _viewDidLeave() {
  59. this._gestureBlocker.unblock();
  60. }
  61. _setCssClass(componentRef, className) {
  62. this._renderer.setElementClass(componentRef.location.nativeElement, className, true);
  63. }
  64. _bdClick() {
  65. if (this._enabled && this._bdDismiss) {
  66. const opts = {
  67. minClickBlockDuration: 400
  68. };
  69. return this._viewCtrl.dismiss(null, 'backdrop', opts);
  70. }
  71. }
  72. _keyUp(ev) {
  73. if (this._enabled && this._viewCtrl.isLast() && ev.keyCode === KEY_ESCAPE) {
  74. this._bdClick();
  75. }
  76. }
  77. ngOnDestroy() {
  78. (void 0) /* assert */;
  79. this._gestureBlocker.destroy();
  80. }
  81. }
  82. ModalCmp.decorators = [
  83. { type: Component, args: [{
  84. selector: 'ion-modal',
  85. template: '<ion-backdrop (click)="_bdClick()" [class.backdrop-no-tappable]="!_bdDismiss"></ion-backdrop>' +
  86. '<div class="modal-wrapper">' +
  87. '<div #viewport nav-viewport></div>' +
  88. '</div>'
  89. },] },
  90. ];
  91. /** @nocollapse */
  92. ModalCmp.ctorParameters = () => [
  93. { type: ComponentFactoryResolver, },
  94. { type: Renderer, },
  95. { type: ElementRef, },
  96. { type: NavParams, },
  97. { type: ViewController, },
  98. { type: GestureController, },
  99. { type: ModuleLoader, },
  100. ];
  101. ModalCmp.propDecorators = {
  102. '_viewport': [{ type: ViewChild, args: ['viewport', { read: ViewContainerRef },] },],
  103. '_keyUp': [{ type: HostListener, args: ['body:keyup', ['$event'],] },],
  104. };
  105. //# sourceMappingURL=modal-component.js.map