fix(menu): rtl support

Author: manucorporat

src/components/app/menu-controller.ts

@@ -248,7 +248,9 @@ export class MenuController {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
       menu = this._menus.find(m => m.side === menuId && m.enabled);
-      if (menu) return menu;
+      if (menu) {
+        return menu;
+      }
 
       // didn't find a menu side that is enabled
       // so try to get the first menu side found

src/components/app/menu-interface.ts

@@ -1,6 +1,5 @@
 import { Animation } from '../../animations/animation';
-
-export type Side = 'left' | 'right' | 'start' | 'end';
+import { Side } from '../../util/util';
 
 export interface Menu {
   setOpen(shouldOpen: boolean, animated: boolean): Promise<boolean>;
@@ -13,6 +12,7 @@ export interface Menu {
   enabled: boolean;
   side: Side;
   id: string;
+  isRightSide: boolean;
   isAnimating(): boolean;
   width(): number;
   getContentElement(): HTMLElement;

src/components/item/item-options.ts

@@ -1,7 +1,8 @@
 import { Directive, ElementRef, EventEmitter, Input, Output, Renderer } from '@angular/core';
 
 import { Platform } from '../../platform/platform';
-import { ITEM_SIDE_FLAG_LEFT, ITEM_SIDE_FLAG_RIGHT, ItemSliding } from './item-sliding';
+import { Side, isRightSide } from '../../util/util';
+import { ItemSliding } from './item-sliding';
 
 /**
  * @name ItemOptions
@@ -33,7 +34,7 @@ export class ItemOptions {
    * @input {string} The side the option button should be on. Defaults to `"right"`.
    * If you have multiple `ion-item-options`, a side must be provided for each.
    */
-  @Input() side: string;
+  @Input() side: Side;
 
   /**
    * @output {event} Emitted when the item has been fully swiped.
@@ -49,17 +50,8 @@ export class ItemOptions {
   /**
    * @hidden
    */
-  getSides(): number {
-    switch (this.side) {
-      case 'left':
-        return ITEM_SIDE_FLAG_LEFT;
-      case 'right':
-        return ITEM_SIDE_FLAG_RIGHT;
-      case 'start':
-        return this._plt.isRTL() ? ITEM_SIDE_FLAG_RIGHT : ITEM_SIDE_FLAG_LEFT;
-      default: // end
-        return this._plt.isRTL() ? ITEM_SIDE_FLAG_LEFT : ITEM_SIDE_FLAG_RIGHT;
-    }
+  isRightSide(): boolean {
+    return isRightSide(this.side, this._plt.isRTL);
   }
 
   /**

src/components/item/item-sliding.ts

@@ -10,10 +10,10 @@ import { ItemOptions } from './item-options';
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 
-export const ITEM_SIDE_FLAG_NONE = 0;
-export const ITEM_SIDE_FLAG_LEFT = 1 << 0;
-export const ITEM_SIDE_FLAG_RIGHT = 1 << 1;
-export const ITEM_SIDE_FLAG_BOTH = ITEM_SIDE_FLAG_LEFT | ITEM_SIDE_FLAG_RIGHT;
+const ITEM_SIDE_FLAG_NONE = 0;
+const ITEM_SIDE_FLAG_LEFT = 1 << 0;
+const ITEM_SIDE_FLAG_RIGHT = 1 << 1;
+const ITEM_SIDE_FLAG_BOTH = ITEM_SIDE_FLAG_LEFT | ITEM_SIDE_FLAG_RIGHT;
 
 
 const enum SlidingState {
@@ -121,6 +121,7 @@ const enum SlidingState {
   encapsulation: ViewEncapsulation.None
 })
 export class ItemSliding {
+
   private _openAmount: number = 0;
   private _startX: number = 0;
   private _optsWidthRightSide: number = 0;
@@ -166,7 +167,8 @@ export class ItemSliding {
     private _dom: DomController,
     private _renderer: Renderer,
     private _elementRef: ElementRef,
-    private _zone: NgZone) {
+    private _zone: NgZone
+  ) {
     list && list.containsSlidingItem(true);
     _elementRef.nativeElement.$ionComponent = this;
     this.setElementClass('item-wrapper', true);
@@ -180,13 +182,13 @@ export class ItemSliding {
     this._leftOptions = this._rightOptions = null;
 
     for (var item of itemOptions.toArray()) {
-      var side = item.getSides();
-      if (side === ITEM_SIDE_FLAG_LEFT) {
-        this._leftOptions = item;
-      } else {
+      if (item.isRightSide()) {
         this._rightOptions = item;
+        sides |= ITEM_SIDE_FLAG_RIGHT;
+      } else {
+        this._leftOptions = item;
+        sides |= ITEM_SIDE_FLAG_LEFT;
       }
-      sides |= item.getSides();
     }
     this._optsDirty = true;
     this._sides = sides;
@@ -203,7 +205,7 @@ export class ItemSliding {
    * @hidden
    */
   getSlidingPercent(): number {
-    let openAmount = this._openAmount;
+    const openAmount = this._openAmount;
     if (openAmount > 0) {
       return openAmount / this._optsWidthRightSide;
     } else if (openAmount < 0) {
@@ -272,9 +274,9 @@ export class ItemSliding {
 
     // Check if the drag didn't clear the buttons mid-point
     // and we aren't moving fast enough to swipe open
-    let isResetDirection = (this._openAmount > 0) === !(velocity < 0);
-    let isMovingFast = Math.abs(velocity) > 0.3;
-    let isOnCloseZone = Math.abs(this._openAmount) < Math.abs(restingPoint / 2);
+    const isResetDirection = (this._openAmount > 0) === !(velocity < 0);
+    const isMovingFast = Math.abs(velocity) > 0.3;
+    const isOnCloseZone = Math.abs(this._openAmount) < Math.abs(restingPoint / 2);
     if (swipeShouldReset(isResetDirection, isMovingFast, isOnCloseZone)) {
       restingPoint = 0;
     }
@@ -330,14 +332,14 @@ export class ItemSliding {
 
     } else {
       if (openAmount > 0) {
-        let state = (openAmount >= (this._optsWidthRightSide + SWIPE_MARGIN))
+        var state = (openAmount >= (this._optsWidthRightSide + SWIPE_MARGIN))
           ? SlidingState.Right | SlidingState.SwipeRight
           : SlidingState.Right;
 
         this._setState(state);
 
       } else if (openAmount < 0) {
-        let state = (openAmount <= (-this._optsWidthLeftSide - SWIPE_MARGIN))
+        var state = (openAmount <= (-this._optsWidthLeftSide - SWIPE_MARGIN))
           ? SlidingState.Left | SlidingState.SwipeLeft
           : SlidingState.Left;
 

src/components/menu/menu-gestures.ts

@@ -33,7 +33,7 @@ export class MenuContentGesture extends SlideEdgeGesture {
   }
 
   canStart(ev: any): boolean {
-    let menu = this.menu;
+    const menu = this.menu;
     if (!menu.canSwipe()) {
       return false;
     }
@@ -57,21 +57,21 @@ export class MenuContentGesture extends SlideEdgeGesture {
   }
 
   onSlide(slide: SlideData, ev: any) {
-    let z = (this.menu.side === 'right' ? slide.min : slide.max);
-    let stepValue = (slide.distance / z);
+    const z = (this.menu.isRightSide ? slide.min : slide.max);
+    const stepValue = (slide.distance / z);
 
     this.menu._swipeProgress(stepValue);
   }
 
   onSlideEnd(slide: SlideData, ev: any) {
-    let z = (this.menu.side === 'right' ? slide.min : slide.max);
-    let currentStepValue = (slide.distance / z);
-    let velocity = slide.velocity;
+    let z = (this.menu.isRightSide ? slide.min : slide.max);
+    const currentStepValue = (slide.distance / z);
+    const velocity = slide.velocity;
     z = Math.abs(z * 0.5);
-    let shouldCompleteRight = (velocity >= 0)
+    const shouldCompleteRight = (velocity >= 0)
       && (velocity > 0.2 || slide.delta > z);
 
-    let shouldCompleteLeft = (velocity <= 0)
+    const shouldCompleteLeft = (velocity <= 0)
       && (velocity < -0.2 || slide.delta < -z);
 
     console.debug('menu gesture, onSlideEnd', this.menu.side,
@@ -88,24 +88,26 @@ export class MenuContentGesture extends SlideEdgeGesture {
   }
 
   getElementStartPos(slide: SlideData, ev: any) {
-    if (this.menu.side === 'right') {
-      return this.menu.isOpen ? slide.min : slide.max;
+    const menu = this.menu;
+    if (menu.isRightSide) {
+      return menu.isOpen ? slide.min : slide.max;
     }
     // left menu
-    return this.menu.isOpen ? slide.max : slide.min;
+    return menu.isOpen ? slide.max : slide.min;
   }
 
-  getSlideBoundaries(): {min: number, max: number} {
-    if (this.menu.side === 'right') {
+  getSlideBoundaries(): { min: number, max: number } {
+    const menu = this.menu;
+    if (menu.isRightSide) {
       return {
-        min: -this.menu.width(),
+        min: -menu.width(),
         max: 0
       };
     }
     // left menu
     return {
       min: 0,
-      max: this.menu.width()
+      max: menu.width()
     };
   }
 }

src/components/menu/menu-types.ts

@@ -12,6 +12,7 @@ import { Platform } from '../../platform/platform';
  * and registers itself with Menu.
  */
 export class MenuType implements IMenuType {
+
   ani: Animation;
   isOpening: boolean;
 
@@ -67,7 +68,7 @@ export class MenuType implements IMenuType {
   }
 
   destroy() {
-    this.ani && this.ani.destroy();
+    this.ani.destroy();
     this.ani = null;
   }
 
@@ -84,8 +85,8 @@ class MenuRevealType extends MenuType {
   constructor(menu: Menu, plt: Platform) {
     super(plt);
 
-    let openedX = (menu.width() * (menu.side === 'right' ? -1 : 1)) + 'px';
-    let contentOpen = new Animation(plt, menu.getContentElement());
+    const openedX = (menu.width() * (menu.isRightSide ? -1 : 1)) + 'px';
+    const contentOpen = new Animation(plt, menu.getContentElement());
     contentOpen.fromTo('translateX', '0px', openedX);
     this.ani.add(contentOpen);
   }
@@ -104,24 +105,24 @@ class MenuPushType extends MenuType {
     super(plt);
 
     let contentOpenedX: string, menuClosedX: string, menuOpenedX: string;
-
-    if (menu.side === 'right') {
+    const width = menu.width();
+    if (menu.isRightSide) {
       // right side
-      contentOpenedX = -menu.width() + 'px';
-      menuClosedX = menu.width() + 'px';
+      contentOpenedX = -width + 'px';
+      menuClosedX = width + 'px';
       menuOpenedX = '0px';
 
     } else {
-      contentOpenedX = menu.width() + 'px';
+      contentOpenedX = width + 'px';
       menuOpenedX = '0px';
-      menuClosedX = -menu.width() + 'px';
+      menuClosedX = -width + 'px';
     }
 
-    let menuAni = new Animation(plt, menu.getMenuElement());
+    const menuAni = new Animation(plt, menu.getMenuElement());
     menuAni.fromTo('translateX', menuClosedX, menuOpenedX);
     this.ani.add(menuAni);
 
-    let contentApi = new Animation(plt, menu.getContentElement());
+    const contentApi = new Animation(plt, menu.getContentElement());
     contentApi.fromTo('translateX', '0px', contentOpenedX);
     this.ani.add(contentApi);
   }
@@ -140,22 +141,23 @@ class MenuOverlayType extends MenuType {
     super(plt);
 
     let closedX: string, openedX: string;
-    if (menu.side === 'right') {
+    const width = menu.width();
+    if (menu.isRightSide) {
       // right side
-      closedX = 8 + menu.width() + 'px';
+      closedX = 8 + width + 'px';
       openedX = '0px';
 
     } else {
       // left side
-      closedX = -(8 + menu.width()) + 'px';
+      closedX = -(8 + width) + 'px';
       openedX = '0px';
     }
 
-    let menuAni = new Animation(plt, menu.getMenuElement());
+    const menuAni = new Animation(plt, menu.getMenuElement());
     menuAni.fromTo('translateX', closedX, openedX);
     this.ani.add(menuAni);
 
-    let backdropApi = new Animation(plt, menu.getBackdropElement());
+    const backdropApi = new Animation(plt, menu.getBackdropElement());
     backdropApi.fromTo('opacity', 0.01, 0.35);
     this.ani.add(backdropApi);
   }