alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-23 22:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor panel position management and enhance recipe card handling

Browse Source 
- Removed redundant updatePanelPositions calls from various components and centralized the logic in the uiHelpers.js for better maintainability.
- Introduced appendRecipeCards function in RecipeManager to streamline the addition of recipe cards from search results.
- Cleaned up unused code related to search input handling and recipe loading, improving overall code clarity and performance.
- Updated HeaderManager and SearchManager to utilize the new updatePanelPositions function, ensuring consistent panel positioning across the application.
This commit is contained in:
Will Miao
2025-03-20 09:54:13 +08:00
parent caf5b1528c
commit a88b0239eb
9 changed files with 56 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/js/managers/SearchManager.js
View File

@@ -1,3 +1,4 @@
import { updatePanelPositions } from "../utils/uiHelpers.js";
/**
* SearchManager - Handles search functionality across different pages
* Each page can extend or customize this base functionality
@@ -27,11 +28,10 @@ export class SearchManager {
this.initEventListeners();
this.loadSearchPreferences();
// Initialize panel positions
this.updatePanelPositions();
updatePanelPositions();
// Add resize listener
window.addEventListener('resize', this.updatePanelPositions.bind(this));
window.addEventListener('resize', updatePanelPositions);
}
initEventListeners() {
@@ -161,7 +161,7 @@ export class SearchManager {
const isHidden = this.searchOptionsPanel.classList.contains('hidden');
if (isHidden) {
// Update position before showing
this.updatePanelPositions();
updatePanelPositions();
this.searchOptionsPanel.classList.remove('hidden');
this.searchOptionsToggle.classList.add('active');
@@ -267,56 +267,6 @@ export class SearchManager {
return options;
}
updatePanelPositions() {
const searchOptionsPanel = document.getElementById('searchOptionsPanel');
const filterPanel = document.getElementById('filterPanel');
if (!searchOptionsPanel && !filterPanel) return;
// Get the header element
const header = document.querySelector('.app-header');
if (!header) return;
// Calculate the position based on the bottom of the header
const headerRect = header.getBoundingClientRect();
const topPosition = headerRect.bottom + 5; // Add 5px padding
// Set the positions
if (searchOptionsPanel) {
searchOptionsPanel.style.top = `${topPosition}px`;
// Make sure the panel is visible when positioned
if (!searchOptionsPanel.classList.contains('hidden') &&
window.getComputedStyle(searchOptionsPanel).display === 'none') {
searchOptionsPanel.style.display = 'block';
}
}
if (filterPanel) {
filterPanel.style.top = `${topPosition}px`;
}
// Adjust panel horizontal position based on the search container
const searchContainer = document.querySelector('.header-search');
if (searchContainer) {
const searchRect = searchContainer.getBoundingClientRect();
// Position the search options panel aligned with the search container
if (searchOptionsPanel) {
searchOptionsPanel.style.right = `${window.innerWidth - searchRect.right}px`;
}
// Position the filter panel aligned with the filter button
if (filterPanel) {
const filterButton = document.getElementById('filterButton');
if (filterButton) {
const filterRect = filterButton.getBoundingClientRect();
filterPanel.style.right = `${window.innerWidth - filterRect.right}px`;
}
}
}
}
performSearch() {
const query = this.searchInput.value.trim();
const options = this.getActiveSearchOptions();