mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(menu): use magic get/set for side update
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { OnInit, OnChanges, OnDestroy, SimpleChange, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { OnInit, OnDestroy, 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';
|
||||
@@ -16,6 +16,8 @@ import { Platform } from '../../platform/platform';
|
||||
import { UIEventManager } from '../../gestures/ui-event-manager';
|
||||
import { RootNode } from '../split-pane/split-pane';
|
||||
|
||||
type Side = 'left' | 'right' | 'start' | 'end';
|
||||
|
||||
/**
|
||||
* @name Menu
|
||||
* @description
|
||||
@@ -192,7 +194,7 @@ import { RootNode } from '../split-pane/split-pane';
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [{provide: RootNode, useExisting: forwardRef(() => Menu) }]
|
||||
})
|
||||
export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
export class Menu implements RootNode, OnInit, OnDestroy {
|
||||
|
||||
private _cntEle: HTMLElement;
|
||||
private _gesture: MenuContentGesture;
|
||||
@@ -205,6 +207,7 @@ export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
private _events: UIEventManager;
|
||||
private _gestureBlocker: BlockerDelegate;
|
||||
private _isPane: boolean = false;
|
||||
private _side: Side = 'start';
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
@@ -236,11 +239,6 @@ export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
*/
|
||||
@Input() id: string;
|
||||
|
||||
/**
|
||||
* @input {string} Which side of the view the menu should be placed. Default `"left"`.
|
||||
*/
|
||||
@Input() side: string;
|
||||
|
||||
/**
|
||||
* @input {string} The display type of the menu. Default varies based on the mode,
|
||||
* see the `menuType` in the [config](../../config/Config). Available options:
|
||||
@@ -261,6 +259,23 @@ export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
this.enable(isEnabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {string} Which side of the view the menu should be placed. Default `"left"`.
|
||||
*/
|
||||
@Input()
|
||||
get side() {
|
||||
if (this._side === 'right' || (this._side === 'start' && this._plt.isRTL()) || (this._side === 'end' && !this._plt.isRTL())) {
|
||||
return 'right';
|
||||
}
|
||||
return 'left';
|
||||
}
|
||||
|
||||
set side(val) {
|
||||
this._side = val;
|
||||
// Update gesture edge
|
||||
this._gesture.setEdges(this.side);
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, swiping the menu is enabled. Default `true`.
|
||||
*/
|
||||
@@ -338,11 +353,7 @@ export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n<ion-menu [content]="content"></ion-menu>\n\n<ion-nav #content></ion-nav>');
|
||||
}
|
||||
|
||||
// normalize the "side"
|
||||
if (this.side !== 'left' && this.side !== 'right') {
|
||||
this.side = 'left';
|
||||
}
|
||||
this.setElementAttribute('side', this.side);
|
||||
this.setElementAttribute('side', this._side);
|
||||
|
||||
// normalize the "type"
|
||||
if (!this.type) {
|
||||
@@ -371,17 +382,6 @@ export class Menu implements RootNode, OnInit, OnChanges, OnDestroy {
|
||||
this.enable(isEnabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
|
||||
// If side updated in runtime
|
||||
if (changes['side']) {
|
||||
// Update gesture's side
|
||||
this._gesture.setEdges(this.side);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user