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

correct title alignment

Browse Source
This commit is contained in:
Adam Bradley
2015-03-31 15:09:08 -05:00
parent bd45ee58da
commit 690fb704cb
1 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/toolbar/toolbar.js
View File

@ -51,37 +51,65 @@ export class Toolbar {
if (this.textAlign !== 'center') return if (this.textAlign !== 'center') return
let barItemElements = ele.querySelectorAll('.bar-item') let barItemElements = ele.querySelectorAll('.bar-item')
let x, barItemElement
let leftMargin = 0 let x, barItem
let rightMargin = ele.offsetWidth let barItemKeys = []
let centerPoint = ele.offsetWidth / 2 let barItems = {}
for (x = 0; x < (barItemElements && barItemElements.length); x++) { for (x = 0; x < (barItemElements && barItemElements.length); x++) {
barItemElement = barItemElements[x] barItem = barItemElements[x]
let itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth barItemKeys.push(barItem.offsetLeft)
if (itemRightPoint < centerPoint) {
if (itemRightPoint > leftMargin) { barItems[barItem.offsetLeft] = {
leftMargin = itemRightPoint left: barItem.offsetLeft,
} right: barItem.offsetLeft + barItem.offsetWidth
} else if (barItemElement.offsetLeft < rightMargin) {
rightMargin = barItemElement.offsetLeft
} }
} }
let centeredMargin = Math.max(leftMargin, ele.offsetWidth - rightMargin) + 'px' barItemKeys.sort((a, b) => a - b)
let newMargin = '0 ' + centeredMargin
let largestGap = null
for (x = 1; x < barItemKeys.length; x++) {
let leftItem = barItems[barItemKeys[x - 1]]
let rightItem = barItems[barItemKeys[x]]
let gapWidth = rightItem.left - leftItem.right
if (!largestGap || gapWidth > largestGap.width) {
largestGap = {
width: gapWidth,
left: leftItem.right,
right: rightItem.left
}
}
}
let marginLeft = 0
let marginRight = 0
if (largestGap) {
marginLeft = largestGap.left
marginRight = largestGap.right
}
let barWidth = ele.offsetWidth
let centeredMargin = Math.max(marginLeft, barWidth - marginRight)
let newMargin = `0 ${centeredMargin}px`
if (newMargin !== this.titleMargin) { if (newMargin !== this.titleMargin) {
this.titleEle.style.margin = this.titleMargin = newMargin this.titleEle.style.margin = this.titleMargin = newMargin
this.titleEle.style.textAlign = '' if (this.titleTextAlgin !== '') {
this.titleEle.style.textAlign = this.titleTextAlgin = ''
}
// if an ellipsis is being shown, open up the right side // if an ellipsis is being shown, open up the right side
// as far as it can before hitting right side buttons // as far as it can before hitting right side buttons
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) { if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
this.titleEle.style.margin = `0 ${ele.offsetWidth - rightMargin}px 0 ${centeredMargin}` this.titleEle.style.margin = `0 ${barWidth - marginRight}px 0 ${centeredMargin}px`
this.titleEle.style.textAlign = 'left' this.titleEle.style.textAlign = this.titleTextAlgin = 'left'
} }
if (!this.isTitleVisible) { if (!this.isTitleVisible) {
this.titleEle.style.opacity = 1 this.titleEle.style.opacity = 1