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

Adjust tabbar

Browse Source
This commit is contained in:
Rafał
2026-05-07 18:42:54 +02:00
parent 544df5175d
commit 68e5227db1
4 changed files with 111 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/ui/bottomNav.js
View File

@@ -3,7 +3,7 @@ export function getBottomNavHTML() {
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div id="app-bottom-nav-dock" class="bottom-dock">
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
<i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
<i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" aria-hidden="true"></i>
</button>
<div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
@@ -44,10 +44,15 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
const COLLAPSED_TABS = new Set();
const EXTRA_CONTROL_SLOTS = { recipes: 2, pantry: 2, shopping: 1 };
const DOUBLE_COMPACT_TABS = new Set(['recipes', 'pantry']);
const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
const DOUBLE_COMPACT_TABS = new Set();
const COLLAPSED_TAB_ICON = {
recipes: 'fas fa-book-open',
planner: 'far fa-calendar-alt',
pantry: 'fas fa-warehouse',
shopping: 'fas fa-cart-shopping',
};
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu', planner: 'Otwórz menu', pantry: 'Otwórz menu', shopping: 'Otwórz menu' };
let isRecipeMenuOpen = false;
let activeTab = 'planner';
let previousTab = 'planner';
@@ -72,37 +77,47 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const bottomControlSize = controlSize * 1.28;
const controlGap = 0.5 * rootFontSize;
const inlineSearchControlSize = bottomControlSize * 0.8;
const controlsLift = 0;
const collapsedDockWidth = bottomControlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
const controlCluster = bottomControlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const filterLeft = dockLeft + dockWidth - bottomControlSize;
const searchButtonLeft = filterLeft - controlGap - bottomControlSize;
const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
const inlineSearchCloseLeft = dockLeft + dockWidth - inlineSearchControlSize;
const inlineSearchFieldLeft = dockLeft + inlineSearchControlSize + controlGap;
const inlineSearchFieldRight = Math.max(16, nav.clientWidth - inlineSearchCloseLeft + controlGap);
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
nav.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
nav.style.setProperty('--recipe-inline-toggle-size', `${inlineCollapsedSlotWidth}px`);
nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
document.documentElement.style.setProperty('--catalog-filter-left', `${filterLeft}px`);
document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-filter-left', `${toolbarButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-btn-left', `${toolbarButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
document.documentElement.style.setProperty('--catalog-inline-search-close-left', `${inlineSearchCloseLeft}px`);
document.documentElement.style.setProperty('--catalog-inline-search-field-left', `${inlineSearchFieldLeft}px`);
document.documentElement.style.setProperty('--catalog-inline-search-field-right', `${inlineSearchFieldRight}px`);
document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
document.documentElement.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
};
const updateToggleForTab = (tab) => {
const icon = document.getElementById('recipe-nav-toggle-icon');
const button = document.getElementById('recipe-nav-toggle');
const nextIcon = COLLAPSED_TAB_ICON[tab];
if (icon && nextIcon) {
icon.className = `fas ${nextIcon}`;
const nextIconClass = COLLAPSED_TAB_ICON[tab];
if (icon && nextIconClass) {
icon.className = nextIconClass;
}
if (button && COLLAPSED_TAB_LABEL[tab]) {
button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
@@ -175,6 +190,17 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const toggle = e.target.closest('#recipe-nav-toggle');
if (toggle) {
e.stopPropagation();
const wasInlineSearchOpen = document.documentElement.classList.contains('is-inline-search-open');
if (wasInlineSearchOpen) {
setRecipeMenuOpen(false);
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeShoppingCalendar?.();
window.closeShoppingBoughtPopup?.();
window.closeFilters?.();
return;
}
setRecipeMenuOpen(!isRecipeMenuOpen);
window.closeRecipeSearch?.();
window.closePantrySearch?.();