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

feat: add startExpanded option to renderShowcaseContent for improved showcase interaction

Browse Source
This commit is contained in:
Will Miao
2025-06-27 10:12:17 +08:00
parent 53c8c337fc
commit 7f2d1670a0
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/components/shared/showcase/ShowcaseView.js
View File

@@ -71,10 +71,10 @@ export async function loadExampleImages(images, modelHash) {
* Render showcase content * Render showcase content
* @param {Array} images - Array of images/videos to show * @param {Array} images - Array of images/videos to show
* @param {Array} exampleFiles - Local example files * @param {Array} exampleFiles - Local example files
* @param {Object} options - Options for rendering * @param {boolean} startExpanded - Whether to start in expanded state
* @returns {string} HTML content * @returns {string} HTML content
*/ */
export function renderShowcaseContent(images, exampleFiles = []) { export function renderShowcaseContent(images, exampleFiles = [], startExpanded = false) {
if (!images?.length) { if (!images?.length) {
// Show empty state with import interface // Show empty state with import interface
return renderImportInterface(true); return renderImportInterface(true);
@@ -113,10 +113,10 @@ export function renderShowcaseContent(images, exampleFiles = []) {
return ` return `
<div class="scroll-indicator" onclick="toggleShowcase(this)"> <div class="scroll-indicator" onclick="toggleShowcase(this)">
<i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-${startExpanded ? 'up' : 'down'}"></i>
<span>Scroll or click to show ${filteredImages.length} examples</span> <span>Scroll or click to ${startExpanded ? 'hide' : 'show'} ${filteredImages.length} examples</span>
</div> </div>
<div class="carousel collapsed"> <div class="carousel ${startExpanded ? '' : 'collapsed'}">
${hiddenNotification} ${hiddenNotification}
<div class="carousel-container"> <div class="carousel-container">
${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')} ${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')}
@@ -406,7 +406,7 @@ async function handleImportFiles(files, modelHash, importContainer) {
const customImages = result.custom_images || []; const customImages = result.custom_images || [];
// Combine both arrays for rendering // Combine both arrays for rendering
const allImages = [...regularImages, ...customImages]; const allImages = [...regularImages, ...customImages];
showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files); showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files, true);
// Re-initialize showcase functionality // Re-initialize showcase functionality
const carousel = showcaseTab.querySelector('.carousel'); const carousel = showcaseTab.querySelector('.carousel');