javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): inject MenuController to control app menus

Browse Source 
Menu has been improved to make it easier to open, close, toggle and
enable menus.
Instead of injecting `IonicApp` to find the menu component, you now
inject
`MenuController`.

Was:

```
constructor(app: IonicApp) {
  this.app = app;
}
openMenu() {
  this.app.getComponent('leftMenu').close();
}
```

Now:

To programmatically interact with any menu, you can inject the
`MenuController`
provider into any component or directive. This makes it easy get ahold
of and
control the correct menu instance. By default Ionic will find the app's
menu
without requiring a menu ID. An id attribute on an `<ion-menu>` is only
required
if there are multiple menus on the same side. If there are multiple
menus, but
on different sides, you can use the name of the side to get the correct
menu

If there's only one menu:

```
constructor(menu: MenuController) {
  this.menu = menu;
}
openMenu() {
  this.menu.close();
}
```

If there is a menu on the left and right side:

```
toggleMenu() {
  this.menu.toggle('left');
}
```

If there are multiple menus on the same side:

```
<ion-menu id="myMenuId" side="left">...</ion-menu>
<ion-menu id="otherMenuId" side="left">...</ion-menu>

closeMenu() {
  this.menu.close('myMenuId');
}
```
This commit is contained in:
Adam Bradley
2016-02-04 16:47:02 -06:00
parent 2178638659
commit acf12cdd15
25 changed files with 365 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.ts
View File

@ -10,6 +10,7 @@ export * from './components/icon/icon'
export * from './components/input/input'
export * from './components/item/item'
export * from './components/item/item-sliding'
export * from './components/menu/menu-controller'
export * from './components/menu/menu'
export * from './components/menu/menu-types'
export * from './components/menu/menu-toggle'

19
ionic/components/app/app.ts
View File

