mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
import {NgElement, Component, Template} from 'angular2/angular2'
|
|
import {ComponentConfig} from 'ionic2/config/component-config'
|
|
|
|
export let ToolbarConfig = new ComponentConfig('toolbar')
|
|
|
|
@Component({
|
|
selector: 'ion-toolbar',
|
|
bind: {
|
|
title: 'view-title'
|
|
},
|
|
services: [ToolbarConfig]
|
|
})
|
|
@Template({
|
|
inline: `
|
|
<div class="bar-items">
|
|
<button class="button back-button bar-item">
|
|
<icon class="back-button-icon ion-ios-arrow-back"></icon>
|
|
<div class="back-button-text">
|
|
<div class="back-default">Back</div>
|
|
<div class="back-title"></div>
|
|
</div>
|
|
</button>
|
|
<div class="bar-title">
|
|
<div class="bar-inner-title">
|
|
{{ title }}
|
|
<content select="ion-view-title"></content>
|
|
</div>
|
|
</div>
|
|
<div class="bar-item bar-primary-item">
|
|
<content select="ion-nav-items[side=primary]"></content>
|
|
</div>
|
|
<div class="bar-spacer"></div>
|
|
<div class="bar-item bar-secondary-item">
|
|
<content select="ion-nav-items[side=secondary]"></content>
|
|
</div>
|
|
</div>`
|
|
})
|
|
export class Toolbar {
|
|
constructor(@NgElement() ngEle:NgElement, configFactory: ToolbarConfig) {
|
|
this.domElement = ngEle.domElement
|
|
|
|
this.config = configFactory.create(this);
|
|
|
|
window.requestAnimationFrame(() => {
|
|
this.alignTitle()
|
|
})
|
|
}
|
|
|
|
alignTitle() {
|
|
let ele = this.domElement
|
|
this.titleEle = this.titleEle || ele.querySelector('.bar-inner-title')
|
|
|
|
this.textAlign = this.textAlign || window.getComputedStyle(this.titleEle).textAlign
|
|
|
|
if (this.textAlign !== 'center') return
|
|
|
|
let barItemElements = ele.querySelectorAll('.bar-item')
|
|
let x, barItemElement
|
|
let leftMargin = 0
|
|
let rightMargin = ele.offsetWidth
|
|
let centerPoint = ele.offsetWidth / 2
|
|
|
|
for (x = 0; x < (barItemElements && barItemElements.length); x++) {
|
|
barItemElement = barItemElements[x]
|
|
|
|
let itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth
|
|
if (itemRightPoint < centerPoint) {
|
|
if (itemRightPoint > leftMargin) {
|
|
leftMargin = itemRightPoint
|
|
}
|
|
} else if (barItemElement.offsetLeft < rightMargin) {
|
|
rightMargin = barItemElement.offsetLeft
|
|
}
|
|
}
|
|
|
|
let centeredMargin = Math.max(leftMargin, ele.offsetWidth - rightMargin) + 'px'
|
|
let newMargin = '0 ' + centeredMargin
|
|
|
|
if (newMargin !== this.titleMargin) {
|
|
this.titleEle.style.margin = this.titleMargin = newMargin
|
|
this.titleEle.style.textAlign = ''
|
|
|
|
// if an ellipsis is being shown, open up the right side
|
|
// as far as it can before hitting right side buttons
|
|
window.requestAnimationFrame(() => {
|
|
if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
|
|
this.titleEle.style.margin = `0 ${ele.offsetWidth - rightMargin}px 0 ${centeredMargin}`
|
|
this.titleEle.style.textAlign = 'left'
|
|
}
|
|
if (!this.isTitleVisible) {
|
|
this.titleEle.style.opacity = 1
|
|
this.isTitleVisible = true
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
}
|