608 lines
22 KiB
JavaScript
608 lines
22 KiB
JavaScript
// Cooking Mode for CookCLI
|
|
(function() {
|
|
'use strict';
|
|
|
|
// ─── Constants ───────────────────────────────────────────────
|
|
|
|
const WHEEL_THRESHOLD = 80;
|
|
const WHEEL_RESET_MS = 200;
|
|
const SWIPE_THRESHOLD = 50;
|
|
const SWIPE_CLAMP_MAX = 150;
|
|
const SWIPE_SCALE_FACTOR = 0.001;
|
|
|
|
// ─── State ───────────────────────────────────────────────────
|
|
|
|
const state = {
|
|
cards: [],
|
|
cardEls: [],
|
|
currentIndex: 0,
|
|
wakeLock: null,
|
|
overlay: null,
|
|
touchStartY: 0,
|
|
touchCurrentY: 0,
|
|
isSwiping: false,
|
|
scrolling: false,
|
|
canScrollCard: false,
|
|
startScrollTop: 0,
|
|
wheelAccumulator: 0,
|
|
wheelResetTimeout: null,
|
|
triggerElement: null
|
|
};
|
|
|
|
// ─── Data Loading ─────────────────────────────────────────────
|
|
|
|
function loadRecipeData() {
|
|
const el = document.getElementById('cooking-mode-data');
|
|
if (!el) return null;
|
|
try {
|
|
return JSON.parse(el.textContent);
|
|
} catch (e) {
|
|
console.error('Failed to parse cooking mode data:', e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function captureStepHTML() {
|
|
const stepElements = [];
|
|
const sectionEls = document.querySelectorAll('.md\\:col-span-2 ol');
|
|
sectionEls.forEach(function(ol) {
|
|
ol.querySelectorAll(':scope > li').forEach(function(li) {
|
|
const textDiv = li.querySelector('.leading-8');
|
|
if (textDiv) {
|
|
stepElements.push(textDiv.innerHTML);
|
|
}
|
|
});
|
|
});
|
|
return stepElements;
|
|
}
|
|
|
|
// ─── Card Building ────────────────────────────────────────────
|
|
|
|
function buildCards(data, stepHTMLs) {
|
|
const cards = [];
|
|
let stepHTMLIndex = 0;
|
|
|
|
data.sections.forEach(function(section, sectionIndex) {
|
|
const sectionName = section.name || (data.sections.length > 1 ? 'Main' : null);
|
|
|
|
if (section.ingredients.length > 0 || sectionName) {
|
|
cards.push({
|
|
type: 'section',
|
|
sectionIndex: sectionIndex,
|
|
name: sectionName || data.name,
|
|
ingredients: section.ingredients
|
|
});
|
|
}
|
|
|
|
section.steps.forEach(function(step) {
|
|
cards.push({
|
|
type: 'step',
|
|
sectionIndex: sectionIndex,
|
|
sectionName: sectionName,
|
|
number: step.number,
|
|
totalInSection: section.steps.length,
|
|
image: step.image,
|
|
html: stepHTMLs[stepHTMLIndex] || '',
|
|
ingredients: step.ingredients
|
|
});
|
|
stepHTMLIndex++;
|
|
});
|
|
});
|
|
|
|
cards.push({
|
|
type: 'done',
|
|
sectionIndex: data.sections.length - 1,
|
|
name: data.name
|
|
});
|
|
|
|
return cards;
|
|
}
|
|
|
|
// ─── Rendering ────────────────────────────────────────────────
|
|
|
|
function escapeHTML(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function renderCard(card) {
|
|
const div = document.createElement('div');
|
|
div.className = 'cooking-card hidden-card';
|
|
|
|
if (card.type === 'section') {
|
|
div.classList.add('cooking-card-section');
|
|
let ingredientsHTML = '';
|
|
if (card.ingredients.length > 0) {
|
|
const items = card.ingredients.map(function(ing) {
|
|
const qty = [ing.quantity, ing.unit].filter(Boolean).join(' ');
|
|
const note = ing.note ? '<span class="cooking-mise-note">(' + escapeHTML(ing.note) + ')</span>' : '';
|
|
return '<div class="cooking-mise-item">' +
|
|
'<span class="cooking-mise-name">' + escapeHTML(ing.name) + ' ' + note + '</span>' +
|
|
(qty ? '<span class="cooking-mise-qty">' + escapeHTML(qty) + '</span>' : '') +
|
|
'</div>';
|
|
}).join('');
|
|
ingredientsHTML = '<div class="cooking-mise-grid">' + items + '</div>';
|
|
}
|
|
div.innerHTML = '<h2>' + escapeHTML(card.name) + '</h2>' + ingredientsHTML;
|
|
div.querySelectorAll('.cooking-mise-item').forEach(function(item) {
|
|
item.addEventListener('click', function() {
|
|
item.classList.toggle('checked');
|
|
});
|
|
});
|
|
}
|
|
else if (card.type === 'step') {
|
|
div.classList.add('cooking-card-step');
|
|
const imageHTML = card.image
|
|
? '<img class="cooking-step-image" src="' + escapeHTML(card.image) + '" alt="Step ' + card.number + '" />'
|
|
: '';
|
|
let ingredientsHTML = '';
|
|
if (card.ingredients.length > 0) {
|
|
ingredientsHTML = '<div class="cooking-step-ingredients">' +
|
|
card.ingredients.map(function(ing) {
|
|
const qty = [ing.quantity, ing.unit].filter(Boolean).join(' ');
|
|
const note = ing.note ? ' (' + escapeHTML(ing.note) + ')' : '';
|
|
return '<span>' + escapeHTML(ing.name) + (qty ? ': ' + escapeHTML(qty) : '') + note + '</span>';
|
|
}).join('') + '</div>';
|
|
}
|
|
div.innerHTML =
|
|
imageHTML +
|
|
'<div class="cooking-step-text"><span class="cooking-step-number">' + card.number + '</span>' + card.html + '</div>' +
|
|
ingredientsHTML;
|
|
}
|
|
else if (card.type === 'done') {
|
|
div.classList.add('cooking-card-done');
|
|
div.innerHTML = '<h2>Bon Appetit!</h2>' +
|
|
'<button class="cooking-done-close-btn">Close</button>';
|
|
div.querySelector('.cooking-done-close-btn').addEventListener('click', closeCookingMode);
|
|
}
|
|
|
|
return div;
|
|
}
|
|
|
|
function renderOverlay(data, cards) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'cooking-overlay';
|
|
overlay.id = 'cooking-overlay';
|
|
overlay.setAttribute('role', 'dialog');
|
|
overlay.setAttribute('aria-modal', 'true');
|
|
overlay.setAttribute('aria-label', 'Cooking mode: ' + data.name);
|
|
|
|
// ARIA live region for step announcements
|
|
const liveRegion = document.createElement('div');
|
|
liveRegion.setAttribute('aria-live', 'polite');
|
|
liveRegion.setAttribute('aria-atomic', 'true');
|
|
liveRegion.className = 'sr-only';
|
|
liveRegion.id = 'cooking-status';
|
|
overlay.appendChild(liveRegion);
|
|
|
|
// Header
|
|
const header = document.createElement('div');
|
|
header.className = 'cooking-header';
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'cooking-header-title';
|
|
title.textContent = data.name;
|
|
|
|
const sectionsNav = document.createElement('div');
|
|
sectionsNav.className = 'cooking-header-sections';
|
|
sectionsNav.id = 'cooking-sections-nav';
|
|
|
|
data.sections.forEach(function(section, i) {
|
|
const pill = document.createElement('button');
|
|
pill.className = 'cooking-section-pill';
|
|
pill.textContent = section.name || (data.sections.length > 1 ? 'Main' : 'Steps');
|
|
pill.dataset.sectionIndex = i;
|
|
pill.addEventListener('click', function() { navigateToSection(i); });
|
|
sectionsNav.appendChild(pill);
|
|
});
|
|
|
|
const closeBtn = document.createElement('button');
|
|
closeBtn.className = 'cooking-close-btn';
|
|
closeBtn.setAttribute('aria-label', 'Close cooking mode');
|
|
closeBtn.innerHTML = '×';
|
|
closeBtn.addEventListener('click', closeCookingMode);
|
|
|
|
header.appendChild(title);
|
|
if (data.sections.length > 1 || (data.sections[0] && data.sections[0].name)) {
|
|
header.appendChild(sectionsNav);
|
|
}
|
|
header.appendChild(closeBtn);
|
|
|
|
// Carousel
|
|
const carousel = document.createElement('div');
|
|
carousel.className = 'cooking-carousel';
|
|
carousel.id = 'cooking-carousel';
|
|
|
|
const container = document.createElement('div');
|
|
container.className = 'cooking-card-container';
|
|
container.id = 'cooking-card-container';
|
|
|
|
cards.forEach(function(card) {
|
|
container.appendChild(renderCard(card));
|
|
});
|
|
|
|
// Click on prev/next card to navigate
|
|
container.addEventListener('click', function(e) {
|
|
const card = e.target.closest('.cooking-card');
|
|
if (!card) return;
|
|
if (card.classList.contains('prev')) {
|
|
navigateTo(state.currentIndex - 1);
|
|
} else if (card.classList.contains('next')) {
|
|
navigateTo(state.currentIndex + 1);
|
|
}
|
|
});
|
|
|
|
carousel.appendChild(container);
|
|
|
|
// Progress bar
|
|
const progress = document.createElement('div');
|
|
progress.className = 'cooking-progress';
|
|
progress.innerHTML = '<div class="cooking-progress-bar" id="cooking-progress-bar"></div>';
|
|
|
|
overlay.appendChild(header);
|
|
overlay.appendChild(carousel);
|
|
overlay.appendChild(progress);
|
|
|
|
// Cache card element references
|
|
state.cardEls = Array.from(container.querySelectorAll('.cooking-card'));
|
|
|
|
return overlay;
|
|
}
|
|
|
|
// ─── Navigation ───────────────────────────────────────────────
|
|
|
|
function updateCards() {
|
|
const cardEls = state.cardEls;
|
|
if (cardEls.length === 0) return;
|
|
|
|
// Only update cards that need changing: previous current +-1 and new current +-1
|
|
const indicesToUpdate = new Set();
|
|
for (let i = 0; i < cardEls.length; i++) {
|
|
const el = cardEls[i];
|
|
if (el.classList.contains('current') || el.classList.contains('prev') || el.classList.contains('next')) {
|
|
indicesToUpdate.add(i);
|
|
}
|
|
}
|
|
indicesToUpdate.add(state.currentIndex);
|
|
if (state.currentIndex > 0) indicesToUpdate.add(state.currentIndex - 1);
|
|
if (state.currentIndex < cardEls.length - 1) indicesToUpdate.add(state.currentIndex + 1);
|
|
|
|
indicesToUpdate.forEach(function(i) {
|
|
const el = cardEls[i];
|
|
el.classList.remove('current', 'prev', 'next', 'hidden-card', 'swiping');
|
|
el.style.transform = '';
|
|
if (i === state.currentIndex) {
|
|
el.classList.add('current');
|
|
} else if (i === state.currentIndex - 1) {
|
|
el.classList.add('prev');
|
|
} else if (i === state.currentIndex + 1) {
|
|
el.classList.add('next');
|
|
} else {
|
|
el.classList.add('hidden-card');
|
|
}
|
|
});
|
|
|
|
// Update progress bar
|
|
const progressBar = document.getElementById('cooking-progress-bar');
|
|
if (progressBar) {
|
|
const pct = state.cards.length > 1
|
|
? (state.currentIndex / (state.cards.length - 1)) * 100
|
|
: 100;
|
|
progressBar.style.width = pct + '%';
|
|
}
|
|
|
|
// Update section pills
|
|
const currentCard = state.cards[state.currentIndex];
|
|
if (currentCard) {
|
|
const pills = document.querySelectorAll('.cooking-section-pill');
|
|
for (let j = 0; j < pills.length; j++) {
|
|
const isActive = parseInt(pills[j].dataset.sectionIndex) === currentCard.sectionIndex;
|
|
pills[j].classList.toggle('active', isActive);
|
|
}
|
|
}
|
|
|
|
// Update ARIA live region
|
|
updateAriaStatus();
|
|
}
|
|
|
|
function updateAriaStatus() {
|
|
const statusEl = document.getElementById('cooking-status');
|
|
if (!statusEl) return;
|
|
|
|
const currentCard = state.cards[state.currentIndex];
|
|
if (!currentCard) return;
|
|
|
|
let message;
|
|
if (currentCard.type === 'section') {
|
|
message = 'Ingredients for ' + currentCard.name;
|
|
} else if (currentCard.type === 'step') {
|
|
message = 'Step ' + currentCard.number + ' of ' + currentCard.totalInSection;
|
|
} else if (currentCard.type === 'done') {
|
|
message = 'Recipe complete. Bon Appetit!';
|
|
}
|
|
|
|
statusEl.textContent = message;
|
|
}
|
|
|
|
function navigateTo(index) {
|
|
if (index < 0 || index >= state.cards.length) return;
|
|
state.currentIndex = index;
|
|
updateCards();
|
|
}
|
|
|
|
function navigateToSection(sectionIndex) {
|
|
for (let i = 0; i < state.cards.length; i++) {
|
|
if (state.cards[i].sectionIndex === sectionIndex) {
|
|
navigateTo(i);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ─── Touch Handling ───────────────────────────────────────────
|
|
|
|
function getCurrentCardEl() {
|
|
return state.cardEls[state.currentIndex] || null;
|
|
}
|
|
|
|
function isAtScrollTop(el) {
|
|
return el.scrollTop <= 0;
|
|
}
|
|
|
|
function isAtScrollBottom(el) {
|
|
return el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
|
|
}
|
|
|
|
function cardCanScroll(el) {
|
|
return el.scrollHeight > el.clientHeight + 1;
|
|
}
|
|
|
|
function onTouchStart(e) {
|
|
if (e.touches.length !== 1) return;
|
|
state.touchStartY = e.touches[0].clientY;
|
|
state.touchCurrentY = state.touchStartY;
|
|
state.isSwiping = false;
|
|
state.scrolling = false;
|
|
|
|
const currentEl = getCurrentCardEl();
|
|
if (currentEl) {
|
|
state.startScrollTop = currentEl.scrollTop;
|
|
state.canScrollCard = cardCanScroll(currentEl);
|
|
} else {
|
|
state.canScrollCard = false;
|
|
}
|
|
}
|
|
|
|
function onTouchMove(e) {
|
|
if (e.touches.length !== 1) return;
|
|
state.touchCurrentY = e.touches[0].clientY;
|
|
const delta = state.touchCurrentY - state.touchStartY;
|
|
const currentEl = getCurrentCardEl();
|
|
if (!currentEl) return;
|
|
|
|
// If card has scrollable content, let it scroll until at boundary
|
|
if (state.canScrollCard && !state.isSwiping) {
|
|
const swipingUp = delta < 0;
|
|
const swipingDown = delta > 0;
|
|
const atTop = isAtScrollTop(currentEl);
|
|
const atBottom = isAtScrollBottom(currentEl);
|
|
|
|
// Allow native scroll if not at boundary, or scrolling into content
|
|
if ((swipingUp && !atBottom) || (swipingDown && !atTop)) {
|
|
state.scrolling = true;
|
|
return; // let browser handle scroll
|
|
}
|
|
|
|
// At boundary and swiping away from content — start card swipe
|
|
if (!state.scrolling) {
|
|
state.isSwiping = true;
|
|
state.touchStartY = state.touchCurrentY; // reset start to boundary
|
|
} else {
|
|
// Was scrolling, now at boundary — wait for a new gesture
|
|
return;
|
|
}
|
|
} else {
|
|
state.isSwiping = true;
|
|
}
|
|
|
|
if (state.isSwiping) {
|
|
const swipeDelta = state.touchCurrentY - state.touchStartY;
|
|
const clampedDelta = Math.max(-SWIPE_CLAMP_MAX, Math.min(SWIPE_CLAMP_MAX, swipeDelta));
|
|
currentEl.classList.add('swiping');
|
|
currentEl.style.transform = 'translateY(' + clampedDelta + 'px) scale(' + (1 - Math.abs(clampedDelta) * SWIPE_SCALE_FACTOR) + ')';
|
|
}
|
|
}
|
|
|
|
function onTouchEnd() {
|
|
try {
|
|
const currentEl = getCurrentCardEl();
|
|
|
|
if (state.isSwiping) {
|
|
const delta = state.touchCurrentY - state.touchStartY;
|
|
|
|
if (currentEl) {
|
|
currentEl.classList.remove('swiping');
|
|
currentEl.style.transform = '';
|
|
}
|
|
|
|
if (delta < -SWIPE_THRESHOLD && state.currentIndex < state.cards.length - 1) {
|
|
navigateTo(state.currentIndex + 1);
|
|
} else if (delta > SWIPE_THRESHOLD && state.currentIndex > 0) {
|
|
navigateTo(state.currentIndex - 1);
|
|
} else {
|
|
updateCards();
|
|
}
|
|
}
|
|
} finally {
|
|
state.isSwiping = false;
|
|
state.scrolling = false;
|
|
}
|
|
}
|
|
|
|
// ─── Keyboard Handling ────────────────────────────────────────
|
|
|
|
function onKeyDown(e) {
|
|
if (!state.overlay) return;
|
|
|
|
switch (e.key) {
|
|
case 'ArrowDown':
|
|
case 'ArrowRight':
|
|
e.preventDefault();
|
|
navigateTo(state.currentIndex + 1);
|
|
break;
|
|
case 'ArrowUp':
|
|
case 'ArrowLeft':
|
|
e.preventDefault();
|
|
navigateTo(state.currentIndex - 1);
|
|
break;
|
|
case 'Escape':
|
|
e.preventDefault();
|
|
closeCookingMode();
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ─── Wheel Handling ─────────────────────────────────────────────
|
|
|
|
function onWheel(e) {
|
|
if (!state.overlay) return;
|
|
e.preventDefault();
|
|
|
|
// Accumulate wheel delta (trackpads send many small events)
|
|
state.wheelAccumulator += e.deltaY;
|
|
|
|
// Reset accumulator after a pause in scrolling
|
|
if (state.wheelResetTimeout) clearTimeout(state.wheelResetTimeout);
|
|
state.wheelResetTimeout = setTimeout(function() {
|
|
state.wheelAccumulator = 0;
|
|
state.wheelResetTimeout = null;
|
|
}, WHEEL_RESET_MS);
|
|
|
|
// Navigate only when accumulated delta exceeds threshold
|
|
if (state.wheelAccumulator >= WHEEL_THRESHOLD) {
|
|
navigateTo(state.currentIndex + 1);
|
|
state.wheelAccumulator = 0;
|
|
} else if (state.wheelAccumulator <= -WHEEL_THRESHOLD) {
|
|
navigateTo(state.currentIndex - 1);
|
|
state.wheelAccumulator = 0;
|
|
}
|
|
}
|
|
|
|
// ─── Wake Lock ────────────────────────────────────────────────
|
|
|
|
function acquireWakeLock() {
|
|
if (!('wakeLock' in navigator)) return;
|
|
navigator.wakeLock.request('screen').then(function(lock) {
|
|
state.wakeLock = lock;
|
|
lock.addEventListener('release', function() {
|
|
state.wakeLock = null;
|
|
});
|
|
}).catch(function(err) {
|
|
console.warn('Wake lock request failed:', err);
|
|
});
|
|
}
|
|
|
|
function releaseWakeLock() {
|
|
if (state.wakeLock) {
|
|
state.wakeLock.release().catch(function() {});
|
|
state.wakeLock = null;
|
|
}
|
|
}
|
|
|
|
function onVisibilityChange() {
|
|
if (state.overlay && document.visibilityState === 'visible' && !state.wakeLock) {
|
|
acquireWakeLock();
|
|
}
|
|
}
|
|
|
|
function onBeforeUnload() {
|
|
releaseWakeLock();
|
|
}
|
|
|
|
// ─── Open / Close ─────────────────────────────────────────────
|
|
|
|
function startCookingMode() {
|
|
const data = loadRecipeData();
|
|
if (!data) return;
|
|
|
|
// Save trigger element for focus restoration
|
|
state.triggerElement = document.activeElement;
|
|
|
|
const stepHTMLs = captureStepHTML();
|
|
state.cards = buildCards(data, stepHTMLs);
|
|
if (state.cards.length === 0) return;
|
|
|
|
state.currentIndex = 0;
|
|
|
|
state.overlay = renderOverlay(data, state.cards);
|
|
document.body.appendChild(state.overlay);
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
updateCards();
|
|
|
|
// Add event listeners
|
|
const carousel = document.getElementById('cooking-carousel');
|
|
carousel.addEventListener('touchstart', onTouchStart, { passive: true });
|
|
carousel.addEventListener('touchmove', onTouchMove, { passive: true });
|
|
carousel.addEventListener('touchend', onTouchEnd, { passive: true });
|
|
carousel.addEventListener('wheel', onWheel, { passive: false });
|
|
|
|
document.addEventListener('keydown', onKeyDown);
|
|
window.addEventListener('beforeunload', onBeforeUnload);
|
|
|
|
acquireWakeLock();
|
|
document.addEventListener('visibilitychange', onVisibilityChange);
|
|
|
|
// Move focus to overlay for accessibility
|
|
state.overlay.setAttribute('tabindex', '-1');
|
|
state.overlay.focus();
|
|
}
|
|
|
|
function closeCookingMode() {
|
|
if (!state.overlay) return;
|
|
|
|
// Remove carousel event listeners
|
|
const carousel = document.getElementById('cooking-carousel');
|
|
if (carousel) {
|
|
carousel.removeEventListener('touchstart', onTouchStart);
|
|
carousel.removeEventListener('touchmove', onTouchMove);
|
|
carousel.removeEventListener('touchend', onTouchEnd);
|
|
carousel.removeEventListener('wheel', onWheel);
|
|
}
|
|
|
|
state.overlay.remove();
|
|
state.overlay = null;
|
|
document.body.style.overflow = '';
|
|
|
|
document.removeEventListener('keydown', onKeyDown);
|
|
window.removeEventListener('beforeunload', onBeforeUnload);
|
|
|
|
releaseWakeLock();
|
|
document.removeEventListener('visibilitychange', onVisibilityChange);
|
|
|
|
// Clear wheel state
|
|
if (state.wheelResetTimeout) {
|
|
clearTimeout(state.wheelResetTimeout);
|
|
state.wheelResetTimeout = null;
|
|
}
|
|
state.wheelAccumulator = 0;
|
|
|
|
// Restore focus to trigger element
|
|
if (state.triggerElement && state.triggerElement.focus) {
|
|
state.triggerElement.focus();
|
|
state.triggerElement = null;
|
|
}
|
|
|
|
state.cards = [];
|
|
state.cardEls = [];
|
|
state.currentIndex = 0;
|
|
}
|
|
|
|
// ─── Global API ───────────────────────────────────────────────
|
|
|
|
window.startCookingMode = startCookingMode;
|
|
window.closeCookingMode = closeCookingMode;
|
|
|
|
})();
|