javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu): rtl support

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-04-24 01:02:20 +02:00
parent 51d507998c
commit 53113366e2
16 changed files with 129 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/app/menu-controller.ts
View File

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

4
src/components/app/menu-interface.ts
View File

@ -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;

18
src/components/item/item-options.ts
View File

@ -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);
}
/**

34
src/components/item/item-sliding.ts
View File

@ -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;

32
src/components/menu/menu-gestures.ts
View File

@ -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()
};
}
}

34
src/components/menu/menu-types.ts
View File

@ -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);
}

39
src/components/menu/menu.ts
View File

@ -6,10 +6,10 @@ import { Config } from '../../config/config';
import { Content } from '../content/content';
import { DomController } from '../../platform/dom-controller';
import { GestureController, GESTURE_GO_BACK_SWIPE, BlockerDelegate } from '../../gestures/gesture-controller';
import { isTrueProperty, assert } from '../../util/util';
import { isTrueProperty, Side, isRightSide, assert } from '../../util/util';
import { Keyboard } from '../../platform/keyboard';
import { MenuContentGesture } from './menu-gestures';
import {Menu as MenuInterface, Side} from '../app/menu-interface';
import { Menu as MenuInterface } from '../app/menu-interface';
import { MenuController } from '../app/menu-controller';
import { MenuType } from './menu-types';
import { Nav } from '../nav/nav';
@ -206,13 +206,18 @@ export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
private _events: UIEventManager;
private _gestureBlocker: BlockerDelegate;
private _isPane: boolean = false;
private _side: Side = 'start';
private _side: Side;
/**
* @hidden
*/
isOpen: boolean = false;
/**
* @hidden
*/
isRightSide: boolean = false;
/**
* @hidden
*/
@ -262,18 +267,17 @@ export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
* @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';
get side(): Side {
return this._side;
}
set side(val: Side) {
this._side = val;
// Update gesture edge
if (this._gesture)
this._gesture.setEdges(this.side);
this.isRightSide = isRightSide(val, this._plt.isRTL);
if (this.isRightSide) {
this._side = 'right';
} else {
this._side = 'left';
}
}
/**
@ -337,6 +341,7 @@ export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
this._gestureBlocker = _gestureCtrl.createBlocker({
disable: [GESTURE_GO_BACK_SWIPE]
});
this.side = 'start';
}
/**
@ -485,13 +490,11 @@ export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
}
// user has finished dragging the menu
const isRightSide = this.isRightSide;
const opening = !this.isOpen;
let shouldComplete = false;
if (opening) {
shouldComplete = (this.side === 'right') ? shouldCompleteLeft : shouldCompleteRight;
} else {
shouldComplete = (this.side === 'right') ? shouldCompleteRight : shouldCompleteLeft;
}
const shouldComplete = (opening)
? isRightSide ? shouldCompleteLeft : shouldCompleteRight
: isRightSide ? shouldCompleteRight : shouldCompleteLeft;
this._getType().setProgressEnd(shouldComplete, stepValue, velocity, (isOpen: boolean) => {
console.debug('menu, swipeEnd', this.side);

26
src/components/menu/test/menu.spec.ts
View File

@ -1,6 +1,5 @@
import { MenuController } from '../../app/menu-controller';
import {mockMenu, mockPlatform} from '../../../util/mock-providers';
import {Side} from '../../app/menu-interface';
import { mockMenu, mockPlatform } from '../../../util/mock-providers';
describe('MenuController', () => {
@ -217,7 +216,7 @@ describe('MenuController', () => {
let someMenu = mockMenu();
menuCtrl._register(someMenu);
['left', 'right'].forEach((side: Side) => {
['left', 'right'].forEach((side: any) => {
someMenu.side = side;
expect(someMenu.side).toEqual(side);
@ -226,27 +225,6 @@ describe('MenuController', () => {
});
});
it('should switch menu side in runtime by direction', () => {
let platform = mockPlatform();
platform.setDir('ltr', true);
expect(platform.dir()).toEqual('ltr');
let someMenu = mockMenu(platform);
menuCtrl._register(someMenu);
expect(someMenu.side).toEqual('left');
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu);
platform.setDir('rtl', true);
expect(someMenu.side).toEqual('right');
let menu2 = menuCtrl.get('right');
expect(menu2).toEqual(someMenu);
});
});
describe('enable()', () => {

2
src/components/modal/test/basic/pages/page-one/page-one.ts
View File

@ -16,7 +16,7 @@ export class PageOne {
console.log('platforms', plt.platforms());
console.log('mode', config.get('mode'));
console.log('isRTL', plt.isRTL());
console.log('isRTL', plt.isRTL);
console.log('core', plt.is('core'));
console.log('cordova', plt.is('cordova'));
console.log('mobile', plt.is('mobile'));

2
src/components/split-pane/split-pane.scss
View File

@ -22,7 +22,7 @@ $split-pane-side-max-width: 28% !default;
contain: strict;
}
.split-pane.split-pane-rtl {
[dir="rtl"] .split-pane {
flex-direction: row-reverse;
}

3
src/components/split-pane/split-pane.ts
View File

@ -217,9 +217,6 @@ export class SplitPane extends Ion implements RootNode {
renderer: Renderer
) {
super(config, elementRef, renderer, 'split-pane');
if (_plt.isRTL()) {
this.setElementClass('split-pane-rtl', true);
}
}
/**

32
src/gestures/slide-edge-gesture.ts
View File

@ -7,7 +7,8 @@ import { Platform } from '../platform/platform';
* @hidden
*/
export class SlideEdgeGesture extends SlideGesture {
public edges: Array<string>;
public edges: string[];
public maxEdgeStart: any;
private _d: any;
@ -23,31 +24,42 @@ export class SlideEdgeGesture extends SlideGesture {
}
setEdges(edges: string) {
this.edges = edges.split(' ');
const isRTL = this.plt.isRTL;
this.edges = edges.split(' ').map((value) => {
switch (value) {
case 'start': return isRTL ? 'right' : 'left';
case 'end': return isRTL ? 'left' : 'right';
default: value;
}
});
}
canStart(ev: any): boolean {
let coord = pointerCoord(ev);
const coord = pointerCoord(ev);
this._d = this.getContainerDimensions();
return this.edges.every(edge => this._checkEdge(edge, coord));
}
getContainerDimensions() {
const plt = this.plt;
return {
left: 0,
top: 0,
width: this.plt.width(),
height: this.plt.height()
width: plt.width(),
height: plt.height()
};
}
_checkEdge(edge: string, pos: any) {
_checkEdge(edge: string, pos: any): boolean {
const data = this._d;
const maxEdgeStart = this.maxEdgeStart;
switch (edge) {
case 'left': return pos.x <= this._d.left + this.maxEdgeStart;
case 'right': return pos.x >= this._d.width - this.maxEdgeStart;
case 'top': return pos.y <= this._d.top + this.maxEdgeStart;
case 'bottom': return pos.y >= this._d.height - this.maxEdgeStart;
case 'left': return pos.x <= data.left + maxEdgeStart;
case 'right': return pos.x >= data.width - maxEdgeStart;
case 'top': return pos.y <= data.top + maxEdgeStart;
case 'bottom': return pos.y >= data.height - maxEdgeStart;
}
return false;
}
}

2
src/navigation/nav-controller-base.ts
View File

@ -587,7 +587,7 @@ export class NavControllerBase extends Ion implements NavController {
direction: opts.direction,
duration: (opts.animate === false ? 0 : opts.duration),
easing: opts.easing,
isRTL: this._config.plt.isRTL(),
isRTL: this._config.plt.isRTL,
ev: opts.ev,
};

12
src/navigation/swipe-back.ts
View File

@ -19,7 +19,7 @@ export class SwipeBackGesture extends SlideEdgeGesture {
) {
super(plt, plt.doc().body, {
direction: 'x',
edge: 'left',
edge: 'start',
maxEdgeStart: 75,
threshold: 5,
zone: false,
@ -30,14 +30,6 @@ export class SwipeBackGesture extends SlideEdgeGesture {
disableScroll: true
})
});
this.setSide(plt.dir());
Platform.dirChanged.subscribe(this.setSide.bind(this));
}
private setSide(dir: string) {
this.setEdges(dir === 'ltr' ? 'left' : 'right');
}
canStart(ev: any): boolean {
@ -58,7 +50,7 @@ export class SwipeBackGesture extends SlideEdgeGesture {
ev.preventDefault();
ev.stopPropagation();
let stepValue = (slide.distance / slide.max);
const stepValue = (slide.distance / slide.max);
this._nav.swipeBackProgress(stepValue);
}

11
src/platform/platform.ts
View File

@ -30,6 +30,7 @@ import { removeArrayItem } from '../util/util';
* @demo /docs/demos/src/platform/
*/
export class Platform {
private _win: Window;
private _doc: HTMLDocument;
private _versions: {[name: string]: PlatformVersion} = {};
@ -50,8 +51,6 @@ export class Platform {
private _isPortrait: boolean = null;
private _uiEvtOpts = false;
static dirChanged: EventEmitter<any> = new EventEmitter();
/** @hidden */
zone: NgZone;
@ -318,8 +317,8 @@ export class Platform {
* @param {boolean} updateDocument
*/
setDir(dir: string, updateDocument: boolean) {
this._dir = (dir || '').toLowerCase();
Platform.dirChanged.emit(this._dir);
this._dir = dir = (dir || '').toLowerCase();
this.isRTL = (dir === 'rtl');
if (updateDocument !== false) {
this._doc['documentElement'].setAttribute('dir', dir);
@ -344,9 +343,7 @@ export class Platform {
* [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir)
* @returns {boolean}
*/
isRTL(): boolean {
return (this._dir === 'rtl');
}
isRTL: boolean;
/**
* Set the app's language and optionally the country code, which will update

12
src/util/util.ts
View File

@ -128,6 +128,18 @@ export function isCheckedProperty(a: any, b: any): boolean {
return (a == b); // tslint:disable-line
};
export type Side = 'left' | 'right' | 'start' | 'end';
export function isRightSide(side: Side, isRTL: boolean): boolean {
switch (side) {
case 'right': return true;
case 'left': return false;
case 'end': return !isRTL;
// 'start' by default
default: return isRTL;
}
}
/** @hidden */
export function reorderArray(array: any[], indexes: {from: number, to: number}): any[] {