mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
i'm all about that base
This commit is contained in:
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
||||||
}
|
|
Reference in New Issue
Block a user