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

Adjust filter button
All checks were successful
Build and Deploy / build-and-push (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Rafał
2026-05-07 19:36:30 +02:00
parent 6d6194df37
commit 6f902098a8
4 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
js/views/RecipeList.js
View File

@@ -43,6 +43,12 @@ function getFilteredRecipes() {
return Object.values(RECIPES).filter(matchesFilters);
}
function getActiveRecipeFilterCount() {
let count = filterState.slots.length + filterState.tags.length;
if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
return count;
}
function syncRecipeScrollShadow() {
syncRecipeTopbarUI();
}
@@ -54,6 +60,7 @@ function syncRecipeTopbarUI() {
const rightBtn = document.getElementById('recipe-filter-btn');
const rightIcon = document.getElementById('recipe-right-btn-icon');
const filterCount = document.getElementById('recipe-filter-count');
const floatingFilterCount = document.getElementById('recipe-filter-float-count');
const dot = document.getElementById('recipe-search-active-dot');
const isOpen = recipeSearchOpen;
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
@@ -76,6 +83,12 @@ function syncRecipeTopbarUI() {
filterCount.classList.toggle('hidden', !showCount);
filterCount.classList.toggle('flex', showCount);
}
if (floatingFilterCount) {
const activeCount = getActiveRecipeFilterCount();
floatingFilterCount.textContent = String(activeCount);
floatingFilterCount.classList.toggle('hidden', activeCount === 0);
floatingFilterCount.classList.toggle('flex', activeCount > 0);
}
if (dot) {
const hasQuery = Boolean(filterState.query);
dot.classList.toggle('hidden', !hasQuery);
@@ -85,6 +98,7 @@ function syncRecipeTopbarUI() {
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(filterState.query);
recipeSearchOpen = open;
if (open) window.closeFilters?.();
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
if (clearQuery) {
filterState.query = '';
@@ -153,6 +167,14 @@ export function getRecipeListHTML() {
</button>
</div>
</div>
<div id="recipe-filter-float-controls" class="pointer-events-none absolute inset-x-0 z-[33] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-filter-float-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
<button type="button" id="recipe-filter-float-btn" class="recipe-glass-btn w-full h-full rounded-full 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>
<span id="recipe-filter-float-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>
`;
}
@@ -196,6 +218,11 @@ export function setupRecipeList() {
setSearchOpen(false, { clearQuery: true });
}
});
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
if (recipeSearchOpen) return;
window.openFilters?.('recipes');
});
document.getElementById('recipe-grid')?.addEventListener('click', (e) => {
const card = e.target.closest('.recipe-browser-card');