diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 4615a8d2..3cacaded 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -238,55 +238,60 @@ export default class AnimeNotifier { } assignTooltipOffsets(elements?: IterableIterator) { - const distanceToBorder = 5 - let contentRect: ClientRect + requestIdleCallback(() => { + const distanceToBorder = 5 + let contentRect: ClientRect - if(!elements) { - elements = findAll("tip") - } - - for(let element of elements) { - element.onmouseenter = () => { - if(element.dataset.offsetAssigned) { - element.onmouseenter = null - return - } - - Diff.mutations.queue(() => { - if(!contentRect) { - contentRect = this.app.content.getBoundingClientRect() - } - - let rect = element.getBoundingClientRect() - 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 - let tipEndX = tipStartX + tipWidth - let leftOffset = 0 - - if(tipStartX < distanceToBorder) { - leftOffset = -tipStartX + distanceToBorder - } else if(tipEndX > contentRect.width - distanceToBorder) { - leftOffset = -(tipEndX - contentRect.width + distanceToBorder) - } - - if(leftOffset !== 0) { - element.classList.remove("tip") - element.classList.add("tip-offset-root") - - let tipChild = document.createElement("div") - tipChild.classList.add("tip-offset-child") - tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) - tipChild.style.left = Math.round(leftOffset) + "px" - tipChild.style.width = rect.width + "px" - tipChild.style.height = rect.height + "px" - element.appendChild(tipChild) - } - - element.dataset.offsetAssigned = "true" - }) + if(!elements) { + elements = findAll("tip") } - } + + // Assign mouse enter event handler + for(let element of elements) { + Diff.mutations.queue(() => { + element.classList.add("tip-active") + }) + + element.onmouseenter = () => { + // if(element.dataset.offsetAssigned) { + // element.onmouseenter = null + // return + // } + + Diff.mutations.queue(() => { + if(!contentRect) { + contentRect = this.app.content.getBoundingClientRect() + } + + let rect = element.getBoundingClientRect() + 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 + let tipEndX = tipStartX + tipWidth + let leftOffset = 0 + + if(tipStartX < distanceToBorder) { + leftOffset = -tipStartX + distanceToBorder + } else if(tipEndX > contentRect.width - distanceToBorder) { + leftOffset = -(tipEndX - contentRect.width + distanceToBorder) + } + + if(leftOffset !== 0) { + element.classList.remove("tip-active") + element.classList.add("tip-offset-root") + + let tipChild = document.createElement("div") + tipChild.classList.add("tip-offset-child") + tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) + tipChild.style.left = Math.round(leftOffset) + "px" + tipChild.style.width = rect.width + "px" + tipChild.style.height = rect.height + "px" + element.appendChild(tipChild) + } + }) + } + } + }) } dragAndDrop() { diff --git a/scripts/MutationQueue.ts b/scripts/MutationQueue.ts index 787a2107..e19cd190 100644 --- a/scripts/MutationQueue.ts +++ b/scripts/MutationQueue.ts @@ -59,6 +59,11 @@ export class MutationQueue { } wait(callBack: () => void) { + if(this.mutations.length === 0) { + callBack() + return + } + this.onClearCallBacks.push(callBack) } } \ No newline at end of file diff --git a/styles/tip.scarlet b/styles/tip.scarlet index 3df87ee7..80e0aa5c 100644 --- a/styles/tip.scarlet +++ b/styles/tip.scarlet @@ -45,6 +45,9 @@ mixin tip-after pointer-events none .tip + // + +.tip-active position relative :before