Concept Agent
85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
/* ============================================================
|
|
components.js — Component loader + header/footer init
|
|
Loads shared HTML components, initializes sticky header,
|
|
mobile nav, and active link state.
|
|
============================================================ */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
/* --- Component Loader ----------------------------------- */
|
|
async function loadComponent(targetId, url) {
|
|
const el = document.getElementById(targetId);
|
|
if (!el) return;
|
|
try {
|
|
const res = await fetch(url);
|
|
if (!res.ok) throw new Error(res.status);
|
|
const html = await res.text();
|
|
el.innerHTML = html;
|
|
} catch (err) {
|
|
console.warn('[components.js] Could not load', url, err.message);
|
|
}
|
|
}
|
|
|
|
/* --- Active nav link ------------------------------------ */
|
|
function markActiveNav() {
|
|
const path = window.location.pathname.replace(/\/$/, '') || '/';
|
|
document.querySelectorAll('.header-nav a, .mobile-nav-links a').forEach(a => {
|
|
const href = a.getAttribute('href').replace(/\/$/, '') || '/';
|
|
if (path === href || (href !== '/' && path.startsWith(href))) {
|
|
a.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* --- Sticky header -------------------------------------- */
|
|
function initStickyHeader() {
|
|
const header = document.querySelector('.site-header');
|
|
if (!header) return;
|
|
|
|
const toggle = () => {
|
|
header.classList.toggle('scrolled', window.scrollY > 60);
|
|
};
|
|
toggle();
|
|
window.addEventListener('scroll', toggle, { passive: true });
|
|
}
|
|
|
|
/* --- Mobile nav ---------------------------------------- */
|
|
function initMobileNav() {
|
|
const btn = document.querySelector('.header-menu-btn');
|
|
const nav = document.querySelector('.mobile-nav');
|
|
const overlay = document.querySelector('.mobile-nav-overlay');
|
|
const close = document.querySelector('.mobile-nav-close');
|
|
if (!btn || !nav) return;
|
|
|
|
const open = () => { nav.classList.add('open'); btn.classList.add('open'); document.body.style.overflow = 'hidden'; };
|
|
const shut = () => { nav.classList.remove('open'); btn.classList.remove('open'); document.body.style.overflow = ''; };
|
|
|
|
btn.addEventListener('click', open);
|
|
if (overlay) overlay.addEventListener('click', shut);
|
|
if (close) close.addEventListener('click', shut);
|
|
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') shut(); });
|
|
}
|
|
|
|
/* --- Init on DOM ready ---------------------------------- */
|
|
async function init() {
|
|
const base = document.querySelector('meta[name="site-root"]')?.content || '/';
|
|
|
|
await Promise.all([
|
|
loadComponent('site-header', base + 'components/header.html'),
|
|
loadComponent('site-footer', base + 'components/footer.html'),
|
|
]);
|
|
|
|
initStickyHeader();
|
|
initMobileNav();
|
|
markActiveNav();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|