diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 57d78d52..125f3288 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -258,17 +258,20 @@ export default class AnimeNotifier { }) element.onmouseenter = () => { - // if(element.dataset.offsetAssigned) { - // element.onmouseenter = null - // return - // } - Diff.mutations.queue(() => { if(!contentRect) { contentRect = this.app.content.getBoundingClientRect() } + // Dynamic label assignment to prevent label texts overflowing + // and taking horizontal space at page load. + element.dataset.label = element.getAttribute("aria-label") + + // This is the most expensive call in this whole function, + // it consumes about 2-4 ms every time you call it. let rect = element.getBoundingClientRect() + + // Calculate offsets let tipStyle = window.getComputedStyle(element, ":before") let tipWidth = parseInt(tipStyle.width) + parseInt(tipStyle.paddingLeft) * 2 let tipStartX = rect.left + rect.width / 2 - tipWidth / 2 - contentRect.left @@ -287,12 +290,15 @@ export default class AnimeNotifier { let tipChild = document.createElement("div") tipChild.classList.add("tip-offset-child") - tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) + tipChild.setAttribute("data-label", element.getAttribute("data-label")) tipChild.style.left = Math.round(leftOffset) + "px" tipChild.style.width = rect.width + "px" tipChild.style.height = rect.height + "px" element.appendChild(tipChild) } + + // Unassign event listener + element.onmouseenter = null }) } } diff --git a/styles/layout.scarlet b/styles/layout.scarlet index 34fd2637..4fe88e12 100644 --- a/styles/layout.scarlet +++ b/styles/layout.scarlet @@ -7,7 +7,6 @@ overflow-x hidden overflow-y scroll position relative - // will-change transform #columns horizontal diff --git a/styles/tip.scarlet b/styles/tip.scarlet index 77683ee7..74f21312 100644 --- a/styles/tip.scarlet +++ b/styles/tip.scarlet @@ -3,7 +3,7 @@ const tip-transform-hidden = translateX(-50%) translateY(-80%) const tip-transform-visible = translateX(-50%) translateY(-100%) mixin tip-before - content attr(aria-label) + content attr(data-label) position absolute top -10px left 50%