@loke/ui
Version:
2 lines (1 loc) • 1.3 kB
JavaScript
function observeElementRect(elementToObserve,callback){let observedData=observedElements.get(elementToObserve);if(observedData===void 0){if(observedElements.set(elementToObserve,{callbacks:[callback],rect:{}}),observedElements.size===1)rafId=requestAnimationFrame(runLoop)}else observedData.callbacks.push(callback),callback(elementToObserve.getBoundingClientRect());return()=>{if(observedData=observedElements.get(elementToObserve),observedData===void 0)return;let index=observedData.callbacks.indexOf(callback);if(index>-1)observedData.callbacks.splice(index,1);if(observedData.callbacks.length===0){if(observedElements.delete(elementToObserve),observedElements.size===0)cancelAnimationFrame(rafId)}}}var rafId,observedElements=new Map;function runLoop(){let changedRectsData=[];observedElements.forEach((data,element)=>{let newRect=element.getBoundingClientRect();if(!rectEquals(data.rect,newRect))data.rect=newRect,changedRectsData.push(data)});for(let data of changedRectsData)for(let callback of data.callbacks)callback(data.rect);rafId=requestAnimationFrame(runLoop)}function rectEquals(rect1,rect2){return rect1.width===rect2.width&&rect1.height===rect2.height&&rect1.top===rect2.top&&rect1.right===rect2.right&&rect1.bottom===rect2.bottom&&rect1.left===rect2.left}export{observeElementRect};