document.addEventListener("DOMContentLoaded", () => { loadPartial("#site-header", "header.html", initHeader); loadPartial("#site-footer", "footer.html", initFooter); initHero(); initFinder(); initPack(); }); async function loadPartial(selector, file, callback) { const target = document.querySelector(selector); if (!target) { return; } try { const response = await fetch(file); if (!response.ok) { throw new Error(file); } target.innerHTML = await response.text(); if (callback) { callback(); } } catch (error) { console.error(error); target.innerHTML = `
Run this folder through a web server so the separate header/footer partials can load.
`; } } function initHeader() { const button = document.querySelector("[data-menu-button]"); const menu = document.querySelector("[data-mobile-menu]"); if (!button || !menu) { return; } button.addEventListener("click", () => { const open = menu.classList.toggle("open"); button.setAttribute("aria-expanded", String(open)); button.textContent = open ? "✕" : "☰"; }); menu.querySelectorAll("a").forEach((link) => { link.addEventListener("click", () => { menu.classList.remove("open"); button.setAttribute("aria-expanded", "false"); button.textContent = "☰"; }); }); } function initFooter() { document.querySelectorAll("[data-year]").forEach((element) => { element.textContent = new Date().getFullYear(); }); } function initHero() { const slides = [...document.querySelectorAll("[data-hero-slide]")]; const dots = [...document.querySelectorAll("[data-hero-dot]")]; if (!slides.length) { return; } let current = 0; let timer; const showSlide = (index) => { slides[current].classList.remove("active"); dots[current]?.classList.remove("active"); current = index; slides[current].classList.add("active"); dots[current]?.classList.add("active"); }; const startCarousel = () => { clearInterval(timer); timer = setInterval(() => { showSlide((current + 1) % slides.length); }, 5500); }; dots.forEach((dot, index) => { dot.addEventListener("click", () => { showSlide(index); startCarousel(); }); }); startCarousel(); } function initFinder() { const form = document.querySelector("[data-venue-finder]"); if (!form) { return; } form.addEventListener("submit", (event) => { event.preventDefault(); alert( "Demo venue finder — on the live WordPress site this would filter the venue database by area, occasion and guest numbers." ); }); } function initPack() { const form = document.querySelector("[data-info-pack-form]"); if (!form) { return; } form.addEventListener("submit", (event) => { event.preventDefault(); const button = form.querySelector("button"); const oldText = button.textContent; button.textContent = "Request received ✓"; button.disabled = true; setTimeout(() => { button.textContent = oldText; button.disabled = false; form.reset(); }, 2400); }); }