diff --git a/index.html b/index.html index 0b438d6..2f051e4 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,7 @@ - + @@ -143,7 +143,7 @@ Exploring Islamic History Watch Now - + Save diff --git a/js/app.js b/js/app.js index 5abcb24..220a5cb 100644 --- a/js/app.js +++ b/js/app.js @@ -100,20 +100,7 @@ const DOM = { themeMenu: document.getElementById('themeMenu'), episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), - episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'), - episodesSection: document.getElementById('episodesSection'), + navbarBrand: document.getElementById('navbarBrand'), menuToggle: document.getElementById('menuToggleBtn'), scrollToTop: document.getElementById('scrollToTop'), @@ -1013,6 +1000,24 @@ function bindEvents() { }); } + // Navbar Brand Scroll to Top + if (DOM.navbarBrand) { + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + if (document.body.classList.contains('mobile-nav-active')) { + document.body.classList.remove('mobile-nav-active'); + if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); + } + }; + DOM.navbarBrand.addEventListener('click', scrollToTop); + DOM.navbarBrand.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + scrollToTop(); + } + }); + } + // Search Section Toggle if (DOM.searchToggle && DOM.searchSection) { DOM.searchToggle.addEventListener('click', () => { @@ -1044,83 +1049,6 @@ function bindEvents() { }); } - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - - // Navbar Episodes Scroll - if (DOM.episodesNavBtn && DOM.episodesSection) { - DOM.episodesNavBtn.addEventListener('click', () => { - DOM.episodesSection.scrollIntoView({ behavior: 'smooth' }); - if (document.body.classList.contains('mobile-nav-active')) { - document.body.classList.remove('mobile-nav-active'); - if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false'); - } - }); - } - if (DOM.heroBtn) DOM.heroBtn.addEventListener('click', () => AppState.hero && openVideo(AppState.hero)); if (DOM.heroSave) DOM.heroSave.addEventListener('click', () => AppState.hero && toggleWatchLater(AppState.hero));