feat(menu): give menu's unique ids

CHANGELOG.md

@@ -32,7 +32,8 @@
 
 ##### `<a menu-toggle>` should now be `<button menu-toggle>`
 
-
+* If a menu is not given an `id`, then it is automatically assigned an id, such as `leftMenu` or `rightMenu`.
+* If the menu toggle/close directives are not given a value then it tries the menu ids of `leftMenu` then `rightMenu`.
 
 ##### Bug Fixes
 

demos/component-docs/menus/basic/menu-events.html

@@ -1,6 +1,7 @@
+
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <button menu-toggle="leftMenu">
+  <button menu-toggle>
     <icon menu></icon>
   </button>
 

demos/component-docs/menus/basic/menu-home.html

@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <button menu-toggle="leftMenu">
+  <button menu-toggle>
     <icon menu></icon>
   </button>
 
@@ -12,5 +12,5 @@
 
 
 <ion-content padding>
-  <button block menu-toggle="leftMenu">Toggle Menu</button>
+  <button block menu-toggle>Toggle Menu</button>
 </ion-content>

ionic/components/menu/menu-close.ts

@@ -1,7 +1,7 @@
-import {Directive, ElementRef} from 'angular2/angular2';
+import {Directive} from 'angular2/angular2';
 
-import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
+import {Menu} from './menu';
 
 
 /**
@@ -18,18 +18,15 @@ import {IonicApp} from '../app/app';
     '(click)': 'close()'
   }
 })
-export class MenuClose extends Ion {
+export class MenuClose {
 
-  constructor(
-    app: IonicApp,
-    elementRef: ElementRef
-  ) {
-    super(elementRef, null);
-    this.app = app;
-  }
+  constructor(private app: IonicApp) {}
 
+  /**
+  * @private
+  */
   close() {
-    let menu = this.app.getComponent(this.menuClose || 'menu');
+    let menu = Menu.getById(this.app, this.menuClose);
     menu && menu.close();
   }
 

ionic/components/menu/menu-toggle.ts

@@ -1,9 +1,9 @@
 import {Directive, ElementRef, Optional} from 'angular2/angular2';
 
-import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {ViewController} from '../nav/view-controller';
 import {Navbar} from '../navbar/navbar';
+import {Menu} from './menu';
 
 
 /**
@@ -22,7 +22,7 @@ import {Navbar} from '../navbar/navbar';
     'menu-toggle': '' //ensures the attr is there for css when using [menu-toggle]
   }
 })
-export class MenuToggle extends Ion {
+export class MenuToggle {
 
   constructor(
     app: IonicApp,
@@ -30,7 +30,6 @@ export class MenuToggle extends Ion {
     @Optional() viewCtrl: ViewController,
     @Optional() navbar: Navbar
   ) {
-    super(elementRef, null);
     this.app = app;
     this.viewCtrl = viewCtrl;
     this.withinNavbar = !!navbar;
@@ -42,14 +41,16 @@ export class MenuToggle extends Ion {
   }
 
   /**
-  * TODO
-  * @param {TODO} event  TODO
+  * @private
   */
   toggle() {
-    let menu = this.app.getComponent(this.menuToggle || 'menu');
+    let menu = Menu.getById(this.app, this.menuToggle);
     menu && menu.toggle();
   }
 
+  /**
+  * @private
+  */
   get isHidden() {
     if (this.withinNavbar && this.viewCtrl) {
       return !this.viewCtrl.isRoot();

ionic/components/menu/menu.ts

@@ -35,6 +35,14 @@ import * as gestures from  './menu-gestures';
  * <ion-menu [content]="contentRef" side="right"></ion-menu>
  * ```
  *
+ * Menus can optionally be given an `id` attribute which allows the app to
+ * to get ahold of menu references. If no `id` is given then the menu
+ * automatically receives an `id` created from the side it is on, such as
+ * `leftMenu` or `rightMenu`. When using more than one menu it is always
+ * recommended to give each menu a unique `id`. Additionally menu-toggle and
+ * menu-close directives should be given menu id values of their respective
+ * menu.
+ *
  * Menu supports two display styles: overlay, and reveal. Overlay
  * is the traditional Android drawer style, and Reveal is the traditional iOS
  * style. By default, Menu will adjust to the correct style for the platform,
@@ -109,7 +117,11 @@ export class Menu extends Ion {
 
     if (!self.id) {
       // Auto register
-      self.id = 'menu';
+      self.id = self.side + 'Menu';
+      if (self.app.getComponent(self.id)) {
+        // id already exists, make sure this one is unique
+        self.id += (++menuIds);
+      }
       self.app.register(self.id, self);
     }
 
@@ -360,9 +372,34 @@ export class Menu extends Ion {
     this._cntEle = null;
   }
 
+  static getById(app, menuId) {
+    let menu = null;
+
+    if (menuId) {
+      menu = app.getComponent(menuId);
+      if (!menu) {
+        console.error('Menu with id "' + menuId + '" cannot be found for menu-toggle');
+        return;
+      }
+
+    } else {
+      menu = app.getComponent('leftMenu');
+      if (!menu) {
+        menu = app.getComponent('rightMenu');
+      }
+      if (!menu) {
+        console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menu-toggle');
+        return;
+      }
+    }
+
+    return menu;
+  }
+
 }
 
 let menuTypes = {};
+let menuIds = 0;
 
 
 @Directive({