open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use offsetWidth to decide if the button text is ellipsized

Browse Source
This commit is contained in:
tophf 2017-12-19 06:25:18 +03:00
parent 78080df6fd
commit 154187f1bc
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/dom.js
View File

@ -28,14 +28,15 @@ $$.remove = (selector, base = document) => {
// display a full text tooltip on buttons with ellipsis overflow and no inherent title
const addTooltipsToEllipsized = () => {
for (const btn of document.getElementsByTagName('button')) {
if (btn.title && !btn.titleIsForEllipsis ||
btn.clientWidth === btn.preresizeClientWidth) {
if (btn.title && !btn.titleIsForEllipsis) {
continue;
}
btn.preresizeClientWidth = btn.clientWidth;
const padding = btn.offsetWidth - btn.clientWidth;
const displayedWidth = btn.getBoundingClientRect().width - padding;
if (btn.scrollWidth > displayedWidth) {
const width = btn.offsetWidth;
if (!width || btn.preresizeClientWidth === width) {
continue;
}
btn.preresizeClientWidth = width;
if (btn.scrollWidth > width) {
const text = btn.textContent;
btn.title = text.includes('\u00AD') ? text.replace(/\u00AD/g, '') : text;
btn.titleIsForEllipsis = true;