diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 1f4c443e85..296016fed6 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -1,5 +1,5 @@ -import { Component, Element, Event, EventEmitter, Prop, PropDidChange } from '@stencil/core'; -import { Config, Animation } from '../../index'; +import { Component, Element, Event, EventEmitter, Prop, PropDidChange, Listen } from '@stencil/core'; +import { Config, Animation, SplitPaneAlert } from '../../index'; import { MenuController } from './menu-controller'; import { isRightSide, Side, assert, checkEdgeSide } from '../../utils/helpers'; @@ -102,6 +102,11 @@ export class Menu { // const isRTL = false; // // this.isRightSide = isRightSide(side, isRTL); // } + @Listen('body:ionSplitPaneDidChange') + splitPaneChanged(ev: SplitPaneAlert) { + this._isPane = ev.detail.splitPane.isPane(this.el); + this._updateState(); + } @PropDidChange('enabled') enabledChanged() { @@ -155,6 +160,7 @@ export class Menu { // mask it as enabled / disabled this.enable(isEnabled); + this._init = true; } hostData() { @@ -266,7 +272,7 @@ export class Menu { this._isAnimating = true; this._startAnimation(false, false) - .then(() => this._after(false)); + this._after(false); } getWidth(): number { @@ -521,14 +527,6 @@ export class Menu { return false; } - /** - * @internal - */ - paneChanged(isPane: boolean) { - this._isPane = isPane; - this._updateState(); - } - /** * @hidden */ diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx index 49d64307a4..5ab1dd94b7 100644 --- a/packages/core/src/components/split-pane/split-pane.tsx +++ b/packages/core/src/components/split-pane/split-pane.tsx @@ -160,6 +160,7 @@ export class SplitPane { /** * @output {any} Expression to be called when the split-pane visibility has changed */ + @Event() ionSplitPaneDidChange: EventEmitter; @Event() ionChange: EventEmitter; ionViewDidLoad() { @@ -181,16 +182,16 @@ export class SplitPane { var isMain = child.hasAttribute('main'); if (isMain) { if (foundMain) { - // console.warn('split pane can not have more than one main node'); + console.warn('split pane can not have more than one main node'); return; } foundMain = true; } setPaneClass(child, isMain); } - // if (!foundMain) { - // console.warn('split pane could not found any main node'); - // } + if (!foundMain) { + console.warn('split pane could not found any main node'); + } } @PropDidChange('when') @@ -234,7 +235,9 @@ export class SplitPane { private _setVisible(visible: boolean) { if (this.visible !== visible) { this.visible = visible; - this.ionChange.emit(this); + const detail = { splitPane: this }; + this.ionChange.emit(detail); + this.ionSplitPaneDidChange.emit(detail); } } @@ -246,6 +249,14 @@ export class SplitPane { return this.visible; } + isPane(element: HTMLElement): boolean { + if (!this.visible) { + return false; + } + return element.parentElement === this.ele + && element.classList.contains(SPLIT_PANE_SIDE); + } + hostData() { return { class: { @@ -260,6 +271,12 @@ export class SplitPane { } +export interface SplitPaneAlert { + detail: { + splitPane: SplitPane + } +} + function setPaneClass(ele: HTMLElement, isMain: boolean) { let toAdd; let toRemove; diff --git a/packages/core/src/components/split-pane/test/basic.html b/packages/core/src/components/split-pane/test/basic.html index c688760112..e1eb02a073 100644 --- a/packages/core/src/components/split-pane/test/basic.html +++ b/packages/core/src/components/split-pane/test/basic.html @@ -55,7 +55,6 @@ Open left menu - Open right menu @@ -70,10 +69,6 @@ console.log('Open left menu'); menu.open('left'); } - function openRight() { - console.log('Open right menu'); - menu.open('right'); - } diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 01e55ac47c..f9f969dd4d 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -20,6 +20,8 @@ import { PopoverController } from './components/popover-controller/popover-contr import { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll'; import { Segment } from './components/segment/segment'; import { SegmentButton, SegmentButtonEvent } from './components/segment-button/segment-button'; +import { SplitPane, SplitPaneAlert } from './components/split-pane/split-pane'; + import { Toast, ToastEvent, ToastOptions } from './components/toast/toast' import { ToastController } from './components/toast-controller/toast-controller' @@ -90,6 +92,8 @@ export { Segment, SegmentButton, SegmentButtonEvent, + SplitPane, + SplitPaneAlert, TransitionBuilder, Toast, ToastEvent,