summaryrefslogtreecommitdiffstats
path: root/assets/js/progress-bar.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/progress-bar.js')
-rw-r--r--assets/js/progress-bar.js44
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();
})();