@ -97,9 +97,6 @@ export class IonicApp {
* @param {Object} component The component to register
*/
register(id: string, component: any) {
if (this.components[id] && this.components[id] !== component) {
//console.error('Component id "' + id + '" already registered.');
}
this.components[id] = component;
}
@ -134,6 +131,22 @@ export class IonicApp {
* @return {Object} TODO
*/
getComponent(id: string): any {
// deprecated warning
if (/menu/i.test(id)) {
console.warn('Using app.getComponent(menuId) to control menus has been deprecated as of alpha55.\n' +
'Instead inject MenuController, for example:\n\n' +
'constructor(menu: MenuController) {\n' +
' this.menu = menu;\n' +
'}\n' +
'toggleMenu() {\n' +
' this.menu.toggle();\n' +
'}\n' +
'openRightMenu() {\n' +
' this.menu.open("right");\n' +
'}'
);
}
return this.components[id];
}

12
ionic/components/menu/menu-close.ts
View File

@ -1,18 +1,16 @@
import {Directive, Input, HostListener} from 'angular2/core';
import {IonicApp} from '../app/app';
import {Menu} from './menu';
import {MenuController} from './menu-controller';
/**
* @name MenuClose
* @description
* Place `menuClose` on a button to automatically close an open menu. Note that the menu's id must be either
* `leftMenu` or `rightMenu`
* Place `menuClose` on a button to automatically close an open menu.
*
* @usage
* ```html
* <ion-menu [content]="mycontent" id="leftMenu">
* <ion-menu [content]="mycontent">
* <ion-content>
* <ion-list>
* <ion-item menuClose>Close the menu</ion-item>
@ -36,14 +34,14 @@ export class MenuClose {
*/
@Input() menuClose;
constructor(private _app: IonicApp) {}
constructor(private _menu: MenuController) {}
/**
* @private
*/
@HostListener('click')
close() {
let menu = Menu.getById(this._app, this.menuClose);
let menu = this._menu.get(this.menuClose);
menu && menu.close();
}

203
ionic/components/menu/menu-controller.ts Normal file
View File

@ -0,0 +1,203 @@
import {Menu} from './menu';
import {MenuType} from './menu-types';
/**
* @name Menu
* @description
* _For basic Menu usage, see the [Menu section](../../../../components/#menus)
* of the Component docs._
*
* Menu is a side-menu interface that can be dragged out or toggled to open or closed.
* An Ionic app can have numerous menus, all of which can be controlled within
* template HTML, or programmatically.
*
* @usage
* In order to use Menu, you must specify a [reference](https://angular.io/docs/ts/latest/guide/user-input.html#local-variables)
* to the content element that Menu should listen on for drag events, using the `content` property.
* This is telling the menu which content the menu is attached to, so it knows which element to
* move over, and to respond to drag events. Note that a **menu is a sibling to its content**.
*
* ```html
* <ion-menu [content]="mycontent">
* <ion-content>
* <ion-list>
* ...
* </ion-list>
* </ion-content>
* </ion-menu>
*
* <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ```
*
* By default, Menus are on the left, but this can be overridden with the `side`
* property:
*
* ```html
* <ion-menu side="right" [content]="mycontent">...</ion-menu>
* ```
*
*
* ### Programmatic Interaction
*
* To programmatically interact with any menu, you can inject the `MenuController`
* provider into any component or directive. This makes it easy get ahold of and
* control the correct menu instance. By default Ionic will find the app's menu
* without requiring a menu ID.
*
* ```ts
* @Page({...})
* export class MyPage {
* constructor(menu: MenuController) {
* this.menu = menu;
* }
*
* openMenu() {
* this.menu.open();
* }
*
* }
* ```
*
* Note that if you want to easily toggle or close a menu just from a page's
* template, you can use `menuToggle` and/or `menuClose` to accomplish the same
* tasks as above.
*
*
* ### Apps With Left And Right Menus
*
* For apps with a left and right menu, you can control the desired
* menu by passing in the side of the menu.
*
* ```html
* <ion-menu side="left" [content]="mycontent">...</ion-menu>
* <ion-menu side="right" [content]="mycontent">...</ion-menu>
* <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ```
*
* ```ts
* openLeftMenu() {
* this.menu.open('left');
* }
*
* closeRightMenu() {
* this.menu.close('right');
* }
* ```
*
*
* ### Apps With Multiple, Same Side Menus
*
* Since more than one menu on a the same side is possible, and you wouldn't want
* both to be open at the same time, an app can decide which menu should be enabled.
* For apps with multiple menus on the same side, it's required to give each menu a
* unique ID. In the example below, we're saying that the left menu with the
* `authenticated` id should be enabled, and the left menu with the `unauthenticated`
* id be disabled.
*
* ```html
* <ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
* <ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
* <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ```
*
* ```ts
* enableAuthenticatedMenu() {
* this.menu.enable(true, 'authenticated');
* this.menu.enable(false, 'unauthenticated');
* }
* ```
*
* Note that if an app only had one menu, there is no reason to pass a menu id.
*
*
* ### Menu Types
*
* Menu supports two display types: `overlay`, `reveal` and `push`. Overlay
* is the traditional Material Design drawer type, and Reveal is the traditional
* iOS type. By default, menus will use to the correct type for the platform,
* but this can be overriden using the `type` property:
*
* ```html
* <ion-menu type="overlay" [content]="mycontent"></ion-menu>
* ```
*
* @demo /docs/v2/demos/menu/
*
* @see {@link /docs/v2/components#menus Menu Component Docs}
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../../nav/Nav Nav API Docs}
*
*/
export class MenuController {
private _menus: Array<Menu> = [];
open(menuId?: string) {
let menu = this.get(menuId);
menu && menu.open();
}
close(menuId?: string) {
let menu = this.get(menuId);
menu && menu.close();
}
enable(shouldEnable: boolean, menuId?: string) {
let menu = this.get(menuId);
menu && menu.enable(shouldEnable);
}
swipeEnable(shouldEnable: boolean, menuId?: string) {
let menu = this.get(menuId);
menu && menu.swipeEnable(shouldEnable);
}
get(menuId?: string): Menu {
if (menuId) {
// first try by "id"
let menu = this._menus.find(m => m.id === menuId);
if (menu) return menu;
// not found by "id", next try by "side"
menu = this._menus.find(m => m.side === menuId);
if (menu) return menu;
}
// get the first menu in the array, if one exists
return (this._menus.length ? this._menus[0] : null);
}
/**
* @private
*/
register(menu: Menu) {
this._menus.push(menu);
}
/**
* @private
*/
unregister(menu: Menu) {
let index = this._menus.indexOf(menu);
if (index > -1) {
this._menus.splice(index, 1);
}
}
/**
* @private
*/
static registerType(name: string, cls: new(...args: any[]) => MenuType) {
menuTypes[name] = cls;
}
/**
* @private
*/
static create(type, menuCmp) {
return new menuTypes[type](menuCmp);
}
}
let menuTypes:{ [name: string]: new(...args: any[]) => MenuType } = {};

33
ionic/components/menu/menu-gestures.ts
View File

@ -20,29 +20,44 @@ export class MenuContentGesture extends SlideEdgeGesture {
canStart(ev) {
let menu = this.menu;
console.debug('menu canStart, id', menu.id, 'angle', ev.angle, 'distance', ev.distance);
console.debug('menu canStart,', menu.side, 'isOpen', menu.isOpen, 'angle', ev.angle, 'distance', ev.distance);
if (!menu.isEnabled || !menu.isSwipeEnabled) {
console.debug('menu canStart, isEnabled', menu.isEnabled, 'isSwipeEnabled', menu.isSwipeEnabled, 'id', menu.id);
console.debug('menu canStart, isEnabled', menu.isEnabled, 'isSwipeEnabled', menu.isSwipeEnabled, 'side', menu.side);
return false;
}
if (ev.distance > 50) {
// the distance is longer than you'd expect a side menu swipe to be
console.debug('menu canStart, distance too far', ev.distance, 'id', menu.id);
console.debug('menu canStart, distance too far', ev.distance, 'side', menu.side);
return false;
}
if (menu.side === 'left') {
// left side menu
if (ev.angle > -40 && ev.angle < 40) {
return super.canStart(ev);
// left side
if (menu.isOpen) {
// left side, opened
return true;
} else {
// left side, closed
if (ev.angle > -40 && ev.angle < 40) {
return super.canStart(ev);
}
}
} else if (menu.side === 'right') {
// right side menu
if ((ev.angle > 140 && ev.angle <= 180) || (ev.angle > -140 && ev.angle <= -180)) {
return super.canStart(ev);
// right side
if (menu.isOpen) {
// right side, opened
return true;
} else {
// right side, closed
if ((ev.angle > 140 && ev.angle <= 180) || (ev.angle > -140 && ev.angle <= -180)) {
return super.canStart(ev);
}
}
}

15
ionic/components/menu/menu-toggle.ts
View File

@ -1,9 +1,8 @@
import {Directive, ElementRef, Optional, Input, HostListener} from 'angular2/core';
import {IonicApp} from '../app/app';
import {ViewController} from '../nav/view-controller';
import {Navbar} from '../navbar/navbar';
import {Menu} from './menu';
import {MenuController} from './menu-controller';
/**
@ -41,18 +40,18 @@ export class MenuToggle {
/**
* @private
*/
withinNavbar: boolean;
private _inNavbar: boolean;
constructor(
private _app: IonicApp,
private _menu: MenuController,
elementRef: ElementRef,
@Optional() private _viewCtrl: ViewController,
@Optional() private _navbar: Navbar
) {
this.withinNavbar = !!_navbar;
this._inNavbar = !!_navbar;
// Deprecation warning
if (this.withinNavbar && elementRef.nativeElement.tagName === 'A') {
if (this._inNavbar && elementRef.nativeElement.tagName === 'A') {
console.warn('Menu toggles within a navbar should use <button menuToggle> instead of <a menu-toggle>')
}
}
@ -62,7 +61,7 @@ export class MenuToggle {
*/
@HostListener('click')
toggle() {
let menu = Menu.getById(this._app, this.menuToggle);
let menu = this._menu.get(this.menuToggle);
menu && menu.toggle();
}
@ -70,7 +69,7 @@ export class MenuToggle {
* @private
*/
get isHidden() {
if (this.withinNavbar && this._viewCtrl) {
if (this._inNavbar && this._viewCtrl) {
return !this._viewCtrl.isRoot();
}
return false;

8
ionic/components/menu/menu-types.ts
View File

@ -1,4 +1,4 @@
import {Menu} from './menu';
import {MenuController} from './menu-controller';
import {Animation} from '../../animations/animation';
@ -102,7 +102,7 @@ class MenuRevealType extends MenuType {
this.close.add(contentClose);
}
}
Menu.register('reveal', MenuRevealType);
MenuController.registerType('reveal', MenuRevealType);
/**
* Menu Push Type
@ -149,7 +149,7 @@ class MenuPushType extends MenuType {
this.close.add(contentClose);
}
}
Menu.register('push', MenuPushType);
MenuController.registerType('push', MenuPushType);
/**
* Menu Overlay Type
@ -196,7 +196,7 @@ class MenuOverlayType extends MenuType {
this.close.add(backdropClose);
}
}
Menu.register('overlay', MenuOverlayType);
MenuController.registerType('overlay', MenuOverlayType);
const OPACITY = 'opacity';

165
ionic/components/menu/menu.ts
View File

@ -1,96 +1,15 @@
import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer} from 'angular2/core';
import {Ion} from '../ion';
import {IonicApp} from '../app/app';
import {Config} from '../../config/config';
import {Platform} from '../../platform/platform';
import {Keyboard} from '../../util/keyboard';
import * as gestures from './menu-gestures';
import {Gesture} from '../../gestures/gesture';
import {MenuController} from './menu-controller';
import {MenuType} from './menu-types';
/**
* @name Menu
* @description
* _For basic Menu usage, see the [Menu section](../../../../components/#menus)
* of the Component docs._
*
* Menu is a side-menu navigation that can be dragged out or toggled to show.
*
* @usage
* In order to use Menu, you must specify a [reference](https://angular.io/docs/ts/latest/guide/user-input.html#local-variables)
* to the content element that Menu should listen on for drag events, using the `content` property:
*
* ```html
* <ion-menu [content]="mycontent">
* <ion-content>
* <ion-list>
* ...
* </ion-list>
* </ion-content>
* </ion-menu>
*
* <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ```
*
* By default, Menus are on the left, but this can be overriden with the `side`
* property:
* ```html
* <ion-menu [content]="mycontent" 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 menuToggle and
* menuClose 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,
* but this can be overriden using the `type` property:
* ```html
* <ion-menu [content]="mycontent" type="overlay"></ion-menu>
* ```
*
* To programatically interact with the menu, you first get the menu component.
*
* ```ts
* @Page({
* `<ion-menu [content]="mycontent" id="leftMenu"></ion-menu>
* <ion-nav #mycontent [root]="rootPage"></ion-nav>`
* )}
* export class MyClass{
* constructor(app: IonicApp){
* this.app = app;
* this.menu;
* }
*
* // Wait until the page is ready
* ngAfterViewInit(){
* this.menu = this.app.getComponent('leftMenu');
* }
*
* // Open the menu programatically
* openMenu(){
* this.menu.open();
* }
*
* }
* ```
*
* If you want to use any of the APIs down below, make sure to grabe the menu component by it's ID
*
* @demo /docs/v2/demos/menu/
*
* @see {@link /docs/v2/components#menus Menu Component Docs}
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../../nav/Nav Nav API Docs}
*
*/
@Component({
selector: 'ion-menu',
host: {
@ -159,7 +78,7 @@ export class Menu extends Ion {
/**
* @private
*/
@Input() swipeEnabled: string;
@Input() swipeEnabled: any;
/**
* @private
@ -172,9 +91,9 @@ export class Menu extends Ion {
@Output() opening: EventEmitter<any> = new EventEmitter();
constructor(
private _menuCtrl: MenuController,
private _elementRef: ElementRef,
private _config: Config,
private _app: IonicApp,
private _platform: Platform,
private _renderer: Renderer,
private _keyboard: Keyboard,
@ -204,15 +123,7 @@ export class Menu extends Ion {
self.isSwipeEnabled = false;
}
if (!self.id) {
// Auto register
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);
}
this._menuCtrl.register(self);
self._initGesture();
self._initType(self.type);
@ -232,7 +143,7 @@ export class Menu extends Ion {
/**
* @private
*/
_initGesture() {
private _initGesture() {
this._zone.runOutsideAngular(() => {
switch(this.side) {
case 'right':
@ -250,7 +161,7 @@ export class Menu extends Ion {
/**
* @private
*/
_initType(type) {
private _initType(type) {
type = type && type.trim().toLowerCase();
if (!type) {
type = this._config.get('menuType');
@ -262,9 +173,9 @@ export class Menu extends Ion {
/**
* @private
*/
_getType() {
private _getType() {
if (!this._type) {
this._type = new menuTypes[this.type](this);
this._type = MenuController.create(this.type, this);
if (this._config.get('animate') === false) {
this._type.open.duration(33);
@ -333,7 +244,7 @@ export class Menu extends Ion {
/**
* @private
*/
_before() {
private _before() {
// this places the menu into the correct location before it animates in
// this css class doesn't actually kick off any animations
if (this.isEnabled) {
@ -348,7 +259,7 @@ export class Menu extends Ion {
/**
* @private
*/
_after(isOpen) {
private _after(isOpen) {
// keep opening/closing the menu disabled for a touch more yet
// only add listeners/css if it's enabled and isOpen
// and only remove listeners/css if it's not open
@ -374,7 +285,7 @@ export class Menu extends Ion {
/**
* @private
*/
_prevent() {
private _prevent() {
// used to prevent unwanted opening/closing after swiping open/close
// or swiping open the menu while pressing down on the menuToggle
this._preventTime = Date.now() + 20;
@ -383,7 +294,7 @@ export class Menu extends Ion {
/**
* @private
*/
_isPrevented() {
private _isPrevented() {
return this._preventTime > Date.now();
}
@ -417,7 +328,7 @@ export class Menu extends Ion {
* @param {boolean} shouldEnable True if it should be enabled, false if not.
* @return {Menu} Returns the instance of the menu, which is useful for chaining.
*/
enable(shouldEnable) {
enable(shouldEnable: boolean) {
this.isEnabled = shouldEnable;
if (!shouldEnable && this.isOpen) {
this.close();
@ -430,7 +341,7 @@ export class Menu extends Ion {
* @param {boolean} shouldEnable True if it should be swipe-able, false if not.
* @return {Menu} Returns the instance of the menu, which is useful for chaining.
*/
swipeEnable(shouldEnable) {
swipeEnable(shouldEnable: boolean) {
this.isSwipeEnabled = shouldEnable;
return this;
}
@ -456,53 +367,19 @@ export class Menu extends Ion {
return this.backdrop.elementRef.nativeElement;
}
/**
* @private
*/
static register(name: string, cls: new(...args: any[]) => MenuType) {
menuTypes[name] = cls;
}
//static register(name:string , cls: typeof MenuType) {
/**
* @private
*/
ngOnDestroy() {
this._app.unregister(this.id);
this._menuCtrl.unregister(this);
this._gesture && this._gesture.destroy();
this._targetGesture && this._targetGesture.destroy();
this._type && this._type.ngOnDestroy();
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 menuToggle');
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 menuToggle');
return;
}
}
return menu;
}
}
let menuTypes:{ [name: string]: new(...args: any[]) => MenuType } = {};
let menuIds:number = 0;
/**
@ -511,22 +388,22 @@ let menuIds:number = 0;
@Directive({
selector: '.backdrop',
host: {
'(click)': 'clicked($event)'
'(click)': 'clicked($event)',
}
})
export class MenuBackdrop {
constructor(@Host() private menu: Menu, public elementRef: ElementRef) {
menu.backdrop = this;
constructor(@Host() private _menuCtrl: Menu, public elementRef: ElementRef) {
_menuCtrl.backdrop = this;
}
/**
* @private
*/
clicked(ev) {
console.debug('backdrop clicked')
private clicked(ev) {
console.debug('backdrop clicked');
ev.preventDefault();
ev.stopPropagation();
this.menu.close();
this._menuCtrl.close();
}
}

6
ionic/components/menu/test/basic/index.ts
View File

@ -1,4 +1,4 @@
import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
import {App, IonicApp, MenuController, Page, NavController, Alert} from 'ionic/ionic';
@Page({
@ -38,7 +38,7 @@ class Page2 {
})
class E2EApp {
constructor(private app: IonicApp) {
constructor(private app: IonicApp, private menu: MenuController) {
this.rootView = Page1;
this.changeDetectionCount = 0;
@ -56,7 +56,7 @@ class E2EApp {
nav.setRoot(page.component).then(() => {
// wait for the root page to be completely loaded
// then close the menu
this.app.getComponent('leftMenu').close();
this.menu.close('left');
});
}

54
ionic/components/menu/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-menu [content]="content" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -12,51 +12,51 @@
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
@ -66,7 +66,7 @@
</ion-menu>
<ion-menu [content]="content" id="rightMenu" side="right">
<ion-menu [content]="content" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
@ -80,55 +80,55 @@
{{p.title}}
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>

8
ionic/components/menu/test/basic/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
@ -21,7 +21,7 @@
</button>
</ion-buttons>
<button menuToggle="rightMenu" right secondary>
<button menuToggle="right" right secondary>
<ion-icon name="menu"></ion-icon>
</button>
@ -33,11 +33,11 @@
<h3>Page 1</h3>
<p>
<button class="e2eContentToggleMenu" menuToggle="leftMenu">Toggle Left Menu</button>
<button class="e2eContentToggleMenu" menuToggle="left">Toggle Left Menu</button>
</p>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="right">Toggle Right Menu</button>
</p>
<ion-card>

4
ionic/components/menu/test/basic/page2.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
@ -16,7 +16,7 @@
<h3>Page 2</h3>
<p>
<button menuToggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
<button menuToggle class="e2eContentToggleMenu">Toggle Left Menu</button>
</p>
<p>

4
ionic/components/menu/test/basic/page3.html
View File

@ -5,7 +5,7 @@
Menu
</ion-title>
<button menuToggle="rightMenu" right>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
@ -17,7 +17,7 @@
<h3>Page 3</h3>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="right">Toggle Right Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

10
ionic/components/menu/test/disable-swipe/index.ts
View File

@ -1,4 +1,4 @@
import {App, IonicApp, Page, NavController} from 'ionic/ionic';
import {App, Page, NavController, MenuController} from 'ionic/ionic';
@Page({
templateUrl: 'page1.html'
@ -7,20 +7,20 @@ class Page1 {
leftMenuSwipeEnabled: boolean = true;
rightMenuSwipeEnabled: boolean = false;
constructor(app: IonicApp) {
this.app = app;
constructor(menu: MenuController) {
this.menu = menu;
}
toggleLeftMenuSwipeable() {
this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled;
this.app.getComponent('leftMenu').swipeEnable(this.leftMenuSwipeEnabled);
this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'leftMenu');
}
toggleRightMenuSwipeable() {
this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled;
this.app.getComponent('rightMenu').swipeEnable(this.rightMenuSwipeEnabled);
this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'rightMenu');
}
}

4
ionic/components/menu/test/disable-swipe/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-menu [content]="content" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -18,7 +18,7 @@
</ion-menu>
<ion-menu [content]="content" id="rightMenu" side="right" swipeEnabled="false">
<ion-menu [content]="content" side="right" swipeEnabled="false">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>

4
ionic/components/menu/test/disable-swipe/page1.html
View File

@ -1,6 +1,6 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
@ -8,7 +8,7 @@
Main
</ion-title>
<button menuToggle="rightMenu" right secondary>
<button menuToggle="right" right secondary>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>

17
ionic/components/menu/test/multiple/index.ts
View File

@ -1,23 +1,23 @@
import {App, IonicApp, Page, NavController} from 'ionic/ionic';
import {App, Page, MenuController} from 'ionic/ionic';
@Page({
templateUrl: 'page1.html'
})
class Page1 {
constructor(app: IonicApp) {
this.app = app;
constructor(menu: MenuController) {
this.menu = menu;
this.menu1Active();
}
menu1Active() {
this.activeMenu = 'menu1';
this.app.getComponent('menu1').enable(true);
this.app.getComponent('menu2').enable(false);
this.menu.enable(true, 'menu1');
this.menu.enable(false, 'menu2');
}
menu2Active() {
this.activeMenu = 'menu2';
this.app.getComponent('menu1').enable(false);
this.app.getComponent('menu2').enable(true);
this.menu.enable(false, 'menu1');
this.menu.enable(true, 'menu2');
}
}
@ -26,8 +26,7 @@ class Page1 {
templateUrl: 'main.html'
})
class E2EApp {
constructor(app: IonicApp) {
this.app = app;
constructor() {
this.rootPage = Page1;
}
}

4
ionic/components/menu/test/overlay/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" type="overlay" side="left">
<ion-menu [content]="content" id="myMenuId" type="overlay" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,7 +8,7 @@
<ion-list>
<button ion-item menuToggle="leftMenu" detail-none>
<button ion-item menuToggle="myMenuId" detail-none>
Close Left Menu
</button>

8
ionic/components/menu/test/overlay/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle="myMenuId">
<ion-icon name="menu"></ion-icon>
</button>
@ -17,11 +17,7 @@
<h3>Content</h3>
<p>
<button menuToggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="myMenuId">Toggle Left Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

4
ionic/components/menu/test/push/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" type="push" side="left">
<ion-menu [content]="content" type="push" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,7 +8,7 @@
<ion-list>
<button ion-item menuToggle="leftMenu" detail-none>
<button ion-item menuToggle="left" detail-none>
Close Left Menu
</button>

8
ionic/components/menu/test/push/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
@ -17,11 +17,7 @@
<h3>Content</h3>
<p>
<button menuToggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="left">Toggle Left Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

4
ionic/components/menu/test/reveal/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" type="reveal" side="left">
<ion-menu [content]="content" type="reveal">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,7 +8,7 @@
<ion-list>
<button ion-item menuToggle="leftMenu" detail-none>
<button ion-item menuToggle detail-none>
Close Left Menu
</button>

8
ionic/components/menu/test/reveal/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
@ -17,11 +17,7 @@
<h3>Content</h3>
<p>
<button menuToggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle>Toggle Left Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

10
ionic/components/nav/test/nested/index.ts
View File

@ -1,6 +1,5 @@
import {App, NavController} from 'ionic/ionic';
import {App, NavParams, NavController, ViewController, MenuController} from 'ionic/ionic';
import {Page, Config, IonicApp} from 'ionic/ionic';
import {NavParams, NavController, ViewController} from 'ionic/ionic';
@Page({
@ -49,20 +48,21 @@ export class Login {
`
})
export class Account {
constructor(app: IonicApp) {
constructor(app: IonicApp, menu: MenuController) {
this.app = app;
this.menu = menu;
this.rootPage = Dashboard;
}
goToProfile() {
this.app.getComponent('account-nav').setRoot(Profile).then(() => {
this.app.getComponent('menu').close();
this.menu.close();
});
}
goToDashboard() {
this.app.getComponent('account-nav').setRoot(Dashboard).then(() => {
this.app.getComponent('menu').close();
this.menu.close();
});
}

22
ionic/config/bootstrap.ts
View File

@ -2,19 +2,20 @@ import {provide, Provider} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {IonicApp} from '../components/app/app';
import {Config} from './config';
import {Platform} from '../platform/platform';
import {Form} from '../util/form';
import {Keyboard} from '../util/keyboard';
import {ScrollTo} from '../animations/scroll-to';
import {Events} from '../util/events';
import {NavRegistry} from '../components/nav/nav-registry';
import {Translate} from '../translation/translate';
import {ClickBlock} from '../util/click-block';
import {Config} from './config';
import {Events} from '../util/events';
import {FeatureDetect} from '../util/feature-detect';
import {TapClick} from '../components/tap-click/tap-click';
import {Form} from '../util/form';
import {IonicApp} from '../components/app/app';
import {Keyboard} from '../util/keyboard';
import {MenuController} from '../components/menu/menu-controller';
import {NavRegistry} from '../components/nav/nav-registry';
import {Platform} from '../platform/platform';
import {ready, closest} from '../util/dom';
import {ScrollTo} from '../animations/scroll-to';
import {TapClick} from '../components/tap-click/tap-click';
import {Translate} from '../translation/translate';
/**
* @private
@ -57,6 +58,7 @@ export function ionicProviders(args: any={}) {
TapClick,
Form,
Keyboard,
MenuController,
Translate,
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}),