refactor(menu): use magic get/set for side update

This commit is contained in:
Amit Moryossef
2017-04-21 00:55:50 +03:00
parent 89a1715661
commit e50eb184ec

View File

@@ -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
*/