javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

dem toolbarz

Browse Source
This commit is contained in:
Adam Bradley
2015-05-13 14:43:37 -05:00
parent 533cb12559
commit 7a144b16c4
9 changed files with 53 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,7 @@ export class NavItem {
bind(NavItem).toValue(this)
]);
this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector).then((componentRef) => {
this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.contentAnchor.elementRef, injector).then((componentRef) => {
// content
this.component = componentRef;
@@ -43,7 +43,7 @@ export class NavItem {
this.domElement.setAttribute('data-nav-item-id', this.id);
for (let i = 0; i < this.headers.length; i++) {
this.createToolbar(this.headers[i], injector);
this.createHeader(this.headers[i], injector);
}
resolve();
@@ -52,16 +52,17 @@ export class NavItem {
return promise;
}
createToolbar(ToolbarClass, injector) {
let vc = new ViewContainerRef(this.nav.viewManager, this.nav.itemHeader.elementRef);
createHeader(toolbarProtoView, injector) {
let vc = this.nav.headerAnchor.viewContainerRef;
let protoViewRef = ToolbarClass.protoViewRef;
let atIndex = -1;
let context = this.nav.headerAnchor.elementRef;
let view = vc.create(protoViewRef, -1, this.nav.itemHeader.elementRef, injector);
let view = vc.create(toolbarProtoView, atIndex, context, injector);
}
addToolbar(position, toolbar) {
this.headers.push(toolbar);
addHeader(toolbarProtoView) {
this.headers.push(toolbarProtoView);
}
destroy() {

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

@@ -3,6 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
import {View} from 'angular2/src/core/annotations_impl/view';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {Injector} from 'angular2/di';
import {NavBase} from 'ionic/components/nav/nav-base';
@@ -19,13 +20,15 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
@View({
template: `
<header class="toolbar-container">
<header-container></header-container>
<header-anchor></header-anchor>
</header>
<section class="nav-item-container">
<content-container></content-container>
<content-anchor></content-anchor>
</section>
<footer>
</footer>
`,
directives: [HeaderContainer, ContentContainer]
directives: [HeaderAnchor, ContentAnchor]
})
export class Nav extends NavBase {
@@ -45,24 +48,26 @@ export class Nav extends NavBase {
@Component({
selector: 'header-container'
selector: 'header-anchor'
})
class HeaderContainer {
constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
nav.itemHeader = {
elementRef: elementRef
class HeaderAnchor {
constructor(@Ancestor() nav: Nav, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
nav.headerAnchor = {
elementRef: elementRef,
viewContainerRef: viewContainerRef
};
}
}
@Component({
selector: 'content-container'
selector: 'content-anchor'
})
class ContentContainer {
constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
nav.itemContent = {
elementRef: elementRef
class ContentAnchor {
constructor(@Ancestor() nav: Nav, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
nav.contentAnchor = {
elementRef: elementRef,
viewContainerRef: viewContainerRef
};
}
}

6
ionic/components/nav/test/basic/pages/first-page.html
View File

@@ -1,9 +1,9 @@
<header *ion-toolbar>
<div *ion-header>
<h1 class="toolbar-title">First Page</h1>
<h1 class="toolbar-title">First Page</h1>
</header>
</div>
<ion-content class="padding" style="background:blue">

4
ionic/components/nav/test/basic/pages/first-page.js
View File

@@ -1,14 +1,14 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, Toolbar} from 'ionic/ionic';
import {NavController, Header} from 'ionic/ionic';
import {SecondPage} from './second-page';
@Component({selector: 'ion-view'})
@View({
templateUrl: 'pages/first-page.html',
directives: [Toolbar]
directives: [Header]
})
export class FirstPage {
constructor(

4
ionic/components/nav/test/basic/pages/second-page.html
View File

@@ -1,9 +1,9 @@
<header *ion-toolbar>
<div *ion-header>
<h1 class="toolbar-title">Second Page</h1>
</header>
</div>
<ion-content class="padding" style="background:green">

4
ionic/components/nav/test/basic/pages/second-page.js
View File

@@ -1,14 +1,14 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, NavParams, Toolbar} from 'ionic/ionic';
import {NavController, NavParams, Header} from 'ionic/ionic';
import {ThirdPage} from './third-page';
@Component()
@View({
templateUrl: 'pages/second-page.html',
directives: [Toolbar]
directives: [Header]
})
export class SecondPage {
constructor(

4
ionic/components/nav/test/basic/pages/third-page.html
View File

@@ -1,9 +1,9 @@
<header *ion-toolbar>
<div *ion-header>
<h1 class="toolbar-title">Third Page</h1>
</header>
</div>
<ion-content class="padding" style="background:yellow">

4
ionic/components/nav/test/basic/pages/third-page.js
View File

@@ -1,13 +1,13 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, Toolbar} from 'ionic/ionic';
import {NavController, Header} from 'ionic/ionic';
@Component()
@View({
templateUrl: 'pages/third-page.html',
directives: [Toolbar]
directives: [Header]
})
export class ThirdPage {
constructor(

84
ionic/components/toolbar/toolbar.js
View File

@@ -1,63 +1,27 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
import * as dom from 'ionic/util/dom'
import * as dom from 'ionic/util/dom';
import {IonicComponent} from 'ionic/config/component';
import {NavItem} from 'ionic/ionic';
import {Platform} from 'ionic/platform/platform';
@Directive({
selector: '[ion-toolbar]',
properties: {
placement: 'placement'
}
selector: '[ion-header]'
})
export class Toolbar {
export class Header {
constructor(
viewContainerRef: ViewContainerRef,
protoViewRef: ProtoViewRef,
elementRef: ElementRef,
navItem: NavItem
) {
this.viewContainerRef = viewContainerRef;
this.protoViewRef = protoViewRef;
this.elementRef = elementRef;
this.navItem = navItem;
console.log('Toolbar!');
// TODO use config to add these classes
this.elementRef.domElement.classList.add('toolbar');
this.elementRef.domElement.classList.add(`toolbar-${Platform.getMode()}`);
// TODO Make a better way than this
if (/footer/i.test(this.elementRef.domElement.tagName)) {
this.placement = 'bottom';
} else {
this.placement = 'top';
}
}
set placement(pos) {
this.elementRef.domElement.classList.add(`toolbar-${pos}`);
this.elementRef.domElement.setAttribute('placement', pos);
this._placement = pos;
this.navItem.addToolbar(this._placement, this);
constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
navItem.addHeader(protoViewRef);
}
}
@Component({
selector: '.toolbar-title',
// events: {
// 'window:resize': 'align()',
// }
selector: '.toolbar-title'
})
@View({
template: `
@@ -67,7 +31,7 @@ export class Toolbar {
})
export class ToolbarTitle {
constructor(
element: NgElement
element: ElementRef
) {
// this.domElement = element.domElement;
@@ -104,8 +68,8 @@ export class ToolbarTitle {
dom.raf(() => {
if (titleElement.offsetWidth < titleElement.scrollWidth) {
this.titleElement.style.margin = ''
this.titleElement.style.textAlign = 'left'
this.titleElement.style.margin = '';
this.titleElement.style.textAlign = 'left';
}
this._showTitle();
})
@@ -113,32 +77,10 @@ export class ToolbarTitle {
}
_showTitle() {
if (this._shown) return;
this._shown = true;
this._titleElement.classList.remove('toolbar-title-hide');
}
}
@Decorator({
selector: '[toolbar-create]',
properties: {
'toolbar': 'toolbar-create'
},
})
export class ToolbarContainer {
constructor(
viewContainer: ViewContainerRef,
element: NgElement
) {
this.viewContainer = viewContainer;
this.domElement = element.domElement;
}
set toolbar(bar: Toolbar) {
if (bar) {
// TODO create with correct context
this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
console.log('creating viewportContainer', performance.now())
if (!this._shown) {
this._shown = true;
this._titleElement.classList.remove('toolbar-title-hide');
}
}
}