mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00

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'); } ```
159 lines
4.6 KiB
TypeScript
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);
|
|
}
|