diff --git a/ionic/components.js b/ionic/components.js index c69ff6277b..daa304ac7d 100644 --- a/ionic/components.js +++ b/ionic/components.js @@ -16,7 +16,7 @@ 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' +export * from 'ionic/components/nav/nav-params' export * from 'ionic/components/nav-bar/nav-bar' export * from 'ionic/components/slides/slides' export * from 'ionic/components/radio/radio' diff --git a/ionic/components/nav-bar/back-button.js b/ionic/components/nav-bar/back-button.js index 238e989975..9794572ffd 100644 --- a/ionic/components/nav-bar/back-button.js +++ b/ionic/components/nav-bar/back-button.js @@ -3,13 +3,16 @@ import {View} from 'angular2/src/core/annotations_impl/view'; import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {IonicComponent} from 'ionic/config/component'; -import {NavItem} from '../nav/nav-item'; +import {ViewItem} from '../view/view-item'; @Component({ selector: 'back-button', + hostProperties: { + '!item.enableBack': 'hidden' + }, hostListeners: { - '^click': 'onClick($event)' + '^click': 'goBack($event)' }, }) @View({ @@ -21,8 +24,8 @@ import {NavItem} from '../nav/nav-item'; ` }) export class BackButton { - constructor(navItem: NavItem, @ElementRef() element:ElementRef) { - this.navItem = navItem; + constructor(item: ViewItem, @ElementRef() element: ElementRef) { + this.item = item; this.domElement = element.domElement; setTimeout(() => { @@ -31,12 +34,12 @@ export class BackButton { }); } - onClick(ev) { + goBack(ev) { ev.stopPropagation(); ev.preventDefault(); - let navItem = this.navItem; - navItem && navItem.nav && navItem.nav.pop(); + let item = this.item; + item && item.viewController && item.viewController.pop(); } } diff --git a/ionic/components/nav-bar/nav-bar.js b/ionic/components/nav-bar/nav-bar.js index 32af147c9d..06cd40d8c5 100644 --- a/ionic/components/nav-bar/nav-bar.js +++ b/ionic/components/nav-bar/nav-bar.js @@ -6,7 +6,7 @@ import {NgZone} from 'angular2/src/core/zone/ng_zone'; import * as dom from '../../util/dom'; import {Platform} from 'ionic/platform/platform'; -import {NavItem} from '../nav/nav-item'; +import {ViewItem} from '../view/view-item'; import {BackButton} from './back-button'; @@ -16,7 +16,7 @@ import {BackButton} from './back-button'; @View({ template: `
- +
@@ -34,8 +34,8 @@ import {BackButton} from './back-button'; lifecycle: [onInit] }) export class Navbar { - constructor(navItem:NavItem, elementRef:ElementRef, ngZone:NgZone) { - this.navItem = navItem; + constructor(item: ViewItem, elementRef:ElementRef, ngZone:NgZone) { + this.item = item; this.domElement = elementRef.domElement; this.zone = ngZone; } @@ -106,7 +106,7 @@ export class Navbar { selector: 'template[navbar]' }) export class NavbarTemplate { - constructor(navItem: NavItem, protoViewRef: ProtoViewRef) { - navItem.addProtoViewRef('navbar', protoViewRef) + constructor(item: ViewItem, protoViewRef: ProtoViewRef) { + item.addProtoViewRef('navbar', protoViewRef); } } diff --git a/ionic/components/nav/nav-params.js b/ionic/components/nav/nav-params.js new file mode 100644 index 0000000000..a9a1df7d5f --- /dev/null +++ b/ionic/components/nav/nav-params.js @@ -0,0 +1,9 @@ + +import * as util from 'ionic/util'; + + +export class NavParams { + constructor(params) { + util.extend(this, params); + } +} diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 9465a2c5ae..bbe64dd329 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -52,6 +52,6 @@ new IonicComponent(Nav, {}); }) class NavPaneAnchor { constructor(@Parent() nav: Nav, elementRef: ElementRef) { - nav.setPaneAnchor(elementRef); + nav.panes.setAnchor(elementRef); } } diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js index a669e73536..7d151f6e53 100644 --- a/ionic/components/nav/pane.js +++ b/ionic/components/nav/pane.js @@ -3,12 +3,97 @@ import {View} from 'angular2/src/core/annotations_impl/view'; import {Parent} from 'angular2/src/core/annotations_impl/visibility'; import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ElementRef} from 'angular2/src/core/compiler/element_ref'; +import {bind} from 'angular2/di'; import {ViewController} from '../view/view-controller'; import {Nav} from './nav'; import {SwipeHandle} from './swipe-handle'; +export class PaneController { + constructor(viewController: ViewController) { + this.panes = {}; + this.viewController = viewController; + } + + get(itemStructure, callback) { + // this gets or creates the Pane which similar nav items live in + // Nav items with just a navbar/content would all use the same Pane + // Tabs and view's without a navbar would get a different Panes + + let key = itemStructure.key; + let viewController = this.viewController; + let pane = this.panes[key]; + + if (pane) { + // nav pane which the entering component already exists + callback(pane); + + } else { + // create a new nav pane + this.panes[key] = null; + + let injector = viewController.injector.resolveAndCreateChild([ + bind(ViewController).toValue(viewController) + ]); + + // add a Pane element + // when the Pane is added, it'll also add its reference to the panes object + viewController.loader.loadNextToExistingLocation(Pane, this.anchor, injector).then(() => { + + // get the pane reference by name + pane = this.panes[key]; + let sectionAnchorElementRef = pane && pane.sectionAnchorElementRef; + if (!sectionAnchorElementRef) { + return callback(); + } + + let promises = []; + let sectionsToAdd = []; + + // decide which sections should be added to this Pane, ie: nav bars, footers, etc. + // add only the sections it needs + if (itemStructure.navbar) { + sectionsToAdd.push(NavBarContainer); + } + + // add the sections which this type of Pane requires + sectionsToAdd.forEach(SectionClass => { + // as each section is compiled and added to the Pane + // the section will add a reference to itself in the Pane's sections object + promises.push( + viewController.loader.loadNextToExistingLocation(SectionClass, sectionAnchorElementRef) + ); + }); + + // wait for all of the sections to resolve + Promise.all(promises).then(() => { + callback(pane); + }); + + }); + + } + } + + setAnchor(elementRef) { + this.anchor = elementRef; + } + + add(pane) { + for (let np in this.panes) { + if (this.panes[np] === null) { + this.panes[np] = pane; + return; + } + } + this.panes['_n'] = pane; + } + +} + + + @Component({selector:'ion-pane'}) @View({ template: ` @@ -20,11 +105,10 @@ import {SwipeHandle} from './swipe-handle'; `, directives: [PaneAnchor, PaneContentAnchor, SwipeHandle] }) -export class Pane { +class Pane { constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) { - this.viewContainerRef = viewContainerRef; this.sections = {}; - nav.addPane(this); + nav.panes.add(this); } addSection(sectionName, instance) { this.sections[sectionName] = instance; @@ -32,9 +116,7 @@ export class Pane { } -@Directive({ - selector: 'template[pane-anchor]' -}) +@Directive({selector: 'template[pane-anchor]'}) class PaneAnchor { constructor(@Parent() pane: Pane, elementRef: ElementRef) { pane.sectionAnchorElementRef = elementRef; @@ -42,9 +124,7 @@ class PaneAnchor { } -@Directive({ - selector: 'template[content-anchor]' -}) +@Directive({selector: 'template[content-anchor]'}) class PaneContentAnchor { constructor(@Parent() pane: Pane, viewContainerRef: ViewContainerRef) { pane.contentContainerRef = viewContainerRef; @@ -61,7 +141,7 @@ class PaneContentAnchor { template: ``, directives: [NavBarAnchor] }) -export class NavBarContainer {} +class NavBarContainer {} // Reference point of where individual view navbars will go next to diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index 4da0e22d16..f2fbfc4b9c 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -10,7 +10,7 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ViewController} from '../view/view-controller'; import {Tabs} from './tabs'; -import {NavItem} from '../nav/nav-item'; +import {ViewItem} from '../view/view-item'; import {Content} from '../content/content'; import {IonicComponent} from '../../config/component'; @@ -53,14 +53,14 @@ export class Tab extends ViewController { super(tabs, compiler, elementRef, loader, injector); this.tabs = tabs; - this.item = new NavItem(tabs.parent); - this.item.setInstance(this); - this.item.setViewElement(elementRef.domElement); - this.panes['_n'] = this; + let item = this.item = new ViewItem(tabs.parent); + item.setInstance(this); + item.setViewElement(elementRef.domElement); + this.panes.add(this) tabs.addTab(this.item); - this.panelId = 'tab-panel-' + this.item.id; - this.labeledBy = 'tab-button-' + this.item.id; + this.panelId = 'tab-panel-' + item.id; + this.labeledBy = 'tab-button-' + item.id; } onInit() { diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js index 00abe637e7..4d7977ce5c 100644 --- a/ionic/components/tabs/tabs.js +++ b/ionic/components/tabs/tabs.js @@ -10,9 +10,9 @@ import {NgFor} from 'angular2/angular2'; import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ViewController} from '../view/view-controller'; +import {ViewItem} from '../view/view-item'; import {TabButton} from './tab-button'; import {Icon} from '../icon/icon'; -import {NavItem} from '../nav/nav-item'; import {IonicComponent} from '../../config/component'; @@ -43,14 +43,14 @@ export class Tabs extends ViewController { constructor( @Optional() viewController: ViewController, - @Optional() navItem: NavItem, + @Optional() item: ViewItem, compiler: Compiler, elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector ) { super(viewController, compiler, elementRef, loader, injector); - this.item = navItem; + this.item = item; this.domElement = elementRef.domElement; this.config = Tabs.config.invoke(this); @@ -82,7 +82,7 @@ export class Tabs extends ViewController { animate: false }; - let leavingItem = this.getActive() || new NavItem(); + let leavingItem = this.getActive() || new ViewItem(); leavingItem.shouldDestroy = false; leavingItem.shouldCache = true; leavingItem.willCache(); diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js index 48e8477cae..09698cb482 100644 --- a/ionic/components/toolbar/toolbar.js +++ b/ionic/components/toolbar/toolbar.js @@ -4,9 +4,9 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref'; import {NgZone} from 'angular2/src/core/zone/ng_zone'; -import * as dom from '../../util/dom'; import {IonicComponent} from 'ionic/config/component' import {Platform} from 'ionic/platform/platform'; +import * as dom from '../../util/dom'; @Component({ @@ -95,7 +95,7 @@ new IonicComponent(Toolbar, { selector: 'template[toolbar]' }) export class ToolbarTemplate { - constructor(navItem: NavItem, protoViewRef: ProtoViewRef) { - navItem.toolbarProto(protoViewRef); + constructor(item: ViewItem, protoViewRef: ProtoViewRef) { + item.addProtoViewRef('toolbar', protoViewRef); } } diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.js index d6b600ad09..d8521e755c 100644 --- a/ionic/components/view/view-controller.js +++ b/ionic/components/view/view-controller.js @@ -9,9 +9,10 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {Compiler} from 'angular2/angular2'; import {bind} from 'angular2/di'; +import {ViewItem} from './view-item'; import {NavController} from '../nav/nav-controller'; -import {NavItem, NavParams} from '../nav/nav-item'; -import {Pane, NavBarContainer} from '../nav/pane'; +import {PaneController} from '../nav/pane'; +import {NavParams} from '../nav/nav-item'; import {Transition} from '../../transitions/transition'; import {ClickBlock} from '../../util/click-block'; import * as util from 'ionic/util'; @@ -30,85 +31,20 @@ export class ViewController { this.parent = parent; this.compiler = compiler; this.elementRef = elementRef; - this.domElement = elementRef.domElement; this.loader = loader; this.injector = injector; this.items = []; this.navCtrl = new NavController(this); + this.panes = new PaneController(this); + this.sbTransition = null; this.sbActive = false; - this.panes = {}; this.id = ++itemIds; this.childIds = -1; } - setPaneAnchor(elementRef) { - this.anchorElementRef = elementRef; - } - - getPane(itemStructure, callback) { - // this gets or creates the Pane which similar nav items live in - // Nav items with just a navbar/content would all use the same Pane - // Tabs and view's without a navbar would get a different Panes - - if (this.panes[itemStructure.key]) { - // nav pane which the entering component already exists - callback(this.panes[itemStructure.key]); - - } else { - // create a new nav pane - this.panes[itemStructure.key] = null; - - let injector = this.injector.resolveAndCreateChild([ - bind(ViewController).toValue(this) - ]); - - // add a Pane element - // when the Pane is added, it'll also add its reference to the panes object - this.loader.loadNextToExistingLocation(Pane, this.anchorElementRef, injector).then(() => { - - // get the pane reference by name - let pane = this.panes[itemStructure.key]; - - // get the element inside the Pane to add sections to - let sectionViewContainerRef = pane.sectionAnchorElementRef; - let promises = []; - let sectionsToAdd = [] - - // decide which sections should be added to this Pane, ie: nav bars, tab bars, etc. - // add only the sections it needs - if (itemStructure.navbar) { - sectionsToAdd.push(NavBarContainer); - } - - // add the sections which this type of Pane requires - sectionsToAdd.forEach(SectionClass => { - // as each section is compiled and added to the Pane - // the section will add a reference to itself in the Pane's sections object - promises.push( this.loader.loadNextToExistingLocation(SectionClass, sectionViewContainerRef, null) ); - }); - - // wait for all of the sections to resolve - Promise.all(promises).then(() => { - callback(pane); - }); - - }); - - } - } - - addPane(pane) { - for (let np in this.panes) { - if (this.panes[np] === null) { - this.panes[np] = pane; - return; - } - } - } - push(ComponentClass, params = {}, opts = {}) { if (!ComponentClass || this.isTransitioning()) { return Promise.reject(); @@ -126,13 +62,13 @@ export class ViewController { opts.direction = opts.direction || 'forward'; // the active item is going to be the leaving one (if one exists) - let leavingItem = this.getActive() || new NavItem(); + let leavingItem = this.getActive() || new ViewItem(); leavingItem.shouldDestroy = false; leavingItem.shouldCache = true; leavingItem.willCache(); // create a new NavStackItem - let enteringItem = new NavItem(this, ComponentClass, params); + let enteringItem = new ViewItem(this, ComponentClass, params); // add the item to the stack this.add(enteringItem); @@ -158,7 +94,7 @@ export class ViewController { // get the active item and set that it is staged to be leaving // was probably the one popped from the stack - let leavingItem = this.getActive() || new NavItem(); + let leavingItem = this.getActive() || new ViewItem(); leavingItem.shouldDestroy = true; leavingItem.shouldCache = false; leavingItem.willUnload(); @@ -259,7 +195,7 @@ export class ViewController { // get the active item and set that it is staged to be leaving // was probably the one popped from the stack - let leavingItem = this.getActive() || new NavItem(); + let leavingItem = this.getActive() || new ViewItem(); leavingItem.shouldDestroy = true; leavingItem.shouldCache = false; leavingItem.willLeave(); @@ -377,7 +313,7 @@ export class ViewController { if (opts.animate) { // block possible clicks during transition ClickBlock(true, 520); - this.getNavElement().classList.add('transitioning'); + this.getContainerElement().classList.add('transitioning'); } } @@ -396,7 +332,7 @@ export class ViewController { } }); - this.getNavElement().classList.remove('transitioning'); + this.getContainerElement().classList.remove('transitioning'); // allow clicks again ClickBlock(false); @@ -468,8 +404,8 @@ export class ViewController { return null; } - getNavElement() { - return this.domElement; + getContainerElement() { + return this.elementRef.domElement; } navbarViewContainer(nbContainer) { @@ -526,7 +462,7 @@ export class ViewController { } width() { - return this.domElement.offsetWidth; + return this.getContainerElement().offsetWidth; } } diff --git a/ionic/components/nav/nav-item.js b/ionic/components/view/view-item.js similarity index 94% rename from ionic/components/nav/nav-item.js rename to ionic/components/view/view-item.js index fc1588cf0d..9190989ea3 100644 --- a/ionic/components/nav/nav-item.js +++ b/ionic/components/view/view-item.js @@ -3,16 +3,16 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {bind} from 'angular2/di'; import {ViewController} from '../view/view-controller'; -import {NavController} from './nav-controller'; -import * as util from 'ionic/util'; +import {NavController} from '../nav/nav-controller'; +import {NavParams} from '../nav/nav-params'; -export class NavItem { +export class ViewItem { constructor(viewController, ComponentClass, params = {}) { this.viewController = viewController; this.ComponentClass = ComponentClass; - this.params = params; + this.params = new NavParams(this.params); this.instance = null; this.state = 0; @@ -48,15 +48,15 @@ export class NavItem { // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars? let itemStructure = getProtoViewStructure(componentProtoViewRef); - // get the appropriate Pane which this NavItem will fit into - viewController.getPane(itemStructure, pane => { + // get the appropriate Pane which this ViewItem will fit into + viewController.panes.get(itemStructure, pane => { - // create a new injector just for this NavItem + // create a new injector just for this ViewItem let injector = viewController.injector.resolveAndCreateChild([ bind(ViewController).toValue(viewController), bind(NavController).toValue(viewController.navCtrl), - bind(NavParams).toValue(new NavParams(this.params)), - bind(NavItem).toValue(this) + bind(NavParams).toValue(this.params), + bind(ViewItem).toValue(this) ]); // add the content of the view to the content area @@ -103,6 +103,7 @@ export class NavItem { // all done, fire the callback if (this._wait) { this._waitCallback = callback; + } else { callback(); } @@ -268,11 +269,6 @@ export class NavItem { } -export class NavParams { - constructor(params) { - util.extend(this, params); - } -} function getProtoViewStructure(componentProtoViewRef) { let navbar = true;