i'm all about that base

This commit is contained in:
Adam Bradley
2015-06-05 23:13:36 -05:00
parent 3dd26bc417
commit 80c5c6dd97
6 changed files with 67 additions and 111 deletions

View File

@ -12,19 +12,20 @@ import {bind} from 'angular2/di';
import {NavController} from './nav-controller'; import {NavController} from './nav-controller';
import {NavItem, NavParams} from './nav-item'; import {NavItem, NavParams} from './nav-item';
import {Pane, NavBarSection} from './pane'; import {Pane, NavBarSection} from './pane';
import {Transition, ClickBlock} from 'ionic/ionic'; import {Transition} from '../../transitions/transition';
import {ClickBlock} from '../../util/click-block';
import * as util from 'ionic/util'; import * as util from 'ionic/util';
export class NavBase { export class NavBase {
constructor( constructor(
parent: NavBase, parent: NavBase,
compiler: Compiler, compiler: Compiler,
elementRef: ElementRef, elementRef: ElementRef,
loader: DynamicComponentLoader, loader: DynamicComponentLoader,
injector: Injector injector: Injector
) { ) {
this.parent = parent; this.parent = parent;
this.compiler = compiler; this.compiler = compiler;
@ -43,10 +44,6 @@ export class NavBase {
this.childIds = -1; this.childIds = -1;
} }
initial(ComponentClass) {
this.push(ComponentClass);
}
setPaneAnchor(elementRef) { setPaneAnchor(elementRef) {
this.anchorElementRef = elementRef; this.anchorElementRef = elementRef;
} }

View File

@ -1,12 +1,11 @@
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {Optional} from 'angular2/src/di/annotations_impl';
import {View} from 'angular2/src/core/annotations_impl/view'; import {View} from 'angular2/src/core/annotations_impl/view';
import {Optional} from 'angular2/src/di/annotations_impl';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Compiler} from 'angular2/angular2';
import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {Injector} from 'angular2/di'; import {Injector} from 'angular2/di';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {Compiler} from 'angular2/angular2';
import {NavBase} from './nav-base'; import {NavBase} from './nav-base';
import {IonicComponent} from '../../config/component'; import {IonicComponent} from '../../config/component';
@ -25,31 +24,23 @@ import {IonicComponent} from '../../config/component';
`, `,
directives: [NavPaneAnchor] directives: [NavPaneAnchor]
}) })
export class Nav { export class Nav extends NavBase {
constructor( constructor(
@Optional() parentNavBase: NavBase, @Optional() parentNavBase: NavBase,
compiler:Compiler, compiler: Compiler,
elementRef: ElementRef, elementRef: ElementRef,
loader: DynamicComponentLoader, loader: DynamicComponentLoader,
injector: Injector injector: Injector
) { ) {
this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector); super(parentNavBase, compiler, elementRef, loader, injector);
this.domElement = elementRef.domElement; this.domElement = elementRef.domElement;
this.config = Nav.config.invoke(this); this.config = Nav.config.invoke(this);
} }
onInit() { onInit() {
this.navBase.initial(this.initial); this.push(this.initial);
}
setPaneAnchor(elementRef) {
this.navBase.setPaneAnchor(elementRef);
}
addPane(pane) {
this.navBase.addPane(pane);
} }
} }
@ -61,6 +52,6 @@ new IonicComponent(Nav, {});
}) })
class NavPaneAnchor { class NavPaneAnchor {
constructor(@Parent() nav: Nav, elementRef: ElementRef) { constructor(@Parent() nav: Nav, elementRef: ElementRef) {
nav.navBase.setPaneAnchor(elementRef); nav.setPaneAnchor(elementRef);
} }
} }

View File

@ -1,6 +1,5 @@
import {Parent} from 'angular2/src/core/annotations_impl/visibility'; import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Tabs} from './tabs'; import {Tabs} from './tabs';
@ -32,6 +31,6 @@ export class TabButton {
onClick(ev) { onClick(ev) {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
this.tabs.select(this.tab); this.tabs.selectTab(this.tab);
} }
} }

View File

