Files
Adam Bradley acf12cdd15 refactor(menu): inject MenuController to control app menus
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');
}
```
2016-02-04 16:47:05 -06:00

159 lines
4.6 KiB
TypeScript

import {provide, Provider} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ClickBlock} from '../util/click-block';
import {Config} from './config';
import {Events} from '../util/events';
import {FeatureDetect} from '../util/feature-detect';
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
*/
export function ionicProviders(args: any={}) {
let platform = new Platform();
let navRegistry = new NavRegistry(args.pages);
var config = args.config;
if (!(config instanceof Config)) {
config = new Config(config);
}
platform.setUrl(window.location.href);
platform.setUserAgent(window.navigator.userAgent);
platform.setNavigatorPlatform(window.navigator.platform);
platform.load();
config.setPlatform(platform);
let clickBlock = new ClickBlock();
let events = new Events();
let featureDetect = new FeatureDetect();
setupDom(window, document, config, platform, clickBlock, featureDetect);
bindEvents(window, document, platform, events);
// prepare the ready promise to fire....when ready
platform.prepareReady(config);
return [
IonicApp,
provide(ClickBlock, {useValue: clickBlock}),
provide(Config, {useValue: config}),
provide(Platform, {useValue: platform}),
provide(FeatureDetect, {useValue: featureDetect}),
provide(Events, {useValue: events}),
provide(NavRegistry, {useValue: navRegistry}),
TapClick,
Form,
Keyboard,
MenuController,
Translate,
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}),
HTTP_PROVIDERS,
];
}
function setupDom(window, document, config, platform, clickBlock, featureDetect) {
let bodyEle = document.body;
let mode = config.get('mode');
// if dynamic mode links have been added the fire up the correct one
let modeLinkAttr = mode + '-href';
let linkEle = document.head.querySelector('link[' + modeLinkAttr + ']');
if (linkEle) {
let href = linkEle.getAttribute(modeLinkAttr);
linkEle.removeAttribute(modeLinkAttr);
linkEle.href = href;
}
// set the mode class name
// ios/md
bodyEle.classList.add(mode);
// language and direction
platform.setDir(document.documentElement.dir, false);
platform.setLang(document.documentElement.lang, false);
let versions = platform.versions();
platform.platforms().forEach(platformName => {
// platform-ios
let platformClass = 'platform-' + platformName;
bodyEle.classList.add(platformClass);
let platformVersion = versions[platformName];
if (platformVersion) {
// platform-ios9
platformClass += platformVersion.major;
bodyEle.classList.add(platformClass);
// platform-ios9_3
bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
}
});
// touch devices should not use :hover CSS pseudo
// enable :hover CSS when the "hoverCSS" setting is not false
if (config.get('hoverCSS') !== false) {
bodyEle.classList.add('enable-hover');
}
if (config.get('clickBlock')) {
clickBlock.enable();
}
// run feature detection tests
featureDetect.run(window, document);
}
/**
* Bind some global events and publish on the 'app' channel
*/
function bindEvents(window, document, platform, events) {
window.addEventListener('online', (ev) => {
events.publish('app:online', ev);
}, false);
window.addEventListener('offline', (ev) => {
events.publish('app:offline', ev);
}, false);
window.addEventListener('orientationchange', (ev) => {
events.publish('app:rotated', ev);
});
// When that status taps, we respond
window.addEventListener('statusTap', (ev) => {
// TODO: Make this more better
var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2);
if (!el) { return; }
var content = closest(el, 'scroll-content');
if (content) {
var scrollTo = new ScrollTo(content);
scrollTo.start(0, 0, 300, 0);
}
});
// start listening for resizes XXms after the app starts
setTimeout(function() {
window.addEventListener('resize', function() {
platform.windowResize();
});
}, 2000);
}