navbar.js 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. (function (factory) {
  12. if (typeof module === "object" && typeof module.exports === "object") {
  13. var v = factory(require, exports);
  14. if (v !== undefined) module.exports = v;
  15. }
  16. else if (typeof define === "function" && define.amd) {
  17. define(["require", "exports", "@angular/core", "../app/app", "../../config/config", "../../util/util", "../../navigation/nav-controller", "./toolbar-base", "../../navigation/view-controller"], factory);
  18. }
  19. })(function (require, exports) {
  20. "use strict";
  21. Object.defineProperty(exports, "__esModule", { value: true });
  22. var core_1 = require("@angular/core");
  23. var app_1 = require("../app/app");
  24. var config_1 = require("../../config/config");
  25. var util_1 = require("../../util/util");
  26. var nav_controller_1 = require("../../navigation/nav-controller");
  27. var toolbar_base_1 = require("./toolbar-base");
  28. var view_controller_1 = require("../../navigation/view-controller");
  29. /**
  30. * @name Navbar
  31. * @description
  32. * Navbar acts as the navigational toolbar, which also comes with a back
  33. * button. A navbar can contain a `ion-title`, any number of buttons,
  34. * a segment, or a searchbar. Navbars must be placed within an
  35. * `<ion-header>` in order for them to be placed above the content.
  36. * It's important to note that navbar's are part of the dynamic navigation
  37. * stack. If you need a static toolbar, use ion-toolbar.
  38. *
  39. * @usage
  40. * ```html
  41. * <ion-header>
  42. *
  43. * <ion-navbar>
  44. * <button ion-button icon-only menuToggle>
  45. * <ion-icon name="menu"></ion-icon>
  46. * </button>
  47. *
  48. * <ion-title>
  49. * Page Title
  50. * </ion-title>
  51. *
  52. * <ion-buttons end>
  53. * <button ion-button icon-only (click)="openModal()">
  54. * <ion-icon name="options"></ion-icon>
  55. * </button>
  56. * </ion-buttons>
  57. * </ion-navbar>
  58. *
  59. * </ion-header>
  60. * ```
  61. *
  62. * @demo /docs/demos/src/navbar/
  63. * @see {@link ../../toolbar/Toolbar/ Toolbar API Docs}
  64. */
  65. var Navbar = (function (_super) {
  66. __extends(Navbar, _super);
  67. function Navbar(_app, viewCtrl, navCtrl, config, elementRef, renderer) {
  68. var _this = _super.call(this, config, elementRef, renderer) || this;
  69. _this._app = _app;
  70. _this.navCtrl = navCtrl;
  71. /**
  72. * @hidden
  73. */
  74. _this._hidden = false;
  75. /**
  76. * @hidden
  77. */
  78. _this._hideBb = false;
  79. viewCtrl && viewCtrl._setNavbar(_this);
  80. _this._bbIcon = config.get('backButtonIcon');
  81. _this._sbPadding = config.getBoolean('statusbarPadding');
  82. _this._backText = config.get('backButtonText', 'Back');
  83. return _this;
  84. }
  85. Object.defineProperty(Navbar.prototype, "hideBackButton", {
  86. /**
  87. * @input {boolean} If true, the back button will be hidden.
  88. */
  89. get: function () {
  90. return this._hideBb;
  91. },
  92. set: function (val) {
  93. this._hideBb = util_1.isTrueProperty(val);
  94. },
  95. enumerable: true,
  96. configurable: true
  97. });
  98. Navbar.prototype.backButtonClick = function (ev) {
  99. ev.preventDefault();
  100. ev.stopPropagation();
  101. this.navCtrl && this.navCtrl.pop(null, null);
  102. };
  103. /**
  104. * Set the text of the Back Button in the Nav Bar. Defaults to "Back".
  105. */
  106. Navbar.prototype.setBackButtonText = function (text) {
  107. this._backText = text;
  108. };
  109. /**
  110. * @hidden
  111. */
  112. Navbar.prototype.didEnter = function () {
  113. try {
  114. this._app.setTitle(this.getTitleText());
  115. }
  116. catch (e) {
  117. console.error(e);
  118. }
  119. };
  120. /**
  121. * @hidden
  122. */
  123. Navbar.prototype.setHidden = function (isHidden) {
  124. // used to display none/block the navbar
  125. this._hidden = isHidden;
  126. };
  127. Navbar.decorators = [
  128. { type: core_1.Component, args: [{
  129. selector: 'ion-navbar',
  130. template: '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
  131. '<button (click)="backButtonClick($event)" ion-button="bar-button" class="back-button" [ngClass]="\'back-button-\' + _mode" [hidden]="_hideBb">' +
  132. '<ion-icon class="back-button-icon" [ngClass]="\'back-button-icon-\' + _mode" [name]="_bbIcon"></ion-icon>' +
  133. '<span class="back-button-text" [ngClass]="\'back-button-text-\' + _mode">{{_backText}}</span>' +
  134. '</button>' +
  135. '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
  136. '<ng-content select="ion-buttons[start]"></ng-content>' +
  137. '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
  138. '<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
  139. '<ng-content></ng-content>' +
  140. '</div>',
  141. host: {
  142. '[hidden]': '_hidden',
  143. 'class': 'toolbar',
  144. '[class.statusbar-padding]': '_sbPadding'
  145. }
  146. },] },
  147. ];
  148. /** @nocollapse */
  149. Navbar.ctorParameters = function () { return [
  150. { type: app_1.App, },
  151. { type: view_controller_1.ViewController, decorators: [{ type: core_1.Optional },] },
  152. { type: nav_controller_1.NavController, decorators: [{ type: core_1.Optional },] },
  153. { type: config_1.Config, },
  154. { type: core_1.ElementRef, },
  155. { type: core_1.Renderer, },
  156. ]; };
  157. Navbar.propDecorators = {
  158. 'hideBackButton': [{ type: core_1.Input },],
  159. };
  160. return Navbar;
  161. }(toolbar_base_1.ToolbarBase));
  162. exports.Navbar = Navbar;
  163. });
  164. //# sourceMappingURL=navbar.js.map