Add an expandable metadata grid

assets/js/folder-metadata.js

@@ -1,69 +1,81 @@
 /**
  * Folder Metadata functionality for Gallery
  * 
- * Handles interactions with folder-level metadata display
+ * Handles folder metadata dropdown display and interaction
  */
 
-// Function to toggle expansion of long metadata text
-function toggleMetadataText(button) {
+// Define function immediately (not waiting for DOM)
+window.toggleFolderMetadata = function() {
+    console.log('toggleFolderMetadata called');
+    
+    const container = document.querySelector('.folder-metadata-container');
+    const content = document.getElementById('folderMetadataContent');
+    
+    if (!container) {
+        console.log('No metadata container found');
+        return;
+    }
+    
+    if (!content) {
+        console.log('No metadata content found');
+        return;
+    }
+    
+    const isExpanded = container.classList.contains('expanded');
+    console.log('Current state - expanded:', isExpanded);
+    
+    if (isExpanded) {
+        // Collapse
+        container.classList.remove('expanded');
+        content.style.display = 'none';
+        console.log('Collapsed dropdown');
+    } else {
+        // Expand
+        container.classList.add('expanded');
+        content.style.display = 'block';
+        console.log('Expanded dropdown');
+    }
+    
+    // Save state
+    localStorage.setItem('folderMetadataExpanded', (!isExpanded).toString());
+};
+
+// Also define as regular function for alternative access
+function toggleFolderMetadata() {
+    window.toggleFolderMetadata();
+}
+
+// Toggle long text display
+window.toggleMetadataText = function(button) {
     const longText = button.previousElementSibling;
     const fullText = button.nextElementSibling;
     
     if (fullText.style.display === 'none') {
-        // Show full text
         longText.style.display = 'none';
         fullText.style.display = 'inline';
-        fullText.classList.add('show');
         button.textContent = 'Show less';
     } else {
-        // Show truncated text
         longText.style.display = 'inline';
         fullText.style.display = 'none';
-        fullText.classList.remove('show');
         button.textContent = 'Show more';
     }
-}
+};
 
-// Function to handle folder metadata editing (placeholder for future implementation)
-function editFolderMetadata() {
-    // For now, just show an alert that this feature is coming soon
-    alert('Folder metadata editing functionality is coming soon!');
-    
-    // Future implementation will:
-    // 1. Open an edit modal with form fields for each metadata key
-    // 2. Allow adding/removing metadata fields
-    // 3. Validate the input
-    // 4. Send updates to the server
-    // 5. Refresh the page or update the display dynamically
-}
-
-// Initialize folder metadata functionality when DOM is loaded
+// Initialize folder metadata on page load
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('Folder metadata functionality initialized');
+    console.log('Folder metadata script loaded');
     
-    // Add keyboard shortcuts for metadata editing (future feature)
-    document.addEventListener('keydown', function(e) {
-        // Ctrl+M for metadata editing
-        if (e.ctrlKey && e.key === 'm') {
-            e.preventDefault();
-            const editBtn = document.querySelector('.folder-metadata-edit-btn');
-            if (editBtn) {
-                editFolderMetadata();
-            }
+    // Make sure all containers start collapsed
+    const containers = document.querySelectorAll('.folder-metadata-container');
+    console.log('Found', containers.length, 'metadata containers');
+    
+    containers.forEach(container => {
+        const content = container.querySelector('.folder-metadata-content');
+        if (content) {
+            // Force initial hidden state
+            container.classList.remove('expanded');
+            content.style.display = 'none';
+            console.log('Initialized container as collapsed');
         }
     });
-    
-    // Add accessibility improvements
-    const metadataItems = document.querySelectorAll('.folder-metadata-item');
-    metadataItems.forEach(item => {
-        item.setAttribute('tabindex', '0');
-        item.setAttribute('role', 'listitem');
-    });
-    
-    // Add ARIA labels for better accessibility
-    const metadataContainer = document.querySelector('.folder-metadata-container');
-    if (metadataContainer) {
-        metadataContainer.setAttribute('role', 'region');
-        metadataContainer.setAttribute('aria-label', 'Folder metadata information');
-    }
 });

assets/js/metadata-section.js

@@ -0,0 +1,74 @@
+/**
+ * Simple Metadata Section Toggle
+ * 
+ * Handles showing/hiding the metadata grid with a simple button
+ */
+
+// Global function to toggle metadata section visibility
+function toggleMetadataSection() {
+    console.log('toggleMetadataSection called');
+    
+    const content = document.getElementById('metadataContent');
+    const arrow = document.getElementById('metadataArrow');
+    
+    if (!content) {
+        console.log('No metadata content found');
+        return;
+    }
+    
+    const isVisible = content.style.display !== 'none';
+    
+    if (isVisible) {
+        // Hide the content
+        content.style.display = 'none';
+        if (arrow) arrow.textContent = '▼';
+        console.log('Metadata hidden');
+    } else {
+        // Show the content
+        content.style.display = 'block';
+        if (arrow) arrow.textContent = '▲';
+        console.log('Metadata shown');
+    }
+    
+    // Save state to localStorage
+    localStorage.setItem('metadataVisible', (!isVisible).toString());
+}
+
+// Function to expand long text
+function expandText(button) {
+    const longText = button.previousElementSibling;
+    const fullText = button.nextElementSibling;
+    
+    if (fullText.style.display === 'none') {
+        longText.style.display = 'none';
+        fullText.style.display = 'inline';
+        button.textContent = 'Show less';
+    } else {
+        longText.style.display = 'inline';
+        fullText.style.display = 'none';
+        button.textContent = 'Show more';
+    }
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Metadata section script loaded');
+    
+    const content = document.getElementById('metadataContent');
+    if (content) {
+        // Check if user previously had it expanded
+        const wasVisible = localStorage.getItem('metadataVisible') === 'true';
+        
+        if (wasVisible) {
+            content.style.display = 'block';
+            const arrow = document.getElementById('metadataArrow');
+            if (arrow) arrow.textContent = '▲';
+        } else {
+            content.style.display = 'none';
+            const arrow = document.getElementById('metadataArrow');
+            if (arrow) arrow.textContent = '▼';
+        }
+        
+        console.log('Metadata section initialized, visible:', wasVisible);
+    }
+});