feat(split-panel): split panel support for ion-nav and ion-menu

Revert some changes

adds support split-panel support for tabs

Removes .orig

removes e2e.ts

Removes unneeded changes in menu.ts

improves stuff

src/animations/animation.ts

@@ -351,6 +351,17 @@ export class Animation {
     });
   }
 
+  syncPlay() {
+    // If the animation was already invalidated (it did finish), do nothing
+    if (!this.plt) {
+      return;
+    }
+    this._isAsync = false;
+    this._hasDur = false;
+    this._clearAsync();
+    this._playDomInspect({ duration: 0 });
+  }
+
   /**
    * @private
    * DOM WRITE

src/components/menu/menu-controller.ts

@@ -1,7 +1,7 @@
 import { Menu } from './menu';
 import { MenuType } from './menu-types';
 import { Platform } from '../../platform/platform';
-import { removeArrayItem } from '../../util/util';
+import { removeArrayItem, assert } from '../../util/util';
 
 
 /**
@@ -307,6 +307,23 @@ export class MenuController {
     removeArrayItem(this._menus, menu);
   }
 
+  /**
+   * @private
+   */
+  _setActiveMenu(menu: Menu) {
+    assert(menu.enabled);
+    assert(this._menus.indexOf(menu) >= 0, 'menu is not registered');
+
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    this._menus
+      .filter(m => m.side === side && m !== menu)
+      .map(m => m.enable(false));
+  }
+
+
   /**
    * @private
    */

src/components/menu/menu-toggle.ts

