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

Modal magic

Browse Source
This commit is contained in:
Max Lynch
2015-05-28 16:55:36 -05:00
parent 7b7c963ab2
commit 80b5290abf
4 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.js
View File

@ -12,6 +12,7 @@ export * from 'ionic/components/form/input/input'
export * from 'ionic/components/form/label/label'
// export * from 'ionic/components/layout/layout'
export * from 'ionic/components/list/list'
export * from 'ionic/components/modal/modal'
export * from 'ionic/components/nav/nav'
export * from 'ionic/components/nav/nav-controller'
export * from 'ionic/components/nav/nav-item'

101
ionic/components/modal/modal.js
View File

@ -1,4 +1,13 @@
import {Compiler, NgElement, Component, View} from 'angular2/angular2';
import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Nav} from 'ionic/ionic';
import {raf, ready} from 'ionic/util/dom'
import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
@Component({
selector: 'ion-modal-wrapper'
@ -11,14 +20,15 @@ import {Compiler, NgElement, Component, View} from 'angular2/angular2';
</div>`
})
class ModalWrapper {
constructor(@NgElement() el : NgElement) {
this.element = el
console.log('element', el)
constructor(elementRef: ElementRef) {
this.element = elementRef.domElement;
console.log('element', this.element)
}
show() {
//this.element.domElement.classList.add('active')
this.element.domElement.classList.add('active')
}
hide() {
this.element.domElement.classList.remove('active')
}
}
@ -26,37 +36,86 @@ class ModalWrapper {
selector: 'ion-modal'
})
@View({
directives: [ModalWrapper],
template: `
<ion-modal-wrapper>
<!--<ion-modal-wrapper>-->
<div class="modal">
<content></content>
<ion-nav [initial]="initial"></ion-nav>
</div>
</ion-modal-wrapper>`
<!--</ion-modal-wrapper>-->`,
directives: [Nav],
})
export class Modal {
//compiler: Compiler;
constructor(compiler: Compiler, @NgElement() el : NgElement) {
this.element = el
this.compiler = compiler
console.log('Got compiler', Modal.annotations)
constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer, elementRef: ElementRef) {
this.componentLoader = loader;
this.domRenderer = domRenderer;
this.element = elementRef.domElement;
this.elementRef = elementRef;
this.initial = ModalFirstPage
}
static create() {
var m = new Modal()
return m
var m = new Modal();
return m;
}
show() {
console.log('Modal show')
console.log('Modal show');
return this.componentLoader.loadIntoNewLocation(Modal, this.elementRef).then((containerRef) => {
var modalEl = this.domRenderer.getHostElement(containerRef.hostView.render);
document.body.appendChild(modalEl);
raf(() => {
modalEl.classList.add('active');
});
console.log('Loaded into new location', containerRef, modalEl);
});
}
static show() {
console.log('Showing modal')
static show(loader: ComponentLoader, renderer: DomRenderer, elementRef: ElementRef) {
console.log('Showing modal');
var newModal = Modal.create()
newModal.show()
return newModal
var newModal = new Modal(loader, renderer, elementRef);
newModal.show();
return newModal;
}
}
@Component({selector: 'ion-view'})
@View({
template: `
<ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
<ion-content class="padding">
<p>First Page: {{ val }}</p>
<p>
<button class="button" (click)="push()">Push (Go to 2nd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content]
})
export class ModalFirstPage {
constructor(
nav: NavController
) {
this.nav = nav;
this.val = Math.round(Math.random() * 8999) + 1000;
}
push() {
}
}

21
ionic/components/modal/modal.scss
View File

@ -35,7 +35,7 @@ $tabs-height: 40;
pointer-events: none;
}
modal {
ion-modal {
display: block;
position: absolute;
top: 0;
@ -44,8 +44,26 @@ modal {
min-height: 100%;
width: 100%;
background-color: $modal-bg-color;
transform: translate3d(0, 100%, 0);
transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
}
// Slide up from the bottom, used for modals
// -------------------------------
ion-modal.active {
transform: translate3d(0, 0, 0);
}
/*
ion-modal.slide-in-up.ng-leave,
ion-modal.slide-in-up > .ng-leave {
transition: all ease-in-out 250ms;
}
*/
@media (min-width: $modal-inset-mode-break-point) {
// inset mode is when the modal doesn't fill the entire
// display but instead is centered within a large display
@ -117,4 +135,3 @@ modal {
}
}
}

17
ionic/components/modal/test/basic/index.js
View File

@ -1,8 +1,9 @@
import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
import {bootstrap} from 'angular2/angular2'
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Content, List, Item, Button} from 'ionic/ionic';
import {Content, List, Item, Button, Modal} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@ -11,16 +12,24 @@ import {Content, List, Item, Button} from 'ionic/ionic';
directives: [Content, List, Item, Button]
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer, elementRef: ElementRef) {
this.loader = loader;
this.domRenderer = domRenderer;
this.elementRef = elementRef;
console.log('IonicApp Start', loader, domRenderer, elementRef);
}
openModal() {
console.log('Opening modal');
Modal.show(this.loader, this.domRenderer, this.elementRef);
}
}
export function main() {
bootstrap(IonicApp);
bootstrap(IonicApp).then((appRef) => {
console.log('Done bootstrapping', appRef);
})
}