diff --git a/src/content_script.js b/src/content_script.js index 5c5e0f0..6f3efdc 100644 --- a/src/content_script.js +++ b/src/content_script.js @@ -1 +1,66 @@ import browser from 'webextension-polyfill' + +function hideBanners() { + const revertSteps = [] + + /* Hide all elements with position:fixed */ + const fixedElements = Array.from(document.querySelectorAll('*')) + .filter(el => getComputedStyle(el).position === 'fixed') + + fixedElements.forEach(el => { + const originalDisplay = el.style.display + const originalOpacity = el.style.opacity + const originalTransition = el.style.transition + el.style.transition = 'opacity 1s' + el.style.opacity = '0' + + const hiderTimeoutId = window.setTimeout(() => { + el.style.display = 'none' + }, 1000) + + revertSteps.push(() => { + window.clearTimeout(hiderTimeoutId) + const reverterTimeoutId = window.setTimeout(() => { + el.style.transition = originalTransition + }, 1000) + el.style.display = originalDisplay + window.setTimeout(() => { + el.style.opacity = originalOpacity + }) + }) + }) + + /* Stop position:sticky elements from sticking. */ + const stickyElements = Array.from(document.querySelectorAll('*')) + .filter(el => getComputedStyle(el).position === 'sticky') + + stickyElements.forEach(el => { + const originalPosition = el.style.position + el.style.position = 'relative' + revertSteps.push(() => { + el.style.position = originalPosition + }) + }) + + const revert = () => revertSteps.forEach(step => step()) + return revert +} + + +function startCheckingLoop() { + let revert + + function checkScroll() { + if (window.scrollY > 20 && !revert) { + revert = hideBanners() + } else if (window.scrollY <= 0 && revert) { + revert() + revert = undefined + } + window.requestAnimationFrame(checkScroll); + } + + window.requestAnimationFrame(checkScroll); +} + +startCheckingLoop();