@@ -129,21 +129,24 @@ export class MenuToggle {
   */
   @HostListener('click')
   toggle() {
-    let menu = this._menu.get(this.menuToggle);
+    const menu = this._menu.get(this.menuToggle);
     menu && menu.toggle();
   }
 
   /**
   * @private
   */
   get isHidden() {
+    const menu = this._menu.get(this.menuToggle);
+    if (!menu || !menu._canOpen()) {
+      return true;
+    }
     if (this._inNavbar && this._viewCtrl) {
       if (this._viewCtrl.isFirst()) {
         // this is the first view, so it should always show
         return false;
       }
 
-      let menu = this._menu.get(this.menuToggle);
       if (menu) {
         // this is not the root view, so see if this menu
         // is configured to still be enabled if it's not the root view

src/components/menu/menu-types.ts

@@ -24,14 +24,14 @@ export class MenuType {
   }
 
   setOpen(shouldOpen: boolean, animated: boolean, done: Function) {
-    let ani = this.ani
+    const ani = this.ani
       .onFinish(done, true)
       .reverse(!shouldOpen);
 
     if (animated) {
       ani.play();
     } else {
-      ani.play({ duration: 0 });
+      ani.syncPlay();
     }
   }
 

src/components/menu/menu.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 
 import { App } from '../app/app';
 import { Backdrop } from '../backdrop/backdrop';
@@ -13,6 +13,7 @@ import { MenuController } from './menu-controller';
 import { MenuType } from './menu-types';
 import { Platform } from '../../platform/platform';
 import { UIEventManager } from '../../gestures/ui-event-manager';
+import { RootNode } from '../../navigation/root-node';
 
 /**
  * @name Menu
@@ -188,8 +189,9 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  providers: [{provide: RootNode, useExisting: forwardRef(() => Menu) }]
 })
-export class Menu {
+export class Menu implements RootNode {
 
   private _cntEle: HTMLElement;
   private _gesture: MenuContentGesture;
@@ -201,6 +203,7 @@ export class Menu {
   private _init: boolean = false;
   private _events: UIEventManager;
   private _gestureBlocker: BlockerDelegate;
+  private _isPanel: boolean = false;
 
   /**
    * @private
@@ -248,8 +251,8 @@ export class Menu {
   }
 
   set enabled(val: boolean) {
-    this._isEnabled = isTrueProperty(val);
-    this._setListeners();
+    const isEnabled = isTrueProperty(val);
+    this.enable(isEnabled);
   }
 
   /**
@@ -261,8 +264,8 @@ export class Menu {
   }
 
   set swipeEnabled(val: boolean) {
-    this._isSwipeEnabled = isTrueProperty(val);
-    this._setListeners();
+    const isEnabled = isTrueProperty(val);
+    this.swipeEnable(isEnabled);
   }
 
   /**
@@ -353,13 +356,12 @@ export class Menu {
       // auto-disable if another menu on the same side is already enabled
       this._isEnabled = false;
     }
-    this._setListeners();
-
     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();
   }
 
   /**
@@ -371,27 +373,6 @@ export class Menu {
     this._menuCtrl.close();
   }
 
-  /**
-   * @private
-   */
-  private _setListeners() {
-    if (!this._init) {
-      return;
-    }
-    const gesture = this._gesture;
-    // only listen/unlisten if the menu has initialized
-    if (this._isEnabled && this._isSwipeEnabled && !gesture.isListening) {
-      // should listen, but is not currently listening
-      console.debug('menu, gesture listen', this.side);
-      gesture.listen();
-
-    } else if (gesture.isListening && (!this._isEnabled || !this._isSwipeEnabled)) {
-      // should not listen, but is currently listening
-      console.debug('menu, gesture unlisten', this.side);
-      gesture.unlisten();
-    }
-  }
-
   /**
    * @private
    */
@@ -411,7 +392,7 @@ export class Menu {
    */
   setOpen(shouldOpen: boolean, animated: boolean = true): Promise<boolean> {
     // If the menu is disabled or it is currenly being animated, let's do nothing
-    if ((shouldOpen === this.isOpen) || !this._isEnabled || this._isAnimating) {
+    if ((shouldOpen === this.isOpen) || !this._canOpen() || this._isAnimating) {
       return Promise.resolve(this.isOpen);
     }
 
@@ -425,13 +406,24 @@ export class Menu {
     });
   }
 
+  _forceClosing() {
+    if (!this.isOpen) {
+      return;
+    }
+
+    this._isAnimating = true;
+    this._getType().setOpen(false, false, () => {
+      this._after(false);
+    });
+  }
+
   /**
    * @private
    */
   canSwipe(): boolean {
-    return this._isEnabled &&
-      this._isSwipeEnabled &&
+    return this._isSwipeEnabled &&
       !this._isAnimating &&
+      this._canOpen() &&
       this._app.isEnabled();
   }
 
@@ -442,6 +434,7 @@ export class Menu {
     return this._isAnimating;
   }
 
+
   _swipeBeforeStart() {
     if (!this.canSwipe()) {
       assert(false, 'canSwipe() has to be true');
@@ -561,38 +554,77 @@ export class Menu {
     return this.setOpen(!this.isOpen);
   }
 
+  _canOpen(): boolean {
+    return this._isEnabled && !this._isPanel;
+  }
+
+  _isSideContent(): boolean {
+    return true;
+  }
+
   /**
    * @private
    */
-  enable(shouldEnable: boolean): Menu {
-    this.enabled = shouldEnable;
-    if (!shouldEnable && this.isOpen) {
+  _updateState() {
+    const canOpen = this._canOpen();
+
+    // Close menu inmediately
+    if (!canOpen && this.isOpen) {
       // close if this menu is open, and should not be enabled
-      this.close();
+      this._forceClosing();
+    }
+
+    if (this._isEnabled && this._menuCtrl) {
+      this._menuCtrl._setActiveMenu(this);
+    }
+
+    if (!this._init) {
+      return;
     }
+    const gesture = this._gesture;
+    // only listen/unlisten if the menu has initialized
+    if (canOpen && this._isSwipeEnabled && !gesture.isListening) {
+      // should listen, but is not currently listening
+      console.debug('menu, gesture listen', this.side);
+      gesture.listen();
 
-    if (shouldEnable) {
-      // if this menu should be enabled
-      // then find all the other menus on this same side
-      // and automatically disable other same side menus
-      this._menuCtrl.getMenus()
-        .filter(m => m.side === this.side && m !== this)
-        .map(m => m.enabled = false);
+    } else if (gesture.isListening && (!canOpen || !this._isSwipeEnabled)) {
+      // should not listen, but is currently listening
+      console.debug('menu, gesture unlisten', this.side);
+      gesture.unlisten();
     }
 
-    // TODO
-    // what happens if menu is disabled while swipping?
+    assert(!this._isAnimating, 'can not be animating');
+  }
 
+  /**
+   * @private
+   */
+  enable(shouldEnable: boolean): Menu {
+    this._isEnabled = shouldEnable;
+    this._updateState();
     return this;
   }
 
+  /**
+   * @private
+   */
+  _setIsPanel(isPanel: boolean) {
+    this._isPanel = isPanel;
+    this._updateState();
+
+    // Trigger resize() if menu becomes a split panel
+    if (isPanel && this.menuContent) {
+      this.menuContent.resize();
+    }
+  }
+
   /**
    * @private
    */
   swipeEnable(shouldEnable: boolean): Menu {
-    this.swipeEnabled = shouldEnable;
-    // TODO
-    // what happens if menu swipe is disabled while swipping?
+    this._isSwipeEnabled = shouldEnable;
+    this._updateState();
     return this;
   }
 
@@ -652,6 +684,13 @@ export class Menu {
     this._renderer.setElementAttribute(this._elementRef.nativeElement, attributeName, value);
   }
 
+  /**
+   * @private
+   */
+  getElementRef(): ElementRef {
+    return this._elementRef;
+  }
+
   /**
    * @private
    */

src/components/nav/nav.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ComponentFactoryResolver, ElementRef, Input, Optional, NgZone, Renderer, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ComponentFactoryResolver, ElementRef, forwardRef, Input, Optional, NgZone, Renderer, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
@@ -10,6 +10,7 @@ import { Keyboard } from '../../platform/keyboard';
 import { NavController } from '../../navigation/nav-controller';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { NavOptions } from '../../navigation/nav-util';
+import { RootNode } from '../../navigation/root-node';
 import { Platform } from '../../platform/platform';
 import { TransitionController } from '../../transitions/transition-controller';
 import { ViewController } from '../../navigation/view-controller';
@@ -52,8 +53,9 @@ import { ViewController } from '../../navigation/view-controller';
     '<div #viewport nav-viewport></div>' +
     '<div class="nav-decor"></div>',
   encapsulation: ViewEncapsulation.None,
+  providers: [{provide: RootNode, useExisting: forwardRef(() => Nav) }]
 })
-export class Nav extends NavControllerBase implements AfterViewInit {
+export class Nav extends NavControllerBase implements AfterViewInit, RootNode {
   private _root: any;
   private _hasInit: boolean = false;
 
@@ -160,8 +162,24 @@ export class Nav extends NavControllerBase implements AfterViewInit {
   /**
    * @private
    */
-  destroy() {
+  ngOnDestroy() {
     this.destroy();
   }
 
+  /**
+   * @private
+   */
+  _setIsPanel(isPanel: boolean) {
+    if (isPanel) {
+      this.resize();
+    }
+  }
+
+  /**
+   * @private
+   */
+  _isSideContent(): boolean {
+    return !this._elementRef.nativeElement.hasAttribute('main');
+  }
+
 }