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

refactor(overlay): use NavController

Browse Source
This commit is contained in:
Adam Bradley
2015-11-21 19:18:47 -06:00
parent a7505f6ac9
commit e1c160eb54
22 changed files with 488 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
ionic/components/modal/modal.ts
View File

@ -3,22 +3,24 @@ import {Injectable} from 'angular2/angular2';
import {OverlayController} from '../overlay/overlay-controller';
import {Config} from '../../config/config';
import {Animation} from '../../animations/animation';
import * as util from 'ionic/util';
import {extend} from 'ionic/util';
/**
* The Modal is a content pane that can go over the user's main view temporarily.
* Usually used for making a choice or editing an item.
* The Modal is a content pane that can go over the user's current page.
* Usually used for making a choice or editing an item. A modal can be opened
* similar to how NavController#push works, where you pass it a Page component,
* along with optional Page params, and options for presenting the modal.
*
* @usage
* ```ts
* class MyApp {
*
* constructor(modal: Modal, app: IonicApp, Config: Config) {
* constructor(modal: Modal) {
* this.modal = modal;
* }
*
* openModal() {
* this.modal.open(ContactModal, {
* this.modal.open(ContactPage, null, {
* enterAnimation: 'my-fade-in',
* leaveAnimation: 'my-fade-out',
* handle: 'my-modal'
@ -32,20 +34,24 @@ export class Modal {
constructor(ctrl: OverlayController, config: Config) {
this.ctrl = ctrl;
this._defaults = {
enterAnimation: config.get('modalEnter') || 'modal-slide-in',
leaveAnimation: config.get('modalLeave') || 'modal-slide-out',
};
this.config = config;
}
/**
* TODO
* @param {Type} componentType TODO
* @param {Object} [opts={}] TODO
* @returns {TODO} TODO
* @param {TODO} componentType TODO
* @param {TODO} [params={}] TODO
* @param {TODO} [opts={}] TODO
* @returns {Promise} TODO
*/
open(componentType: Type, opts={}) {
return this.ctrl.open(OVERLAY_TYPE, componentType, util.extend(this._defaults, opts));
open(componentType: Type, params={}, opts={}) {
opts = extend({
pageType: OVERLAY_TYPE,
enterAnimation: this.config.get('modalEnter'),
leaveAnimation: this.config.get('modalLeave'),
}, opts);
return this.ctrl.open(componentType, params, opts);
}
/**
@ -55,7 +61,7 @@ export class Modal {
*/
get(handle) {
if (handle) {
return this.ctrl.getByHandle(handle, OVERLAY_TYPE);
return this.ctrl.getByHandle(handle);
}
return this.ctrl.getByType(OVERLAY_TYPE);
}
@ -69,20 +75,21 @@ const OVERLAY_TYPE = 'modal';
* Animations for modals
*/
class ModalSlideIn extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView, opts) {
super(enteringView.pageRef(), opts);
this
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.fromTo('translateY', '100%', '0%');
.fromTo('translateY', '100%', '0%')
.before.addClass('show-page');
}
}
Animation.register('modal-slide-in', ModalSlideIn);
class ModalSlideOut extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView, opts) {
super(leavingView.pageRef(), opts);
this
.easing('ease-out')
.duration(250)
@ -93,21 +100,22 @@ Animation.register('modal-slide-out', ModalSlideOut);
class ModalMDSlideIn extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView, opts) {
super(enteringView.pageRef(), opts);
this
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(280)
.fromTo('translateY', '40px', '0px')
.fadeIn();
.fadeIn()
.before.addClass('show-page');
}
}
Animation.register('modal-md-slide-in', ModalMDSlideIn);
class ModalMDSlideOut extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView, opts) {
super(leavingView.pageRef(), opts);
this
.duration(200)
.easing('cubic-bezier(0.47,0,0.745,0.715)')

87
ionic/components/modal/test/basic/index.ts
View File

@ -1,13 +1,13 @@
import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
import {App, Page, Config, Platform} from 'ionic/ionic';
import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class MyAppCmp {
class E2EApp {
constructor(modal: Modal, app: IonicApp, config: Config, platform: Platform) {
constructor(modal: Modal, config: Config, platform: Platform) {
this.modal = modal;
console.log('platforms', platform.platforms());
@ -25,7 +25,7 @@ class MyAppCmp {
console.log('windows phone', platform.is('windowsphone'))
platform.ready().then(() => {
console.log('platform.ready')
console.log('platform.ready');
});
}
@ -38,13 +38,14 @@ class MyAppCmp {
}
openModalChildNav() {
this.modal.open(ContactModal, {
this.modal.open(ContactUs, null, {
handle: 'my-awesome-modal'
});
}
openModalCustomAnimation() {
this.modal.open(ContactModal, {
this.modal.open(ContactUs, null, {
handle: 'my-awesome-modal',
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out'
});
@ -67,21 +68,22 @@ class PlainPage {
}
}
@Page({
template: `
<ion-toolbar>
<ion-title>Modals</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-title>Another toolbar</ion-title>
</ion-toolbar>
<ion-content padding>
<button block danger (click)="closeModal()" class="e2eCloseToolbarModal">
<icon close></icon>
Close Modal
</button>
<button block danger (click)="closeModal()" class="e2eCloseToolbarModal">
<icon close></icon>
Close Modal
</button>
</ion-content>
`
})
@ -97,38 +99,43 @@ class ToolbarModal {
@Page({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class ContactModal {
class ContactUs {
constructor() {
console.log('ContactModal constructor')
console.log('ContactUs constructor');
this.rootView = ModalFirstPage;
}
onPageLoaded() {
console.log('ContactModal onPageLoaded');
console.log('ContactUs onPageLoaded');
}
onPageWillEnter() {
console.log('ContactModal onPageWillEnter');
console.log('ContactUs onPageWillEnter');
}
onPageDidEnter() {
console.log('ContactModal onPageDidEnter');
console.log('ContactUs onPageDidEnter');
}
onPageWillLeave() {
console.log('ContactModal onPageWillLeave');
console.log('ContactUs onPageWillLeave');
}
onPageDidLeave() {
console.log('ContactModal onPageDidLeave');
console.log('ContactUs onPageDidLeave');
}
onPageWillUnload() {
console.log('ContactModal onPageWillUnload');
console.log('ContactUs onPageWillUnload');
}
onPageDidUnload() {
console.log('ContactModal onPageDidUnload');
console.log('ContactUs onPageDidUnload');
}
}
@Page({
template: `
<ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button class="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
<ion-navbar *navbar>
<ion-title>First Page Header</ion-title>
<ion-nav-items primary>
<button class="e2eCloseMenu" (click)="closeModal()">Close</button>
</ion-nav-items>
</ion-navbar>
<ion-content padding>
<p>
<button (click)="push()">Push (Go to 2nd)</button>
@ -156,17 +163,19 @@ class ModalFirstPage {
}
push() {
this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
let page = ModalSecondPage;
let params = { id: 8675309, myData: [1,2,3,4] };
let opts = { animation: 'ios' };
this.nav.push(page, params, opts);
}
closeModal() {
let modal = this.modal.get();
modal.close();
this.modal.get().close();
}
closeByHandeModal() {
let modal = this.modal.get('my-awesome-modal');
modal.close();
this.modal.get('my-awesome-modal').close();
}
openActionSheet() {
@ -198,7 +207,9 @@ class ModalFirstPage {
@Page({
template: `
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
<ion-navbar *navbar>
<ion-title>Second Page Header</ion-title>
</ion-navbar>
<ion-content padding>
<p>
<button (click)="nav.pop()">Pop (Go back to 1st)</button>
@ -214,32 +225,32 @@ class ModalSecondPage {
params: NavParams
) {
this.nav = nav;
this.params = params;
console.log('Second page params:', params);
}
}
class FadeIn extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView) {
super(enteringView.pageRef());
this
.easing('ease')
.duration(450)
.fadeIn();
.duration(1000)
.fromTo('translateY', '0%', '0%')
.fadeIn()
.before.addClass('show-page');
}
}
Animation.register('my-fade-in', FadeIn);
class FadeOut extends Animation {
constructor(element) {
super(element);
constructor(enteringView, leavingView) {
super(leavingView.pageRef());
this
.easing('ease')
.duration(250)
.fadeOut();
.duration(500)
.fadeOut()
.before.addClass('show-page');
}
}
Animation.register('my-fade-out', FadeOut);