Enhance LoRA and Recipe templates by adding request context to template rendering. Update JavaScript to initialize search managers with context-specific options and improve header navigation with dynamic search placeholders. Refactor header component for better context awareness in search functionality.

2026-03-24 22:52:12 -03:00 · 2025-03-17 10:11:50 +08:00
parent b0a8b0cc6f
commit 1034282161
8 changed files with 631 additions and 37 deletions
--- a/static/js/managers/SearchManager.js
+++ b/static/js/managers/SearchManager.js
@@ -0,0 +1,154 @@
+/**
+ * SearchManager - Handles search functionality across different pages
+ * Each page can extend or customize this base functionality
+ */
+export class SearchManager {
+    constructor(options = {}) {
+      this.options = {
+        searchDelay: 300,
+        minSearchLength: 2,
+        ...options
+      };
+      
+      this.searchInput = document.getElementById('searchInput');
+      this.searchOptionsToggle = document.getElementById('searchOptionsToggle');
+      this.searchOptionsPanel = document.getElementById('searchOptionsPanel');
+      this.closeSearchOptions = document.getElementById('closeSearchOptions');
+      this.searchOptionTags = document.querySelectorAll('.search-option-tag');
+      this.recursiveSearchToggle = document.getElementById('recursiveSearchToggle');
+      
+      this.searchTimeout = null;
+      this.currentPage = document.body.dataset.page || 'loras';
+      
+      this.initEventListeners();
+      this.loadSearchPreferences();
+    }
+    
+    initEventListeners() {
+      // Search input event
+      if (this.searchInput) {
+        this.searchInput.addEventListener('input', () => {
+          clearTimeout(this.searchTimeout);
+          this.searchTimeout = setTimeout(() => this.performSearch(), this.options.searchDelay);
+        });
+        
+        // Clear search with Escape key
+        this.searchInput.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            this.searchInput.value = '';
+            this.performSearch();
+          }
+        });
+      }
+      
+      // Search options toggle
+      if (this.searchOptionsToggle) {
+        this.searchOptionsToggle.addEventListener('click', () => {
+          this.searchOptionsPanel.classList.toggle('hidden');
+        });
+      }
+      
+      // Close search options
+      if (this.closeSearchOptions) {
+        this.closeSearchOptions.addEventListener('click', () => {
+          this.searchOptionsPanel.classList.add('hidden');
+        });
+      }
+      
+      // Search option tags
+      if (this.searchOptionTags) {
+        this.searchOptionTags.forEach(tag => {
+          tag.addEventListener('click', () => {
+            tag.classList.toggle('active');
+            this.saveSearchPreferences();
+            this.performSearch();
+          });
+        });
+      }
+      
+      // Recursive search toggle
+      if (this.recursiveSearchToggle) {
+        this.recursiveSearchToggle.addEventListener('change', () => {
+          this.saveSearchPreferences();
+          this.performSearch();
+        });
+      }
+    }
+    
+    loadSearchPreferences() {
+      try {
+        const preferences = JSON.parse(localStorage.getItem(`${this.currentPage}_search_prefs`)) || {};
+        
+        // Apply search options
+        if (preferences.options) {
+          this.searchOptionTags.forEach(tag => {
+            const option = tag.dataset.option;
+            if (preferences.options[option] !== undefined) {
+              tag.classList.toggle('active', preferences.options[option]);
+            }
+          });
+        }
+        
+        // Apply recursive search
+        if (this.recursiveSearchToggle && preferences.recursive !== undefined) {
+          this.recursiveSearchToggle.checked = preferences.recursive;
+        }
+      } catch (error) {
+        console.error('Error loading search preferences:', error);
+      }
+    }
+    
+    saveSearchPreferences() {
+      try {
+        const options = {};
+        this.searchOptionTags.forEach(tag => {
+          options[tag.dataset.option] = tag.classList.contains('active');
+        });
+        
+        const preferences = {
+          options,
+          recursive: this.recursiveSearchToggle ? this.recursiveSearchToggle.checked : false
+        };
+        
+        localStorage.setItem(`${this.currentPage}_search_prefs`, JSON.stringify(preferences));
+      } catch (error) {
+        console.error('Error saving search preferences:', error);
+      }
+    }
+    
+    getActiveSearchOptions() {
+      const options = [];
+      this.searchOptionTags.forEach(tag => {
+        if (tag.classList.contains('active')) {
+          options.push(tag.dataset.option);
+        }
+      });
+      return options;
+    }
+    
+    performSearch() {
+      const query = this.searchInput.value.trim();
+      const options = this.getActiveSearchOptions();
+      const recursive = this.recursiveSearchToggle ? this.recursiveSearchToggle.checked : false;
+      
+      // This is a base implementation - each page should override this method
+      console.log('Performing search:', {
+        query,
+        options,
+        recursive,
+        page: this.currentPage
+      });
+      
+      // Dispatch a custom event that page-specific code can listen for
+      const searchEvent = new CustomEvent('app:search', {
+        detail: {
+          query,
+          options,
+          recursive,
+          page: this.currentPage
+        }
+      });
+      
+      document.dispatchEvent(searchEvent);
+    }
+  }