javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into v4

Browse Source
This commit is contained in:
Adam Bradley
2017-04-23 21:54:56 -05:00
parent ccfce9d034 53113366e2
commit 9d526790fd
17 changed files with 210 additions and 107 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,4 +1,5 @@
import { Animation } from '../../animations/animation';
import { Side } from '../../util/util';
export interface Menu {
setOpen(shouldOpen: boolean, animated: boolean): Promise<boolean>;
@@ -9,8 +10,9 @@ export interface Menu {
swipeEnable(shouldEnable: boolean): Menu;
isOpen: boolean;
enabled: boolean;
side: string;
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);
}

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

@@ -1,4 +1,4 @@
import { 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';
@@ -6,7 +6,7 @@ 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 } from '../app/menu-interface';
@@ -193,7 +193,7 @@ import { RootNode } from '../split-pane/split-pane';
encapsulation: ViewEncapsulation.None,
providers: [{provide: RootNode, useExisting: forwardRef(() => Menu) }]
})
export class Menu implements RootNode, MenuInterface {
export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
private _cntEle: HTMLElement;
private _gesture: MenuContentGesture;
@@ -206,12 +206,18 @@ export class Menu implements RootNode, MenuInterface {
private _events: UIEventManager;
private _gestureBlocker: BlockerDelegate;
private _isPane: boolean = false;
private _side: Side;
/**
* @hidden
*/
isOpen: boolean = false;
/**
* @hidden
*/
isRightSide: boolean = false;
/**
* @hidden
*/
@@ -237,11 +243,6 @@ export class Menu implements RootNode, MenuInterface {
*/
@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:
@@ -262,6 +263,23 @@ export class Menu implements RootNode, MenuInterface {
this.enable(isEnabled);
}
/**
* @input {string} Which side of the view the menu should be placed. Default `"left"`.
*/
@Input()
get side(): Side {
return this._side;
}
set side(val: Side) {
this.isRightSide = isRightSide(val, this._plt.isRTL);
if (this.isRightSide) {
this._side = 'right';
} else {
this._side = 'left';
}
}
/**
* @input {boolean} If true, swiping the menu is enabled. Default `true`.
*/
@@ -323,6 +341,7 @@ export class Menu implements RootNode, MenuInterface {
this._gestureBlocker = _gestureCtrl.createBlocker({
disable: [GESTURE_GO_BACK_SWIPE]
});
this.side = 'start';
}
/**
@@ -339,11 +358,7 @@ export class Menu implements RootNode, MenuInterface {
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) {
@@ -475,13 +490,11 @@ export class Menu implements RootNode, MenuInterface {
}
// 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);

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

@@ -1,6 +1,5 @@
import { MenuController } from '../../app/menu-controller';
import { mockMenu } from '../../../util/mock-providers';
import { mockMenu, mockPlatform } from '../../../util/mock-providers';
describe('MenuController', () => {
@@ -116,6 +115,30 @@ describe('MenuController', () => {
expect(menu).toEqual(someMenu);
});
it('should get the only left menu on start ltr', () => {
let someMenu = mockMenu();
someMenu.side = 'start';
menuCtrl._register(someMenu);
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu);
});
it('should get the only left menu on end rtl', () => {
let platform = mockPlatform();
platform.setDir('rtl', true);
expect(platform.dir()).toEqual('rtl');
let someMenu = mockMenu(platform);
someMenu.side = 'end';
menuCtrl._register(someMenu);
expect(someMenu.side).toEqual('left');
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu);
});
it('should get the enabled left menu', () => {
let someMenu1 = mockMenu();
someMenu1.side = 'left';
@@ -155,6 +178,30 @@ describe('MenuController', () => {
expect(menu).toEqual(someMenu);
});
it('should get the only right menu on end ltr', () => {
let someMenu = mockMenu();
someMenu.side = 'end';
menuCtrl._register(someMenu);
let menu = menuCtrl.get('right');
expect(menu).toEqual(someMenu);
});
it('should get the only right menu on start rtl', () => {
let platform = mockPlatform();
platform.setDir('rtl', true);
expect(platform.dir()).toEqual('rtl');
let someMenu = mockMenu(platform);
someMenu.side = 'start';
menuCtrl._register(someMenu);
expect(someMenu.side).toEqual('right');
let menu = menuCtrl.get('right');
expect(menu).toEqual(someMenu);
});
it('should get the menu by left with id', () => {
let someMenu = mockMenu();
someMenu.id = 'myMenu';
@@ -165,6 +212,19 @@ describe('MenuController', () => {
expect(menu).toEqual(someMenu);
});
it('should switch menu side in runtime', () => {
let someMenu = mockMenu();
menuCtrl._register(someMenu);
['left', 'right'].forEach((side: any) => {
someMenu.side = side;
expect(someMenu.side).toEqual(side);
let menu = menuCtrl.get(side);
expect(menu).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);
}
}
/**