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

Refactor toast notifications and improve LoraCard interactions

Browse Source
This commit is contained in:
Will Miao
2025-02-05 16:41:12 +08:00
parent 0bbecd7197
commit e2793a71be
4 changed files with 90 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
static/js/components/LoraCard.js
View File

@@ -33,17 +33,13 @@ export function createLoraCard(lora) {
<div class="card-actions">
<i class="fas fa-globe"
title="${lora.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}"
${lora.from_civitai ?
`onclick="event.stopPropagation(); openCivitai('${lora.model_name}')"` :
'style="opacity: 0.5; cursor: not-allowed"'}>
${!lora.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}>
</i>
<i class="fas fa-copy"
title="Copy Model Name"
onclick="event.stopPropagation(); navigator.clipboard.writeText('${lora.file_name}').then(() => showToast('Model name copied', 'success')).catch(() => showToast('Copy failed', 'error'))">
title="Copy Model Name">
</i>
<i class="fas fa-trash"
title="Delete Model"
onclick="event.stopPropagation(); deleteModel('${lora.file_path}')">
title="Delete Model">
</i>
</div>
</div>
@@ -53,14 +49,14 @@ export function createLoraCard(lora) {
</div>
<div class="card-actions">
<i class="fas fa-image"
title="Replace Preview Image"
onclick="event.stopPropagation(); replacePreview('${lora.file_path}')">
title="Replace Preview Image">
</i>
</div>
</div>
</div>
`;
// Main card click event
card.addEventListener('click', () => {
const meta = JSON.parse(card.dataset.meta || '{}');
if (Object.keys(meta).length) {
@@ -75,6 +71,34 @@ export function createLoraCard(lora) {
}
});
// Copy button click event
card.querySelector('.fa-copy')?.addEventListener('click', e => {
e.stopPropagation();
navigator.clipboard.writeText(card.dataset.file_name)
.then(() => showToast('Model name copied', 'success'))
.catch(() => showToast('Copy failed', 'error'));
});
// Civitai button click event
if (lora.from_civitai) {
card.querySelector('.fa-globe')?.addEventListener('click', e => {
e.stopPropagation();
openCivitai(lora.model_name);
});
}
// Delete button click event
card.querySelector('.fa-trash')?.addEventListener('click', e => {
e.stopPropagation();
deleteModel(lora.file_path);
});
// Replace preview button click event
card.querySelector('.fa-image')?.addEventListener('click', e => {
e.stopPropagation();
replacePreview(lora.file_path);
});
return card;
}
@@ -140,46 +164,4 @@ export function showLoraModal(lora) {
`;
modalManager.showModal('loraModal', content);
document.querySelectorAll('.trigger-category').forEach(category => {
category.addEventListener('click', function() {
const categoryName = this.dataset.category;
document.querySelectorAll('.trigger-category').forEach(c => c.classList.remove('active'));
this.classList.add('active');
const wordsList = document.querySelector('.trigger-words-list');
wordsList.innerHTML = categories[categoryName].map(word => `
<div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
<span class="trigger-word-content">${word}</span>
<span class="trigger-word-copy">
<svg width="14" height="14" viewBox="0 0 24 24">
<path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</span>
</div>
`).join('');
});
});
}
export function initializeLoraCards() {
document.querySelectorAll('.lora-card').forEach(card => {
card.addEventListener('click', () => {
const meta = JSON.parse(card.dataset.meta || '{}');
if (Object.keys(meta).length) {
showLoraModal(meta);
} else {
showToast(card.dataset.from_civitai === 'True'
? 'Click "Fetch" to retrieve metadata'
: 'No CivitAI information available', 'info');
}
});
card.querySelector('.fa-copy')?.addEventListener('click', e => {
e.stopPropagation();
navigator.clipboard.writeText(card.dataset.file_name)
.then(() => showToast('Model name copied', 'success'))
.catch(() => showToast('Copy failed', 'error'));
});
});
}

3
static/js/main.js
View File

@@ -2,7 +2,7 @@ import { debounce } from './utils/debounce.js';
import { LoadingManager } from './managers/LoadingManager.js';
import { modalManager } from './managers/ModalManager.js';
import { state } from './state/index.js';
import { showLoraModal, initializeLoraCards } from './components/LoraCard.js';
import { showLoraModal } from './components/LoraCard.js';
import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReload, refreshLoras } from './api/loraApi.js';
import { showToast, lazyLoadImages, restoreFolderFilter, initTheme, toggleTheme, toggleFolder, copyTriggerWord, openCivitai } from './utils/uiHelpers.js';
import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
@@ -34,7 +34,6 @@ document.addEventListener('DOMContentLoaded', () => {
initializeEventListeners();
lazyLoadImages();
restoreFolderFilter();
initializeLoraCards();
initTheme();
window.searchManager = new SearchManager();
});

13
static/js/utils/uiHelpers.js
View File

@@ -66,18 +66,7 @@ export function toggleFolder(tag) {
export function copyTriggerWord(word) {
navigator.clipboard.writeText(word).then(() => {
const toast = document.createElement('div');
toast.className = 'toast toast-copy';
toast.textContent = 'Copied!';
document.body.appendChild(toast);
requestAnimationFrame(() => {
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toast.remove(), 300);
}, 1000);
});
showToast('Trigger word copied', 'success');
});
}