228 lines
9.6 KiB
JavaScript
228 lines
9.6 KiB
JavaScript
import { RECIPES } from '../data/catalog.js?v=9';
|
|
import { getRecipeGridSectionHTML, renderRecipeGrid } from '../ui/recipeGrid.js';
|
|
|
|
const DEFAULT_MIN_MINUTES = 5;
|
|
const DEFAULT_MAX_MINUTES = 120;
|
|
|
|
let filterState = {
|
|
query: '',
|
|
slots: [],
|
|
tags: [],
|
|
minMinutes: DEFAULT_MIN_MINUTES,
|
|
maxMinutes: DEFAULT_MAX_MINUTES,
|
|
};
|
|
|
|
let recipeListDocListenersBound = false;
|
|
let recipeSearchOpen = false;
|
|
|
|
function matchesFilters(recipe) {
|
|
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
|
|
|
|
if (query) {
|
|
const q = query.toLowerCase();
|
|
const haystack = `${recipe.title} ${(recipe.tags || []).join(' ')}`.toLowerCase();
|
|
if (!haystack.includes(q)) return false;
|
|
}
|
|
|
|
if (slots.length > 0) {
|
|
if (!recipe.allowedSlots.some((s) => slots.includes(s))) return false;
|
|
}
|
|
|
|
if (tags.length > 0) {
|
|
const recipeTags = (recipe.tags || []).map((t) => t.toLowerCase());
|
|
if (!tags.some((t) => recipeTags.includes(t.toLowerCase()))) return false;
|
|
}
|
|
|
|
if (minMinutes > DEFAULT_MIN_MINUTES && recipe.minutes < minMinutes) return false;
|
|
if (maxMinutes < DEFAULT_MAX_MINUTES && recipe.minutes > maxMinutes) return false;
|
|
|
|
return true;
|
|
}
|
|
|
|
function getFilteredRecipes() {
|
|
return Object.values(RECIPES).filter(matchesFilters);
|
|
}
|
|
|
|
function syncRecipeScrollShadow() {
|
|
syncRecipeTopbarUI();
|
|
}
|
|
|
|
function syncRecipeTopbarUI() {
|
|
const searchWrap = document.getElementById('recipe-search-wrap');
|
|
const searchShell = document.getElementById('recipe-search-shell');
|
|
const rightWrap = document.getElementById('recipe-filter-wrap');
|
|
const rightBtn = document.getElementById('recipe-filter-btn');
|
|
const rightIcon = document.getElementById('recipe-right-btn-icon');
|
|
const filterCount = document.getElementById('recipe-filter-count');
|
|
const dot = document.getElementById('recipe-search-active-dot');
|
|
const isOpen = recipeSearchOpen;
|
|
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
|
|
if (searchShell) {
|
|
searchShell.style.opacity = isOpen ? '1' : '0';
|
|
searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
|
|
searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
|
|
}
|
|
if (rightIcon) {
|
|
rightIcon.className = 'fas fa-xmark';
|
|
}
|
|
if (rightBtn) {
|
|
rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
|
|
}
|
|
if (rightWrap) {
|
|
rightWrap.classList.toggle('hidden', !isOpen);
|
|
}
|
|
if (filterCount) {
|
|
const showCount = false;
|
|
filterCount.classList.toggle('hidden', !showCount);
|
|
filterCount.classList.toggle('flex', showCount);
|
|
}
|
|
if (dot) {
|
|
const hasQuery = Boolean(filterState.query);
|
|
dot.classList.toggle('hidden', !hasQuery);
|
|
}
|
|
}
|
|
|
|
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
|
const hadQuery = Boolean(filterState.query);
|
|
recipeSearchOpen = open;
|
|
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
|
|
if (clearQuery) {
|
|
filterState.query = '';
|
|
}
|
|
const input = document.getElementById('recipe-search-input');
|
|
if (input) {
|
|
if (open) {
|
|
input.value = filterState.query;
|
|
if (focusInput) {
|
|
input.focus();
|
|
input.setSelectionRange(input.value.length, input.value.length);
|
|
}
|
|
} else {
|
|
input.blur();
|
|
}
|
|
}
|
|
syncRecipeTopbarUI();
|
|
if (clearQuery && hadQuery) renderGrid();
|
|
}
|
|
|
|
function renderGrid() {
|
|
const grid = document.getElementById('recipe-grid');
|
|
const emptyState = document.getElementById('recipe-empty-state');
|
|
if (!grid) return;
|
|
|
|
renderRecipeGrid({
|
|
gridEl: grid,
|
|
emptyStateEl: emptyState,
|
|
recipes: getFilteredRecipes(),
|
|
showSlotLabels: false,
|
|
cardClassName: 'recipe-list-card recipe-catalog-card',
|
|
});
|
|
syncRecipeTopbarUI();
|
|
requestAnimationFrame(syncRecipeScrollShadow);
|
|
}
|
|
|
|
export function getRecipeListHTML() {
|
|
return `
|
|
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
|
${getRecipeGridSectionHTML({
|
|
scrollId: 'recipe-scroll',
|
|
gridId: 'recipe-grid',
|
|
emptyStateId: 'recipe-empty-state',
|
|
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
|
|
gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
|
|
emptyTitle: 'Brak wyników',
|
|
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
|
|
})}
|
|
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
|
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
|
|
<button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
<span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
|
</button>
|
|
</div>
|
|
<div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
|
|
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
|
|
<input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
|
|
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
|
|
</div>
|
|
|
|
<div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
|
|
<button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
|
<i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
|
|
<span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
export function getFilterState() {
|
|
return filterState;
|
|
}
|
|
|
|
export function applyFilters(newState) {
|
|
Object.assign(filterState, newState);
|
|
renderGrid();
|
|
}
|
|
|
|
export function getFilteredCount() {
|
|
return getFilteredRecipes().length;
|
|
}
|
|
|
|
export function refreshRecipeList() {
|
|
renderGrid();
|
|
}
|
|
|
|
export function setupRecipeList() {
|
|
renderGrid();
|
|
|
|
document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
setSearchOpen(true, { focusInput: true });
|
|
});
|
|
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
|
|
filterState.query = e.target.value.trim();
|
|
renderGrid();
|
|
});
|
|
document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
|
|
if (e.key !== 'Escape') return;
|
|
e.stopPropagation();
|
|
setSearchOpen(false, { clearQuery: true });
|
|
});
|
|
document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
if (recipeSearchOpen) {
|
|
setSearchOpen(false, { clearQuery: true });
|
|
}
|
|
});
|
|
|
|
document.getElementById('recipe-grid')?.addEventListener('click', (e) => {
|
|
const card = e.target.closest('.recipe-browser-card');
|
|
if (!card) return;
|
|
const recipeId = card.getAttribute('data-recipe-id');
|
|
if (recipeId) window.openRecipeDetail?.(recipeId);
|
|
});
|
|
|
|
if (!recipeListDocListenersBound) {
|
|
recipeListDocListenersBound = true;
|
|
document.addEventListener('keydown', (e) => {
|
|
const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
|
|
if (e.key !== 'Escape') return;
|
|
if (isRecipeViewVisible) {
|
|
if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
|
|
}
|
|
});
|
|
|
|
window.addEventListener('app-tab-change', () => {
|
|
if (recipeSearchOpen) setSearchOpen(false);
|
|
syncRecipeTopbarUI();
|
|
});
|
|
|
|
window.closeRecipeSearch = () => {
|
|
if (recipeSearchOpen) setSearchOpen(false);
|
|
syncRecipeTopbarUI();
|
|
};
|
|
}
|
|
}
|