652 lines
26 KiB
JavaScript
652 lines
26 KiB
JavaScript
import { RECIPES } from '../data/catalog.js?v=9';
|
|
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
|
import { applyFilters, getFilterState } from './RecipeList.js';
|
|
|
|
const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
|
|
const FILTER_SURFACE = 'var(--filter-liquid-panel-bg)';
|
|
const FILTER_SURFACE_SOFT = 'var(--filter-liquid-chip-bg)';
|
|
const FILTER_BORDER = 'var(--filter-liquid-border)';
|
|
const FILTER_CHIP_ACTIVE_BG = 'var(--filter-liquid-chip-active-bg)';
|
|
const FILTER_TEXT_SECONDARY = 'var(--filter-liquid-text-secondary)';
|
|
const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
|
|
const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
|
|
const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
|
|
const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
|
|
const PREP_TIME_MIN = 5;
|
|
const PREP_TIME_MAX = 120;
|
|
const PREP_TIME_STEP = 5;
|
|
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
|
|
const FILTER_CONTEXTS = {
|
|
recipes: {
|
|
anchorShellId: 'recipe-bottom-controls',
|
|
buttonId: 'recipe-filter-btn',
|
|
getState: () => getFilterState(),
|
|
applyState: (nextState) => applyFilters(nextState),
|
|
showSlots: true,
|
|
},
|
|
plannerPicker: {
|
|
anchorShellId: 'planner-picker-search-shell',
|
|
buttonId: 'planner-picker-filter-btn',
|
|
getState: () => window.getPlannerPickerFilterState?.() || ({
|
|
slots: [],
|
|
tags: [],
|
|
minMinutes: PREP_TIME_MIN,
|
|
maxMinutes: PREP_TIME_MAX,
|
|
}),
|
|
applyState: (nextState) => window.applyPlannerPickerFilters?.(nextState),
|
|
showSlots: false,
|
|
},
|
|
};
|
|
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
function collectAllTags() {
|
|
const tags = new Set();
|
|
for (const r of Object.values(RECIPES)) {
|
|
for (const t of (r.tags || [])) tags.add(t);
|
|
}
|
|
return [...tags].sort((a, b) => a.localeCompare(b, 'pl'));
|
|
}
|
|
|
|
export function getFilterHTML() {
|
|
return `
|
|
<style id="filter-view-styles">
|
|
#filter-view {
|
|
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
|
|
--filter-liquid-panel-shine: none;
|
|
--filter-liquid-border: rgba(255, 255, 255, 0.32);
|
|
--filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.68);
|
|
--filter-liquid-chip-active-bg: rgba(var(--surface-rgb), 0.92);
|
|
--filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
|
|
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
|
|
--filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
|
|
--filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
|
|
--filter-liquid-text-muted: rgb(var(--text-muted-rgb));
|
|
--filter-liquid-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
|
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
|
0 8px 20px rgba(var(--overlay-rgb), 0.16),
|
|
0 22px 52px rgba(var(--overlay-rgb), 0.24);
|
|
}
|
|
|
|
.dark #filter-view {
|
|
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
|
|
--filter-liquid-border: rgba(255, 255, 255, 0.12);
|
|
--filter-liquid-chip-bg: rgba(255, 255, 255, 0.08);
|
|
--filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.16);
|
|
--filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
|
|
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
|
|
--filter-liquid-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
|
0 10px 24px rgba(0, 0, 0, 0.36),
|
|
0 26px 60px rgba(0, 0, 0, 0.46);
|
|
}
|
|
|
|
#filter-view.filter-open {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#filter-panel {
|
|
isolation: isolate;
|
|
background: ${FILTER_SURFACE} !important;
|
|
background-image: none !important;
|
|
border: 1px solid ${FILTER_BORDER} !important;
|
|
box-shadow: var(--filter-liquid-shadow) !important;
|
|
backdrop-filter: blur(28px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
|
}
|
|
|
|
#filter-panel::before {
|
|
display: none;
|
|
}
|
|
|
|
#filter-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
#filter-view .prep-time-range-track,
|
|
#filter-view .prep-time-range-fill {
|
|
border-radius: 9999px;
|
|
height: 0.375rem;
|
|
}
|
|
|
|
#filter-view .prep-time-range-handle {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 9999px;
|
|
border: 1px solid rgba(255,255,255,0.34);
|
|
background: rgba(var(--surface-rgb),0.42);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.42),
|
|
0 0 0 1px rgba(var(--overlay-rgb),0.1),
|
|
0 4px 10px rgba(var(--overlay-rgb),0.18);
|
|
touch-action: none;
|
|
outline: none;
|
|
}
|
|
|
|
.dark #filter-view .prep-time-range-handle {
|
|
border-color: rgba(255,255,255,0.18);
|
|
background: rgba(255,255,255,0.26);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.24),
|
|
0 0 0 1px rgba(0,0,0,0.22),
|
|
0 4px 12px rgba(0,0,0,0.34);
|
|
}
|
|
</style>
|
|
<div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
|
|
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
|
|
<div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
|
|
<p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
|
|
<button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
|
|
</div>
|
|
|
|
<div id="filter-panel-body" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-3 pb-3 space-y-4">
|
|
<section id="filter-slot-section">
|
|
<p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:${FILTER_TEXT_MUTED};">Pora posiłku</p>
|
|
<div id="filter-slot-chips" class="flex flex-wrap gap-2 px-1.5"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:${FILTER_TEXT_MUTED};">Dieta i tagi</p>
|
|
<div id="filter-tag-chips" class="flex flex-wrap gap-2 px-1.5"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="flex items-center justify-between gap-3 mb-3 px-0.5">
|
|
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:${FILTER_TEXT_MUTED};">Czas przygotowania</p>
|
|
<span id="time-display-range" class="shrink-0 text-[11px] font-semibold tabular-nums text-right" style="color:${FILTER_TEXT_ACTIVE};">5 min - 120 min</span>
|
|
</div>
|
|
<div class="mx-1.5">
|
|
<div class="relative h-9 mx-2">
|
|
<div class="prep-time-range-track absolute inset-x-0 top-1/2 -translate-y-1/2" style="background:${FILTER_TRACK};" aria-hidden="true"></div>
|
|
<div id="prep-time-range-fill" class="prep-time-range-fill absolute top-1/2 -translate-y-1/2" style="background:${FILTER_TRACK_FILL}; left:0%; width:100%;" aria-hidden="true"></div>
|
|
<button
|
|
type="button"
|
|
id="prep-time-min-handle"
|
|
class="prep-time-range-handle absolute top-1/2 z-[2] -translate-x-1/2 -translate-y-1/2"
|
|
style="left:0%;"
|
|
data-time-handle="min"
|
|
role="slider"
|
|
aria-label="Minimalny czas przygotowania"
|
|
aria-valuemin="${PREP_TIME_MIN}"
|
|
aria-valuemax="${PREP_TIME_MAX}"
|
|
aria-valuenow="${PREP_TIME_MIN}"
|
|
aria-valuetext="${PREP_TIME_MIN} min"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
id="prep-time-max-handle"
|
|
class="prep-time-range-handle absolute top-1/2 z-[3] -translate-x-1/2 -translate-y-1/2"
|
|
style="left:100%;"
|
|
data-time-handle="max"
|
|
role="slider"
|
|
aria-label="Maksymalny czas przygotowania"
|
|
aria-valuemin="${PREP_TIME_MIN}"
|
|
aria-valuemax="${PREP_TIME_MAX}"
|
|
aria-valuenow="${PREP_TIME_MAX}"
|
|
aria-valuetext="120 min"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let localSlots = [];
|
|
let localTags = [];
|
|
let localMinMinutes = PREP_TIME_MIN;
|
|
let localMaxMinutes = PREP_TIME_MAX;
|
|
let closeTimer = null;
|
|
let activeFilterContext = 'recipes';
|
|
|
|
function getActiveFilterConfig() {
|
|
return FILTER_CONTEXTS[activeFilterContext] || FILTER_CONTEXTS.recipes;
|
|
}
|
|
|
|
function normalizeTimeRange(minMinutes, maxMinutes) {
|
|
let nextMin = snapTimeValue(minMinutes);
|
|
let nextMax = snapTimeValue(maxMinutes);
|
|
|
|
nextMin = Math.min(Math.max(nextMin, PREP_TIME_MIN), PREP_TIME_MAX - PREP_TIME_MIN_GAP);
|
|
nextMax = Math.max(Math.min(nextMax, PREP_TIME_MAX), PREP_TIME_MIN + PREP_TIME_MIN_GAP);
|
|
|
|
if (nextMax - nextMin < PREP_TIME_MIN_GAP) {
|
|
if (nextMin + PREP_TIME_MIN_GAP <= PREP_TIME_MAX) nextMax = nextMin + PREP_TIME_MIN_GAP;
|
|
else nextMin = nextMax - PREP_TIME_MIN_GAP;
|
|
}
|
|
|
|
return { minMinutes: nextMin, maxMinutes: nextMax };
|
|
}
|
|
|
|
function formatTimeValue(minutes) {
|
|
return `${minutes} min`;
|
|
}
|
|
|
|
function formatTimeRangeSummary(minMinutes, maxMinutes) {
|
|
return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
|
|
}
|
|
|
|
function getChipStyle(active) {
|
|
const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
|
|
const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
|
|
const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
|
|
const shadow = active
|
|
? 'box-shadow:0 1px 2px rgba(var(--overlay-rgb),0.08);'
|
|
: 'box-shadow:none;';
|
|
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
|
|
}
|
|
|
|
function clampTimeValue(value) {
|
|
return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
|
|
}
|
|
|
|
function snapTimeValue(value) {
|
|
const steps = Math.round((clampTimeValue(value) - PREP_TIME_MIN) / PREP_TIME_STEP);
|
|
return PREP_TIME_MIN + steps * PREP_TIME_STEP;
|
|
}
|
|
|
|
function getSliderPercent(value) {
|
|
return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100;
|
|
}
|
|
|
|
function getClosedPanelTransform(panel) {
|
|
return panel?.dataset.placement === 'below'
|
|
? 'translateY(-0.5rem) scale(0.98)'
|
|
: 'translateY(0.65rem) scale(0.98)';
|
|
}
|
|
|
|
function setActiveTimeHandle(activeHandle) {
|
|
const minHandle = document.getElementById('prep-time-min-handle');
|
|
const maxHandle = document.getElementById('prep-time-max-handle');
|
|
if (!minHandle || !maxHandle) return;
|
|
|
|
minHandle.style.zIndex = activeHandle === 'min' ? '4' : '2';
|
|
maxHandle.style.zIndex = activeHandle === 'max' ? '4' : '3';
|
|
}
|
|
|
|
function syncTimeRangeUI() {
|
|
const minHandle = document.getElementById('prep-time-min-handle');
|
|
const maxHandle = document.getElementById('prep-time-max-handle');
|
|
const rangeDisplay = document.getElementById('time-display-range');
|
|
const rangeFill = document.getElementById('prep-time-range-fill');
|
|
const start = getSliderPercent(localMinMinutes);
|
|
const end = getSliderPercent(localMaxMinutes);
|
|
|
|
if (minHandle) {
|
|
minHandle.style.left = `${start}%`;
|
|
minHandle.setAttribute('aria-valuenow', String(localMinMinutes));
|
|
minHandle.setAttribute('aria-valuetext', formatTimeValue(localMinMinutes));
|
|
}
|
|
|
|
if (maxHandle) {
|
|
maxHandle.style.left = `${end}%`;
|
|
maxHandle.setAttribute('aria-valuenow', String(localMaxMinutes));
|
|
maxHandle.setAttribute('aria-valuetext', formatTimeValue(localMaxMinutes));
|
|
}
|
|
|
|
if (rangeDisplay) rangeDisplay.textContent = formatTimeRangeSummary(localMinMinutes, localMaxMinutes);
|
|
if (rangeFill) {
|
|
rangeFill.style.left = `${start}%`;
|
|
rangeFill.style.width = `${Math.max(end - start, 0)}%`;
|
|
}
|
|
}
|
|
|
|
function positionFilterPanel() {
|
|
const view = document.getElementById('filter-view');
|
|
const panel = document.getElementById('filter-panel');
|
|
const body = document.getElementById('filter-panel-body');
|
|
const { anchorShellId, buttonId } = getActiveFilterConfig();
|
|
const searchShell = document.getElementById(anchorShellId);
|
|
const button = document.getElementById(buttonId);
|
|
if (!view || !panel || (!searchShell && !button)) return;
|
|
|
|
const viewRect = view.getBoundingClientRect();
|
|
const anchorRect = (searchShell || button).getBoundingClientRect();
|
|
const isRecipeContext = activeFilterContext === 'recipes';
|
|
const gap = isRecipeContext ? 12 : 8;
|
|
const margin = 12;
|
|
const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
|
|
const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
|
|
const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
|
|
const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
|
|
const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
|
|
const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
|
|
const maxHeight = opensUpward
|
|
? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
|
|
: Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
|
|
const leftBase = isRecipeContext
|
|
? (viewRect.width - width) / 2
|
|
: anchorRect.left - viewRect.left;
|
|
const left = Math.max(margin, Math.min(leftBase, viewRect.width - width - margin));
|
|
panel.style.width = `${width}px`;
|
|
panel.style.left = `${left}px`;
|
|
panel.style.transformOrigin = opensUpward ? 'bottom center' : 'top center';
|
|
panel.dataset.placement = opensUpward ? 'above' : 'below';
|
|
if (opensUpward) {
|
|
panel.style.top = 'auto';
|
|
panel.style.bottom = `${Math.max(margin, viewRect.bottom - anchorRect.top + gap)}px`;
|
|
} else {
|
|
panel.style.top = `${Math.max(margin, anchorRect.bottom - viewRect.top + gap)}px`;
|
|
panel.style.bottom = 'auto';
|
|
}
|
|
panel.style.maxHeight = `${maxHeight}px`;
|
|
if (body) body.style.maxHeight = `${maxHeight - 56}px`;
|
|
}
|
|
|
|
function setRecipeAreaBlur(visible) {
|
|
// Dark overlay on filter-view handles the dimming now
|
|
}
|
|
|
|
function showFilterPanel() {
|
|
const view = document.getElementById('filter-view');
|
|
const panel = document.getElementById('filter-panel');
|
|
if (!view || !panel) return;
|
|
|
|
clearTimeout(closeTimer);
|
|
view.classList.remove('hidden');
|
|
view.classList.add('filter-open');
|
|
view.style.pointerEvents = 'auto';
|
|
view.setAttribute('aria-hidden', 'false');
|
|
positionFilterPanel();
|
|
panel.style.transform = getClosedPanelTransform(panel);
|
|
setRecipeAreaBlur(true);
|
|
|
|
syncPanelCount();
|
|
|
|
requestAnimationFrame(() => {
|
|
view.classList.add('opacity-100');
|
|
panel.style.opacity = '1';
|
|
panel.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
}
|
|
|
|
function hideFilterPanel() {
|
|
const view = document.getElementById('filter-view');
|
|
const panel = document.getElementById('filter-panel');
|
|
if (!view || !panel) return;
|
|
|
|
view.classList.remove('opacity-100', 'filter-open');
|
|
view.style.pointerEvents = 'none';
|
|
view.setAttribute('aria-hidden', 'true');
|
|
panel.style.opacity = '0';
|
|
panel.style.transform = getClosedPanelTransform(panel);
|
|
setRecipeAreaBlur(false);
|
|
syncPanelCount();
|
|
|
|
closeTimer = setTimeout(() => {
|
|
view.classList.add('hidden');
|
|
}, 180);
|
|
}
|
|
|
|
function isFilterPanelOpen() {
|
|
return document.getElementById('filter-view')?.classList.contains('filter-open');
|
|
}
|
|
|
|
function renderSlotChips() {
|
|
const wrap = document.getElementById('filter-slot-chips');
|
|
if (!wrap) return;
|
|
|
|
wrap.innerHTML = MEAL_SLOTS.map((slot) => {
|
|
const active = localSlots.includes(slot.id);
|
|
return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
|
|
}).join('');
|
|
|
|
wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const id = btn.dataset.filterSlot;
|
|
const idx = localSlots.indexOf(id);
|
|
if (idx >= 0) localSlots.splice(idx, 1);
|
|
else localSlots.push(id);
|
|
renderSlotChips();
|
|
syncLiveFilters();
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderTagChips() {
|
|
const wrap = document.getElementById('filter-tag-chips');
|
|
if (!wrap) return;
|
|
|
|
const allTags = collectAllTags();
|
|
wrap.innerHTML = allTags.map((tag) => {
|
|
const active = localTags.includes(tag.toLowerCase());
|
|
return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`;
|
|
}).join('');
|
|
|
|
wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const tag = btn.dataset.filterTag.toLowerCase();
|
|
const idx = localTags.indexOf(tag);
|
|
if (idx >= 0) localTags.splice(idx, 1);
|
|
else localTags.push(tag);
|
|
renderTagChips();
|
|
syncLiveFilters();
|
|
});
|
|
});
|
|
}
|
|
|
|
function syncFilterSections() {
|
|
const slotSection = document.getElementById('filter-slot-section');
|
|
if (!slotSection) return;
|
|
slotSection.classList.toggle('hidden', !getActiveFilterConfig().showSlots);
|
|
}
|
|
|
|
function getActiveFilterCount() {
|
|
const config = getActiveFilterConfig();
|
|
let count = localTags.length;
|
|
if (config.showSlots) count += localSlots.length;
|
|
if (localMinMinutes > PREP_TIME_MIN || localMaxMinutes < PREP_TIME_MAX) count += 1;
|
|
return count;
|
|
}
|
|
|
|
function syncPanelCount() {
|
|
const count = getActiveFilterCount();
|
|
const { buttonId } = getActiveFilterConfig();
|
|
const button = buttonId ? document.getElementById(buttonId) : null;
|
|
|
|
if (button) {
|
|
const highlight = isFilterPanelOpen() || count > 0;
|
|
const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
|
|
if (isRecipeGlassButton) {
|
|
button.style.removeProperty('background');
|
|
button.style.removeProperty('border-color');
|
|
button.style.removeProperty('color');
|
|
} else {
|
|
button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
|
|
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
|
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
|
|
}
|
|
}
|
|
|
|
const badge = button?.querySelector('[id$="-filter-count"]');
|
|
if (!badge) return;
|
|
badge.textContent = String(count);
|
|
badge.classList.toggle('hidden', count === 0);
|
|
badge.classList.toggle('flex', count > 0);
|
|
}
|
|
|
|
function syncLiveFilters() {
|
|
const config = getActiveFilterConfig();
|
|
config.applyState?.({
|
|
slots: config.showSlots ? localSlots : [],
|
|
tags: localTags,
|
|
minMinutes: localMinMinutes,
|
|
maxMinutes: localMaxMinutes,
|
|
});
|
|
syncPanelCount();
|
|
}
|
|
|
|
export function setupFilter() {
|
|
const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
|
|
const minHandle = document.getElementById('prep-time-min-handle');
|
|
const maxHandle = document.getElementById('prep-time-max-handle');
|
|
const filterView = document.getElementById('filter-view');
|
|
let activeTimeHandle = null;
|
|
|
|
setRecipeAreaBlur(false);
|
|
|
|
function valueFromPointer(clientX) {
|
|
if (!rangeTrack) return PREP_TIME_MIN;
|
|
const rect = rangeTrack.getBoundingClientRect();
|
|
if (rect.width <= 0) return PREP_TIME_MIN;
|
|
const ratio = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
|
|
return snapTimeValue(PREP_TIME_MIN + ratio * (PREP_TIME_MAX - PREP_TIME_MIN));
|
|
}
|
|
|
|
function applyDraggedTimeValue(handleName, nextValue) {
|
|
const value = snapTimeValue(nextValue);
|
|
if (handleName === 'min') {
|
|
localMinMinutes = Math.min(value, localMaxMinutes - PREP_TIME_MIN_GAP);
|
|
localMinMinutes = Math.max(localMinMinutes, PREP_TIME_MIN);
|
|
} else {
|
|
localMaxMinutes = Math.max(value, localMinMinutes + PREP_TIME_MIN_GAP);
|
|
localMaxMinutes = Math.min(localMaxMinutes, PREP_TIME_MAX);
|
|
}
|
|
syncTimeRangeUI();
|
|
syncLiveFilters();
|
|
}
|
|
|
|
function stopTimeHandleDrag() {
|
|
activeTimeHandle = null;
|
|
window.removeEventListener('pointermove', onWindowPointerMove);
|
|
window.removeEventListener('pointerup', stopTimeHandleDrag);
|
|
window.removeEventListener('pointercancel', stopTimeHandleDrag);
|
|
}
|
|
|
|
function onWindowPointerMove(e) {
|
|
if (!activeTimeHandle) return;
|
|
e.preventDefault();
|
|
applyDraggedTimeValue(activeTimeHandle, valueFromPointer(e.clientX));
|
|
}
|
|
|
|
function startTimeHandleDrag(handleName, e) {
|
|
activeTimeHandle = handleName;
|
|
setActiveTimeHandle(handleName);
|
|
applyDraggedTimeValue(handleName, valueFromPointer(e.clientX));
|
|
window.addEventListener('pointermove', onWindowPointerMove);
|
|
window.addEventListener('pointerup', stopTimeHandleDrag);
|
|
window.addEventListener('pointercancel', stopTimeHandleDrag);
|
|
}
|
|
|
|
function handleTimeHandleKeydown(handleName, e) {
|
|
let nextValue = handleName === 'min' ? localMinMinutes : localMaxMinutes;
|
|
|
|
if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') nextValue -= PREP_TIME_STEP;
|
|
else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') nextValue += PREP_TIME_STEP;
|
|
else if (e.key === 'Home') nextValue = PREP_TIME_MIN;
|
|
else if (e.key === 'End') nextValue = PREP_TIME_MAX;
|
|
else return;
|
|
|
|
e.preventDefault();
|
|
setActiveTimeHandle(handleName);
|
|
applyDraggedTimeValue(handleName, nextValue);
|
|
}
|
|
|
|
syncTimeRangeUI();
|
|
setActiveTimeHandle('max');
|
|
|
|
if (minHandle) {
|
|
minHandle.addEventListener('pointerdown', (e) => {
|
|
e.preventDefault();
|
|
startTimeHandleDrag('min', e);
|
|
});
|
|
minHandle.addEventListener('focus', () => {
|
|
setActiveTimeHandle('min');
|
|
});
|
|
minHandle.addEventListener('keydown', (e) => {
|
|
handleTimeHandleKeydown('min', e);
|
|
});
|
|
}
|
|
|
|
if (maxHandle) {
|
|
maxHandle.addEventListener('pointerdown', (e) => {
|
|
e.preventDefault();
|
|
startTimeHandleDrag('max', e);
|
|
});
|
|
maxHandle.addEventListener('focus', () => {
|
|
setActiveTimeHandle('max');
|
|
});
|
|
maxHandle.addEventListener('keydown', (e) => {
|
|
handleTimeHandleKeydown('max', e);
|
|
});
|
|
}
|
|
|
|
rangeTrack?.addEventListener('pointerdown', (e) => {
|
|
if (e.target.closest('[data-time-handle]')) return;
|
|
const clickedValue = valueFromPointer(e.clientX);
|
|
const distToMin = Math.abs(clickedValue - localMinMinutes);
|
|
const distToMax = Math.abs(clickedValue - localMaxMinutes);
|
|
const handleName = distToMin <= distToMax ? 'min' : 'max';
|
|
e.preventDefault();
|
|
startTimeHandleDrag(handleName, e);
|
|
});
|
|
|
|
filterView?.addEventListener('click', (e) => {
|
|
if (e.composedPath().includes(document.getElementById('filter-panel'))) return;
|
|
window.closeFilters();
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (isFilterPanelOpen()) positionFilterPanel();
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && isFilterPanelOpen()) window.closeFilters();
|
|
});
|
|
|
|
document.getElementById('filter-clear-btn')?.addEventListener('click', () => {
|
|
localSlots = [];
|
|
localTags = [];
|
|
localMinMinutes = PREP_TIME_MIN;
|
|
localMaxMinutes = PREP_TIME_MAX;
|
|
syncTimeRangeUI();
|
|
renderSlotChips();
|
|
renderTagChips();
|
|
syncLiveFilters();
|
|
});
|
|
|
|
window.openFilters = (contextName = 'recipes') => {
|
|
if (isFilterPanelOpen() && activeFilterContext === contextName) {
|
|
window.closeFilters();
|
|
return;
|
|
}
|
|
|
|
activeFilterContext = FILTER_CONTEXTS[contextName] ? contextName : 'recipes';
|
|
const config = getActiveFilterConfig();
|
|
const state = config.getState?.() || {};
|
|
localSlots = [...(state.slots || [])];
|
|
localTags = [...(state.tags || [])];
|
|
const normalized = normalizeTimeRange(
|
|
Number.isFinite(state.minMinutes) ? state.minMinutes : PREP_TIME_MIN,
|
|
Number.isFinite(state.maxMinutes) ? state.maxMinutes : PREP_TIME_MAX,
|
|
);
|
|
localMinMinutes = normalized.minMinutes;
|
|
localMaxMinutes = normalized.maxMinutes;
|
|
|
|
syncTimeRangeUI();
|
|
|
|
renderSlotChips();
|
|
renderTagChips();
|
|
syncFilterSections();
|
|
syncPanelCount();
|
|
|
|
showFilterPanel();
|
|
};
|
|
|
|
window.closeFilters = () => {
|
|
stopTimeHandleDrag();
|
|
hideFilterPanel();
|
|
};
|
|
}
|