frontblocks-reading-progress.js
96 lines
| 1 | /** |
| 2 | * Reading Progress Bar functionality |
| 3 | * |
| 4 | * @package FrontBlocks |
| 5 | */ |
| 6 | |
| 7 | (function() { |
| 8 | 'use strict'; |
| 9 | |
| 10 | // Wait for DOM to be ready. |
| 11 | if (document.readyState === 'loading') { |
| 12 | document.addEventListener('DOMContentLoaded', initReadingProgress); |
| 13 | } else { |
| 14 | initReadingProgress(); |
| 15 | } |
| 16 | |
| 17 | /** |
| 18 | * Initialize reading progress bar. |
| 19 | */ |
| 20 | function initReadingProgress() { |
| 21 | const progressBar = document.querySelector('.frbl-reading-progress-bar'); |
| 22 | const progressFill = document.querySelector('.frbl-reading-progress-fill'); |
| 23 | |
| 24 | if (!progressBar || !progressFill) { |
| 25 | return; |
| 26 | } |
| 27 | |
| 28 | // Add class to body to adjust content padding. |
| 29 | document.body.classList.add('frbl-reading-progress-active'); |
| 30 | |
| 31 | // Get the main content area (article or post content). |
| 32 | const article = document.querySelector('article') || document.querySelector('.entry-content') || document.querySelector('main'); |
| 33 | |
| 34 | if (!article) { |
| 35 | return; |
| 36 | } |
| 37 | |
| 38 | /** |
| 39 | * Update progress bar based on scroll position. |
| 40 | */ |
| 41 | function updateProgress() { |
| 42 | // Get article boundaries. |
| 43 | const articleRect = article.getBoundingClientRect(); |
| 44 | const articleTop = articleRect.top + window.pageYOffset; |
| 45 | const articleHeight = articleRect.height; |
| 46 | const windowHeight = window.innerHeight; |
| 47 | |
| 48 | // Calculate scroll progress. |
| 49 | const scrollTop = window.pageYOffset; |
| 50 | const scrollStart = articleTop; |
| 51 | const scrollEnd = articleTop + articleHeight - windowHeight; |
| 52 | const scrollRange = scrollEnd - scrollStart; |
| 53 | |
| 54 | // Calculate percentage. |
| 55 | let percentage = 0; |
| 56 | if (scrollTop > scrollStart) { |
| 57 | percentage = Math.min(((scrollTop - scrollStart) / scrollRange) * 100, 100); |
| 58 | } |
| 59 | |
| 60 | // Ensure percentage is between 0 and 100. |
| 61 | percentage = Math.max(0, Math.min(100, percentage)); |
| 62 | |
| 63 | // Update progress bar height. |
| 64 | progressFill.style.height = percentage + '%'; |
| 65 | |
| 66 | // Update ARIA attribute for accessibility. |
| 67 | progressBar.setAttribute('aria-valuenow', Math.round(percentage)); |
| 68 | } |
| 69 | |
| 70 | // Update on scroll (throttled for performance). |
| 71 | let ticking = false; |
| 72 | window.addEventListener('scroll', function() { |
| 73 | if (!ticking) { |
| 74 | window.requestAnimationFrame(function() { |
| 75 | updateProgress(); |
| 76 | ticking = false; |
| 77 | }); |
| 78 | ticking = true; |
| 79 | } |
| 80 | }); |
| 81 | |
| 82 | // Update on resize. |
| 83 | let resizeTimer; |
| 84 | window.addEventListener('resize', function() { |
| 85 | clearTimeout(resizeTimer); |
| 86 | resizeTimer = setTimeout(function() { |
| 87 | updateProgress(); |
| 88 | }, 150); |
| 89 | }); |
| 90 | |
| 91 | // Initial update. |
| 92 | updateProgress(); |
| 93 | } |
| 94 | })(); |
| 95 | |
| 96 |