@ -8,12 +8,11 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone
import {Injector} from 'angular2/di'; import {Injector} from 'angular2/di';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {Nav} from '../nav/nav'; import {Tabs} from './tabs';
import {NavBase} from '../nav/nav-base'; import {NavBase} from '../nav/nav-base';
import {NavItem} from '../nav/nav-item'; import {NavItem} from '../nav/nav-item';
import {Tabs} from './tabs';
import {Content} from '../content/content'; import {Content} from '../content/content';
import {IonicComponent} from 'ionic/config/component'; import {IonicComponent} from '../../config/component';
@Component({ @Component({
@ -40,25 +39,26 @@ import {IonicComponent} from 'ionic/config/component';
`, `,
directives: [TabContentAnchor] directives: [TabContentAnchor]
}) })
export class Tab { export class Tab extends NavBase {
constructor(
@Parent() tabs: Tabs,
compiler: Compiler,
elementRef: ElementRef,
loader: DynamicComponentLoader,
injector: Injector,
viewContainerRef: ViewContainerRef
) {
this.navBase = new NavBase(tabs.navBase, compiler, elementRef, loader, injector); constructor(
if (tabs.navBase.parent) { @Parent() tabs: Tabs,
this.sections = tabs.navBase.parent.panes['_n'].sections; compiler: Compiler,
elementRef: ElementRef,
loader: DynamicComponentLoader,
injector: Injector,
viewContainerRef: ViewContainerRef
) {
super(tabs, compiler, elementRef, loader, injector);
if (tabs.parent) {
this.sections = tabs.parent.panes['_n'].sections;
} }
this.item = new NavItem(this.navBase); this.item = new NavItem(this);
this.item.setInstance(this); this.item.setInstance(this);
this.item.setViewElement(elementRef.domElement); this.item.setViewElement(elementRef.domElement);
tabs.add(this.item); tabs.addTab(this.item);
this.tabs = tabs; this.tabs = tabs;
this.panelId = 'tab-panel-' + this.item.id; this.panelId = 'tab-panel-' + this.item.id;
@ -68,27 +68,26 @@ export class Tab {
this.viewContainerRef = viewContainerRef; this.viewContainerRef = viewContainerRef;
this.navBase.panes['_n'] = this; this.panes['_n'] = this;
this.domElement = elementRef.domElement; this.domElement = elementRef.domElement;
this.config = Nav.config.invoke(this);
} }
onInit() { onInit() {
if ( this.tabs.navBase.isActive(this.item) || this.tabs.navBase.isStagedEntering(this.item) ) { if ( this.tabs.isActive(this.item) || this.tabs.isStagedEntering(this.item) ) {
this.loadInitial(); this.loadInitial();
} }
} }
loadInitial() { loadInitial() {
if (this.initial && !this._loaded) { if (this.initial && !this._loaded) {
this.navBase.initial(this.initial); this.push(this.initial);
this._loaded = true; this._loaded = true;
} }
} }
get isSelected() { get isSelected() {
return this.tabs.navBase.isActive(this.item); return this.tabs.isActive(this.item);
} }
} }

View File

@ -9,12 +9,11 @@ import {Injector} from 'angular2/di';
import {NgFor} from 'angular2/angular2'; import {NgFor} from 'angular2/angular2';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {IonicComponent} from '../../config/component';
import {Tab} from './tab';
import {TabButton} from './tab-button'; import {TabButton} from './tab-button';
import {NavBase} from '../nav/nav-base';
import {Icon} from '../icon/icon'; import {Icon} from '../icon/icon';
import {NavItem} from '../nav/nav-item'; import {NavItem} from '../nav/nav-item';
import {NavBase} from '../nav/nav-base'; import {IonicComponent} from '../../config/component';
@Component({ @Component({
@ -40,40 +39,41 @@ import {NavBase} from '../nav/nav-base';
`, `,
directives: [NgFor, TabButton, Icon] directives: [NgFor, TabButton, Icon]
}) })
export class Tabs { export class Tabs extends NavBase {
constructor( constructor(
@Optional() parentNavBase: NavBase, @Optional() parentNavBase: NavBase,
compiler: Compiler, compiler: Compiler,
elementRef: ElementRef, elementRef: ElementRef,
loader: DynamicComponentLoader, loader: DynamicComponentLoader,
injector: Injector injector: Injector
) { ) {
this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector); super(parentNavBase, compiler, elementRef, loader, injector);
this.domElement = elementRef.domElement; this.domElement = elementRef.domElement;
this.config = Tabs.config.invoke(this); this.config = Tabs.config.invoke(this);
} }
add(tabItem) { addTab(tabItem) {
this.navBase.add(tabItem); this.add(tabItem);
if (this.navBase.length() === 1) { if (this.length() === 1) {
this.select(0); this.selectTab(0);
} }
} }
selectTab(tab) {
let item = null;
if (typeof tab === 'number') {
item = this.getByIndex(tab);
} else {
item = this.getByInstance(tab)
}
this.select(item);
}
get tabs() { get tabs() {
return this.navBase.instances(); return this.instances();
}
select(tab) {
let item = null;
if (typeof tab === 'number') {
item = this.navBase.getByIndex(tab);
} else {
item = this.navBase.getByInstance(tab)
}
this.navBase.select(item);
} }
} }

View File

@ -1,30 +0,0 @@
ion-view {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
<<<<<<< HEAD
=======
// by default this is display: none;
// and the transition animation will display it
//display: none;
flex-direction: column;
display: flex;
/*
TODO: This is probably not the most common case,
should be display flex first, then remove for special cases.
&.show-view {
display: flex;
}
*/
>>>>>>> origin/master
}