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

Extract menu to a separate component

Browse Source
This commit is contained in:
Rafał
2026-04-06 18:41:23 +02:00
parent 3258965bcc
commit 3c271e1632
3 changed files with 103 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
js/app.js
View File

@@ -15,6 +15,8 @@ let refreshPantry;
let setupPantry;
let getMealPlanEditorHTML;
let setupMealPlanEditor;
let getBottomNavHTML;
let setupBottomNav;
const moduleLoadPromise = Promise.all([
import(`./views/RecipeList.js?v=${APP_ASSET_VERSION}`),
@@ -23,6 +25,7 @@ const moduleLoadPromise = Promise.all([
import(`./views/MealPlanner.js?v=${APP_ASSET_VERSION}`),
import(`./views/Pantry.js?v=${APP_ASSET_VERSION}`),
import(`./ui/mealPlanEditor.js?v=${APP_ASSET_VERSION}`),
import(`./ui/bottomNav.js?v=${APP_ASSET_VERSION}`),
]).then(([
recipeListModule,
filterModule,
@@ -30,6 +33,7 @@ const moduleLoadPromise = Promise.all([
mealPlannerModule,
pantryModule,
mealPlanEditorModule,
bottomNavModule,
]) => {
({ getRecipeListHTML, setupRecipeList } = recipeListModule);
({ getFilterHTML, setupFilter } = filterModule);
@@ -37,6 +41,7 @@ const moduleLoadPromise = Promise.all([
({ getMealPlannerHTML, setupMealPlanner } = mealPlannerModule);
({ getPantryHTML, refreshPantry, setupPantry } = pantryModule);
({ getMealPlanEditorHTML, setupMealPlanEditor } = mealPlanEditorModule);
({ getBottomNavHTML, setupBottomNav } = bottomNavModule);
});
function getAppToastHTML() {
@@ -47,100 +52,6 @@ function getAppToastHTML() {
`;
}
function getBottomNavHTML() {
const isDark = document.documentElement.classList.contains('dark');
return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div class="bottom-dock">
<div class="nav-slot">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
<i class="fas fa-book" aria-hidden="true"></i>
</button>
</div>
<div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
<i class="far fa-calendar-alt" aria-hidden="true"></i>
</button>
</div>
<div class="nav-slot">
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
<i class="fas fa-warehouse" aria-hidden="true"></i>
</button>
</div>
<div class="nav-slot">
<button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
</button>
</div>
</div>
</nav>
`;
}
function syncThemeToggleButton(btn, isDark) {
if (!btn) return;
const icon = btn.querySelector('i');
if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
}
function setupThemeToggle() {
const btn = document.getElementById('nav-theme-toggle');
if (!btn) return;
btn.addEventListener('click', () => {
const html = document.documentElement;
const isDark = html.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
syncThemeToggleButton(btn, isDark);
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
});
}
function setupTabs() {
const main = document.getElementById('main-view');
const planner = document.getElementById('planner-view');
const pantry = document.getElementById('pantry-view');
const nav = document.getElementById('app-bottom-nav');
if (!main || !planner || !pantry || !nav) return;
const apply = (tab) => {
main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner');
pantry.classList.toggle('hidden', tab !== 'pantry');
if (tab === 'pantry') refreshPantry();
nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
const id = btn.getAttribute('data-tab');
if (btn.hasAttribute('disabled')) return;
if (id === 'recipes' || id === 'planner' || id === 'pantry') {
const isActive = id === tab;
btn.classList.toggle('is-active', isActive);
if (isActive) btn.setAttribute('aria-current', 'page');
else btn.removeAttribute('aria-current');
}
});
};
nav.addEventListener('click', (e) => {
const btn = e.target.closest('.nav-tab[data-tab]');
if (!btn || btn.hasAttribute('disabled')) return;
const tab = btn.getAttribute('data-tab');
if (tab === 'recipes' || tab === 'planner' || tab === 'pantry') apply(tab);
});
apply('recipes');
window.refreshStockViews = () => {
refreshPantry();
};
}
let initAppPromise = null;
function renderAppBootError(message) {
@@ -178,8 +89,7 @@ async function initApp() {
${getAppToastHTML()}
`;
setupTabs();
setupThemeToggle();
setupBottomNav({ refreshPantry });
setupRecipeList();
setupMealPlanner();
setupPantry();