591 lines
29 KiB
JavaScript
591 lines
29 KiB
JavaScript
import { RECIPES, INGREDIENTS, PRODUCTS } from '../data/catalog.js?v=8';
|
|
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-113';
|
|
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
const RD_THEME = Object.freeze({
|
|
surface: '#393937',
|
|
surfaceSoft: '#2f2f2d',
|
|
surfaceActive: '#23221e',
|
|
border: '#444442',
|
|
borderSoft: '#56534f',
|
|
borderStrong: '#787876',
|
|
textPrimary: '#ddd6ca',
|
|
textSecondary: '#d7d2c8',
|
|
textMuted: '#9b978f',
|
|
});
|
|
|
|
function forceBg(bg) {
|
|
return `background:${bg} !important; background-image:none !important; box-shadow:none !important;`;
|
|
}
|
|
|
|
function forceBgBorder(bg, border) {
|
|
return `${forceBg(bg)} border:1px solid ${border} !important;`;
|
|
}
|
|
|
|
export function getRecipeDetailHTML() {
|
|
return `
|
|
<div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
|
|
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
|
|
<button id="rd-back-btn" onclick="closeRecipeDetail()" class="w-9 h-9 rounded-full flex items-center justify-center transition-opacity opacity-95 hover:opacity-100" style="background:rgba(57,57,55,0.93) !important; backdrop-filter:none !important; box-shadow:0 4px 9px rgba(0,0,0,0.33) !important; color:#ddd6ca !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
|
|
<i class="fas fa-arrow-left text-[13px]"></i>
|
|
</button>
|
|
<button id="rd-add-to-planner-btn" class="h-9 px-3 rounded-full flex items-center justify-center gap-1.5 transition-opacity opacity-95 hover:opacity-100 text-[12px] font-semibold" style="background:rgba(57,57,55,0.93) !important; backdrop-filter:none !important; box-shadow:0 3px 8px rgba(0,0,0,0.28) !important; color:#ddd6ca !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
|
|
<i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
|
|
</button>
|
|
</div>
|
|
|
|
<div id="rd-scroll-container" class="absolute inset-0 z-10 overflow-y-auto no-scrollbar" style="overscroll-behavior-y:none;">
|
|
<div id="rd-hero" class="h-[236px] w-full relative overflow-hidden" style="background:linear-gradient(180deg, #3a3937 0%, #23221e 100%) !important; will-change:height,opacity;">
|
|
<img id="rd-hero-img" src="" alt="" class="w-full h-full object-cover hidden" style="will-change:transform;">
|
|
<div class="absolute inset-0 pointer-events-none" style="background:linear-gradient(to bottom, rgba(45,46,43,0.1), rgba(45,46,43,0.4), rgba(45,46,43,0.92));"></div>
|
|
<span id="rd-hero-label" class="absolute inset-0 z-10 flex items-center justify-center font-medium text-[15px]" style="color:#ddd6ca;"></span>
|
|
</div>
|
|
|
|
<div id="rd-content-body" class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 min-h-screen" style="background:#2d2e2b !important; background-image:none !important; box-shadow:0 -8px 20px rgba(0,0,0,0.35) !important;">
|
|
<div class="mb-3 px-5">
|
|
<div class="flex justify-between items-start mb-2.5">
|
|
<h1 id="rd-title" class="text-xl font-bold leading-tight" style="color:#ddd6ca;"></h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-5 pt-2">
|
|
<h2 class="text-[11px] font-bold uppercase tracking-wider mb-3" style="color:${RD_THEME.textMuted};">Składniki</h2>
|
|
<div id="rd-tab-ingredients"></div>
|
|
</div>
|
|
|
|
<div class="px-5 pt-2" style="padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));">
|
|
<div class="border-t my-4" style="border-color:${RD_THEME.border};"></div>
|
|
<h2 class="text-[11px] font-bold uppercase tracking-wider mb-3" style="color:${RD_THEME.textMuted};">Kroki</h2>
|
|
<div id="rd-tab-steps"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${getIngredientCardHTML({ idBase: 'rd-ing-card' })}
|
|
`;
|
|
}
|
|
|
|
/* ── state ─────────────────────────────────────────────── */
|
|
|
|
let currentRecipeId = null;
|
|
let currentMode = 'catalog';
|
|
let currentServings = 1;
|
|
let currentSubstitutions = {};
|
|
let currentExcludedIngredients = new Set();
|
|
let currentAmountOverrides = {};
|
|
let currentAddedIngredients = [];
|
|
let currentProductSelections = {};
|
|
let expandedAlternatives = new Set();
|
|
let ingredientCard = null;
|
|
let resetScrollState = null;
|
|
|
|
function isPlannedMode() {
|
|
return currentMode === 'planned';
|
|
}
|
|
|
|
function getEffectiveIngredientId(originalId) {
|
|
return currentSubstitutions[originalId] || originalId;
|
|
}
|
|
|
|
function clampServings(value) {
|
|
return Math.max(1, Math.min(12, Number(value) || 1));
|
|
}
|
|
|
|
function cloneAddedIngredients(items) {
|
|
if (!Array.isArray(items)) return [];
|
|
return items
|
|
.filter((item) => item && typeof item.ingredientId === 'string' && typeof item.amount === 'number' && typeof item.unit === 'string')
|
|
.map((item) => ({ ingredientId: item.ingredientId, amount: item.amount, unit: item.unit }));
|
|
}
|
|
|
|
function getSelectedProduct(productId) {
|
|
return productId && PRODUCTS[productId] ? PRODUCTS[productId] : null;
|
|
}
|
|
|
|
function getProductSelectionForIngredient(...ingredientIds) {
|
|
for (const ingredientId of ingredientIds) {
|
|
if (!ingredientId) continue;
|
|
const productId = currentProductSelections[ingredientId];
|
|
if (getSelectedProduct(productId)) return productId;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function buildVisibleIngredients(recipe) {
|
|
if (!recipe) return [];
|
|
|
|
const rows = [];
|
|
|
|
for (const ing of recipe.ingredients) {
|
|
const originalId = ing.ingredientId;
|
|
if (currentExcludedIngredients.has(originalId)) continue;
|
|
|
|
const effectiveId = getEffectiveIngredientId(originalId);
|
|
const effectiveDef = INGREDIENTS[effectiveId];
|
|
const productId = getProductSelectionForIngredient(effectiveId, originalId);
|
|
rows.push({
|
|
key: `recipe:${originalId}`,
|
|
originalId,
|
|
ingredientId: effectiveId,
|
|
name: effectiveDef?.name || effectiveId,
|
|
amount: (currentAmountOverrides[originalId] ?? ing.amount) * currentServings,
|
|
unit: ing.unit,
|
|
productId,
|
|
productName: getSelectedProduct(productId)?.name || '',
|
|
added: false,
|
|
alternatives: Array.isArray(ing.alternatives) ? ing.alternatives : [],
|
|
});
|
|
}
|
|
|
|
currentAddedIngredients.forEach((item, index) => {
|
|
const def = INGREDIENTS[item.ingredientId];
|
|
const productId = getProductSelectionForIngredient(item.ingredientId);
|
|
rows.push({
|
|
key: `added:${index}:${item.ingredientId}`,
|
|
originalId: item.ingredientId,
|
|
ingredientId: item.ingredientId,
|
|
name: def?.name || item.ingredientId,
|
|
amount: item.amount * currentServings,
|
|
unit: item.unit,
|
|
productId,
|
|
productName: getSelectedProduct(productId)?.name || '',
|
|
added: true,
|
|
alternatives: [],
|
|
});
|
|
});
|
|
|
|
return rows;
|
|
}
|
|
|
|
/* ── populate ──────────────────────────────────────────── */
|
|
|
|
function populateDetail(recipeId, options = {}) {
|
|
const recipe = RECIPES[recipeId];
|
|
if (!recipe) return;
|
|
|
|
currentRecipeId = recipeId;
|
|
currentMode = options.plannedEntry ? 'planned' : 'catalog';
|
|
currentServings = clampServings(options.servings ?? options.plannedEntry?.servings ?? 1);
|
|
currentSubstitutions = { ...(options.substitutions || options.plannedEntry?.substitutions || {}) };
|
|
currentExcludedIngredients = new Set(options.excludedIngredients || options.plannedEntry?.excludedIngredients || []);
|
|
currentAmountOverrides = { ...(options.amountOverrides || options.plannedEntry?.amountOverrides || {}) };
|
|
currentAddedIngredients = cloneAddedIngredients(options.addedIngredients || options.plannedEntry?.addedIngredients);
|
|
currentProductSelections = { ...(options.productSelections || options.plannedEntry?.productSelections || {}) };
|
|
expandedAlternatives.clear();
|
|
ingredientCard?.close();
|
|
|
|
const heroImg = document.getElementById('rd-hero-img');
|
|
const heroLabel = document.getElementById('rd-hero-label');
|
|
if (recipe.image) {
|
|
heroImg.src = recipe.image;
|
|
heroImg.alt = recipe.title;
|
|
heroImg.classList.remove('hidden');
|
|
heroLabel.textContent = '';
|
|
} else {
|
|
heroImg.classList.add('hidden');
|
|
heroImg.src = '';
|
|
heroLabel.textContent = `Zdjęcie: ${recipe.title}`;
|
|
}
|
|
document.getElementById('rd-title').textContent = recipe.title;
|
|
document.getElementById('rd-add-to-planner-btn')?.classList.toggle('hidden', isPlannedMode());
|
|
|
|
renderIngredients(recipe);
|
|
renderSteps(recipe);
|
|
resetScrollState?.();
|
|
}
|
|
|
|
/* ── helpers ───────────────────────────────────────────── */
|
|
|
|
function nutritionForAmount(ingredientId, amount, unit, productIdOverride = null) {
|
|
const def = INGREDIENTS[ingredientId];
|
|
const productId = productIdOverride || getProductSelectionForIngredient(ingredientId);
|
|
const product = getSelectedProduct(productId);
|
|
const nutrition = product?.nutritionPer100g || def?.nutritionPer100g;
|
|
if (!def || !nutrition) return null;
|
|
let grams = amount;
|
|
if ((unit === 'szt.' || unit === 'szt') && def.weightPerPiece) {
|
|
grams = amount * def.weightPerPiece;
|
|
}
|
|
const f = grams / 100;
|
|
return {
|
|
kcal: Math.round(nutrition.kcal * f),
|
|
protein: Math.round(nutrition.protein * f * 10) / 10,
|
|
fat: Math.round(nutrition.fat * f * 10) / 10,
|
|
carbs: Math.round(nutrition.carbs * f * 10) / 10,
|
|
};
|
|
}
|
|
|
|
function fmtAmt(n) {
|
|
return Number.isInteger(n) ? String(n) : String(parseFloat(n.toFixed(1)));
|
|
}
|
|
|
|
/* ── ingredients tab with inline nutrition + summary ───── */
|
|
|
|
function computeEffectiveNutritionTotals(recipe) {
|
|
let kcal = 0, protein = 0, fat = 0, carbs = 0;
|
|
for (const ing of buildVisibleIngredients(recipe)) {
|
|
const n = nutritionForAmount(ing.ingredientId, ing.amount, ing.unit, ing.productId);
|
|
if (n) {
|
|
kcal += n.kcal;
|
|
protein += n.protein;
|
|
fat += n.fat;
|
|
carbs += n.carbs;
|
|
}
|
|
}
|
|
return {
|
|
kcal: Math.round(kcal),
|
|
protein: Math.round(protein * 10) / 10,
|
|
fat: Math.round(fat * 10) / 10,
|
|
carbs: Math.round(carbs * 10) / 10,
|
|
};
|
|
}
|
|
|
|
function renderNutritionSummary(recipe) {
|
|
const total = computeEffectiveNutritionTotals(recipe);
|
|
const servingsHtml = isPlannedMode()
|
|
? `
|
|
<div class="mt-3 flex items-center justify-between gap-3">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
|
|
<p class="pr-1 text-[13px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</p>
|
|
</div>`
|
|
: `
|
|
<div class="mt-3 flex items-center justify-between gap-3">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
|
|
<div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
|
|
<button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
|
|
<i class="fas fa-minus text-[10px]"></i>
|
|
</button>
|
|
<span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
|
|
<button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
|
|
<i class="fas fa-plus text-[10px]"></i>
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
|
|
return `
|
|
<div class="mb-4">
|
|
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
|
<div class="flex-1 flex items-center">
|
|
<div class="grid grid-cols-4 gap-1.5 w-full">
|
|
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
|
|
<p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${total.kcal}</p>
|
|
<p class="text-[9px] text-gray-500 font-medium">kcal</p>
|
|
</div>
|
|
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
|
|
<p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${total.protein}g</p>
|
|
<p class="text-[9px] text-gray-500 font-medium">białko</p>
|
|
</div>
|
|
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
|
|
<p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${total.fat}g</p>
|
|
<p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
|
|
</div>
|
|
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
|
|
<p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${total.carbs}g</p>
|
|
<p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${servingsHtml}
|
|
</div>`;
|
|
}
|
|
|
|
function renderIngredients(recipe) {
|
|
const container = document.getElementById('rd-tab-ingredients');
|
|
if (!container) return;
|
|
|
|
if (isPlannedMode()) {
|
|
const items = buildVisibleIngredients(recipe);
|
|
const rows = items.map((item) => {
|
|
const rowClass = 'rd-ing-row rounded-xl px-3 py-3 w-full text-left cursor-pointer transition-colors active:scale-[0.99]';
|
|
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
|
|
const productBadge = item.productName
|
|
? `<div class="flex items-center gap-1 mt-0.5"><span class="text-[10px] text-emerald-400 truncate">${escapeHtml(item.productName)}</span></div>`
|
|
: '';
|
|
const addedMark = item.added
|
|
? '<span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span>'
|
|
: '';
|
|
return `<li>
|
|
<button type="button" class="${rowClass}" style="${rowStyle}" data-rd-open-ingredient data-rd-ingredient-id="${escapeHtml(item.ingredientId)}" data-rd-product-id="${escapeHtml(item.productId || '')}">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(item.name)}</span>
|
|
${addedMark}
|
|
</div>
|
|
${productBadge}
|
|
</div>
|
|
<div class="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg">
|
|
<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(item.amount)}</span>
|
|
<span class="text-[11px] text-gray-500">${escapeHtml(item.unit)}</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</li>`;
|
|
}).join('');
|
|
|
|
container.innerHTML = `
|
|
${renderNutritionSummary(recipe)}
|
|
${rows
|
|
? `<ul class="space-y-1.5" id="rd-ingredient-list">${rows}</ul>`
|
|
: `<p class="text-sm text-center py-8" style="color:${RD_THEME.textMuted};">Brak składników w tej wersji przepisu.</p>`}`;
|
|
|
|
container.querySelectorAll('[data-rd-open-ingredient]').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const ingredientId = btn.dataset.rdIngredientId;
|
|
if (!ingredientId || !ingredientCard) return;
|
|
const productId = btn.dataset.rdProductId || null;
|
|
ingredientCard.open({
|
|
ingredientId,
|
|
productId,
|
|
selectedProductId: productId,
|
|
allowProductSelection: false,
|
|
sourceNote: 'Z planera',
|
|
});
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
|
|
const rows = recipe.ingredients.map((ing) => {
|
|
const origId = ing.ingredientId;
|
|
const hasAlts = ing.alternatives && ing.alternatives.length > 0;
|
|
const effectiveId = hasAlts ? getEffectiveIngredientId(origId) : origId;
|
|
const effectiveDef = INGREDIENTS[effectiveId];
|
|
const effectiveName = effectiveDef?.name || effectiveId;
|
|
const scaledAmount = ing.amount * currentServings;
|
|
const isExpanded = expandedAlternatives.has(origId);
|
|
const rowClass = 'rd-ing-row rounded-xl px-3 py-3';
|
|
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
|
|
|
|
const toggleBtn = hasAlts
|
|
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
|
|
: '';
|
|
|
|
let rowHtml = `<div class="${rowClass}" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
|
|
rowHtml += '<div class="flex items-center gap-2">';
|
|
rowHtml += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(effectiveName)}</span></div>`;
|
|
rowHtml += '<div class="shrink-0 flex items-center gap-2">';
|
|
rowHtml += toggleBtn;
|
|
rowHtml += `<div class="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg">
|
|
<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(scaledAmount)}</span>
|
|
<span class="text-[11px] text-gray-500">${escapeHtml(ing.unit)}</span>
|
|
</div>`;
|
|
rowHtml += '</div>';
|
|
rowHtml += '</div>';
|
|
|
|
let altListHtml = '';
|
|
if (hasAlts && isExpanded) {
|
|
const allOptions = [origId, ...ing.alternatives];
|
|
const optionCards = allOptions.map((altId) => {
|
|
const def = INGREDIENTS[altId];
|
|
const altName = def?.name || altId;
|
|
const isSelected = effectiveId === altId;
|
|
const altNutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
|
|
const checkbox = `
|
|
<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
|
|
style="border:1.5px solid #56534f; background:transparent;">
|
|
${isSelected ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
|
|
</span>`;
|
|
const nutritionLine = altNutrition
|
|
? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${altNutrition.kcal} kcal · ${altNutrition.protein}g B · ${altNutrition.fat}g T · ${altNutrition.carbs}g W</div>`
|
|
: '';
|
|
|
|
return `<button type="button" class="rd-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${escapeHtml(altName)}</div>${nutritionLine}</div>${checkbox}</div></button>`;
|
|
});
|
|
altListHtml = `
|
|
<div class="mt-2 ml-1 space-y-1 rd-alt-options" data-original-id="${escapeHtml(origId)}">
|
|
${optionCards.join('')}
|
|
</div>`;
|
|
}
|
|
|
|
rowHtml += altListHtml;
|
|
rowHtml += '</div>';
|
|
return `<li>${rowHtml}</li>`;
|
|
}).join('');
|
|
|
|
container.innerHTML = `
|
|
${renderNutritionSummary(recipe)}
|
|
<ul class="space-y-1.5" id="rd-ingredient-list">${rows}</ul>`;
|
|
|
|
container.querySelector('#rd-serv-minus')?.addEventListener('click', () => {
|
|
if (currentServings <= 1) return;
|
|
currentServings--;
|
|
renderIngredients(recipe);
|
|
});
|
|
|
|
container.querySelector('#rd-serv-plus')?.addEventListener('click', () => {
|
|
if (currentServings >= 12) return;
|
|
currentServings++;
|
|
renderIngredients(recipe);
|
|
});
|
|
|
|
container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const origId = btn.dataset.originalId;
|
|
if (expandedAlternatives.has(origId)) {
|
|
expandedAlternatives.delete(origId);
|
|
} else {
|
|
expandedAlternatives.add(origId);
|
|
}
|
|
renderIngredients(recipe);
|
|
});
|
|
});
|
|
|
|
container.querySelectorAll('.rd-alt-options').forEach((group) => {
|
|
group.querySelectorAll('[data-alt-id]').forEach((card) => {
|
|
card.addEventListener('click', () => {
|
|
const originalId = card.dataset.originalId;
|
|
const altId = card.dataset.altId;
|
|
if (altId === originalId) {
|
|
delete currentSubstitutions[originalId];
|
|
} else {
|
|
currentSubstitutions[originalId] = altId;
|
|
}
|
|
expandedAlternatives.delete(originalId);
|
|
renderIngredients(recipe);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ── steps tab ─────────────────────────────────────────── */
|
|
|
|
function renderSteps(recipe) {
|
|
const container = document.getElementById('rd-tab-steps');
|
|
if (!container) return;
|
|
|
|
const steps = recipe.steps || [];
|
|
if (steps.length === 0) {
|
|
container.innerHTML = `<p class="text-sm text-center py-8" style="color:${RD_THEME.textMuted};">Brak kroków przygotowania.</p>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="space-y-0.5 pb-5">
|
|
${steps.map((step, i) => `
|
|
<div class="relative rounded-xl py-2 pl-3 pr-3" style="background:transparent !important; background-image:none !important; box-shadow:none !important; border:none !important;">
|
|
<div class="absolute top-2 left-0 w-3 h-6 flex items-center justify-start text-[11px] font-bold shrink-0 tabular-nums" style="background:transparent !important; border:none !important; box-shadow:none !important; color:${RD_THEME.textSecondary} !important;">${i + 1}.</div>
|
|
<p class="pl-4 text-[13px] leading-relaxed" style="color:${RD_THEME.textSecondary};">${escapeHtml(step)}</p>
|
|
</div>`).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
/* ── setup ─────────────────────────────────────────────── */
|
|
|
|
export function setupRecipeDetail() {
|
|
ingredientCard = createIngredientCardController({ idBase: 'rd-ing-card', defaultSourceNote: 'Z planera' });
|
|
ingredientCard.bind();
|
|
|
|
/* ── collapsing hero on scroll ─────────────── */
|
|
|
|
const HERO_MAX = 236;
|
|
const scrollContainer = document.getElementById('rd-scroll-container');
|
|
const hero = document.getElementById('rd-hero');
|
|
const heroImg = document.getElementById('rd-hero-img');
|
|
const topActionButtons = [
|
|
document.getElementById('rd-back-btn'),
|
|
document.getElementById('rd-add-to-planner-btn'),
|
|
].filter(Boolean);
|
|
|
|
function syncTopActionButtons(progress) {
|
|
const shadowY = 3 + (progress * 3);
|
|
const shadowBlur = 8 + (progress * 6);
|
|
const shadowAlpha = 0.28 + (progress * 0.16);
|
|
const backgroundAlpha = 0.93 + (progress * 0.05);
|
|
topActionButtons.forEach((button) => {
|
|
const isRoundButton = button.id === 'rd-back-btn';
|
|
const effectiveShadowY = isRoundButton ? shadowY + 1 : shadowY;
|
|
const effectiveShadowBlur = isRoundButton ? shadowBlur + 1 : shadowBlur;
|
|
const effectiveShadowAlpha = isRoundButton ? shadowAlpha + 0.05 : shadowAlpha;
|
|
button.style.boxShadow = `0 ${effectiveShadowY}px ${effectiveShadowBlur}px rgba(0,0,0,${effectiveShadowAlpha})`;
|
|
button.style.background = `rgba(57,57,55,${backgroundAlpha})`;
|
|
});
|
|
}
|
|
|
|
if (scrollContainer && hero) {
|
|
let ticking = false;
|
|
let lastTouchY = null;
|
|
scrollContainer.addEventListener('scroll', () => {
|
|
if (ticking) return;
|
|
ticking = true;
|
|
requestAnimationFrame(() => {
|
|
const scrollY = Math.max(0, scrollContainer.scrollTop);
|
|
const collapse = Math.min(scrollY, HERO_MAX);
|
|
const progress = collapse / HERO_MAX;
|
|
hero.style.height = `${HERO_MAX - collapse}px`;
|
|
hero.style.opacity = String(Math.max(0, 1 - collapse / HERO_MAX));
|
|
syncTopActionButtons(progress);
|
|
if (heroImg) {
|
|
heroImg.style.transform = `translateY(${collapse * 0.4}px) scale(${1 + collapse * 0.001})`;
|
|
}
|
|
ticking = false;
|
|
});
|
|
});
|
|
|
|
scrollContainer.addEventListener('touchstart', (e) => {
|
|
lastTouchY = e.touches[0]?.clientY ?? null;
|
|
}, { passive: true });
|
|
|
|
scrollContainer.addEventListener('touchmove', (e) => {
|
|
const touchY = e.touches[0]?.clientY;
|
|
if (touchY == null) return;
|
|
if (scrollContainer.scrollTop <= 0 && lastTouchY != null && touchY > lastTouchY) {
|
|
e.preventDefault();
|
|
}
|
|
lastTouchY = touchY;
|
|
}, { passive: false });
|
|
|
|
scrollContainer.addEventListener('touchend', () => {
|
|
lastTouchY = null;
|
|
}, { passive: true });
|
|
|
|
scrollContainer.addEventListener('touchcancel', () => {
|
|
lastTouchY = null;
|
|
}, { passive: true });
|
|
}
|
|
|
|
resetScrollState = () => {
|
|
if (scrollContainer) scrollContainer.scrollTop = 0;
|
|
if (hero) { hero.style.height = `${HERO_MAX}px`; hero.style.opacity = '1'; }
|
|
syncTopActionButtons(0);
|
|
if (heroImg) heroImg.style.transform = '';
|
|
};
|
|
|
|
/* ── planner — delegate to MealPlanEditor ─────── */
|
|
|
|
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', () => {
|
|
if (!currentRecipeId || isPlannedMode()) return;
|
|
window.openMealPlanEditor?.({
|
|
mode: 'add',
|
|
recipeId: currentRecipeId,
|
|
servings: currentServings,
|
|
substitutions: { ...currentSubstitutions },
|
|
});
|
|
});
|
|
|
|
window.openRecipeDetail = (recipeId, options = {}) => {
|
|
if (!recipeId || !RECIPES[recipeId]) return;
|
|
populateDetail(recipeId, options);
|
|
const view = document.getElementById('recipe-detail-view');
|
|
view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
|
|
view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
|
};
|
|
|
|
window.closeRecipeDetail = () => {
|
|
ingredientCard?.close();
|
|
window.closeMealPlanEditor?.();
|
|
const view = document.getElementById('recipe-detail-view');
|
|
view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
|
view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
|
|
};
|
|
}
|