Files
ComfyUI-Lora-Manager/static/js/utils/modalUtils.js
Will Miao 4e552dcf3e feat: Add drag-and-drop support with visual feedback for sidebar nodes
This commit implements drag-and-drop functionality for sidebar nodes,
adding visual feedback via highlight styling when dragging over
valid drop targets. The CSS introduces new classes to style
drop indicators using the lora-accent color scheme, while the JS
adds event handlers to manage drag operations and update the UI
state accordingly. This improves user interaction by providing
clear visual cues for valid drop areas during file operations.
2025-10-12 06:55:01 +08:00

84 lines
2.4 KiB
JavaScript

import { modalManager } from '../managers/ModalManager.js';
import { getModelApiClient } from '../api/modelApiFactory.js';
let pendingDeletePath = null;
let pendingExcludePath = null;
export function showDeleteModal(filePath) {
pendingDeletePath = filePath;
const card = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
const modelName = card ? card.dataset.name : filePath.split('/').pop();
const modal = modalManager.getModal('deleteModal').element;
const modelInfo = modal.querySelector('.delete-model-info');
modelInfo.innerHTML = `
<strong>Model:</strong> ${modelName}
<br>
<strong>File:</strong> ${filePath}
`;
modalManager.showModal('deleteModal');
}
export async function confirmDelete() {
if (!pendingDeletePath) return;
try {
await getModelApiClient().deleteModel(pendingDeletePath);
closeDeleteModal();
if (window.modelDuplicatesManager) {
window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
}
} catch (error) {
console.error('Error deleting model:', error);
alert(`Error deleting model: ${error}`);
}
}
export function closeDeleteModal() {
modalManager.closeModal('deleteModal');
pendingDeletePath = null;
}
// Functions for the exclude modal
export function showExcludeModal(filePath) {
pendingExcludePath = filePath;
const card = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
const modelName = card ? card.dataset.name : filePath.split('/').pop();
const modal = modalManager.getModal('excludeModal').element;
const modelInfo = modal.querySelector('.exclude-model-info');
modelInfo.innerHTML = `
<strong>Model:</strong> ${modelName}
<br>
<strong>File:</strong> ${filePath}
`;
modalManager.showModal('excludeModal');
}
export function closeExcludeModal() {
modalManager.closeModal('excludeModal');
pendingExcludePath = null;
}
export async function confirmExclude() {
if (!pendingExcludePath) return;
try {
await getModelApiClient().excludeModel(pendingExcludePath);
closeExcludeModal();
if (window.modelDuplicatesManager) {
window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
}
} catch (error) {
console.error('Error excluding model:', error);
}
}