javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

tabs advanced wip

Browse Source
This commit is contained in:
Adam Bradley
2015-06-01 10:55:37 -05:00
parent 123f3f31be
commit e30eb187dc
10 changed files with 137 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/nav-bar/nav-bar.js
View File

@ -1,4 +1,4 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
@ -30,14 +30,18 @@ import {BackButton} from './back-button';
</div>
</div>
`,
directives: [BackButton]
directives: [BackButton],
lifecycle: [onInit]
})
export class Navbar {
constructor(navItem:NavItem, elementRef:ElementRef, ngZone:NgZone) {
this.navItem = navItem;
this.domElement = elementRef.domElement;
this.zone = ngZone;
}
ngZone.runOutsideAngular(() => {
onInit() {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.alignTitle();
}, 32);
@ -103,6 +107,7 @@ export class Navbar {
})
export class NavbarTemplate {
constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
console.log('NavbarTemplate', protoViewRef)
navItem.navbarProto(protoViewRef);
}
}

11
ionic/components/nav/nav-base.js
View File

@ -15,20 +15,15 @@ const CACHED_STATE = 'cached';
export class NavBase {
constructor(loader, injector) {
constructor(elementRef, loader, injector) {
this.elementRef = elementRef;
this.loader = loader;
this.injector = injector;
this.items = [];
this.navCtrl = new NavController(this);
this.sbTransition = null;
this.sbActive = false;
}
set initial(Component) {
if (!this._init && Component) {
this._init = true;
this.push(Component);
}
this.domElement = elementRef.domElement;
}
clear() {

9
ionic/components/nav/nav-item.js
View File

@ -30,6 +30,7 @@ export class NavItem {
}
render() {
console.log('nav-item render')
if (this.created) {
console.log('showed existing view', this.id);
return Promise.resolve();
@ -47,7 +48,7 @@ export class NavItem {
]);
this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.contentElementRef, injector).then((componentRef) => {
console.log('nav-item loadNextToExistingLocation', this.nav.contentElementRef)
let navbarContainer = this.nav.navbarContainerRef;
if (componentRef && componentRef.dispose && navbarContainer) {
@ -56,6 +57,7 @@ export class NavItem {
this.viewEle = componentRef.location.domElement;
this.viewEle.classList.add('ion-view');
if (this._navbarProto) {
let context = {
boundElementIndex: 0,
parentView: {
@ -65,6 +67,7 @@ export class NavItem {
let atIndex = -1;
console.log('nav-item navbarContainer.create', this._navbarProto)
this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
if (this._navbarView) {
@ -73,6 +76,7 @@ export class NavItem {
});
}
}
}
console.log('created view', this.id);
resolve();
@ -101,6 +105,7 @@ export class NavItem {
}
navbarProto(navbarProtoView) {
console.log('nav-item navbarProto')
this._navbarProto = navbarProtoView;
}
@ -109,8 +114,10 @@ export class NavItem {
}
navbarElement() {
if (this._navbarView && this._navbarView._view) {
return this._navbarView._view.render._view.rootNodes[0];
}
}
contentElement() {
return this.viewEle.querySelector('ion-content');

23
ionic/components/nav/nav.js
View File

@ -1,5 +1,5 @@
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
@ -15,7 +15,8 @@ import {IonicComponent} from '../../config/component';
selector: 'ion-nav',
properties: [
'initial'
]
],
lifecycle: [onInit]
})
@View({
template: `
@ -29,20 +30,26 @@ import {IonicComponent} from '../../config/component';
`,
directives: [NavbarAnchor, ContentAnchor, SwipeHandle]
})
export class Nav extends NavBase {
export class Nav {
constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
super(loader, injector);
this.elementRef = elementRef;
this.navBase = new NavBase(elementRef, loader, injector);
this.domElement = elementRef.domElement;
this.config = Nav.config.invoke(this);
}
onInit() {
if (this.initial) {
this.navBase.push(this.initial);
}
}
width() {
return this.domElement.offsetWidth;
}
get swipeBackEnabled() {
let activeItem = this.getActive();
let activeItem = this.navBase.getActive();
if (activeItem) {
return activeItem.enableBack;
}
@ -57,7 +64,7 @@ new IonicComponent(Nav, {});
})
class NavbarAnchor {
constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
nav.navbarContainerRef = viewContainerRef;
nav.navBase.navbarContainerRef = viewContainerRef;
}
}
@ -67,6 +74,6 @@ class NavbarAnchor {
})
class ContentAnchor {
constructor(@Parent() nav: Nav, elementRef: ElementRef) {
nav.contentElementRef = elementRef;
nav.navBase.contentElementRef = elementRef;
}
}

3
ionic/components/tabs/tab-button.js
View File

@ -13,9 +13,6 @@ import {Tabs} from './tabs';
'panelId': 'attr.aria-controls',
'tab.isSelected': 'attr.aria-selected'
},
hostAttributes: {
'role': 'tab'
},
hostListeners: {
'^click': 'onClick($event)'
},

38
ionic/components/tabs/tab.js
View File

@ -1,5 +1,6 @@
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {Injector} from 'angular2/di';
@ -9,9 +10,10 @@ import {Content} from '../content/content';
import {IonicComponent} from 'ionic/config/component';
import {NavBase} from '../nav/nav-base';
let tabId = -1;
@Directive({
@Component({
selector: 'ion-tab',
properties: [
'initial',
@ -28,6 +30,13 @@ let tabId = -1;
'role': 'tabpanel'
}
})
@View({
template: `
<template content-anchor></template>
<content></content>
`,
directives: [ContentAnchor]
})
export class Tab {
constructor(
@Parent() tabs: Tabs,
@ -35,7 +44,10 @@ export class Tab {
loader: DynamicComponentLoader,
injector: Injector
) {
this.nav = new NavBase(loader, injector);
this.navBase = new NavBase(elementRef, loader, injector);
this.navBase.navbarContainerRef = tabs.navbarContainerRef;
this.domElement = elementRef.domElement;
this.id = ++tabId;
@ -43,14 +55,14 @@ export class Tab {
this.labeledBy = 'tab-button-' + this.id;
tabs.addTab(this);
console.log('Tab constructor')
}
setRef(ref) {
this.nav.contentElementRef = ref;
onInit() {
if (this.initial) {
console.log('Tab onInit')
this.navBase.push(this.initial);
}
set initial(value) {
this.nav.initial = value;
}
select(isSelected) {
@ -59,3 +71,13 @@ export class Tab {
}
}
@Directive({
selector: '[content-anchor]'
})
class ContentAnchor {
constructor(@Parent() tab: Tab, elementRef: ElementRef) {
tab.navBase.contentElementRef = elementRef;
}
}

24
ionic/components/tabs/tabs.js
View File

@ -1,9 +1,11 @@
import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {Injector} from 'angular2/di';
import {NgFor} from 'angular2/angular2';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {IonicComponent} from '../../config/component';
import {Tab} from './tab';
@ -21,9 +23,12 @@ import {Icon} from '../icon/icon';
})
@View({
template: `
<header class="navbar-container">
<template navbar-anchor></template>
</header>
<nav class="navbar-container tab-bar-container">
<div class="tab-bar">
<button *ng-for="#t of tabs" [tab]="t" class="tab-button">
<div class="tab-bar" role="tablist">
<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
<icon [name]="t.tabIcon" class="tab-button-icon"></icon>
<span class="tab-button-text">{{t.tabTitle}}</span>
</button>
@ -33,7 +38,7 @@ import {Icon} from '../icon/icon';
<content></content>
</section>
`,
directives: [NgFor, TabButton, Icon]
directives: [NgFor, TabButton, Icon, NavbarAnchor]
})
export class Tabs {
constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
@ -92,3 +97,14 @@ new IonicComponent(Tabs, {
}
}
});
@Directive({
selector: '[navbar-anchor]'
})
class NavbarAnchor {
constructor(@Parent() tabs: Tabs, viewContainerRef: ViewContainerRef) {
console.log('Tabs NavbarAnchor', viewContainerRef)
tabs.navbarContainerRef = viewContainerRef;
}
}

4
ionic/components/tabs/test/advanced/index.js
View File

@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/angular2'
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Nav} from 'ionic/ionic';
import {Nav, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
import {SignInPage} from './pages/sign-in';
@ -11,7 +11,7 @@ import {SignInPage} from './pages/sign-in';
})
@View({
templateUrl: 'main.html',
directives: [Nav]
directives: [Nav, NavbarTemplate, Navbar, Content]
})
class IonicApp {
constructor() {

3
ionic/components/tabs/test/advanced/pages/tabs.html
View File

@ -4,7 +4,4 @@
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
</ion-tab>
<ion-tab [initial]="tab2Initial" tab-title="Tab 2">
</ion-tab>
</ion-tabs>

79
ionic/components/tabs/test/advanced/pages/tabs.js
View File

@ -1,13 +1,7 @@
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {
Tabs,
Tab,
Content,
NavController,
} from 'ionic/ionic';
import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
@Component({
@ -15,15 +9,13 @@ import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
})
@View({
templateUrl: './pages/tabs.html',
directives: [Tabs, Tab, Content]
directives: [Tabs, Tab, Content, NavbarTemplate, Navbar]
})
export class TabsPage {
constructor(
nav: NavController
) {
constructor(nav: NavController) {
this.tab1Initial = Tab1Page1
this.tab2Initial = Tab2Page1
//this.tab2Initial = Tab2Page1
}
}
@ -31,52 +23,51 @@ export class TabsPage {
//
// tab 1
//
@Component({ selector: 't1p1' })
@Component({selector: 'ion-view'})
@View({
template: `
<header *ion-toolbar>
<h1 class="toolbar-title">Tabs 1 Page 1</h1>
</header>
<ion-content class="padding">
<p>Tab 1 Page 1.</p>
<button class="button button-primary" (click)="next()">
Go to Tab 1, Page 2 (push)
</button>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>`,
directives: [Content, Toolbar, ToolbarTitle]
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 1 Page 1</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="push()">Go to Tab 1, Page 2</button></p>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
class Tab1Page1 {
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
export class Tab1Page1 {
constructor(nav: NavController) {
this.nav = nav;
console.log('Tab1Page1 onInit')
}
next() {
push() {
this.nav.push(Tab1Page2)
}
}
@Component({ selector: 't1p2' })
@Component({selector: 'ion-view'})
@View({
template: `
<header *ion-toolbar>
<h1 class="toolbar-title">Tabs 1 Page 2</h1>
</header>
<ion-content class="padding">
<p>Tab 1 Page 2.</p>
<button class="button button-primary" (click)="pop()">
Back to Tab 1, Page 1 (pop)
</button>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>`,
directives: [Content]
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 1 Page 2</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="pop()">Back to Tab 1, Page 1</button></p>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
class Tab1Page2 {
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
export class Tab1Page2 {
constructor(nav: NavController) {
this.nav = nav;
}
pop() { this.nav.pop(); }
pop() {
this.nav.push()
}
}