Use requestIdleCallback for tooltip creation
This commit is contained in:
@ -238,6 +238,7 @@ export default class AnimeNotifier {
|
|||||||
}
|
}
|
||||||
|
|
||||||
assignTooltipOffsets(elements?: IterableIterator<HTMLElement>) {
|
assignTooltipOffsets(elements?: IterableIterator<HTMLElement>) {
|
||||||
|
requestIdleCallback(() => {
|
||||||
const distanceToBorder = 5
|
const distanceToBorder = 5
|
||||||
let contentRect: ClientRect
|
let contentRect: ClientRect
|
||||||
|
|
||||||
@ -245,12 +246,17 @@ export default class AnimeNotifier {
|
|||||||
elements = findAll("tip")
|
elements = findAll("tip")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Assign mouse enter event handler
|
||||||
for(let element of elements) {
|
for(let element of elements) {
|
||||||
|
Diff.mutations.queue(() => {
|
||||||
|
element.classList.add("tip-active")
|
||||||
|
})
|
||||||
|
|
||||||
element.onmouseenter = () => {
|
element.onmouseenter = () => {
|
||||||
if(element.dataset.offsetAssigned) {
|
// if(element.dataset.offsetAssigned) {
|
||||||
element.onmouseenter = null
|
// element.onmouseenter = null
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
Diff.mutations.queue(() => {
|
Diff.mutations.queue(() => {
|
||||||
if(!contentRect) {
|
if(!contentRect) {
|
||||||
@ -271,7 +277,7 @@ export default class AnimeNotifier {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if(leftOffset !== 0) {
|
if(leftOffset !== 0) {
|
||||||
element.classList.remove("tip")
|
element.classList.remove("tip-active")
|
||||||
element.classList.add("tip-offset-root")
|
element.classList.add("tip-offset-root")
|
||||||
|
|
||||||
let tipChild = document.createElement("div")
|
let tipChild = document.createElement("div")
|
||||||
@ -282,11 +288,10 @@ export default class AnimeNotifier {
|
|||||||
tipChild.style.height = rect.height + "px"
|
tipChild.style.height = rect.height + "px"
|
||||||
element.appendChild(tipChild)
|
element.appendChild(tipChild)
|
||||||
}
|
}
|
||||||
|
|
||||||
element.dataset.offsetAssigned = "true"
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
dragAndDrop() {
|
dragAndDrop() {
|
||||||
|
@ -59,6 +59,11 @@ export class MutationQueue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
wait(callBack: () => void) {
|
wait(callBack: () => void) {
|
||||||
|
if(this.mutations.length === 0) {
|
||||||
|
callBack()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
this.onClearCallBacks.push(callBack)
|
this.onClearCallBacks.push(callBack)
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -45,6 +45,9 @@ mixin tip-after
|
|||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
.tip
|
.tip
|
||||||
|
//
|
||||||
|
|
||||||
|
.tip-active
|
||||||
position relative
|
position relative
|
||||||
|
|
||||||
:before
|
:before
|
||||||
|
Reference in New Issue
Block a user