45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import { getRecipeListHTML } from './views/RecipeList.js';
|
|
import { getFilterHTML, setupFilter } from './views/Filter.js';
|
|
import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetail.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const appContainer = document.getElementById('app-container');
|
|
|
|
// Inject all views into the main container
|
|
appContainer.innerHTML = `
|
|
${getRecipeListHTML()}
|
|
${getRecipeDetailHTML()}
|
|
${getFilterHTML()}
|
|
`;
|
|
|
|
// Initialize logic for the injected views
|
|
setupFilter();
|
|
setupRecipeDetail();
|
|
});
|
|
|
|
// --- GLOBAL NAVIGATION METHODS ---
|
|
window.openRecipeDetail = () => {
|
|
const view = document.getElementById('recipe-detail-view');
|
|
// Swap Tailwind classes to slide IN
|
|
view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
|
|
view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
|
};
|
|
|
|
window.closeRecipeDetail = () => {
|
|
const view = document.getElementById('recipe-detail-view');
|
|
// Swap Tailwind classes to slide OUT
|
|
view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
|
view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
|
|
};
|
|
|
|
window.openFilters = () => {
|
|
const fv = document.getElementById('filter-view');
|
|
fv.classList.remove('hidden');
|
|
fv.classList.add('flex');
|
|
};
|
|
|
|
window.closeFilters = () => {
|
|
const fv = document.getElementById('filter-view');
|
|
fv.classList.add('hidden');
|
|
fv.classList.remove('flex');
|
|
}; |