From e50eb184ec5af3cfdb3634b1d7cfe1899da36054 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Fri, 21 Apr 2017 00:55:50 +0300
Subject: [PATCH] refactor(menu): use magic get/set for side update

---
 src/components/menu/menu.ts | 46 ++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 5feb245822..9ed8942d52 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -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
    */