Use requestIdleCallback for tooltip creation

This commit is contained in:
2018-04-20 13:34:12 +02:00
parent 541b441fd9
commit bfc9d626a1
3 changed files with 60 additions and 47 deletions

View File

@ -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() {

View File

@ -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)
} }
} }

View File

@ -45,6 +45,9 @@ mixin tip-after
pointer-events none pointer-events none
.tip .tip
//
.tip-active
position relative position relative
:before :before