Initial commit

fusion_website_theme/static/src/js/header.js

@@ -0,0 +1,73 @@
+/**
+ * Fusion Website Theme - Header Interactions
+ * Expandable search bar - expands right from search button
+ */
+
+(function() {
+    'use strict';
+    
+    function initExpandableSearch() {
+        var searchTrigger = document.querySelector('.search-trigger');
+        var searchExpanded = document.querySelector('.search-expanded');
+        var searchClose = document.querySelector('.search-close');
+        var searchInput = document.querySelector('.search-expanded input');
+        
+        if (!searchTrigger || !searchExpanded) {
+            return;
+        }
+        
+        // Open search
+        searchTrigger.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            document.body.classList.add('search-open');
+            searchExpanded.classList.add('active');
+            
+            // Focus the input after animation
+            setTimeout(function() {
+                if (searchInput) searchInput.focus();
+            }, 250);
+        });
+        
+        // Close search on X button
+        if (searchClose) {
+            searchClose.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                closeSearch();
+            });
+        }
+        
+        // Close on Escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && document.body.classList.contains('search-open')) {
+                closeSearch();
+            }
+        });
+        
+        // Close when clicking outside
+        document.addEventListener('click', function(e) {
+            if (document.body.classList.contains('search-open')) {
+                if (!searchExpanded.contains(e.target) && !searchTrigger.contains(e.target)) {
+                    closeSearch();
+                }
+            }
+        });
+        
+        function closeSearch() {
+            document.body.classList.remove('search-open');
+            searchExpanded.classList.remove('active');
+            if (searchInput) searchInput.value = '';
+        }
+    }
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initExpandableSearch);
+    } else {
+        initExpandableSearch();
+    }
+    
+    // Also try after a small delay in case elements are loaded dynamically
+    setTimeout(initExpandableSearch, 500);
+})();