javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu): menu's content is resized properly

Browse Source 
fixes #8504
This commit is contained in:
Manu Mtz.-Almeida
2016-10-10 15:45:22 +02:00
committed by Adam Bradley
parent bcbe03c480
commit db72a7d26b
7 changed files with 75 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/menu/menu.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
@ -10,7 +10,7 @@ import { MenuType } from './menu-types';
import { Platform } from '../../platform/platform';
import { GestureController } from '../../gestures/gesture-controller';
import { UIEventManager } from '../../util/ui-event-manager';
import { Content } from '../content/content';
/**
* @name Menu
@ -208,6 +208,11 @@ export class Menu {
*/
@ViewChild(Backdrop) backdrop: Backdrop;
/**
* @private
*/
@ContentChild(Content) menuContent: Content;
/**
* @input {any} A reference to the content element the menu should use.
*/
@ -303,48 +308,47 @@ export class Menu {
* @private
*/
ngOnInit() {
let self = this;
self._init = true;
this._init = true;
let content = self.content;
self._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement();
let content = this.content;
this._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement();
// requires content element
if (!self._cntEle) {
if (!this._cntEle) {
return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n<ion-menu [content]="content"></ion-menu>\n\n<ion-nav #content></ion-nav>');
}
// normalize the "side"
if (self.side !== 'left' && self.side !== 'right') {
self.side = 'left';
if (this.side !== 'left' && this.side !== 'right') {
this.side = 'left';
}
self._renderer.setElementAttribute(self._elementRef.nativeElement, 'side', self.side);
this.setElementAttribute('side', this.side);
// normalize the "type"
if (!self.type) {
self.type = self._config.get('menuType');
if (!this.type) {
this.type = this._config.get('menuType');
}
self._renderer.setElementAttribute(self._elementRef.nativeElement, 'type', self.type);
this.setElementAttribute('type', this.type);
// add the gestures
self._cntGesture = new MenuContentGesture(self, document.body);
this._cntGesture = new MenuContentGesture(this, document.body);
// register listeners if this menu is enabled
// check if more than one menu is on the same side
let hasEnabledSameSideMenu = self._menuCtrl.getMenus().some(m => {
return m.side === self.side && m.enabled;
let hasEnabledSameSideMenu = this._menuCtrl.getMenus().some(m => {
return m.side === this.side && m.enabled;
});
if (hasEnabledSameSideMenu) {
// auto-disable if another menu on the same side is already enabled
self._isEnabled = false;
this._isEnabled = false;
}
self._setListeners();
this._setListeners();
self._cntEle.classList.add('menu-content');
self._cntEle.classList.add('menu-content-' + self.type);
this._cntEle.classList.add('menu-content');
this._cntEle.classList.add('menu-content-' + this.type);
// register this menu with the app's menu controller
self._menuCtrl.register(self);
this._menuCtrl.register(this);
}
/**
@ -468,8 +472,9 @@ export class Menu {
private _before() {
// this places the menu into the correct location before it animates in
// this css class doesn't actually kick off any animations
this.getNativeElement().classList.add('show-menu');
this.getBackdropElement().classList.add('show-backdrop');
this.menuContent && this.menuContent.resize();
this.setElementClass('show-menu', true);
this.backdrop.setElementClass('show-backdrop', true);
this._keyboard.close();
this._isAnimating = true;
}
@ -482,11 +487,10 @@ export class Menu {
this.isOpen = isOpen;
this._isAnimating = false;
(<any>this._cntEle.classList)[isOpen ? 'add' : 'remove']('menu-content-open');
this._events.unlistenAll();
if (isOpen) {
this._cntEle.classList.add('menu-content-open');
let callback = this.onBackdropClick.bind(this);
this._events.pointerEvents({
element: this._cntEle,
@ -499,8 +503,10 @@ export class Menu {
this.ionOpen.emit(true);
} else {
this.getNativeElement().classList.remove('show-menu');
this.getBackdropElement().classList.remove('show-backdrop');
this._cntEle.classList.remove('menu-content-open');
this.setElementClass('show-menu', false);
this.backdrop.setElementClass('show-menu', false);
this.ionClose.emit(true);
}
}
@ -597,6 +603,17 @@ export class Menu {
return this._menuCtrl;
}
/**
* @private
*/
setElementClass(className: string, add: boolean) {
this._renderer.setElementClass(this._elementRef.nativeElement, className, add);
}
setElementAttribute(attributeName: string, value: string) {
this._renderer.setElementAttribute(this._elementRef.nativeElement, attributeName, value);
}
/**
* @private
*/