mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
import {NgElement, Component, View as NgView, Ancestor, Optional} from 'angular2/angular2'
|
|
import {BackButton} from 'ionic/components/toolbar/back-button'
|
|
import {IonicComponent} from 'ionic/config/component'
|
|
import {raf} from 'ionic/util/dom'
|
|
|
|
@Component({
|
|
selector: 'ion-toolbar',
|
|
properties: {
|
|
title: 'nav-title'
|
|
}
|
|
})
|
|
@NgView({
|
|
template: `
|
|
<div class="toolbar-items">
|
|
<button class="button back-button toolbar-item" style="display:none"></button>
|
|
<div class="toolbar-title">
|
|
<div class="toolbar-inner-title">
|
|
{{ title }}
|
|
<content select="ion-nav-title"></content>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-item toolbar-primary-item">
|
|
<content select="ion-nav-items[side=primary]"></content>
|
|
</div>
|
|
<div class="toolbar-item toolbar-secondary-item">
|
|
<content select="ion-nav-items[side=secondary]"></content>
|
|
</div>
|
|
</div>
|
|
`,
|
|
directives: [BackButton]
|
|
})
|
|
export class Toolbar {
|
|
constructor(
|
|
@NgElement() ngEle:NgElement
|
|
) {
|
|
this.domElement = ngEle.domElement
|
|
this.config = Toolbar.config.invoke(this)
|
|
|
|
// TODO: make more better plz
|
|
setTimeout(() => {
|
|
this.alignTitle()
|
|
}, 32)
|
|
}
|
|
|
|
alignTitle() {
|
|
let ele = this.domElement
|
|
this.titleEle = this.titleEle || ele.querySelector('.toolbar-inner-title')
|
|
|
|
this.textAlign = this.textAlign || window.getComputedStyle(this.titleEle).textAlign
|
|
|
|
if (this.textAlign !== 'center') return
|
|
|
|
// dont bother if the title is already too long
|
|
if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
|
|
if (!this.isTitleVisible) {
|
|
this.titleEle.style.opacity = this.isTitleVisible = 1
|
|
}
|
|
return
|
|
}
|
|
|
|
let leftMargin = this.titleEle.offsetLeft
|
|
let rightMargin = ele.offsetWidth - (leftMargin + this.titleEle.offsetWidth)
|
|
let centerMargin = leftMargin - rightMargin
|
|
|
|
this.titleEle.style.margin = `0 ${centerMargin}px 0 0`
|
|
|
|
raf(() => {
|
|
if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
|
|
this.titleEle.style.margin = ''
|
|
this.titleEle.style.textAlign = 'left'
|
|
}
|
|
if (!this.isTitleVisible) {
|
|
this.titleEle.style.opacity = this.isTitleVisible = 1
|
|
}
|
|
})
|
|
}
|
|
|
|
back() {
|
|
if (this.viewport && this.viewport._stack.length) {
|
|
this.viewport.pop()
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
new IonicComponent(Toolbar, {})
|