ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign menu
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 22:53:24 +02:00
parent ded24b53b4
commit 53a7212dfe
5 changed files with 271 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
js/views/Pantry.js
View File

@@ -97,6 +97,8 @@ let isFilterOpen = false;
let calendarMonthAnchor = startOfMonth(horizonEndDate);
let pantryGlobalListenersBound = false;
let pantryCalendar = null;
let pantrySearchQuery = '';
let pantrySearchOpen = false;
let pantryFilters = {
categories: [],
sections: [],
@@ -206,7 +208,7 @@ export function getPantryHTML() {
</div>
<!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem);">
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
<div id="pantry-board"></div>
</div>
@@ -221,19 +223,22 @@ export function getPantryHTML() {
<div id="pantry-filter-panel-body" class="space-y-4"></div>
</div>
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
<i class="fas fa-search" aria-hidden="true"></i>
<span id="pantry-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="pantry-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="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
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;">
<button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>
<div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
<button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
<i id="pantry-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
<span id="pantry-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>
@@ -250,6 +255,11 @@ function syncHorizonUI() {
const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover');
const filterCount = document.getElementById('pantry-filter-count');
const searchWrap = document.getElementById('pantry-search-wrap');
const searchShell = document.getElementById('pantry-search-shell');
const rightBtn = document.getElementById('pantry-filter-bottom-btn');
const rightIcon = document.getElementById('pantry-right-btn-icon');
const searchDot = document.getElementById('pantry-search-active-dot');
const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact');
const chevron = document.getElementById('pantry-horizon-chevron');
@@ -277,9 +287,18 @@ function syncHorizonUI() {
}
if (filterCount) {
filterCount.textContent = String(activeFilterCount);
filterCount.classList.toggle('hidden', activeFilterCount === 0);
filterCount.classList.toggle('flex', activeFilterCount > 0);
filterCount.classList.toggle('hidden', pantrySearchOpen || activeFilterCount === 0);
filterCount.classList.toggle('flex', !pantrySearchOpen && activeFilterCount > 0);
}
if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
if (searchShell) {
searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
}
if (rightIcon) rightIcon.className = `fas ${pantrySearchOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
if (rightBtn) rightBtn.setAttribute('aria-label', pantrySearchOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
renderCalendarPopover();
renderFilterPopover();
@@ -370,15 +389,32 @@ function renderFilterPopover() {
}
function clearSearchInput() {
const input = document.getElementById('pantry-search-input');
const hadQuery = Boolean(input?.value);
if (input) {
input.value = '';
input.blur();
}
const hadQuery = Boolean(pantrySearchQuery);
pantrySearchQuery = '';
if (hadQuery) renderBoard();
}
function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(pantrySearchQuery);
pantrySearchOpen = open;
document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
if (clearQuery) pantrySearchQuery = '';
const input = document.getElementById('pantry-search-input');
if (input) {
if (open) {
input.value = pantrySearchQuery;
if (focusInput) {
input.focus();
input.setSelectionRange(input.value.length, input.value.length);
}
} else {
input.blur();
}
}
syncHorizonUI();
if (clearQuery && hadQuery) renderBoard();
}
function closeCalendar() {
if (!isCalendarOpen) return;
isCalendarOpen = false;
@@ -405,9 +441,9 @@ function closeFilter() {
}
function toggleFilterPanel() {
if (pantrySearchOpen) return;
isCalendarOpen = false;
isFilterOpen = !isFilterOpen;
document.getElementById('pantry-search-input')?.blur();
syncHorizonUI();
}
@@ -571,7 +607,7 @@ function renderBoard() {
const root = document.getElementById('pantry-board');
if (!root) return;
const q = document.getElementById('pantry-search-input')?.value || '';
const q = pantrySearchQuery;
const hasFilters = hasActivePantryFilters();
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
@@ -661,15 +697,25 @@ export function setupPantry() {
renderBoard();
// Search
document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
setPantrySearchOpen(true, { focusInput: true });
});
document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
pantrySearchQuery = event.target.value.trim();
renderBoard();
});
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (event.target.value) clearSearchInput();
else event.target.blur();
event.stopPropagation();
setPantrySearchOpen(false, { clearQuery: true });
});
document.getElementById('pantry-search-close')?.addEventListener('click', () => clearSearchInput());
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
return;
}
toggleFilterPanel();
});
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
@@ -729,15 +775,20 @@ export function setupPantry() {
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
return;
}
if (pantrySearchQuery) clearSearchInput();
if (isFilterOpen) closeFilter();
});
window.addEventListener('app-tab-change', () => {
document.getElementById('pantry-search-input')?.blur();
if (pantrySearchOpen) setPantrySearchOpen(false);
closeFilter();
closeCalendar();
});
window.closePantrySearch = () => {
document.getElementById('pantry-search-input')?.blur();
if (pantrySearchOpen) setPantrySearchOpen(false);
};
window.closePantryFilter = () => {
closeFilter();