diff options
Diffstat (limited to 'assets/js/progress-bar.js')
| -rw-r--r-- | assets/js/progress-bar.js | 44 |
1 files changed, 13 insertions, 31 deletions
diff --git a/assets/js/progress-bar.js b/assets/js/progress-bar.js index bc8b70a..e171f4f 100644 --- a/assets/js/progress-bar.js +++ b/assets/js/progress-bar.js @@ -1,38 +1,20 @@ -// progress-bar.js +/** + * progress-bar.js + * Reading progress indicator for articles + */ + (function() { - const progressBar = document.querySelector('.reading-progress'); - if (!progressBar) return; + 'use strict'; - // Only enable on pages with substantial content - const mainContent = document.querySelector('main'); - if (!mainContent) return; + const progressBar = document.getElementById('progress-bar'); + if (!progressBar) return; - function updateProgress() { - // Calculate scroll percentage - const windowHeight = window.innerHeight; - const docHeight = document.documentElement.scrollHeight - windowHeight; + window.addEventListener('scroll', () => { + const windowHeight = document.documentElement.scrollHeight - window.innerHeight; const scrolled = window.scrollY; - const percent = docHeight > 0 ? (scrolled / docHeight) * 100 : 0; + const progress = windowHeight > 0 ? (scrolled / windowHeight) * 100 : 0; - progressBar.style.width = percent + '%'; - } - - // Mark body as scrollable if there's significant content - const contentHeight = mainContent.offsetHeight; - if (contentHeight > window.innerHeight * 1.5) { - document.body.classList.add('scrollable'); - } - - // Use requestAnimationFrame for smooth updates - let ticking = false; - window.addEventListener('scroll', function() { - if (!ticking) { - requestAnimationFrame(updateProgress); - ticking = true; - setTimeout(() => { ticking = false; }, 100); - } + progressBar.style.width = progress + '%'; + progressBar.setAttribute('aria-valuenow', Math.round(progress)); }, { passive: true }); - - // Initial update - updateProgress(); })(); |
