Front end of the Slack clone application.

menu-controller.js 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import { removeArrayItem } from '../../util/util';
  2. /**
  3. * @name MenuController
  4. * @description
  5. * The MenuController is a provider which makes it easy to control a [Menu](../../Menu/Menu/).
  6. * Its methods can be used to display the menu, enable the menu, toggle the menu, and more.
  7. * The controller will grab a reference to the menu by the `side`, `id`, or, if neither
  8. * of these are passed to it, it will grab the first menu it finds.
  9. *
  10. *
  11. * @usage
  12. *
  13. * Add a basic menu component to start with. See the [Menu](../../Menu/Menu/) API docs
  14. * for more information on adding menu components.
  15. *
  16. * ```html
  17. * <ion-menu [content]="mycontent">
  18. * <ion-content>
  19. * <ion-list>
  20. * ...
  21. * </ion-list>
  22. * </ion-content>
  23. * </ion-menu>
  24. *
  25. * <ion-nav #mycontent [root]="rootPage"></ion-nav>
  26. * ```
  27. *
  28. * To call the controller methods, inject the `MenuController` provider
  29. * into the page. Then, create some methods for opening, closing, and
  30. * toggling the menu.
  31. *
  32. * ```ts
  33. * import { Component } from '@angular/core';
  34. * import { MenuController } from 'ionic-angular';
  35. *
  36. * @Component({...})
  37. * export class MyPage {
  38. *
  39. * constructor(public menuCtrl: MenuController) {
  40. *
  41. * }
  42. *
  43. * openMenu() {
  44. * this.menuCtrl.open();
  45. * }
  46. *
  47. * closeMenu() {
  48. * this.menuCtrl.close();
  49. * }
  50. *
  51. * toggleMenu() {
  52. * this.menuCtrl.toggle();
  53. * }
  54. *
  55. * }
  56. * ```
  57. *
  58. * Since only one menu exists, the `MenuController` will grab the
  59. * correct menu and call the correct method for each.
  60. *
  61. *
  62. * ### Multiple Menus on Different Sides
  63. *
  64. * For applications with both a left and right menu, the desired menu can be
  65. * grabbed by passing the `side` of the menu. If nothing is passed, it will
  66. * default to the `"left"` menu.
  67. *
  68. * ```html
  69. * <ion-menu side="left" [content]="mycontent">...</ion-menu>
  70. * <ion-menu side="right" [content]="mycontent">...</ion-menu>
  71. * <ion-nav #mycontent [root]="rootPage"></ion-nav>
  72. * ```
  73. *
  74. * ```ts
  75. * toggleLeftMenu() {
  76. * this.menuCtrl.toggle();
  77. * }
  78. *
  79. * toggleRightMenu() {
  80. * this.menuCtrl.toggle('right');
  81. * }
  82. * ```
  83. *
  84. *
  85. * ### Multiple Menus on the Same Side
  86. *
  87. * An application can have multiple menus on the same side. In order to determine
  88. * the menu to control, an `id` should be passed. In the example below, the menu
  89. * with the `authenticated` id will be enabled, and the menu with the `unauthenticated`
  90. * id will be disabled.
  91. *
  92. * ```html
  93. * <ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
  94. * <ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
  95. * <ion-nav #mycontent [root]="rootPage"></ion-nav>
  96. * ```
  97. *
  98. * ```ts
  99. * enableAuthenticatedMenu() {
  100. * this.menuCtrl.enable(true, 'authenticated');
  101. * this.menuCtrl.enable(false, 'unauthenticated');
  102. * }
  103. * ```
  104. *
  105. * Note: if an app only has one menu, there is no reason to pass an `id`.
  106. *
  107. *
  108. * @demo /docs/demos/src/menu/
  109. *
  110. * @see {@link /docs/components#menus Menu Component Docs}
  111. * @see {@link ../Menu Menu API Docs}
  112. *
  113. */
  114. export class MenuController {
  115. constructor() {
  116. this._menus = [];
  117. }
  118. /**
  119. * Programatically open the Menu.
  120. * @param {string} [menuId] Optionally get the menu by its id, or side.
  121. * @return {Promise} returns a promise when the menu is fully opened
  122. */
  123. open(menuId) {
  124. const menu = this.get(menuId);
  125. if (menu && !this.isAnimating()) {
  126. let openedMenu = this.getOpen();
  127. if (openedMenu && menu !== openedMenu) {
  128. openedMenu.setOpen(false, false);
  129. }
  130. return menu.open();
  131. }
  132. return Promise.resolve(false);
  133. }
  134. /**
  135. * Programatically close the Menu. If no `menuId` is given as the first
  136. * argument then it'll close any menu which is open. If a `menuId`
  137. * is given then it'll close that exact menu.
  138. * @param {string} [menuId] Optionally get the menu by its id, or side.
  139. * @return {Promise} returns a promise when the menu is fully closed
  140. */
  141. close(menuId) {
  142. let menu;
  143. if (menuId) {
  144. // find the menu by its id
  145. menu = this.get(menuId);
  146. }
  147. else {
  148. // find the menu that is open
  149. menu = this.getOpen();
  150. }
  151. if (menu) {
  152. // close the menu
  153. return menu.close();
  154. }
  155. return Promise.resolve(false);
  156. }
  157. /**
  158. * Toggle the menu. If it's closed, it will open, and if opened, it
  159. * will close.
  160. * @param {string} [menuId] Optionally get the menu by its id, or side.
  161. * @return {Promise} returns a promise when the menu has been toggled
  162. */
  163. toggle(menuId) {
  164. const menu = this.get(menuId);
  165. if (menu && !this.isAnimating()) {
  166. var openedMenu = this.getOpen();
  167. if (openedMenu && menu !== openedMenu) {
  168. openedMenu.setOpen(false, false);
  169. }
  170. return menu.toggle();
  171. }
  172. return Promise.resolve(false);
  173. }
  174. /**
  175. * Used to enable or disable a menu. For example, there could be multiple
  176. * left menus, but only one of them should be able to be opened at the same
  177. * time. If there are multiple menus on the same side, then enabling one menu
  178. * will also automatically disable all the others that are on the same side.
  179. * @param {string} [menuId] Optionally get the menu by its id, or side.
  180. * @return {Menu} Returns the instance of the menu, which is useful for chaining.
  181. */
  182. enable(shouldEnable, menuId) {
  183. const menu = this.get(menuId);
  184. if (menu) {
  185. return menu.enable(shouldEnable);
  186. }
  187. }
  188. /**
  189. * Used to enable or disable the ability to swipe open the menu.
  190. * @param {boolean} shouldEnable True if it should be swipe-able, false if not.
  191. * @param {string} [menuId] Optionally get the menu by its id, or side.
  192. * @return {Menu} Returns the instance of the menu, which is useful for chaining.
  193. */
  194. swipeEnable(shouldEnable, menuId) {
  195. const menu = this.get(menuId);
  196. if (menu) {
  197. return menu.swipeEnable(shouldEnable);
  198. }
  199. }
  200. /**
  201. * @param {string} [menuId] Optionally get the menu by its id, or side.
  202. * @return {boolean} Returns true if the specified menu is currently open, otherwise false.
  203. * If the menuId is not specified, it returns true if ANY menu is currenly open.
  204. */
  205. isOpen(menuId) {
  206. if (menuId) {
  207. var menu = this.get(menuId);
  208. return menu && menu.isOpen || false;
  209. }
  210. else {
  211. return !!this.getOpen();
  212. }
  213. }
  214. /**
  215. * @param {string} [menuId] Optionally get the menu by its id, or side.
  216. * @return {boolean} Returns true if the menu is currently enabled, otherwise false.
  217. */
  218. isEnabled(menuId) {
  219. const menu = this.get(menuId);
  220. return menu && menu.enabled || false;
  221. }
  222. /**
  223. * Used to get a menu instance. If a `menuId` is not provided then it'll
  224. * return the first menu found. If a `menuId` is `left` or `right`, then
  225. * it'll return the enabled menu on that side. Otherwise, if a `menuId` is
  226. * provided, then it'll try to find the menu using the menu's `id`
  227. * property. If a menu is not found then it'll return `null`.
  228. * @param {string} [menuId] Optionally get the menu by its id, or side.
  229. * @return {Menu} Returns the instance of the menu if found, otherwise `null`.
  230. */
  231. get(menuId) {
  232. var menu;
  233. if (menuId === 'left' || menuId === 'right') {
  234. // there could be more than one menu on the same side
  235. // so first try to get the enabled one
  236. menu = this._menus.find(m => m.side === menuId && m.enabled);
  237. if (menu) {
  238. return menu;
  239. }
  240. // didn't find a menu side that is enabled
  241. // so try to get the first menu side found
  242. return this._menus.find(m => m.side === menuId) || null;
  243. }
  244. else if (menuId) {
  245. // the menuId was not left or right
  246. // so try to get the menu by its "id"
  247. return this._menus.find(m => m.id === menuId) || null;
  248. }
  249. // return the first enabled menu
  250. menu = this._menus.find(m => m.enabled);
  251. if (menu) {
  252. return menu;
  253. }
  254. // get the first menu in the array, if one exists
  255. return (this._menus.length ? this._menus[0] : null);
  256. }
  257. /**
  258. * @return {Menu} Returns the instance of the menu already opened, otherwise `null`.
  259. */
  260. getOpen() {
  261. return this._menus.find(m => m.isOpen);
  262. }
  263. /**
  264. * @return {Array<Menu>} Returns an array of all menu instances.
  265. */
  266. getMenus() {
  267. return this._menus;
  268. }
  269. /**
  270. * @hidden
  271. * @return {boolean} if any menu is currently animating
  272. */
  273. isAnimating() {
  274. return this._menus.some(menu => menu.isAnimating());
  275. }
  276. /**
  277. * @hidden
  278. */
  279. _register(menu) {
  280. (void 0) /* assert */;
  281. this._menus.push(menu);
  282. }
  283. /**
  284. * @hidden
  285. */
  286. _unregister(menu) {
  287. (void 0) /* assert */;
  288. removeArrayItem(this._menus, menu);
  289. }
  290. /**
  291. * @hidden
  292. */
  293. _setActiveMenu(menu) {
  294. (void 0) /* assert */;
  295. (void 0) /* assert */;
  296. // if this menu should be enabled
  297. // then find all the other menus on this same side
  298. // and automatically disable other same side menus
  299. const side = menu.side;
  300. this._menus
  301. .filter(m => m.side === side && m !== menu)
  302. .map(m => m.enable(false));
  303. }
  304. /**
  305. * @hidden
  306. */
  307. static registerType(name, cls) {
  308. menuTypes[name] = cls;
  309. }
  310. /**
  311. * @hidden
  312. */
  313. static create(type, menuCmp, plt) {
  314. return new menuTypes[type](menuCmp, plt);
  315. }
  316. }
  317. let menuTypes = {};
  318. //# sourceMappingURL=menu-controller.js.map