UI for Zipcoin Blue

menu-toggle.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import { Directive, HostListener, Input, Optional } from '@angular/core';
  2. import { Button } from '../button/button';
  3. import { MenuController } from '../app/menu-controller';
  4. import { Navbar } from '../toolbar/navbar';
  5. import { ViewController } from '../../navigation/view-controller';
  6. /**
  7. * @name MenuToggle
  8. * @description
  9. * The `menuToggle` directive can be placed on any button to toggle a menu open or closed.
  10. * If it is added to the [NavBar](../../toolbar/Navbar) of a page, the button will only appear
  11. * when the page it's in is currently a root page. See the [Menu Navigation Bar Behavior](../Menu#navigation-bar-behavior)
  12. * docs for more information.
  13. *
  14. *
  15. * @usage
  16. *
  17. * A simple `menuToggle` button can be added using the following markup:
  18. *
  19. * ```html
  20. * <button ion-button menuToggle>Toggle Menu</button>
  21. * ```
  22. *
  23. * To toggle a specific menu by its id or side, give the `menuToggle`
  24. * directive a value.
  25. *
  26. * ```html
  27. * <button ion-button menuToggle="right">Toggle Right Menu</button>
  28. * ```
  29. *
  30. * If placing the `menuToggle` in a navbar or toolbar, it should be
  31. * placed as a child of the `<ion-navbar>` or `<ion-toolbar>`, and not in
  32. * the `<ion-buttons>` element:
  33. *
  34. * ```html
  35. * <ion-header>
  36. *
  37. * <ion-navbar>
  38. * <ion-buttons start>
  39. * <button ion-button>
  40. * <ion-icon name="contact"></ion-icon>
  41. * </button>
  42. * </ion-buttons>
  43. * <button ion-button menuToggle>
  44. * <ion-icon name="menu"></ion-icon>
  45. * </button>
  46. * <ion-title>
  47. * Title
  48. * </ion-title>
  49. * <ion-buttons end>
  50. * <button ion-button (click)="doClick()">
  51. * <ion-icon name="more"></ion-icon>
  52. * </button>
  53. * </ion-buttons>
  54. * </ion-navbar>
  55. *
  56. * </ion-header>
  57. * ```
  58. *
  59. * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using
  60. * `start`, `end`, `left`, or `right`:
  61. *
  62. * ```html
  63. * <ion-toolbar>
  64. * <button ion-button menuToggle right>
  65. * <ion-icon name="menu"></ion-icon>
  66. * </button>
  67. * <ion-title>
  68. * Title
  69. * </ion-title>
  70. * <ion-buttons end>
  71. * <button ion-button (click)="doClick()">
  72. * <ion-icon name="more"></ion-icon>
  73. * </button>
  74. * </ion-buttons>
  75. * </ion-toolbar>
  76. * ```
  77. *
  78. * See the [Toolbar API docs](../../toolbar/Toolbar) for more information
  79. * on the different positions.
  80. *
  81. * @demo /docs/demos/src/menu/
  82. * @see {@link /docs/components#menus Menu Component Docs}
  83. * @see {@link ../../menu/Menu Menu API Docs}
  84. */
  85. var MenuToggle = (function () {
  86. function MenuToggle(_menu, _viewCtrl, _button, _navbar) {
  87. this._menu = _menu;
  88. this._viewCtrl = _viewCtrl;
  89. this._button = _button;
  90. this._isButton = !!_button;
  91. this._inNavbar = !!_navbar;
  92. }
  93. MenuToggle.prototype.ngAfterContentInit = function () {
  94. // Add the bar-button-menutoggle / button-menutoggle class
  95. if (this._isButton) {
  96. this._button._setClass('menutoggle', true);
  97. }
  98. };
  99. /**
  100. * @hidden
  101. */
  102. MenuToggle.prototype.toggle = function () {
  103. var menu = this._menu.get(this.menuToggle);
  104. menu && menu.toggle();
  105. };
  106. Object.defineProperty(MenuToggle.prototype, "isHidden", {
  107. /**
  108. * @hidden
  109. */
  110. get: function () {
  111. var menu = this._menu.get(this.menuToggle);
  112. if (this._inNavbar && this._viewCtrl) {
  113. if (!menu || !menu._canOpen()) {
  114. return true;
  115. }
  116. if (this._viewCtrl.isFirst()) {
  117. // this is the first view, so it should always show
  118. return false;
  119. }
  120. if (menu) {
  121. // this is not the root view, so see if this menu
  122. // is configured to still be enabled if it's not the root view
  123. return !menu.persistent;
  124. }
  125. }
  126. return false;
  127. },
  128. enumerable: true,
  129. configurable: true
  130. });
  131. MenuToggle.decorators = [
  132. { type: Directive, args: [{
  133. selector: '[menuToggle]',
  134. host: {
  135. '[hidden]': 'isHidden'
  136. }
  137. },] },
  138. ];
  139. /** @nocollapse */
  140. MenuToggle.ctorParameters = function () { return [
  141. { type: MenuController, },
  142. { type: ViewController, decorators: [{ type: Optional },] },
  143. { type: Button, decorators: [{ type: Optional },] },
  144. { type: Navbar, decorators: [{ type: Optional },] },
  145. ]; };
  146. MenuToggle.propDecorators = {
  147. 'menuToggle': [{ type: Input },],
  148. 'toggle': [{ type: HostListener, args: ['click',] },],
  149. };
  150. return MenuToggle;
  151. }());
  152. export { MenuToggle };
  153. //# sourceMappingURL=menu-toggle.js.map