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

refactor(all): cosmetic changes + app.resize as event emitter

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-02-16 16:02:55 +01:00
parent f577e54f38
commit be0b6a8872
12 changed files with 103 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/action-sheet/action-sheet-component.ts
View File

@ -126,7 +126,7 @@ export class ActionSheetCmp {
ionViewDidEnter() {
this._plt.focusOutActiveElement();
let focusableEle = this._elementRef.nativeElement.querySelector('button');
const focusableEle = this._elementRef.nativeElement.querySelector('button');
if (focusableEle) {
focusableEle.focus();
}

36
src/components/action-sheet/action-sheet-transitions.ts
View File

@ -4,9 +4,9 @@ import { Transition } from '../../transitions/transition';
export class ActionSheetSlideIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '100%', '0%');
@ -18,9 +18,9 @@ export class ActionSheetSlideIn extends Transition {
export class ActionSheetSlideOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.4, 0);
wrapper.fromTo('translateY', '0%', '100%');
@ -32,9 +32,9 @@ export class ActionSheetSlideOut extends Transition {
export class ActionSheetMdSlideIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.26);
wrapper.fromTo('translateY', '100%', '0%');
@ -46,9 +46,9 @@ export class ActionSheetMdSlideIn extends Transition {
export class ActionSheetMdSlideOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.26, 0);
wrapper.fromTo('translateY', '0%', '100%');
@ -60,9 +60,9 @@ export class ActionSheetMdSlideOut extends Transition {
export class ActionSheetWpSlideIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.16);
wrapper.fromTo('translateY', '100%', '0%');
@ -74,9 +74,9 @@ export class ActionSheetWpSlideIn extends Transition {
export class ActionSheetWpSlideOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.1, 0);
wrapper.fromTo('translateY', '0%', '100%');

36
src/components/alert/alert-transitions.ts
View File

@ -7,9 +7,9 @@ import { Transition } from '../../transitions/transition';
*/
export class AlertPopIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
backdrop.fromTo('opacity', 0.01, 0.3);
@ -25,9 +25,9 @@ export class AlertPopIn extends Transition {
export class AlertPopOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
backdrop.fromTo('opacity', 0.3, 0);
@ -43,9 +43,9 @@ export class AlertPopOut extends Transition {
export class AlertMdPopIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
backdrop.fromTo('opacity', 0.01, 0.5);
@ -61,9 +61,9 @@ export class AlertMdPopIn extends Transition {
export class AlertMdPopOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
backdrop.fromTo('opacity', 0.5, 0);
@ -79,9 +79,9 @@ export class AlertMdPopOut extends Transition {
export class AlertWpPopIn extends Transition {
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.enteringView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.01, 1).fromTo('scale', 1.3, 1);
backdrop.fromTo('opacity', 0.01, 0.5);
@ -97,9 +97,9 @@ export class AlertWpPopIn extends Transition {
export class AlertWpPopOut extends Transition {
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
let wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
const ele = this.leavingView.pageRef().nativeElement;
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const wrapper = new Animation(this.plt, ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 1.3);
backdrop.fromTo('opacity', 0.5, 0);

15
src/components/app/app-root.ts
View File

@ -25,14 +25,11 @@ export const AppRootToken = new OpaqueToken('USERROOT');
export class IonicApp extends Ion implements OnInit {
private _stopScrollPlugin: any;
private _tmr: number;
@ViewChild('viewport', {read: ViewContainerRef}) _viewport: ViewContainerRef;
@ViewChild('modalPortal', { read: OverlayPortal }) _modalPortal: OverlayPortal;
@ViewChild('overlayPortal', { read: OverlayPortal }) _overlayPortal: OverlayPortal;
@ViewChild('loadingPortal', { read: OverlayPortal }) _loadingPortal: OverlayPortal;
@ViewChild('toastPortal', { read: OverlayPortal }) _toastPortal: OverlayPortal;
constructor(
@ -92,9 +89,6 @@ export class IonicApp extends Ion implements OnInit {
this._plt.prepareReady();
}
/**
* @private
*/
_getPortal(portal?: AppPortal): OverlayPortal {
if (portal === AppPortal.LOADING) {
return this._loadingPortal;
@ -110,9 +104,6 @@ export class IonicApp extends Ion implements OnInit {
return this._overlayPortal;
}
/**
* @private
*/
_getActivePortal(): OverlayPortal {
const defaultPortal = this._overlayPortal;
const modalPortal = this._modalPortal;
@ -139,12 +130,8 @@ export class IonicApp extends Ion implements OnInit {
} else if (hasDefault) {
return defaultPortal;
}
}
/**
* @private
*/
_disableScroll(shouldDisableScroll: boolean) {
if (shouldDisableScroll) {
this.stopScroll().then(() => {

8
src/components/menu/menu-controller.ts
View File

@ -1,7 +1,7 @@
import { Menu } from './menu';
import { MenuType } from './menu-types';
import { Platform } from '../../platform/platform';
import { removeArrayItem } from '../../util/util';
import { removeArrayItem, assert } from '../../util/util';
/**
@ -296,14 +296,16 @@ export class MenuController {
/**
* @private
*/
register(menu: Menu) {
_register(menu: Menu) {
assert(this._menus.indexOf(menu) < 0, 'menu was already registered');
this._menus.push(menu);
}
/**
* @private
*/
unregister(menu: Menu) {
_unregister(menu: Menu) {
assert(this._menus.indexOf(menu) >= 0, 'menu is not registered');
removeArrayItem(this._menus, menu);
}

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

@ -54,20 +54,21 @@ export class MenuType {
if (!this.isOpening && !shouldComplete) {
isOpen = true;
}
this.ani.onFinish(() => {
const ani = this.ani;
ani.onFinish(() => {
this.isOpening = false;
done(isOpen);
}, true);
let factor = 1 - Math.min(Math.abs(velocity) / 4, 0.7);
let dur = this.ani.getDuration() * factor;
const factor = 1 - Math.min(Math.abs(velocity) / 4, 0.7);
const dur = ani.getDuration() * factor;
this.ani.progressEnd(shouldComplete, currentStepValue, dur);
ani.progressEnd(shouldComplete, currentStepValue, dur);
}
destroy() {
this.ani && this.ani.destroy();
this.ani = null;
}
}

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

@ -359,7 +359,7 @@ export class Menu {
this._cntEle.classList.add('menu-content-' + this.type);
// register this menu with the app's menu controller
this._menuCtrl.register(this);
this._menuCtrl._register(this);
}
/**
@ -656,7 +656,7 @@ export class Menu {
* @private
*/
ngOnDestroy() {
this._menuCtrl.unregister(this);
this._menuCtrl._unregister(this);
this._events.destroy();
this._gesture && this._gesture.destroy();
this._type && this._type.destroy();

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

@ -13,7 +13,7 @@ describe('MenuController', () => {
it('should get the only menu', () => {
let someMenu = mockMenu();
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get();
expect(menu).toEqual(someMenu);
@ -21,7 +21,7 @@ describe('MenuController', () => {
it('should get the only menu if menuId === ""', () => {
let someMenu = mockMenu();
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('');
expect(menu).toEqual(someMenu);
@ -30,11 +30,11 @@ describe('MenuController', () => {
it('should get the enabled menu when multiple menus', () => {
let someMenu1 = mockMenu();
someMenu1.enabled = false;
menuCtrl.register(someMenu1);
menuCtrl._register(someMenu1);
let someMenu2 = mockMenu();
someMenu2.enabled = true;
menuCtrl.register(someMenu2);
menuCtrl._register(someMenu2);
let menu = menuCtrl.get();
expect(menu).toEqual(someMenu2);
@ -52,7 +52,7 @@ describe('MenuController', () => {
it('should be null if no matching menus with id', () => {
let someMenu = mockMenu();
someMenu.id = 'whatever';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('myMenu');
expect(menu).toEqual(null);
@ -61,7 +61,7 @@ describe('MenuController', () => {
it('should get the menu by id with matching id', () => {
let someMenu = mockMenu();
someMenu.id = 'myMenu';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('myMenu');
expect(menu).toEqual(someMenu);
@ -71,7 +71,7 @@ describe('MenuController', () => {
let someMenu = mockMenu();
someMenu.id = 'myMenu';
someMenu.side = 'left';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('myMenu');
expect(menu).toEqual(someMenu);
@ -80,11 +80,11 @@ describe('MenuController', () => {
it('should get the menu by id with matching id when multiple menus', () => {
let someMenu1 = mockMenu();
someMenu1.id = 'myMenu1';
menuCtrl.register(someMenu1);
menuCtrl._register(someMenu1);
let someMenu2 = mockMenu();
someMenu2.id = 'myMenu2';
menuCtrl.register(someMenu2);
menuCtrl._register(someMenu2);
let menu = menuCtrl.get('myMenu1');
expect(menu).toEqual(someMenu1);
@ -110,7 +110,7 @@ describe('MenuController', () => {
it('should get the only left menu', () => {
let someMenu = mockMenu();
someMenu.side = 'left';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu);
@ -120,12 +120,12 @@ describe('MenuController', () => {
let someMenu1 = mockMenu();
someMenu1.side = 'left';
someMenu1.enabled = false;
menuCtrl.register(someMenu1);
menuCtrl._register(someMenu1);
let someMenu2 = mockMenu();
someMenu2.side = 'left';
someMenu2.enabled = true;
menuCtrl.register(someMenu2);
menuCtrl._register(someMenu2);
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu2);
@ -135,12 +135,12 @@ describe('MenuController', () => {
let someMenu1 = mockMenu();
someMenu1.side = 'left';
someMenu1.enabled = false;
menuCtrl.register(someMenu1);
menuCtrl._register(someMenu1);
let someMenu2 = mockMenu();
someMenu2.side = 'left';
someMenu2.enabled = false;
menuCtrl.register(someMenu2);
menuCtrl._register(someMenu2);
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu1);
@ -149,7 +149,7 @@ describe('MenuController', () => {
it('should get the only right menu', () => {
let someMenu = mockMenu();
someMenu.side = 'right';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('right');
expect(menu).toEqual(someMenu);
@ -159,7 +159,7 @@ describe('MenuController', () => {
let someMenu = mockMenu();
someMenu.id = 'myMenu';
someMenu.side = 'left';
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
let menu = menuCtrl.get('left');
expect(menu).toEqual(someMenu);
@ -172,7 +172,7 @@ describe('MenuController', () => {
it('should enable a menu', () => {
let someMenu = mockMenu();
someMenu.enabled = true;
menuCtrl.register(someMenu);
menuCtrl._register(someMenu);
someMenu._menuCtrl = menuCtrl;
let menu = menuCtrl.enable(true);
@ -188,21 +188,21 @@ describe('MenuController', () => {
someMenu1.side = 'left';
someMenu1.id = 'menu1';
someMenu1._menuCtrl = menuCtrl;
menuCtrl.register(someMenu1);
menuCtrl._register(someMenu1);
let someMenu2 = mockMenu();
someMenu2.enabled = false;
someMenu2.side = 'left';
someMenu2.id = 'menu2';
someMenu2._menuCtrl = menuCtrl;
menuCtrl.register(someMenu2);
menuCtrl._register(someMenu2);
let someMenu3 = mockMenu();
someMenu3.enabled = true;
someMenu3.side = 'right';
someMenu3.id = 'menu2';
someMenu3._menuCtrl = menuCtrl;
menuCtrl.register(someMenu3);
menuCtrl._register(someMenu3);
menuCtrl.enable(true, 'menu1');
expect(someMenu1.enabled).toEqual(true);
@ -224,15 +224,15 @@ describe('MenuController', () => {
it('should register a menu', () => {
let menu = mockMenu();
menuCtrl.register(menu);
menuCtrl._register(menu);
expect(menuCtrl.getMenus().length).toEqual(1);
let menu2 = mockMenu();
menuCtrl.register(menu2);
menuCtrl._register(menu2);
expect(menuCtrl.getMenus().length).toEqual(2);
menuCtrl.unregister(menu2);
menuCtrl.unregister(menu);
menuCtrl._unregister(menu2);
menuCtrl._unregister(menu);
expect(menuCtrl.getMenus().length).toEqual(0);
});

17
src/components/show-hide-when/show-hide-when.ts
View File

@ -9,6 +9,7 @@ import { Platform } from '../../platform/platform';
export class DisplayWhen {
isMatch: boolean = false;
conditions: string[];
resizeObs: any;
constructor(conditions: string, public _plt: Platform, public zone: NgZone) {
if (!conditions) return;
@ -26,12 +27,7 @@ export class DisplayWhen {
if (this.orientation()) {
// add window resize listener
_plt.onResize(() => {
zone.run(() => {
this.orientation();
});
});
return;
this.resizeObs = _plt.resize.subscribe(this.orientation.bind(this));
}
}
@ -49,8 +45,13 @@ export class DisplayWhen {
return true;
}
}
return false;
}
ngOnDestroy() {
this.resizeObs && this.resizeObs.unsubscribe();
this.resizeObs = null;
}
}
/**
@ -110,6 +111,8 @@ export class ShowWhen extends DisplayWhen {
super(showWhen, plt, zone);
}
// ngOnDestroy is implemente in DisplayWhen
}
/**
@ -169,4 +172,6 @@ export class HideWhen extends DisplayWhen {
super(hideWhen, plt, zone);
}
// ngOnDestroy is implemente in DisplayWhen
}

5
src/components/slides/swiper/swiper-events.ts
View File

@ -84,9 +84,7 @@ export function initEvents(s: Slides, plt: Platform): Function {
}
// onresize
unregs.push(plt.onResize(() => {
onResize(s, plt, false);
}));
let resizeObs = plt.resize.subscribe(() => onResize(s, plt, false));
// Next, Prev, Index
if (s.nextButton) {
@ -116,6 +114,7 @@ export function initEvents(s: Slides, plt: Platform): Function {
// return a function that removes all of the added listeners
return function () {
resizeObs.unsubscribe();
unregs.forEach(unreg => {
unreg();
});

7
src/components/tabs/tabs.ts
View File

@ -177,6 +177,8 @@ export class Tabs extends Ion implements AfterViewInit {
id: string;
/** @internal */
_selectHistory: string[] = [];
/** @internal */
_resizeObs: any;
/**
* @input {string} The color to use from your Sass `$colors` map.
@ -284,6 +286,7 @@ export class Tabs extends Ion implements AfterViewInit {
}
ngOnDestroy() {
this._resizeObs && this._resizeObs.unsubscribe();
this.parent.unregisterChildNav(this);
}
@ -296,7 +299,7 @@ export class Tabs extends Ion implements AfterViewInit {
this._setConfig('tabsHighlight', this.tabsHighlight);
if (this.tabsHighlight) {
this._plt.onResize(() => {
this._resizeObs = this._plt.resize.subscribe(() => {
this._highlight.select(this.getSelected());
});
}
@ -364,7 +367,7 @@ export class Tabs extends Ion implements AfterViewInit {
/**
* @private
*/
add(tab: Tab) {
add(tab: Tab): string {
this._tabs.push(tab);
return this.id + '-' + (++this._ids);
}

29
src/platform/platform.ts
View File

@ -38,7 +38,6 @@ export class Platform {
private _ua: string;
private _qp = new QueryParams();
private _nPlt: string;
private _onResizes: Array<Function> = [];
private _readyPromise: Promise<any>;
private _readyResolve: any;
private _bbActions: BackButtonAction[] = [];
@ -404,6 +403,13 @@ export class Platform {
*/
resume: EventEmitter<Event> = new EventEmitter<Event>();
/**
* The resize event emits when the native platform pulls the application
* out from the background. This event would emit when a Cordova app comes
* out from the background, however, it would not fire on a standard web browser.
*/
resize: EventEmitter<Event> = new EventEmitter<Event>();
/**
* The back button event is triggered when the user presses the native
* platform's back button, also referred to as the "hardware" back button.
@ -737,18 +743,6 @@ export class Platform {
}
}
/**
* @private
*/
onResize(cb: Function): Function {
const self = this;
self._onResizes.push(cb);
return function() {
removeArrayItem(self._onResizes, cb);
};
}
/**
* @private
*/
@ -812,14 +806,7 @@ export class Platform {
if (this.hasFocusedTextInput() === false) {
this._isPortrait = null;
}
for (let i = 0; i < this._onResizes.length; i++) {
try {
this._onResizes[i]();
} catch (e) {
console.error(e);
}
}
this.resize.emit();
}, 200);
}, { passive: true, zone: true });
}, 2000);