Front end of the Slack clone application.

nav.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import { Component, ComponentFactoryResolver, ElementRef, ErrorHandler, Input, NgZone, Optional, Renderer, ViewChild, ViewContainerRef, ViewEncapsulation, forwardRef } from '@angular/core';
  2. import { App } from '../app/app';
  3. import { Config } from '../../config/config';
  4. import { DeepLinker } from '../../navigation/deep-linker';
  5. import { DomController } from '../../platform/dom-controller';
  6. import { GestureController } from '../../gestures/gesture-controller';
  7. import { NavController } from '../../navigation/nav-controller';
  8. import { NavControllerBase } from '../../navigation/nav-controller-base';
  9. import { Platform } from '../../platform/platform';
  10. import { TransitionController } from '../../transitions/transition-controller';
  11. import { ViewController } from '../../navigation/view-controller';
  12. import { RootNode } from '../split-pane/split-pane';
  13. /**
  14. * @name Nav
  15. * @description
  16. *
  17. * `ion-nav` is the declarative component for a [NavController](../../../navigation/NavController/).
  18. *
  19. * For more information on using nav controllers like Nav or [Tab](../../Tabs/Tab/),
  20. * take a look at the [NavController API Docs](../../../navigation/NavController/).
  21. *
  22. *
  23. * @usage
  24. * You must set a root page to be loaded initially by any Nav you create, using
  25. * the 'root' property:
  26. *
  27. * ```ts
  28. * import { Component } from '@angular/core';
  29. * import { GettingStartedPage } from './getting-started';
  30. *
  31. * @Component({
  32. * template: `<ion-nav [root]="root"></ion-nav>`
  33. * })
  34. * class MyApp {
  35. * root = GettingStartedPage;
  36. *
  37. * constructor(){
  38. * }
  39. * }
  40. * ```
  41. *
  42. * @demo /docs/demos/src/navigation/
  43. * @see {@link /docs/components#navigation Navigation Component Docs}
  44. */
  45. export class Nav extends NavControllerBase {
  46. constructor(viewCtrl, parent, app, config, plt, elementRef, zone, renderer, cfr, gestureCtrl, transCtrl, linker, domCtrl, errHandler) {
  47. super(parent, app, config, plt, elementRef, zone, renderer, cfr, gestureCtrl, transCtrl, linker, domCtrl, errHandler);
  48. this._hasInit = false;
  49. if (viewCtrl) {
  50. // an ion-nav can also act as an ion-page within a parent ion-nav
  51. // this would happen when an ion-nav nests a child ion-nav.
  52. viewCtrl._setContent(this);
  53. }
  54. if (parent) {
  55. // this Nav has a parent Nav
  56. parent.registerChildNav(this);
  57. }
  58. else if (viewCtrl && viewCtrl.getNav()) {
  59. // this Nav was opened from a modal
  60. this.parent = viewCtrl.getNav();
  61. this.parent.registerChildNav(this);
  62. }
  63. else if (app && !app.getRootNavById(this.id)) {
  64. // a root nav has not been registered yet with the app
  65. // this is the root navcontroller for the entire app
  66. app.registerRootNav(this);
  67. }
  68. }
  69. /**
  70. * @hidden
  71. */
  72. set _vp(val) {
  73. this.setViewport(val);
  74. }
  75. ngAfterViewInit() {
  76. this._hasInit = true;
  77. const segment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
  78. if (segment && (segment.component || segment.loadChildren)) {
  79. return this._linker.initViews(segment).then(views => {
  80. return this.setPages(views, null, null);
  81. });
  82. }
  83. else if (this._root) {
  84. // no segment match, so use the root property but don't set the url I guess
  85. const setUrl = segment ? false : true;
  86. return this.push(this._root, this.rootParams, {
  87. isNavRoot: (this._app.getRootNavById(this.id) === this),
  88. updateUrl: setUrl
  89. }, null);
  90. }
  91. }
  92. /**
  93. * @input {Page} The Page component to load as the root page within this nav.
  94. */
  95. get root() {
  96. return this._root;
  97. }
  98. set root(page) {
  99. this._root = page;
  100. if (this._hasInit) {
  101. this.setRoot(page);
  102. }
  103. }
  104. /**
  105. * @hidden
  106. */
  107. ngOnDestroy() {
  108. this.destroy();
  109. }
  110. initPane() {
  111. const isMain = this._elementRef.nativeElement.hasAttribute('main');
  112. return isMain;
  113. }
  114. paneChanged(isPane) {
  115. if (isPane) {
  116. this.resize();
  117. }
  118. }
  119. goToRoot(opts) {
  120. return this.setRoot(this._root, this.rootParams, opts, null);
  121. }
  122. /*
  123. * @private
  124. */
  125. getType() {
  126. return 'nav';
  127. }
  128. /*
  129. * @private
  130. */
  131. getSecondaryIdentifier() {
  132. return null;
  133. }
  134. }
  135. Nav.decorators = [
  136. { type: Component, args: [{
  137. selector: 'ion-nav',
  138. template: '<div #viewport nav-viewport></div>' +
  139. '<div class="nav-decor"></div>',
  140. encapsulation: ViewEncapsulation.None,
  141. providers: [{ provide: RootNode, useExisting: forwardRef(() => Nav) }]
  142. },] },
  143. ];
  144. /** @nocollapse */
  145. Nav.ctorParameters = () => [
  146. { type: ViewController, decorators: [{ type: Optional },] },
  147. { type: NavController, decorators: [{ type: Optional },] },
  148. { type: App, },
  149. { type: Config, },
  150. { type: Platform, },
  151. { type: ElementRef, },
  152. { type: NgZone, },
  153. { type: Renderer, },
  154. { type: ComponentFactoryResolver, },
  155. { type: GestureController, },
  156. { type: TransitionController, },
  157. { type: DeepLinker, decorators: [{ type: Optional },] },
  158. { type: DomController, },
  159. { type: ErrorHandler, },
  160. ];
  161. Nav.propDecorators = {
  162. '_vp': [{ type: ViewChild, args: ['viewport', { read: ViewContainerRef },] },],
  163. 'root': [{ type: Input },],
  164. 'rootParams': [{ type: Input },],
  165. 'name': [{ type: Input },],
  166. };
  167. //# sourceMappingURL=nav.js.map