// ── The Roasted Bean — Editorial Motion ────────────────────────────────────
//
// Motion decisions (Jakub primary · Jhey secondary · Emil selective):
// • Hero: one orchestrated entrance on load — opacity + translateY + blur
// 700ms, 120–160ms stagger (Jakub's enter recipe)
// • Menu cards: staggered cascade via CSS --card-index (Jhey moment)
// 500ms per card, 40ms delay increment
// • Scroll reveals: editorial subtlety — 8px translateY, no blur (avoid slop)
// • Buttons: scale(0.97) on :active (Emil's tactile feedback)
// • Nav / category filter / newsletter: no JS animation (Emil's frequency gate)
// — these use CSS transitions only
// • About image: scale(1.03) on hover (CSS transition, no JS)
// • prefers-reduced-motion: all animations collapsed to instant (0.01ms)
// • No parallax, no custom cursor, no preloader, no springs
document.addEventListener('DOMContentLoaded', async () => {
triggerHeroEntrance();
await loadCafeData();
setupNavigation();
setupNewsletter();
initScrollReveal();
initMenuCardReveal();
setupSmoothScroll();
});
// ── Hero Entrance ───────────────────────────────────────────────────────────
// One orchestrated moment — rare interaction (first visit only)
// Jakub's enter recipe: opacity + translateY + blur materialization
function triggerHeroEntrance() {
const hero = document.querySelector('.hero');
if (!hero) return;
// Small delay so the browser has painted the initial state
requestAnimationFrame(() => {
requestAnimationFrame(() => {
hero.classList.add('hero-entered');
});
});
}
// ── Load Data ───────────────────────────────────────────────────────────────
let menuItems = [];
let menuCategories = [];
async function loadCafeData() {
try {
const res = await fetch('/api/menu');
const data = await res.json();
menuItems = data.items;
menuCategories = data.categories;
populateHero(data.info);
buildCategories(data.categories);
buildMenu(data.items, data.categories);
buildVisit(data.info);
// Re-run menu card observer after DOM update
initMenuCardReveal();
} catch (err) {
console.error('Error loading cafe data:', err);
}
}
function populateHero(info) {
if (info.name) {
document.getElementById('cafeName').textContent = info.name;
document.title = `${info.name} — Specialty Coffee Roasters`;
}
if (info.address) {
const el = document.getElementById('cafeAddressSmall');
if (el) el.textContent = info.address;
}
if (info.phone) {
const el = document.getElementById('cafePhoneSmall');
if (el) el.textContent = info.phone;
}
}
// ── Categories ──────────────────────────────────────────────────────────────
// Rebuilds the grid from filtered data — no display:none, no empty cells
let activeCategory = 'all';
function buildCategories(categories) {
const container = document.getElementById('categoryFilters');
if (!container) return;
container.innerHTML = categories
.map(cat => `
`).join('');
container.addEventListener('click', (e) => {
const btn = e.target.closest('.cat-btn');
if (!btn) return;
document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeCategory = btn.dataset.category;
rebuildGrid();
});
}
function rebuildGrid() {
const grid = document.getElementById('menuGrid');
if (!grid) return;
const filtered = activeCategory === 'all'
? menuItems
: menuItems.filter(item => item.category === activeCategory);
if (filtered.length === 0) {
grid.innerHTML = '';
return;
}
buildMenu(filtered, menuCategories);
initMenuCardReveal();
}
function filterCards() {
// Kept for API compatibility — rebuildGrid handles filtering now
rebuildGrid();
}
// ── Menu Cards ──────────────────────────────────────────────────────────────
function buildMenu(items, categories) {
const grid = document.getElementById('menuGrid');
if (!grid) return;
const catMeta = {};
categories.forEach(c => { catMeta[c.id] = { name: c.name, icon: c.icon }; });
grid.innerHTML = items.map((item, i) => {
const cat = catMeta[item.category] || { name: item.category, icon: '/img/icons/default.svg' };
const tagClass = !item.available ? ' soldout' : '';
const tagText = !item.available ? 'Sold Out' : cat.name;
// Thumbnail: SVG fallback always present; image overlays on top
const thumbSvg = svgPlaceholder(item.category);
const thumbImg = (item.image && item.image.startsWith('http'))
? `})
`
: '';
return `
`;
}).join('');
}
// Inline SVGs from icon files — lightweight, no extra requests
function svgInline(path) {
const icons = {
'/img/icons/coffee.svg': '',
'/img/icons/tea.svg': '',
'/img/icons/pastry.svg': '',
'/img/icons/food.svg': '',
'/img/icons/default.svg': ''
};
return icons[path] || icons['/img/icons/default.svg'];
}
function svgPlaceholder(category) {
const icons = {
'coffee': '/img/icons/coffee.svg',
'tea': '/img/icons/tea.svg',
'pastries': '/img/icons/pastry.svg',
'food': '/img/icons/food.svg'
};
return svgInline(icons[category] || '/img/icons/default.svg');
}
// ── Menu Card Reveal — Jhey's stagger via CSS custom properties ─────────────
let menuCardObserver = null;
function initMenuCardReveal() {
// Disconnect previous observer if re-initializing
if (menuCardObserver) menuCardObserver.disconnect();
const cards = document.querySelectorAll('.menu-card:not(.revealed)');
if (cards.length === 0) return;
menuCardObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
menuCardObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.05,
rootMargin: '0px 0px -30px 0px'
});
cards.forEach(card => menuCardObserver.observe(card));
}
// ── Scroll Reveal — Jakub polish, editorial subtlety ────────────────────────
function initScrollReveal() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.08,
rootMargin: '0px 0px -40px 0px'
});
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
}
// ── Visit Section ───────────────────────────────────────────────────────────
function buildVisit(info) {
const hoursList = document.getElementById('hoursList');
if (hoursList && info.hours) {
hoursList.innerHTML = info.hours
.map(h => `${h.days}${h.time}
`)
.join('');
}
const addr = document.getElementById('cafeAddress');
if (addr && info.address) addr.textContent = info.address;
const phone = document.getElementById('cafePhone');
if (phone && info.phone) phone.textContent = info.phone;
const email = document.getElementById('cafeEmailText');
if (email && info.email) email.textContent = info.email;
}
// ── Navigation ──────────────────────────────────────────────────────────────
function setupNavigation() {
const nav = document.getElementById('nav');
const toggle = document.getElementById('navToggle');
if (!nav) return;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
nav.classList.toggle('scrolled', window.scrollY > 40);
ticking = false;
});
ticking = true;
}
});
if (toggle) {
toggle.addEventListener('click', () => nav.classList.toggle('open'));
}
document.querySelectorAll('.nav-links a, .nav-logo').forEach(link => {
link.addEventListener('click', () => nav.classList.remove('open'));
});
}
// ── Newsletter — functional, no decorative animation (Emil's gate) ──────────
function setupNewsletter() {
const form = document.getElementById('newsletterForm');
if (!form) return;
form.addEventListener('submit', (e) => {
e.preventDefault();
const btn = form.querySelector('button');
const orig = btn.textContent;
btn.textContent = 'Subscribed ✓';
btn.style.background = '#3C6E55';
form.querySelector('input').value = '';
setTimeout(() => {
btn.textContent = orig;
btn.style.background = '';
}, 2800);
});
}
// ── Smooth Scroll ───────────────────────────────────────────────────────────
function setupSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
window.scrollTo({
top: target.offsetTop - 72,
behavior: 'smooth'
});
}
});
});
}
// ── Utility ─────────────────────────────────────────────────────────────────
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}