diff --git a/public/app.js b/public/app.js index 398a7a2..3e13c2b 100644 --- a/public/app.js +++ b/public/app.js @@ -13,11 +13,14 @@ const searchToggle = document.getElementById('searchToggle'); const searchWrapper = document.getElementById('searchWrapper'); const addLinkToggle = document.getElementById('addLinkToggle'); const addLinkWrapper = document.getElementById('addLinkWrapper'); +const layoutToggle = document.getElementById('layoutToggle'); +const layoutDropdown = document.getElementById('layoutDropdown'); // State let allLinks = []; let searchTimeout = null; let showArchived = false; +let currentLayout = 'masonry'; // Default layout // Initialize app document.addEventListener('DOMContentLoaded', () => { @@ -26,6 +29,8 @@ document.addEventListener('DOMContentLoaded', () => { setupScrollToTop(); setupMobileSearch(); setupMobileAddLink(); + setupLayoutToggle(); + applyLayout(currentLayout); }); // Event listeners @@ -109,6 +114,48 @@ function setupMobileAddLink() { }); } +// Setup layout toggle +function setupLayoutToggle() { + if (!layoutToggle || !layoutDropdown) return; + + // Toggle dropdown on button click + layoutToggle.addEventListener('click', (e) => { + e.stopPropagation(); + layoutDropdown.classList.toggle('show'); + layoutToggle.classList.toggle('active'); + }); + + // Close dropdown when clicking outside + document.addEventListener('click', (e) => { + if (!layoutToggle.contains(e.target) && !layoutDropdown.contains(e.target)) { + layoutDropdown.classList.remove('show'); + layoutToggle.classList.remove('active'); + } + }); + + // Handle layout option clicks + layoutDropdown.querySelectorAll('.layout-option').forEach(option => { + option.addEventListener('click', () => { + const layout = option.dataset.layout; + applyLayout(layout); + layoutDropdown.classList.remove('show'); + layoutToggle.classList.remove('active'); + }); + }); +} + +// Apply layout +function applyLayout(layout) { + currentLayout = layout; + linksContainer.className = 'links-container'; + linksContainer.classList.add(`layout-${layout}`); + + // Update active state in dropdown + layoutDropdown.querySelectorAll('.layout-option').forEach(option => { + option.classList.toggle('active', option.dataset.layout === layout); + }); +} + // Setup scroll to top button function setupScrollToTop() { // Show/hide button based on scroll position @@ -267,6 +314,7 @@ function displayLinks(links) { } linksContainer.innerHTML = links.map(link => createLinkCard(link)).join(''); + applyLayout(currentLayout); // Add delete event listeners document.querySelectorAll('.delete-btn').forEach(btn => { @@ -301,7 +349,9 @@ function createLinkCard(link) { return `
- ${imageHtml} + + ${imageHtml} +

${escapeHtml(link.title)}

diff --git a/public/index.html b/public/index.html index b69e5c2..f30d0b0 100644 --- a/public/index.html +++ b/public/index.html @@ -29,6 +29,36 @@ +
+ +
+ + + +
+