Add an expandable metadata grid

2025-07-29 10:31:35 +02:00
parent f3adbe49fa
commit bcb083bbb9
10 changed files with 430 additions and 269 deletions
@@ -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);
+    }
+});