Initial commit

js/app.js

@@ -0,0 +1,45 @@
+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');
+};