mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
486 lines
13 KiB
TypeScript
486 lines
13 KiB
TypeScript
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
|
|
import { Animation, Config, GestureDetail } from '../../index';
|
|
import { Side, assert, isRightSide } from '../../utils/helpers';
|
|
|
|
@Component({
|
|
tag: 'ion-menu',
|
|
styleUrls: {
|
|
ios: 'menu.ios.scss',
|
|
md: 'menu.md.scss'
|
|
},
|
|
host: {
|
|
theme: 'menu'
|
|
}
|
|
})
|
|
export class Menu {
|
|
|
|
private animation: Animation|undefined;
|
|
private isPane = false;
|
|
private _isOpen = false;
|
|
private lastOnEnd = 0;
|
|
|
|
mode: string;
|
|
color: string;
|
|
isAnimating = false;
|
|
width: number;
|
|
|
|
backdropEl: HTMLElement|undefined;
|
|
menuInnerEl: HTMLElement|undefined;
|
|
contentEl: HTMLElement|undefined;
|
|
menuCtrl: HTMLIonMenuControllerElement|undefined;
|
|
|
|
@Element() el: HTMLIonMenuElement;
|
|
|
|
@State() isRightSide = false;
|
|
|
|
@Prop({ context: 'config' }) config: Config;
|
|
@Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: HTMLIonMenuControllerElement;
|
|
@Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
|
|
|
|
/**
|
|
* The content's id the menu should use.
|
|
*/
|
|
@Prop() contentId: string;
|
|
|
|
/**
|
|
* An id for the menu.
|
|
*/
|
|
@Prop() menuId: string;
|
|
|
|
/**
|
|
* The display type of the menu. Default varies based on the mode,
|
|
* see the `menuType` in the [config](../../config/Config). Available options:
|
|
* `"overlay"`, `"reveal"`, `"push"`.
|
|
*/
|
|
@Prop({ mutable: true }) type: string;
|
|
|
|
@Watch('type')
|
|
typeChanged(type: string, oldType: string | null) {
|
|
const contentEl = this.contentEl;
|
|
if (contentEl && oldType) {
|
|
contentEl.classList.remove(`menu-content-${oldType}`);
|
|
contentEl.classList.add(`menu-content-${type}`);
|
|
contentEl.removeAttribute('style');
|
|
}
|
|
if (this.menuInnerEl) {
|
|
// Remove effects of previous animations
|
|
this.menuInnerEl.removeAttribute('style');
|
|
}
|
|
this.animation = undefined;
|
|
}
|
|
|
|
/**
|
|
* If true, the menu is disabled. Default `false`.
|
|
*/
|
|
@Prop({ mutable: true }) disabled = false;
|
|
|
|
@Watch('disabled')
|
|
protected disabledChanged(disabled: boolean) {
|
|
this.updateState();
|
|
this.ionMenuChange.emit({ disabled: disabled, open: this._isOpen});
|
|
}
|
|
|
|
/**
|
|
* Which side of the view the menu should be placed. Default `"start"`.
|
|
*/
|
|
@Prop() side: Side = 'start';
|
|
|
|
@Watch('side')
|
|
protected sideChanged() {
|
|
this.isRightSide = isRightSide(this.side);
|
|
}
|
|
|
|
/**
|
|
* If true, swiping the menu is enabled. Default `true`.
|
|
*/
|
|
@Prop() swipeEnabled = true;
|
|
|
|
@Watch('swipeEnabled')
|
|
protected swipeEnabledChanged() {
|
|
this.updateState();
|
|
}
|
|
|
|
/**
|
|
* If true, the menu will persist on child pages.
|
|
*/
|
|
@Prop() persistent = false;
|
|
|
|
@Prop() maxEdgeStart = 50;
|
|
|
|
/**
|
|
* Emitted when the menu is open.
|
|
*/
|
|
@Event() ionOpen: EventEmitter;
|
|
|
|
/**
|
|
* Emitted when the menu is closed.
|
|
*/
|
|
@Event() ionClose: EventEmitter;
|
|
|
|
|
|
@Event() protected ionMenuChange: EventEmitter<MenuChangeEventDetail>;
|
|
|
|
async componentWillLoad() {
|
|
this.menuCtrl = await this.lazyMenuCtrl.componentOnReady();
|
|
if (this.type == null) {
|
|
this.type = this.mode === 'ios' ? 'reveal' : 'overlay';
|
|
}
|
|
}
|
|
|
|
componentDidLoad() {
|
|
assert(!!this.menuCtrl, 'menucontroller was not initialized');
|
|
|
|
const el = this.el;
|
|
|
|
const content = (this.contentId)
|
|
? document.getElementById(this.contentId)
|
|
: el.parentElement.querySelector('[main]');
|
|
|
|
if (!content || !content.tagName) {
|
|
// requires content element
|
|
return console.error('Menu: must have a "content" element to listen for drag events on.');
|
|
}
|
|
this.contentEl = content as HTMLElement;
|
|
|
|
// add menu's content classes
|
|
content.classList.add('menu-content');
|
|
|
|
this.typeChanged(this.type, null);
|
|
this.sideChanged();
|
|
|
|
let isEnabled = !this.disabled;
|
|
if (isEnabled === true || typeof isEnabled === 'undefined') {
|
|
const menus = this.menuCtrl.getMenus();
|
|
isEnabled = !menus.some(m => {
|
|
return m.side === this.side && !m.disabled;
|
|
});
|
|
}
|
|
// register this menu with the app's menu controller
|
|
this.menuCtrl._register(this);
|
|
this.ionMenuChange.emit({ disabled: !isEnabled, open: this._isOpen});
|
|
|
|
// mask it as enabled / disabled
|
|
this.disabled = !isEnabled;
|
|
}
|
|
|
|
componentDidUnload() {
|
|
this.menuCtrl._unregister(this);
|
|
this.animation && this.animation.destroy();
|
|
|
|
this.menuCtrl = this.animation = undefined;
|
|
this.contentEl = this.backdropEl = this.menuInnerEl = undefined;
|
|
}
|
|
|
|
@Listen('body:ionSplitPaneVisible')
|
|
splitPaneChanged(ev: CustomEvent) {
|
|
this.isPane = (ev.target as any).isPane(this.el);
|
|
this.updateState();
|
|
}
|
|
|
|
@Listen('body:click', { enabled: false, capture: true })
|
|
onBackdropClick(ev: UIEvent) {
|
|
const el = ev.target as HTMLElement;
|
|
if (!el.closest('.menu-inner') && this.lastOnEnd < (ev.timeStamp - 100)) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
@Method()
|
|
isOpen(): boolean {
|
|
return this._isOpen;
|
|
}
|
|
|
|
@Method()
|
|
open(animated = true): Promise<boolean> {
|
|
return this.setOpen(true, animated);
|
|
}
|
|
|
|
@Method()
|
|
close(animated = true): Promise<boolean> {
|
|
return this.setOpen(false, animated);
|
|
}
|
|
|
|
@Method()
|
|
toggle(animated = true): Promise<boolean> {
|
|
return this.setOpen(!this._isOpen, animated);
|
|
}
|
|
|
|
@Method()
|
|
setOpen(shouldOpen: boolean, animated = true): Promise<boolean> {
|
|
return this.menuCtrl._setOpen(this, shouldOpen, animated);
|
|
}
|
|
|
|
async _setOpen(shouldOpen: boolean, animated = true): Promise<boolean> {
|
|
// If the menu is disabled or it is currenly being animated, let's do nothing
|
|
if (!this.isActive() || this.isAnimating || (shouldOpen === this._isOpen)) {
|
|
return this._isOpen;
|
|
}
|
|
|
|
this.beforeAnimation();
|
|
await this.loadAnimation();
|
|
await this.startAnimation(shouldOpen, animated);
|
|
this.afterAnimation(shouldOpen);
|
|
|
|
return shouldOpen;
|
|
}
|
|
|
|
@Method()
|
|
isActive(): boolean {
|
|
return !this.disabled && !this.isPane;
|
|
}
|
|
|
|
private async loadAnimation(): Promise<void> {
|
|
// Menu swipe animation takes the menu's inner width as parameter,
|
|
// If `offsetWidth` changes, we need to create a new animation.
|
|
const width = this.menuInnerEl.offsetWidth;
|
|
if (width === this.width && this.animation !== undefined) {
|
|
return;
|
|
}
|
|
this.width = width;
|
|
|
|
// Destroy existing animation
|
|
if (this.animation) {
|
|
this.animation.destroy();
|
|
this.animation = undefined;
|
|
}
|
|
// Create new animation
|
|
this.animation = await this.menuCtrl.createAnimation(this.type, this);
|
|
}
|
|
|
|
private async startAnimation(shouldOpen: boolean, animated: boolean): Promise<void> {
|
|
const ani = this.animation.reverse(!shouldOpen);
|
|
if (animated) {
|
|
await ani.playAsync();
|
|
} else {
|
|
ani.playSync();
|
|
}
|
|
}
|
|
|
|
private canSwipe(): boolean {
|
|
return this.swipeEnabled &&
|
|
!this.isAnimating &&
|
|
this.isActive();
|
|
}
|
|
|
|
private canStart(detail: GestureDetail): boolean {
|
|
if (!this.canSwipe()) {
|
|
return false;
|
|
}
|
|
if (this._isOpen) {
|
|
return true;
|
|
} else if (this.menuCtrl.getOpen()) {
|
|
return false;
|
|
}
|
|
return checkEdgeSide(detail.currentX, this.isRightSide, this.maxEdgeStart);
|
|
}
|
|
|
|
private onWillStart(): Promise<void> {
|
|
this.beforeAnimation();
|
|
return this.loadAnimation();
|
|
}
|
|
|
|
private onDragStart() {
|
|
assert(!!this.animation, '_type is undefined');
|
|
if (!this.isAnimating) {
|
|
assert(false, 'isAnimating has to be true');
|
|
return;
|
|
}
|
|
|
|
// the cloned animation should not use an easing curve during seek
|
|
this.animation
|
|
.reverse(this._isOpen)
|
|
.progressStart();
|
|
}
|
|
|
|
private onDragMove(detail: GestureDetail) {
|
|
assert(!!this.animation, '_type is undefined');
|
|
if (!this.isAnimating) {
|
|
assert(false, 'isAnimating has to be true');
|
|
return;
|
|
}
|
|
|
|
const delta = computeDelta(detail.deltaX, this._isOpen, this.isRightSide);
|
|
const stepValue = delta / this.width;
|
|
this.animation.progressStep(stepValue);
|
|
}
|
|
|
|
private onDragEnd(detail: GestureDetail) {
|
|
assert(!!this.animation, '_type is undefined');
|
|
if (!this.isAnimating) {
|
|
assert(false, 'isAnimating has to be true');
|
|
return;
|
|
}
|
|
const isOpen = this._isOpen;
|
|
const isRightSide = this.isRightSide;
|
|
const delta = computeDelta(detail.deltaX, isOpen, isRightSide);
|
|
const width = this.width;
|
|
const stepValue = delta / width;
|
|
const velocity = detail.velocityX;
|
|
const z = width / 2.0;
|
|
const shouldCompleteRight = (velocity >= 0)
|
|
&& (velocity > 0.2 || detail.deltaX > z);
|
|
|
|
const shouldCompleteLeft = (velocity <= 0)
|
|
&& (velocity < -0.2 || detail.deltaX < -z);
|
|
|
|
const shouldComplete = (isOpen)
|
|
? isRightSide ? shouldCompleteRight : shouldCompleteLeft
|
|
: isRightSide ? shouldCompleteLeft : shouldCompleteRight;
|
|
|
|
let shouldOpen = (!isOpen && shouldComplete);
|
|
if (isOpen && !shouldComplete) {
|
|
shouldOpen = true;
|
|
}
|
|
|
|
const missing = shouldComplete ? 1 - stepValue : stepValue;
|
|
const missingDistance = missing * width;
|
|
let realDur = 0;
|
|
if (missingDistance > 5) {
|
|
const dur = missingDistance / Math.abs(velocity);
|
|
realDur = Math.min(dur, 300);
|
|
}
|
|
|
|
this.lastOnEnd = detail.timeStamp;
|
|
this.animation
|
|
.onFinish(() => this.afterAnimation(shouldOpen), { clearExistingCallacks: true })
|
|
.progressEnd(shouldComplete, stepValue, realDur);
|
|
}
|
|
|
|
private beforeAnimation() {
|
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
|
|
// this places the menu into the correct location before it animates in
|
|
// this css class doesn't actually kick off any animations
|
|
this.el.classList.add(SHOW_MENU);
|
|
this.backdropEl.classList.add(SHOW_BACKDROP);
|
|
this.isAnimating = true;
|
|
}
|
|
|
|
private afterAnimation(isOpen: boolean) {
|
|
assert(this.isAnimating, '_before() should be called while animating');
|
|
|
|
// keep opening/closing the menu disabled for a touch more yet
|
|
// only add listeners/css if it's enabled and isOpen
|
|
// and only remove listeners/css if it's not open
|
|
// emit opened/closed events
|
|
this._isOpen = isOpen;
|
|
this.isAnimating = false;
|
|
|
|
// add/remove backdrop click listeners
|
|
this.enableListener(this, 'body:click', isOpen);
|
|
|
|
if (isOpen) {
|
|
// add css class
|
|
this.contentEl.classList.add(MENU_CONTENT_OPEN);
|
|
|
|
// emit open event
|
|
this.ionOpen.emit();
|
|
|
|
} else {
|
|
// remove css classes
|
|
this.el.classList.remove(SHOW_MENU);
|
|
this.contentEl.classList.remove(MENU_CONTENT_OPEN);
|
|
this.backdropEl.classList.remove(SHOW_BACKDROP);
|
|
|
|
// emit close event
|
|
this.ionClose.emit();
|
|
}
|
|
}
|
|
|
|
private updateState() {
|
|
const isActive = this.isActive();
|
|
|
|
// Close menu inmediately
|
|
if (!isActive && this._isOpen) {
|
|
// close if this menu is open, and should not be enabled
|
|
this.forceClosing();
|
|
}
|
|
|
|
if (!this.disabled && this.menuCtrl) {
|
|
this.menuCtrl._setActiveMenu(this);
|
|
}
|
|
assert(!this.isAnimating, 'can not be animating');
|
|
}
|
|
|
|
private forceClosing() {
|
|
assert(this._isOpen, 'menu cannot be closed');
|
|
|
|
this.isAnimating = true;
|
|
this.startAnimation(false, false);
|
|
this.afterAnimation(false);
|
|
}
|
|
|
|
hostData() {
|
|
const isRightSide = this.isRightSide;
|
|
return {
|
|
role: 'complementary',
|
|
class: {
|
|
[`menu-type-${this.type}`]: true,
|
|
'menu-enabled': !this.disabled,
|
|
'menu-side-right': isRightSide,
|
|
'menu-side-left': !isRightSide,
|
|
}
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return ([
|
|
<div class='menu-inner' ref={el => this.menuInnerEl = el}>
|
|
<slot></slot>
|
|
</div>,
|
|
|
|
<ion-backdrop
|
|
ref={el => this.backdropEl = el}
|
|
class='menu-backdrop'
|
|
tappable={false}
|
|
stopPropagation={false}/>,
|
|
|
|
<ion-gesture {...{
|
|
'canStart': this.canStart.bind(this),
|
|
'onWillStart': this.onWillStart.bind(this),
|
|
'onStart': this.onDragStart.bind(this),
|
|
'onMove': this.onDragMove.bind(this),
|
|
'onEnd': this.onDragEnd.bind(this),
|
|
'maxEdgeStart': this.maxEdgeStart,
|
|
'edge': this.side,
|
|
'disabled': !this.isActive() || !this.swipeEnabled,
|
|
'gestureName': 'menu-swipe',
|
|
'gesturePriority': 10,
|
|
'type': 'pan',
|
|
'direction': 'x',
|
|
'threshold': 10,
|
|
'attachTo': 'window',
|
|
'disableScroll': true,
|
|
}}/>
|
|
]);
|
|
}
|
|
}
|
|
|
|
function computeDelta(deltaX: number, isOpen: boolean, isRightSide: boolean): number {
|
|
return Math.max(0, (isOpen !== isRightSide) ? -deltaX : deltaX);
|
|
}
|
|
|
|
function checkEdgeSide(posX: number, isRightSide: boolean, maxEdgeStart: number): boolean {
|
|
if (isRightSide) {
|
|
return posX >= window.innerWidth - maxEdgeStart;
|
|
} else {
|
|
return posX <= maxEdgeStart;
|
|
}
|
|
}
|
|
|
|
const SHOW_MENU = 'show-menu';
|
|
const SHOW_BACKDROP = 'show-backdrop';
|
|
const MENU_CONTENT_OPEN = 'menu-content-open';
|
|
|
|
export interface MenuChangeEvent {
|
|
target: HTMLIonMenuElement;
|
|
detail: MenuChangeEventDetail;
|
|
}
|
|
|
|
export interface MenuChangeEventDetail {
|
|
disabled: boolean;
|
|
open: boolean;
|
|
}
|