From c74216765cf94cf5624b9d955e58bc6f6ce03b97 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 4 Jun 2015 10:44:52 -0500 Subject: [PATCH] nav-pane/tab view anchors --- ionic/components/nav/nav-base.js | 4 +- ionic/components/nav/nav-pane.js | 84 ++++++++++++++++++++++++++++++++ ionic/components/nav/nav.js | 79 ------------------------------ ionic/components/tabs/tab.js | 10 ++-- 4 files changed, 91 insertions(+), 86 deletions(-) create mode 100644 ionic/components/nav/nav-pane.js diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 0c65632d87..f14bcd2067 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -11,9 +11,9 @@ import {bind} from 'angular2/di'; import {NavController} from './nav-controller'; import {NavItem, NavParams} from './nav-item'; -import {NavPane, NavBarSection} from './nav'; -import * as util from 'ionic/util'; +import {NavPane, NavBarSection} from './nav-pane'; import {Transition, ClickBlock} from 'ionic/ionic'; +import * as util from 'ionic/util'; export class NavBase { diff --git a/ionic/components/nav/nav-pane.js b/ionic/components/nav/nav-pane.js new file mode 100644 index 0000000000..0aa9c32530 --- /dev/null +++ b/ionic/components/nav/nav-pane.js @@ -0,0 +1,84 @@ +import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; +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 {Nav} from './nav'; + + +@Component({selector:'ion-nav-pane'}) +@View({ + template: ` + +
+ +
+ `, + directives: [NavPaneSectionAnchor, NavViewAnchor] +}) +export class NavPane { + constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) { + this.viewContainerRef = viewContainerRef; + this.sections = {}; + nav.addPane(this); + } + addSection(sectionName, instance) { + this.sections[sectionName] = instance; + } +} + + +// Used to dynamically create new sections for a NavPane +// This is simply a reference point to create new sections +// Navbar, toolbar, and tabbar sections would be created next to this +@Directive({ + selector: 'template[nav-section-anchor]' +}) +class NavPaneSectionAnchor { + constructor(@Parent() navPane: NavPane, elementRef: ElementRef) { + navPane.sectionAnchorElementRef = elementRef; + } +} + + +// Where the content of the NavItem goes next to. All NavPanes have content. +// This is simply a reference point to where content goes +@Directive({ + selector: 'template[view-anchor]' +}) +class NavViewAnchor { + constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef) { + navPane.contentContainerRef = viewContainerRef; + } +} + +@Component({ + selector: 'section', + hostAttributes: { + 'class': 'navbar-container' + } +}) +@View({ + template: ` + + `, + directives: [NavBarSectionAnchor] +}) +export class NavBarSection { + constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef, elementRef: ElementRef) { + this.navPane = navPane; + navPane.addSection('navbar', this); + } +} + + +// Reference point of where the guts of the NavBar should go next to +@Directive({ + selector: 'template[section-anchor]' +}) +class NavBarSectionAnchor { + constructor(@Parent() navBarSection: NavBarSection, viewContainerRef: ViewContainerRef) { + navBarSection.viewContainerRef = viewContainerRef; + } +} diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index ff39a713d2..57ea0fb829 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -65,82 +65,3 @@ class NavPaneAnchor { nav.navBase.setPaneAnchor(elementRef); } } - - -@Component({selector:'ion-nav-pane'}) -@View({ - template: ` - -
- -
- `, - directives: [NavPaneSectionAnchor, NavPaneContentAnchor] -}) -export class NavPane { - constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) { - this.viewContainerRef = viewContainerRef; - this.sections = {}; - nav.addPane(this); - } - addSection(sectionName, instance) { - this.sections[sectionName] = instance; - } -} - - -// Used to dynamically create new sections for a NavPane -// This is simply a reference point to create new sections -// Navbar, toolbar, and tabbar sections would be created next to this -@Directive({ - selector: 'template[nav-section-anchor]' -}) -class NavPaneSectionAnchor { - constructor(@Parent() navPane: NavPane, elementRef: ElementRef) { - navPane.sectionAnchorElementRef = elementRef; - } -} - - -// Where the content of the NavItem goes next to. All NavPanes have content. -// This is simply a reference point to where content goes -@Directive({ - selector: 'template[content-anchor]' -}) -class NavPaneContentAnchor { - constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef) { - navPane.contentContainerRef = viewContainerRef; - } -} - - -// -@Component({ - selector: 'section', - hostAttributes: { - 'class': 'navbar-container' - } -}) -@View({ - template: ` - - `, - directives: [NavBarSectionAnchor] -}) -export class NavBarSection { - constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef, elementRef: ElementRef) { - this.navPane = navPane; - navPane.addSection('navbar', this); - } -} - - -// Reference point of where the guts of the NavBar should go next to -@Directive({ - selector: 'template[section-anchor]' -}) -class NavBarSectionAnchor { - constructor(@Parent() navBarSection: NavBarSection, viewContainerRef: ViewContainerRef) { - navBarSection.viewContainerRef = viewContainerRef; - } -} diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index 8e7e99e8f2..bad9ca7fe5 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -35,10 +35,10 @@ import {IonicComponent} from 'ionic/config/component'; }) @View({ template: ` - + `, - directives: [TabAnchor] + directives: [TabViewAnchor] }) export class Tab { constructor( @@ -64,7 +64,7 @@ export class Tab { } onInit() { - this.navBase.initial(this.initial); + //this.navBase.initial(this.initial); } select(shouldSelect) { @@ -87,9 +87,9 @@ export class Tab { @Directive({ - selector: 'template[tab-anchor]' + selector: 'template[view-anchor]' }) -class TabAnchor { +class TabViewAnchor { constructor(@Parent() tab: Tab, elementRef: ElementRef) { tab.setPaneAnchor(elementRef); }