From cd319e1cf28249f02f31bdb2d8e626d50867d1f1 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 5 Oct 2015 11:05:51 -0500 Subject: [PATCH] working modals --- demos/modal/index.ts | 2 -- ionic/components/modal/modal.ts | 7 +++-- ionic/components/modal/test/basic/index.ts | 9 +++--- ionic/components/nav/nav-controller.ts | 14 +++------ ionic/components/nav/nav.ts | 30 +++++++++--------- .../components/overlay/overlay-controller.ts | 31 ++++++++++--------- ionic/config/bootstrap.ts | 6 ++-- ionic/config/decorators.ts | 2 +- 8 files changed, 49 insertions(+), 52 deletions(-) diff --git a/demos/modal/index.ts b/demos/modal/index.ts index 54bee6fbe3..4132a1d186 100644 --- a/demos/modal/index.ts +++ b/demos/modal/index.ts @@ -24,8 +24,6 @@ class MyAppCmp { console.log('android', platform.is('android')) console.log('windows phone', platform.is('windowsphone')) - console.log('isRTL', app.isRTL()) - platform.ready().then(() => { console.log('platform.ready') }); diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 7900a2ffd9..610865b854 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -3,6 +3,7 @@ import {Injectable} from 'angular2/angular2'; import {OverlayController} from '../overlay/overlay-controller'; import {IonicConfig} from '../../config/config'; import {Animation} from '../../animations/animation'; +import {makeComponent} from '../../config/decorators'; import * as util from 'ionic/util'; /** @@ -46,9 +47,11 @@ export class Modal { * @returns {TODO} TODO */ open(componentType: Type, opts={}) { + let modalComponent = makeComponent(componentType, { + selector: 'ion-modal' + }); - - return this.ctrl.open(OVERLAY_TYPE, componentType, util.extend(this._defaults, opts)); + return this.ctrl.open(OVERLAY_TYPE, modalComponent, util.extend(this._defaults, opts)); } /** diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index 4d91f900ea..91be06a902 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -24,8 +24,6 @@ class MyAppCmp { console.log('android', platform.is('android')) console.log('windows phone', platform.is('windowsphone')) - console.log('isRTL', app.isRTL()) - platform.ready().then(() => { console.log('platform.ready') }); @@ -33,14 +31,15 @@ class MyAppCmp { } openModal() { - this.modal.open(ContactModal); + this.modal.open(ContactModal, { + handle: 'my-awesome-modal' + }); } openModalCustomAnimation() { this.modal.open(ContactModal, { enterAnimation: 'my-fade-in', - leaveAnimation: 'my-fade-out', - handle: 'my-awesome-modal' + leaveAnimation: 'my-fade-out' }); } } diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 4cfd214674..7230169098 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,6 +1,7 @@ -import {Component, ComponentRef, Compiler, ElementRef, Injector, bind, NgZone, DynamicComponentLoader, DirectiveBinding, AppViewManager} from 'angular2/angular2'; +import {ComponentRef, Compiler, ElementRef, Injector, bind, NgZone, DynamicComponentLoader, AppViewManager} from 'angular2/angular2'; import {Ion} from '../ion'; +import {makeComponent} from '../../config/decorators'; import {IonicConfig} from '../../config/config'; import {IonicApp} from '../app/app'; import {ViewController} from './view-controller'; @@ -483,20 +484,15 @@ export class NavController extends Ion { */ compileView(componentType) { // create a new ion-view annotation - let annotation = new Component({ + let viewComponentType = makeComponent(componentType, { selector: 'ion-view', host: { '[class.pane-view]': '_paneView' } }); - let ionViewComponentType = DirectiveBinding.createFromType(componentType, annotation); - - // create a unique token that works as a cache key - ionViewComponentType.token = 'ionView' + componentType.name; - // compile the Component - return this.compiler.compileInHost(ionViewComponentType); + return this.compiler.compileInHost(viewComponentType); } /** @@ -504,7 +500,7 @@ export class NavController extends Ion { * TODO */ createViewComponetRef(hostProtoViewRef, contentContainerRef, viewCtrlBindings) { - let bindings = this.bindings.concat(Injector.resolve(viewCtrlBindings)); + let bindings = this.bindings.concat(viewCtrlBindings); // the same guts as DynamicComponentLoader.loadNextToLocation var hostViewRef = diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index fcd98b00e8..4cb4095836 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -309,22 +309,22 @@ export class Nav extends NavController { let tabs = false; //let key = '_'; - componentProtoViewRef._protoView.elementBinders.forEach(rootElementBinder => { - if (!rootElementBinder.componentDirective || !rootElementBinder.nestedProtoView) return; + // componentProtoViewRef._protoView.elementBinders.forEach(rootElementBinder => { + // if (!rootElementBinder.componentDirective || !rootElementBinder.nestedProtoView) return; - rootElementBinder.nestedProtoView.elementBinders.forEach(nestedElementBinder => { - if ( isComponent(nestedElementBinder, 'Tabs') ) { - tabs = true; - } - if (!nestedElementBinder.componentDirective && nestedElementBinder.nestedProtoView) { - nestedElementBinder.nestedProtoView.elementBinders.forEach(templatedElementBinder => { - if ( isComponent(templatedElementBinder, 'Navbar') ) { - navbar = true; - } - }); - } - }); - }); + // rootElementBinder.nestedProtoView.elementBinders.forEach(nestedElementBinder => { + // if ( isComponent(nestedElementBinder, 'Tabs') ) { + // tabs = true; + // } + // if (!nestedElementBinder.componentDirective && nestedElementBinder.nestedProtoView) { + // nestedElementBinder.nestedProtoView.elementBinders.forEach(templatedElementBinder => { + // if ( isComponent(templatedElementBinder, 'Navbar') ) { + // navbar = true; + // } + // }); + // } + // }); + // }); return { navbar, diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts index a4e3706df1..491e5ef44d 100644 --- a/ionic/components/overlay/overlay-controller.ts +++ b/ionic/components/overlay/overlay-controller.ts @@ -16,17 +16,20 @@ export class OverlayController { } open(overlayType, componentType: Type, opts={}) { - let resolve; - let promise = new Promise(res => { resolve = res; }); - if (!this.anchor) { console.error(' required in root component template to use: ' + overlayType); return Promise.reject(); } + let resolve, reject; + let promise = new Promise((res, rej) => { resolve = res; reject = rej; }); + try { this.anchor.append(componentType).then(ref => { - let instance = ref.instance; + let instance = ref && ref.instance; + if (!instance) { + return reject(); + } ref._z = ROOT_Z_INDEX; for (let i = 0; i < this.refs.length; i++) { @@ -39,13 +42,12 @@ export class OverlayController { util.extend(instance, opts); ref._type = overlayType; - ref._opts = opts; - ref._handle = opts.handle || (overlayType + instance.zIndex); + ref._handle = opts.handle || (overlayType + ref._z); this.add(ref); - instance.close = (opts={}) => { - this.close(ref, opts); + instance.close = (closeOpts={}) => { + this.close(ref, util.extend(opts, closeOpts)); }; instance.onViewLoaded && instance.onViewLoaded(); @@ -92,7 +94,6 @@ export class OverlayController { instance.onViewWillLeave && instance.onViewWillLeave(); instance.onViewWillUnload && instance.onViewWillUnload(); - opts = util.extend(ref._opts, opts); let animation = Animation.create(ref.location.nativeElement, opts.leaveAnimation); animation.after.removeClass('show-overlay'); @@ -133,18 +134,18 @@ export class OverlayController { } getByType(overlayType) { - for (let i = this.overlays.length - 1; i >= 0; i--) { - if (overlayType === this.overlays[i]._type) { - return this.overlays[i]; + for (let i = this.refs.length - 1; i >= 0; i--) { + if (overlayType === this.refs[i]._type) { + return this.refs[i].instance; } } return null; } getByHandle(handle, overlayType) { - for (let i = this.overlays.length - 1; i >= 0; i--) { - if (handle === this.overlays[i]._handle && overlayType === this.overlays[i]._type) { - return this.overlays[i]; + for (let i = this.refs.length - 1; i >= 0; i--) { + if (handle === this.refs[i]._handle && overlayType === this.refs[i]._type) { + return this.refs[i].instance; } } return null; diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index f7d7b9bbc6..dbe1f625f9 100644 --- a/ionic/config/bootstrap.ts +++ b/ionic/config/bootstrap.ts @@ -1,5 +1,5 @@ import {bootstrap, bind} from 'angular2/angular2'; -import {ROUTER_BINDINGS, HashLocationStrategy, LocationStrategy} from 'angular2/router'; +import {routerBindings, HashLocationStrategy, LocationStrategy} from 'angular2/router'; import {IonicApp} from '../components/app/app'; import {IonicConfig} from './config'; @@ -16,7 +16,7 @@ import {TapClick} from '../components/tap-click/tap-click'; import * as dom from '../util/dom'; -export function ionicBindings(configSettings) { +export function ionicBindings(rootCmp, configSettings) { let app = new IonicApp(); let platform = new IonicPlatform(); let config = new IonicConfig(configSettings); @@ -46,7 +46,7 @@ export function ionicBindings(configSettings) { Modal, Popup, Translate, - ROUTER_BINDINGS, + routerBindings(rootCmp), bind(LocationStrategy).toClass(HashLocationStrategy), ]; } diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index 64b826f9d6..02be79de1e 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -107,7 +107,7 @@ export function App(args={}) { // redefine with added annotations Reflect.defineMetadata('annotations', annotations, cls); - bootstrap(cls, ionicBindings(args.config)); + bootstrap(cls, ionicBindings(cls, args.config)); return cls; }