ComfyUI-Lora-Manager/static/js/components/shared/utils.js

/**
 * utils.js
 * Helper functions for the Model Modal component - General version
 */

export function escapeHtml(value = '') {
    if (value === null || value === undefined) return '';
    return String(value)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

export function escapeAttribute(value = '') {
    return escapeHtml(value);
}

/**
 * Format file size
 * @param {number} bytes - Number of bytes
 * @returns {string} Formatted file size
 */
export function formatFileSize(bytes) {
    if (!bytes) return 'N/A';
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;
    
    while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024;
        unitIndex++;
    }
    
    return `${size.toFixed(1)} ${units[unitIndex]}`;
}

/**
 * Render compact tags
 * @param {Array} tags - Array of tags
 * @param {string} filePath - File path for the edit button
 * @returns {string} HTML content
 */
export function renderCompactTags(tags, filePath = '') {
    // Remove the early return and always render the container
    const tagsList = tags || [];
    const safeFilePath = escapeAttribute(filePath || '');
    
    // Display up to 5 tags, with a tooltip indicator if there are more
    const visibleTags = tagsList.slice(0, 5);
    const remainingCount = Math.max(0, tagsList.length - 5);
    
    return `
        <div class="model-tags-container">
            <div class="model-tags-header">
                <div class="model-tags-compact">
                    ${visibleTags.map(tag => `<span class="model-tag-compact">${escapeHtml(tag)}</span>`).join('')}
                    ${remainingCount > 0 ? 
                        `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
                        ''}
                    ${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
                </div>
                <button class="edit-tags-btn" data-file-path="${safeFilePath}" title="Edit tags">
                    <i class="fas fa-pencil-alt"></i>
                </button>
            </div>
            ${tagsList.length > 0 ? 
                `<div class="model-tags-tooltip">
                    <div class="tooltip-content">
                        ${tagsList.map(tag => `<span class="tooltip-tag">${escapeHtml(tag)}</span>`).join('')}
                    </div>
                </div>` : 
                ''}
        </div>
    `;
}

/**
 * Set up tag tooltip functionality
 * @param {Element} [scopeContainer] - Optional container to scope the querySelector
 */
export function setupTagTooltip(scopeContainer = null) {
    const root = scopeContainer || document;
    const tagsContainer = root.querySelector('.model-tags-container');
    const tooltip = root.querySelector('.model-tags-tooltip');
    
    if (tagsContainer && tooltip) {
        tagsContainer.addEventListener('mouseenter', () => {
            tooltip.classList.add('visible');
        });
        
        tagsContainer.addEventListener('mouseleave', () => {
            tooltip.classList.remove('visible');
        });
    }
}