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

Implement share functionality in RecipeCard component to enable image downloads. Adjust recipe indicator position in CSS for improved layout.

Browse Source
This commit is contained in:
Will Miao
2025-03-17 06:10:43 +08:00
parent 3f38764a0e
commit b0a8b0cc6f
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/components/recipe-card.css
View File

@@ -44,7 +44,7 @@
.recipe-indicator {
position: absolute;
top: 8px;
top: 6px;
left: 8px;
width: 24px;
height: 24px;

31
static/js/components/RecipeCard.js
View File

@@ -78,8 +78,7 @@ class RecipeCard {
// Share button click event - prevent propagation to card
card.querySelector('.fa-share-alt')?.addEventListener('click', (e) => {
e.stopPropagation();
// TODO: Implement share functionality
showToast('Share functionality will be implemented later', 'info');
this.shareRecipe();
});
// Copy button click event - prevent propagation to card
@@ -232,6 +231,34 @@ class RecipeCard {
deleteBtn.disabled = false;
});
}
shareRecipe() {
try {
// Get the image URL
const imageUrl = this.recipe.file_url ||
(this.recipe.file_path ? `/loras_static/root1/preview/${this.recipe.file_path.split('/').pop()}` :
'/loras_static/images/no-preview.png');
// Create a temporary anchor element
const downloadLink = document.createElement('a');
downloadLink.href = imageUrl;
// Set the download attribute with the recipe title as filename
const fileExtension = imageUrl.split('.').pop();
const safeFileName = this.recipe.title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
downloadLink.download = `recipe_${safeFileName}.${fileExtension}`;
// Append to body, click and remove
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
showToast('Recipe image download started', 'success');
} catch (error) {
console.error('Error sharing recipe:', error);
showToast('Error downloading recipe image', 'error');
}
}
}
export { RecipeCard };