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

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

4
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();
}
@@ -144,7 +144,7 @@ export class ActionSheetCmp {
}
click(button: any) {
if (! this.enabled ) {
if (!this.enabled) {
return;
}

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
}

7
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) {
@@ -115,7 +113,8 @@ export function initEvents(s: Slides, plt: Platform): Function {
}
// return a function that removes all of the added listeners
return function() {
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);
}