From 690fb704cbfa87a70b1bbe9b7afd3c5fd7cfec13 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 Mar 2015 15:09:08 -0500 Subject: [PATCH] correct title alignment --- src/components/toolbar/toolbar.js | 62 ++++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 17 deletions(-) diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index dc3dbbe7b1..b304a205a9 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -51,37 +51,65 @@ export class Toolbar { 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 + + let x, barItem + let barItemKeys = [] + let barItems = {} for (x = 0; x < (barItemElements && barItemElements.length); x++) { - barItemElement = barItemElements[x] + barItem = barItemElements[x] - let itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth - if (itemRightPoint < centerPoint) { - if (itemRightPoint > leftMargin) { - leftMargin = itemRightPoint - } - } else if (barItemElement.offsetLeft < rightMargin) { - rightMargin = barItemElement.offsetLeft + barItemKeys.push(barItem.offsetLeft) + + barItems[barItem.offsetLeft] = { + left: barItem.offsetLeft, + right: barItem.offsetLeft + barItem.offsetWidth } } - let centeredMargin = Math.max(leftMargin, ele.offsetWidth - rightMargin) + 'px' - let newMargin = '0 ' + centeredMargin + barItemKeys.sort((a, b) => a - b) + + 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) { 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 // 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' + this.titleEle.style.margin = `0 ${barWidth - marginRight}px 0 ${centeredMargin}px` + this.titleEle.style.textAlign = this.titleTextAlgin = 'left' } if (!this.isTitleVisible) { this.titleEle.style.opacity = 1