Skip to content

Commit

Permalink
feat(split-panel): split-panel works with several menus
Browse files Browse the repository at this point in the history
  • Loading branch information
manucorporat committed Feb 28, 2017
1 parent 0aea479 commit a0d9e8c
Show file tree
Hide file tree
Showing 13 changed files with 226 additions and 65 deletions.
2 changes: 1 addition & 1 deletion src/components/menu/menu-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class MenuType {

setOpen(shouldOpen: boolean, animated: boolean, done: Function) {
const ani = this.ani
.onFinish(done, true)
.onFinish(done, true, true)
.reverse(!shouldOpen);

if (animated) {
Expand Down
34 changes: 14 additions & 20 deletions src/components/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export class Menu implements RootNode {
private _cntEle: HTMLElement;
private _gesture: MenuContentGesture;
private _type: MenuType;
private _isEnabled: boolean = true;
private _isEnabled: boolean = false;
private _isSwipeEnabled: boolean = true;
private _isAnimating: boolean = false;
private _isPersistent: boolean = false;
Expand Down Expand Up @@ -353,21 +353,20 @@ export class Menu implements RootNode {
// add the gestures
this._gesture = new MenuContentGesture(this._plt, this, this._gestureCtrl, this._domCtrl);

// register listeners if this menu is enabled
// add menu's content classes
this._cntEle.classList.add('menu-content');
this._cntEle.classList.add('menu-content-' + this.type);

// check if more than one menu is on the same side
let hasEnabledSameSideMenu = this._menuCtrl.getMenus().some(m => {
let shouldEnable = !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
this._isEnabled = false;
}
this._cntEle.classList.add('menu-content');
this._cntEle.classList.add('menu-content-' + this.type);

// register this menu with the app's menu controller
this._menuCtrl._register(this);
this._updateState();

// mask it as enabled / disabled
this.enable(shouldEnable);
}

/**
Expand Down Expand Up @@ -401,10 +400,8 @@ export class Menu implements RootNode {
if ((shouldOpen === this.isOpen) || !this._canOpen() || this._isAnimating) {
return Promise.resolve(this.isOpen);
}

this._before();

return new Promise(resolve => {
this._before();
this._getType().setOpen(shouldOpen, animated, () => {
this._after(shouldOpen);
resolve(this.isOpen);
Expand All @@ -414,7 +411,6 @@ export class Menu implements RootNode {

_forceClosing() {
assert(this.isOpen, 'menu cannot be closed');

this._isAnimating = true;
this._getType().setOpen(false, false, () => {
this._after(false);
Expand Down Expand Up @@ -607,7 +603,9 @@ export class Menu implements RootNode {
console.debug('menu, gesture unlisten', this.side);
gesture.unlisten();
}

if (this.isOpen || (this._isPanel && this._isEnabled)) {
this.resize();
}
assert(!this._isAnimating, 'can not be animating');
}

Expand All @@ -616,6 +614,7 @@ export class Menu implements RootNode {
*/
enable(shouldEnable: boolean): Menu {
this._isEnabled = shouldEnable;
this.setElementClass('menu-enabled', shouldEnable);
this._updateState();
return this;
}
Expand All @@ -626,11 +625,6 @@ export class Menu implements RootNode {
_setIsPanel(isPanel: boolean) {
this._isPanel = isPanel;
this._updateState();

// Trigger resize() if menu becomes a split panel
if (isPanel) {
this.resize();
}
}

/**
Expand Down
6 changes: 0 additions & 6 deletions src/components/menu/test/enable-disable/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,11 @@ export class E2EApp {

menu1Active() {
this.menuCtrl.enable(true, 'menu1');
this.menuCtrl.enable(false, 'menu2');
this.menuCtrl.enable(false, 'menu3');
}
menu2Active() {
this.menuCtrl.enable(false, 'menu1');
this.menuCtrl.enable(true, 'menu2');
this.menuCtrl.enable(false, 'menu3');
}
menu3Active() {
this.menuCtrl.enable(false, 'menu1');
this.menuCtrl.enable(false, 'menu2');
this.menuCtrl.enable(true, 'menu3');
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/nav/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,8 @@ export class Nav extends NavControllerBase implements AfterViewInit, RootNode {
return !this._elementRef.nativeElement.hasAttribute('main');
}

get enabled(): boolean {
return true;
}

}
21 changes: 13 additions & 8 deletions src/components/split-panel/split-panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,31 @@ ion-split-panel {
bottom: 0;
left: 0;
z-index: 0;
display: block;

flex: 1;

box-shadow: none !important;
}

.split-panel-visible >ion-split-panel.split-panel-side,
.split-panel-visible >ion-split-panel.split-panel-main {
display: flex;
}

.split-panel-visible >.split-panel-side {
flex: 1;
flex-shrink: 0;

order: -1;
}

.split-panel-visible >ion-menu {
.split-panel-visible >.split-panel-main,
.split-panel-visible >ion-nav.split-panel-side,
.split-panel-visible >ion-tabs.split-panel-side,
.split-panel-visible >ion-menu.menu-enabled {
display: block;
}

.split-panel-visible >ion-split-panel.split-panel-side,
.split-panel-visible >ion-split-panel.split-panel-main {
display: flex;
}

.split-panel-visible >ion-menu.menu-enabled {
>.menu-inner {
// scss-lint:disable ImportantRule
right: 0;
Expand Down
56 changes: 29 additions & 27 deletions src/components/split-panel/split-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,45 +27,46 @@ export class SplitPanel extends Ion implements RootNode {
_rmListener: any;
_visible: boolean = false;
_init: boolean = false;
_mediaQuery: string|boolean = QUERY['md'];
_mediaQuery: string | boolean = QUERY['md'];

sideContent: RootNode;
mainContent: RootNode;

@ContentChildren(RootNode, {descendants: false})
set _setChildren(query: QueryList<RootNode>) {
@ContentChildren(RootNode, { descendants: false }) children: QueryList<RootNode>;

updateChildren() {
this.mainContent = null;
this.sideContent = null;

if (query.length === 1) {
var node = query.first;
this.setPanelCSSClass(node.getElementRef(), false);
this.mainContent = node;

} else if (query.length >= 2) {
query.forEach(child => {
if (child !== this) {
var isSide = child._isSideContent();
this.children.forEach(child => {
if (child !== this) {
var isSide = child._isSideContent();
this.setPanelCSSClass(child.getElementRef(), isSide);
if (child.enabled) {
if (isSide) {
if (this.sideContent) {
console.error('split panel: side content was already set');
}
this.sideContent = child;
} else {
if (this.mainContent) {
console.error('split panel: main content was already set');
}
this.mainContent = child;
}
this.setPanelCSSClass(child.getElementRef(), isSide);
}
});
if (!this.mainContent) {
console.error('split panel: one of the elements needs the "main" attribute');
}
if (!this.sideContent) {
console.error('split panel: missing side content node');
}
if (this.mainContent === this.sideContent) {
console.error('split panel: main and side content are the same');
child._setIsPanel(this._visible);
}
});
if (!this.mainContent) {
console.error('split panel: one of the elements needs the "main" attribute');
}
if (this.mainContent === this.sideContent) {
console.error('split panel: main and side content are the same');
}
}


@Input()
set when(query: string | boolean) {
if (typeof query === 'boolean') {
Expand Down Expand Up @@ -130,12 +131,9 @@ export class SplitPanel extends Ion implements RootNode {
if (this._visible === visible) {
return;
}
this.setElementClass('split-panel-visible', visible);

this.sideContent && this.sideContent._setIsPanel(visible);
this.mainContent && this.mainContent._setIsPanel(visible);

this._visible = visible;
this.setElementClass('split-panel-visible', visible);
this.updateChildren();

this._zone.run(() => {
this.ionChange.emit(this);
Expand Down Expand Up @@ -171,4 +169,8 @@ export class SplitPanel extends Ion implements RootNode {
return false;
}

get enabled(): boolean {
return true;
}

}
4 changes: 2 additions & 2 deletions src/components/split-panel/test/basic/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export class E2EPage2 {}
<ion-content padding>
<h1>Page 1</h1>
<button ion-button (click)="push()">Push</button>
<button ion-button (click)="menu()">Open Menu</button>
<button ion-button (click)="menu()">Disable/enable menu</button>
<div f></div>
<div f></div>
<div f></div>
Expand All @@ -79,7 +79,7 @@ export class E2EPage {
}

menu() {
this.menuCtrl.open();
this.menuCtrl.enable(!this.menuCtrl.isEnabled());
}
}

Expand Down
102 changes: 102 additions & 0 deletions src/components/split-panel/test/menus/app.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, NavController, MenuController, SplitPanel } from '../../../../../ionic-angular';

@Component({
template: `
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Page 2</h1>
</ion-content>
`
})
export class E2EPage2 {}


@Component({
template: `
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Navigation</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Page 1</h1>
<button ion-button (click)="push()">Push</button>
<button ion-button (click)="menu1Active()">Enable menu 1</button>
<button ion-button (click)="menu2Active()">Enable menu 2</button>
<button ion-button (click)="menu3Active()">Enable menu 3</button>
<button ion-button (click)="disableAll()">Disable all</button>
<div f></div>
<div f></div>
<div f></div>
<div f></div>
</ion-content>
`
})
export class E2EPage {
constructor(
public navCtrl: NavController,
public menuCtrl: MenuController,
) { }

push() {
this.navCtrl.push(E2EPage2);
}
menu1Active() {
this.menuCtrl.enable(true, 'menu1');
}
menu2Active() {
this.menuCtrl.enable(true, 'menu2');
}
menu3Active() {
this.menuCtrl.enable(true, 'menu3');
}
disableAll() {
this.menuCtrl.enable(false);
}
}


@Component({
templateUrl: 'main.html'
})
export class E2EApp {
root = E2EPage;

splitPanelChanged(splitPanel: SplitPanel) {
console.log('Split panel changed, visible: ', splitPanel.isVisible());
}
}

@NgModule({
declarations: [
E2EApp,
E2EPage,
E2EPage2,
],
imports: [
IonicModule.forRoot(E2EApp, {
swipeBackEnabled: true
})
],
bootstrap: [IonicApp],
entryComponents: [
E2EApp,
E2EPage,
E2EPage2,
]
})
export class AppModule {}

1 change: 1 addition & 0 deletions src/components/split-panel/test/menus/e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Loading

0 comments on commit a0d9e8c

Please sign in to comment.