javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu-toggle): use ESM menuController (#19225)

Browse Source
This commit is contained in:
Manu MA
2019-08-29 15:19:01 +02:00
committed by GitHub
parent 9751f145e1
commit 4c30878fc7
5 changed files with 27 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
core/src/components/menu-toggle/menu-toggle-util.ts
View File

@ -1,32 +1,7 @@
// Get the menu controller element
export const getMenuController = (doc: Document): Promise<HTMLIonMenuControllerElement | undefined> => {
const menuControllerElement = doc.querySelector('ion-menu-controller');
if (!menuControllerElement) {
return Promise.resolve(undefined);
}
return menuControllerElement.componentOnReady();
};
// Given a menu, toggle it
export const toggleMenu = async (menu: string | undefined) => {
const menuCtrl = await getMenuController(document);
if (menuCtrl) {
const menuEl = await menuCtrl.get(menu);
if (menuEl) {
menuCtrl.toggle(menu);
}
}
};
import { menuController } from '../../utils/menu-controller';
// Given a menu, return whether or not the menu toggle should be visible
export const updateVisibility = async (menu: string | undefined) => {
const menuCtrl = await getMenuController(document);
if (menuCtrl) {
const menuEl = await menuCtrl.get(menu);
if (menuEl && await menuEl.isActive()) {
return true;
}
}
return false;
const menuEl = await menuController.get(menu);
return !!(menuEl && await menuEl.isActive());
};

15
core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -1,8 +1,9 @@
import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { menuController } from '../../utils/menu-controller';
import { toggleMenu, updateVisibility } from './menu-toggle-util';
import { updateVisibility } from './menu-toggle-util';
@Component({
tag: 'ion-menu-toggle',
@ -31,22 +32,18 @@ export class MenuToggle implements ComponentInterface {
*/
@Prop() autoHide = true;
async componentDidLoad() {
await this.setVisibility();
connectedCallback() {
this.visibilityChanged();
}
@Listen('ionMenuChange', { target: 'body' })
@Listen('ionSplitPaneVisible', { target: 'body' })
async visibilityChanged() {
await this.setVisibility();
}
private setVisibility = async () => {
this.visible = await updateVisibility(this.menu);
}
private onClick = async () => {
await toggleMenu(this.menu);
private onClick = () => {
return menuController.toggle(this.menu);
}
render() {

9
core/src/components/menu-toggle/test/basic/index.html
View File

@ -91,21 +91,18 @@
<script>
async function openDefault() {
function openDefault() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = null;
}
async function openStart() {
function openStart() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'start';
}
async function openEnd() {
function openEnd() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'end';
}
</script>