diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js index a250a85361..bdba9e28ce 100644 --- a/ionic/components/action-menu/action-menu.js +++ b/ionic/components/action-menu/action-menu.js @@ -8,15 +8,15 @@ import {NgIf, NgFor} from 'angular2/angular2'; import {View} from 'angular2/src/core/annotations_impl/view'; +import {Injectable} from 'angular2/di'; -import {Item, Icon} from 'ionic/ionic'; -import {IonicRoot} from '../app/app'; +import {Icon} from 'ionic/ionic'; +import {IonicApp} from '../app/app'; import * as util from 'ionic/util'; import {Overlay} from '../overlay/overlay'; import {IonicComponent} from '../../config/component'; import {Animation} from 'ionic/animations/animation'; -import {ClickBlock} from '../../util/click-block'; @IonicComponent(ActionMenu) @@ -35,8 +35,9 @@ import {ClickBlock} from '../../util/click-block'; `, - directives: [Item, Icon, NgIf, NgFor] + directives: [Icon, NgIf, NgFor] }) +@Injectable() export class ActionMenu extends Overlay { static get config() { @@ -48,8 +49,8 @@ export class ActionMenu extends Overlay { } } - constructor() { - super(); + constructor(app: IonicApp) { + super(app); this.extendOptions({ destructiveButtonClicked: util.noop, @@ -85,17 +86,17 @@ export class ActionMenu extends Overlay { * * @return Promise that resolves when the action menu is open. */ - static open(opts) { - return this.create(overlayType, ActionMenu, opts); + open(opts) { + return this.create(OVERLAY_TYPE, ActionMenu, opts); } - static get() { - return Modal.getByType(overlayType); + get() { + return Modal.getByType(OVERLAY_TYPE); } } -const overlayType = 'actionmenu'; +const OVERLAY_TYPE = 'actionmenu'; /** diff --git a/ionic/components/action-menu/test/basic/index.js b/ionic/components/action-menu/test/basic/index.js index a7519be293..2f9b55a854 100644 --- a/ionic/components/action-menu/test/basic/index.js +++ b/ionic/components/action-menu/test/basic/index.js @@ -4,15 +4,22 @@ import {IonicView} from 'ionic/ionic'; import {ActionMenu} from 'ionic/components/action-menu/action-menu'; -@Component({ selector: 'ion-view' }) +@Component({ + selector: 'ion-app', + appInjector: [ActionMenu] +}) @IonicView({ templateUrl: 'main.html' }) class IonicApp { + constructor(ActionMenu: ActionMenu) { + this.ActionMenu = ActionMenu; + } + openMenu() { - ActionMenu.open({ + this.ActionMenu.open({ buttons: [ { text: 'Share This' }, { text: 'Move' } @@ -31,6 +38,7 @@ class IonicApp { if(index == 1) { return false; } return true; } + }).then(actionMenu => { this.actionMenu = actionMenu; }); diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js index 87e5d9180c..8b1b174528 100644 --- a/ionic/components/app/app.js +++ b/ionic/components/app/app.js @@ -1,4 +1,5 @@ import {bootstrap} from 'angular2/angular2'; +import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; import {ComponentRef, onDestroy, DomRenderer, ApplicationRef} from 'angular2/angular2'; @@ -17,57 +18,84 @@ import {IonicConfig} from '../../config/config'; import {ViewController} from '../view/view-controller'; -@Component({ - selector: 'ionic' -}) -@View({ - template: '', - directives: [PaneAnchor] -}) -class IonicRootComponent extends ViewController { - constructor( - compiler: Compiler, - elementRef: ElementRef, - loader: DynamicComponentLoader, - parentInjector: Injector - ) { - let injector = parentInjector; - let ComponentType = null; - - if (appModules.length) { - ComponentType = appModules.shift(); - - injector = parentInjector.resolveAndCreateChild([ - bind(IonicConfig).toValue(ComponentType._config) - ]); - } - - super(null, compiler, elementRef, loader, injector); - IonicRoot.component(this); - - if (ComponentType) { - this.push(ComponentType); - } +export class IonicApp { + constructor() { + this.overlays = []; } -} -@Directive({ - selector: 'template[pane-anchor]' -}) -class PaneAnchor { - constructor(@Parent() rootCmp: IonicRootComponent, elementRef: ElementRef, viewContainerRef: ViewContainerRef) { - rootCmp.anchorElementRef(elementRef); - rootCmp.anchorViewContainerRef(viewContainerRef); + /** + * Create and append the given component into the root + * element of the app. + * + * @param Component the ComponentType to create and insert + * @return Promise that resolves with the ContainerRef created + */ + appendComponent(ComponentType: Type) { + return new Promise((resolve, reject) => { + let injector = this._ref.injector; + let compiler = injector.get(Compiler); + let viewMngr = injector.get(AppViewManager); + let rootComponentRef = this._ref._hostComponent; + let viewContainerLocation = rootComponentRef.location; + + compiler.compileInHost(ComponentType).then(protoViewRef => { + + let atIndex = 0; + let context = null; + + let hostViewRef = viewMngr.createViewInContainer( + viewContainerLocation, + atIndex, + protoViewRef, + context, + injector); + + hostViewRef.elementRef = new ElementRef(hostViewRef, 0); + hostViewRef.instance = viewMngr.getComponent(hostViewRef.elementRef); + + hostViewRef.dispose = () => { + viewMngr.destroyViewInContainer(viewContainerLocation, 0, 0, hostViewRef.viewRef); + }; + + resolve(hostViewRef); + + }).catch(err => { + console.error('IonicApp appendComponent:', err); + reject(err); + }); + }); } -} -let appModules = []; + ref() { + if (arguments.length) { + this._ref = arguments[0]; + } + return this._ref; + } + +} export function ionicBootstrap(ComponentType, config) { - ComponentType._config = config || new IonicConfig(); - appModules.push(ComponentType); - bootstrap(IonicRootComponent); + return new Promise((resolve, reject) => { + let app = new IonicApp(); + config = config || new IonicConfig(); + + let componentInjectableBindings = [ + bind(IonicApp).toValue(app), + bind(IonicConfig).toValue(config) + ]; + + bootstrap(ComponentType, componentInjectableBindings).then(appRef => { + app.ref(appRef); + resolve(app); + + }).catch(err => { + console.error('ionicBootstrap', err); + reject(err); + }); + + }); } export function load(app) { @@ -81,51 +109,3 @@ export function load(app) { app.main(ionicBootstrap); } } - - -class IonicAppRoot { - - /** - * Create and append the given component into the root - * element of the app. - * - * @param Component the ComponentType to create and insert - * @return Promise that resolves with the ContainerRef created - */ - append(ComponentType: Type) { - let rootComponent = this.component(); - let injector = rootComponent.injector; - let loader = rootComponent.loader; - let elementRef = rootComponent.anchorElementRef(); - - return new Promise((resolve, reject) => { - rootComponent.compiler.compileInHost(ComponentType).then(componentProtoViewRef => { - - let containerRef = rootComponent.anchorViewContainerRef(); - let hostViewRef = containerRef.create(componentProtoViewRef, -1, null, injector); - - hostViewRef.elementRef = new ElementRef(hostViewRef, 0); - hostViewRef.instance = loader._viewManager.getComponent(hostViewRef.elementRef); - - hostViewRef.dispose = () => { - containerRef.remove( containerRef.indexOf(hostViewRef) ); - }; - - resolve(hostViewRef); - }).catch(err => { - console.error('IonicAppRoot append:', err); - reject(err); - }); - }); - } - - component() { - if (arguments.length) { - this._cmp = arguments[0]; - } - return this._cmp; - } - -} - -export let IonicRoot = new IonicAppRoot(); diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index 475bcac720..f954a142fb 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -61,7 +61,7 @@ strong { // Remove border when inside `a` element in IE 8/9/10. ion-app img, -ionic img { +.ion-app img { border: 0; } diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index a82c5c015e..f96c40a5f8 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -33,7 +33,7 @@ body { } ion-app, -ionic { +.ion-app { display: flex; flex-direction: column; diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index 413a96864b..5e2515d61c 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -27,7 +27,7 @@ html { ion-app, -ionic { +.ion-app { font-size: $font-size-base; font-family: $font-family-base; diff --git a/ionic/components/aside/test/basic/index.js b/ionic/components/aside/test/basic/index.js index ac3bfd26a1..b970ea821b 100644 --- a/ionic/components/aside/test/basic/index.js +++ b/ionic/components/aside/test/basic/index.js @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @Component({ - selector: 'ion-view' + selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' diff --git a/ionic/components/button/test/basic/index.js b/ionic/components/button/test/basic/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/basic/index.js +++ b/ionic/components/button/test/basic/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/block/index.js b/ionic/components/button/test/block/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/block/index.js +++ b/ionic/components/button/test/block/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/clear/index.js b/ionic/components/button/test/clear/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/clear/index.js +++ b/ionic/components/button/test/clear/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/full/index.js b/ionic/components/button/test/full/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/full/index.js +++ b/ionic/components/button/test/full/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/icons/index.js b/ionic/components/button/test/icons/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/icons/index.js +++ b/ionic/components/button/test/icons/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/outline/index.js b/ionic/components/button/test/outline/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/outline/index.js +++ b/ionic/components/button/test/outline/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/button/test/sizes/index.js b/ionic/components/button/test/sizes/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/button/test/sizes/index.js +++ b/ionic/components/button/test/sizes/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/card/test/basic/index.js b/ionic/components/card/test/basic/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/card/test/basic/index.js +++ b/ionic/components/card/test/basic/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/checkbox/test/basic/index.js b/ionic/components/checkbox/test/basic/index.js index 4c0b77ffbf..788449378a 100644 --- a/ionic/components/checkbox/test/basic/index.js +++ b/ionic/components/checkbox/test/basic/index.js @@ -4,7 +4,7 @@ import {FormBuilder, Validators, formDirectives} from 'angular2/forms'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html', directives: [formDirectives] diff --git a/ionic/components/item/test/accessories/index.js b/ionic/components/item/test/accessories/index.js index b2c0eeac99..828759a45c 100644 --- a/ionic/components/item/test/accessories/index.js +++ b/ionic/components/item/test/accessories/index.js @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @Component({ - selector: 'ion-view' + selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' diff --git a/ionic/components/item/test/basic/index.js b/ionic/components/item/test/basic/index.js index b2c0eeac99..828759a45c 100644 --- a/ionic/components/item/test/basic/index.js +++ b/ionic/components/item/test/basic/index.js @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @Component({ - selector: 'ion-view' + selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' diff --git a/ionic/components/list/test/basic/index.js b/ionic/components/list/test/basic/index.js index e6121ff363..ca42a5e898 100644 --- a/ionic/components/list/test/basic/index.js +++ b/ionic/components/list/test/basic/index.js @@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/list/test/infinite/index.js b/ionic/components/list/test/infinite/index.js index 4e53cde03b..ae71ccd1ab 100644 --- a/ionic/components/list/test/infinite/index.js +++ b/ionic/components/list/test/infinite/index.js @@ -6,7 +6,7 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility'; import {Content, List, Item} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @View({ templateUrl: 'main.html', directives: [Content, List, Item, ItemCellTemplate, NgFor] diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js index d4a8e92b82..bbf805161d 100644 --- a/ionic/components/modal/modal.js +++ b/ionic/components/modal/modal.js @@ -1,7 +1,11 @@ +import {Injectable} from 'angular2/di'; + import {Overlay} from '../overlay/overlay'; import {Animation} from '../../animations/animation'; +import {IonicApp} from '../app/app'; +@Injectable() export class Modal extends Overlay { static get config() { @@ -13,26 +17,28 @@ export class Modal extends Overlay { } } - constructor() { - super(); + constructor(app: IonicApp) { + // a modal created by the appInjector will inject an IonicApp + // a modal created by the user will not + super(app); + this.extendOptions({ enterAnimation: 'modal-slide-in', leaveAnimation: 'modal-slide-out' }); } - /* Static Methods */ - static open(ComponentType: Type, opts) { - return this.create(overlayType, ComponentType, opts); + open(ComponentType: Type, opts) { + return this.create(OVERLAY_TYPE, ComponentType, opts); } - static get() { - return Modal.getByType(overlayType); + get() { + return this.getByType(OVERLAY_TYPE); } } -const overlayType = 'modal'; +const OVERLAY_TYPE = 'modal'; /** diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js index 3fa85695db..bc2160698e 100644 --- a/ionic/components/modal/test/basic/index.js +++ b/ionic/components/modal/test/basic/index.js @@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {View} from 'angular2/src/core/annotations_impl/view'; import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility'; -import {IonicView} from 'ionic/ionic'; +import {IonicView, IonicConfig} from 'ionic/ionic'; import {IonicComponent} from 'ionic/ionic'; import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic'; @@ -35,13 +35,21 @@ class FadeOut extends Animation { Animation.register('my-fade-out', FadeOut); -@Component({ selector: 'ion-view' }) +@Component({ + selector: 'ion-app', + appInjector: [Modal] +}) @IonicView({ templateUrl: 'main.html' }) -class IonicApp { +class MyApp { + + constructor(Modal: Modal) { + this.Modal = Modal; + } + openModal() { - Modal.open(ContactModal, { + this.Modal.open(ContactModal, { enterAnimation: 'my-fade-in', leaveAnimation: 'my-fade-out', handle: 'my-awesome-modal' @@ -51,17 +59,20 @@ class IonicApp { @IonicComponent(Modal) @IonicView({ - template: '' + template: '' }) export class ContactModal extends Modal { constructor() { super(); - this.initial = ModalFirstPage; + this.rootView = ModalFirstPage; } } -@Component({selector: 'ion-view'}) +@Component({ + selector: 'ion-view', + appInjector: [Modal] +}) @IonicView({ template: ` First Page Header: {{ val }} @@ -83,10 +94,12 @@ export class ContactModal extends Modal { }) export class ModalFirstPage { constructor( - nav: NavController + nav: NavController, + Modal: Modal ) { this.nav = nav; this.val = Math.round(Math.random() * 8999) + 1000; + this.Modal = Modal; } push() { @@ -94,7 +107,7 @@ export class ModalFirstPage { } closeModal() { - let modal = Modal.get(); + let modal = this.Modal.get(); modal.close(); } @@ -167,5 +180,11 @@ export class ModalSecondPage { } export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); + // crazy config + let myConfig = new IonicConfig(); + + ionicBootstrap(MyApp, myConfig).then(app => { + // crazy run + console.log('ionicBootstrap', app); + }); } diff --git a/ionic/components/nav-bar/test/html-title/index.js b/ionic/components/nav-bar/test/html-title/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/nav-bar/test/html-title/index.js +++ b/ionic/components/nav-bar/test/html-title/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/nav-bar/test/lopsided-buttons/index.js b/ionic/components/nav-bar/test/lopsided-buttons/index.js index de879ed5e5..d2ce3e90c1 100644 --- a/ionic/components/nav-bar/test/lopsided-buttons/index.js +++ b/ionic/components/nav-bar/test/lopsided-buttons/index.js @@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 02ad592425..c9218fa3cc 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -13,7 +13,7 @@ import {ViewController} from '../view/view-controller'; @Component({ selector: 'ion-nav', properties: [ - 'initial' + 'root' ], lifecycle: [onInit] }) @@ -34,7 +34,7 @@ export class Nav extends ViewController { } onInit() { - this.push(this.initial); + this.push(this.root); } } diff --git a/ionic/components/nav/test/basic/index.js b/ionic/components/nav/test/basic/pages/first-page.js similarity index 82% rename from ionic/components/nav/test/basic/index.js rename to ionic/components/nav/test/basic/pages/first-page.js index 3bf5141d94..bc5dd8d572 100644 --- a/ionic/components/nav/test/basic/index.js +++ b/ionic/components/nav/test/basic/pages/first-page.js @@ -1,13 +1,12 @@ -import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; +import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {IonicView, IonicConfig} from 'ionic/ionic'; +import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic'; import {NavParams, Routable, Router, NavController} from 'ionic/ionic'; -import {SecondPage} from './pages/second-page' +import {SecondPage} from './second-page' @Component({ - selector: 'ion-view', - lifecycle: [onInit] + selector: 'ion-view' }) @IonicView({ template: '' + @@ -30,13 +29,15 @@ import {SecondPage} from './pages/second-page' '' + '' }) -class FirstPage { +export class FirstPage { constructor( nav: NavController, - myConfig: IonicConfig + app: IonicApp, + config: IonicConfig ) { - console.log('myConfig', myConfig); + console.log('app', app) + console.log('config', config) // TODO: Shouldn't have to do this Router.setNavController(nav); @@ -44,16 +45,12 @@ class FirstPage { this.nav = nav; this.val = Math.round(Math.random() * 8999) + 1000; - this.pushPage = SecondPage; this.pushData = { id: 420 } } - onInit() { - } - viewLoaded() { this.router = FirstPage.router.invoke(this); console.log('viewLoaded first page'); @@ -99,10 +96,3 @@ class FirstPage { new Routable(FirstPage, { url: '/first-page' }) - - -export function main(ionicBootstrap) { - let myConfig = new IonicConfig(); - - ionicBootstrap(FirstPage, myConfig); -} diff --git a/ionic/components/overlay/overlay.js b/ionic/components/overlay/overlay.js index ab29b0b6f0..71f6d8476d 100644 --- a/ionic/components/overlay/overlay.js +++ b/ionic/components/overlay/overlay.js @@ -1,4 +1,4 @@ -import {IonicRoot} from '../app/app'; +import {IonicApp} from '../app/app'; import {Animation} from '../../animations/animation'; import {ClickBlock} from '../../util/click-block'; import * as util from 'ionic/util'; @@ -6,18 +6,50 @@ import * as util from 'ionic/util'; export class Overlay { - constructor() { - this.zIndex = Root_ZIndex; - for (let i = 0; i < overlayStack.length; i++) { - this.zIndex = overlayStack[i].zIndex + 1; - } - overlayStack.push(this); + constructor(app: IonicApp) { + this.setApp(app); } - /* Instance Methods */ - open(opts) { + setApp(app) { + this.app = app; + } + + create(overlayType, ComponentType: Type, opts) { + return new Promise((resolve, reject) => { + let app = this.app; + + app.appendComponent(ComponentType).then(ref => { + let overlay = ref.instance; + overlay.setApp(app); + overlay._type = overlayType; + overlay._handle = opts && opts.handle; + overlay._domElement = ref.elementRef.domElement; + overlay.extendOptions(opts); + + overlay.zIndex = ROOT_Z_INDEX; + for (let i = 0; i < app.overlays.length; i++) { + if (app.overlays[i].zIndex >= overlay.zIndex) { + overlay.zIndex = app.overlays[i].zIndex + 1; + } + } + app.overlays.push(overlay); + + overlay._open(opts); + + resolve(overlay); + + }).catch(err => { + console.error('Overlay create:', err); + reject(err); + }); + + }); + } + + _open(opts) { let animationName = (opts && opts.animation) || this.options.enterAnimation; let enterAnimation = Animation.create(this._domElement, animationName); + enterAnimation.before.addClass('ion-app'); enterAnimation.before.addClass('show-overlay'); ClickBlock(true, enterAnimation.duration() + 200); @@ -38,7 +70,7 @@ export class Overlay { ClickBlock(true, leavingAnimation.duration() + 200); leavingAnimation.play().then(() => { - this._clean(); + this._dispose(); ClickBlock(false); leavingAnimation.dispose(); resolve(); @@ -46,56 +78,40 @@ export class Overlay { }); } + getByType(overlayType) { + if (this.app) { + for (let i = this.app.overlays.length - 1; i >= 0; i--) { + if (overlayType === this.app.overlays[i]._type) { + return this.app.overlays[i]; + } + } + } + return null; + } + + getByHandle(handle) { + if (this.app) { + for (let i = this.app.overlays.length - 1; i >= 0; i--) { + if (handle === this.app.overlays[i]._handle) { + return this.app.overlays[i]; + } + } + } + return null; + } + extendOptions(opts) { if (!this.options) this.options = {}; util.extend(this.options, opts); } - _clean() { - this._dispose && this._dispose(); - util.array.remove(overlayStack, this); - } - - - /* Static Methods */ - static create(overlayType, ComponentType: Type, opts) { - return new Promise((resolve, reject) => { - IonicRoot.append(ComponentType).then(ref => { - let overlay = ref.instance; - overlay._type = overlayType; - overlay._handle = opts && opts.handle; - overlay._dispose = ref.dispose; - overlay._domElement = ref.elementRef.domElement; - overlay.extendOptions(opts); - overlay.open(opts); - resolve(overlay); - - }).catch(err => { - console.error('Overlay create:', err); - reject(err); - }); - }); - } - - static getByType(overlayType) { - for (let i = overlayStack.length - 1; i >= 0; i--) { - if (overlayType === overlayStack[i]._type) { - return overlayStack[i]; - } + _dispose() { + this.dispose && this.dispose(); + if (this.app) { + util.array.remove(this.app.overlays, this); } - return null; - } - - static getByHandle(handle) { - for (let i = overlayStack.length - 1; i >= 0; i--) { - if (handle === overlayStack[i]._handle) { - return overlayStack[i]; - } - } - return null; } } -let overlayStack = []; -const Root_ZIndex = 1000; +const ROOT_Z_INDEX = 1000; diff --git a/ionic/components/radio/test/basic/index.js b/ionic/components/radio/test/basic/index.js index 0613b79a7c..0a6a344588 100644 --- a/ionic/components/radio/test/basic/index.js +++ b/ionic/components/radio/test/basic/index.js @@ -1,18 +1,14 @@ -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component} from 'angular2/src/core/annotations_impl/annotations'; -//import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) class IonicApp { constructor() { - console.log('IonicApp Start') - // var fb = new FormBuilder(); // this.form = fb.group({ // preferredApple: ['mac', Validators.required], diff --git a/ionic/components/segment/test/basic/index.js b/ionic/components/segment/test/basic/index.js index 0c21566fe2..5b6ae73d77 100644 --- a/ionic/components/segment/test/basic/index.js +++ b/ionic/components/segment/test/basic/index.js @@ -1,10 +1,10 @@ -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; +import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {FormBuilder, Validators, ControlGroup} from 'angular2/forms'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/slides/test/basic/index.js b/ionic/components/slides/test/basic/index.js index 523cf4c8e0..b37f440474 100644 --- a/ionic/components/slides/test/basic/index.js +++ b/ionic/components/slides/test/basic/index.js @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @Component({ - selector: 'ion-view' + selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' diff --git a/ionic/components/slides/test/continuous/index.js b/ionic/components/slides/test/continuous/index.js index 2079bc0685..57d289a7d6 100644 --- a/ionic/components/slides/test/continuous/index.js +++ b/ionic/components/slides/test/continuous/index.js @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @Component({ - selector: 'ion-view' + selector: 'ion-app' }) @IonicView({ template: ` diff --git a/ionic/components/switch/test/basic/index.js b/ionic/components/switch/test/basic/index.js index 9b773805ea..ea11c1369e 100644 --- a/ionic/components/switch/test/basic/index.js +++ b/ionic/components/switch/test/basic/index.js @@ -4,7 +4,7 @@ import {FormBuilder, Validators, ControlGroup} from 'angular2/forms'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/tabs/test/advanced/index.js b/ionic/components/tabs/test/advanced/index.js index f5386ecfc5..6f6eea6143 100644 --- a/ionic/components/tabs/test/advanced/index.js +++ b/ionic/components/tabs/test/advanced/index.js @@ -15,7 +15,7 @@ import {IonicView, NavController} from 'ionic/ionic'; '' + '' }) -class IonicApp { +class SignIn { constructor(nav: NavController) { this.nav = nav; } @@ -175,6 +175,19 @@ class Tab2Page3 { } } + +@Component({ + selector: 'ion-app' +}) +@IonicView({ + template: '' +}) +class IonicApp { + constructor() { + this.rootView = SignIn; + } +} + export function main(ionicBootstrap) { ionicBootstrap(IonicApp); } diff --git a/ionic/components/tabs/test/basic/index.js b/ionic/components/tabs/test/basic/index.js index e6121ff363..ca42a5e898 100644 --- a/ionic/components/tabs/test/basic/index.js +++ b/ionic/components/tabs/test/basic/index.js @@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/tabs/test/tab-bar-bottom/index.js b/ionic/components/tabs/test/tab-bar-bottom/index.js index e6121ff363..ca42a5e898 100644 --- a/ionic/components/tabs/test/tab-bar-bottom/index.js +++ b/ionic/components/tabs/test/tab-bar-bottom/index.js @@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/tabs/test/tab-bar-icons/index.js b/ionic/components/tabs/test/tab-bar-icons/index.js index e6121ff363..ca42a5e898 100644 --- a/ionic/components/tabs/test/tab-bar-icons/index.js +++ b/ionic/components/tabs/test/tab-bar-icons/index.js @@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/components/tabs/test/tab-bar-top/index.js b/ionic/components/tabs/test/tab-bar-top/index.js index e6121ff363..ca42a5e898 100644 --- a/ionic/components/tabs/test/tab-bar-top/index.js +++ b/ionic/components/tabs/test/tab-bar-top/index.js @@ -3,7 +3,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {IonicView} from 'ionic/ionic'; -@Component({ selector: 'ion-view' }) +@Component({ selector: 'ion-app' }) @IonicView({ templateUrl: 'main.html' }) diff --git a/ionic/config/component.js b/ionic/config/ionic-directive.js similarity index 97% rename from ionic/config/component.js rename to ionic/config/ionic-directive.js index bb02ba64ee..0c472ac3d8 100644 --- a/ionic/config/component.js +++ b/ionic/config/ionic-directive.js @@ -92,7 +92,7 @@ function appendModeConfig(ComponentType) { }; } - let id = config.classId || config.selector.replace('ion-', ''); + let id = config.classId || (config.selector && config.selector.replace('ion-', '')); config.host['class'] = (id + ' ' + id + '-' + platformMode); return config; diff --git a/ionic/config/view.js b/ionic/config/ionic-view.js similarity index 95% rename from ionic/config/view.js rename to ionic/config/ionic-view.js index a992fe7e38..081ea0f3f3 100644 --- a/ionic/config/view.js +++ b/ionic/config/ionic-view.js @@ -6,7 +6,6 @@ import { Aside, Content, Refresher, Slides, Slide, SlidePager, Tabs, Tab, - ActionMenu, List, Item, Icon, Checkbox, Switch, Label, Input, Segment, SegmentButton, @@ -28,9 +27,6 @@ export class IonicView extends View { Slides, Slide, SlidePager, Tabs, Tab, - // Overlays - ActionMenu, - // Media Icon, @@ -46,3 +42,4 @@ export class IonicView extends View { super(config); } } + diff --git a/ionic/init.js b/ionic/init.js index 3d53469dc4..ae357d0bb9 100644 --- a/ionic/init.js +++ b/ionic/init.js @@ -14,7 +14,7 @@ } } - var ele = document.querySelectorAll('ionic'); + var ele = document.querySelectorAll('[module]'); for (var i = 0; i < ele.length; i++) { importApp(ele[i].getAttribute('module')); } diff --git a/ionic/ionic.js b/ionic/ionic.js index 1ce5cec43b..ba38509ba9 100644 --- a/ionic/ionic.js +++ b/ionic/ionic.js @@ -1,7 +1,8 @@ -export * from 'ionic/config/component' export * from 'ionic/config/config' -export * from 'ionic/config/view' +export * from 'ionic/config/ionic-directive' +export * from 'ionic/config/ionic-view' + export * from 'ionic/components' export * from 'ionic/platform/platform' export * from 'ionic/routing/router' diff --git a/scripts/e2e/angular.template.html b/scripts/e2e/angular.template.html deleted file mode 100644 index 9e75080298..0000000000 --- a/scripts/e2e/angular.template.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - Loading... - - - - $SCRIPTS$ - - - - - - - diff --git a/scripts/e2e/bundle.template.html b/scripts/e2e/bundle.template.html deleted file mode 100644 index c82f8509f9..0000000000 --- a/scripts/e2e/bundle.template.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - Loading... - - - - - - - - - diff --git a/scripts/e2e/ionic.template.html b/scripts/e2e/ionic.template.html index c35d104185..d2263cd991 100644 --- a/scripts/e2e/ionic.template.html +++ b/scripts/e2e/ionic.template.html @@ -35,9 +35,9 @@ - + - +