Function createResultItem

tools/all-in-one/script.js:761–868

(file, index)

// Build a single result item card
function createResultItem(file, index) {
    const item = document.createElement('div');
    item.className = 'results-item';
    item.dataset.index = index;

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = state.selectedFiles.has(index);
    // Allow toggling selection via the checkbox
    checkbox.addEventListener('click', (e) => {
        e.stopPropagation(); // Prevent the event from bubbling to the parent item

        const isChecked = checkbox.checked;
        if (isChecked) {
            state.selectedFiles.add(index);
            item.classList.add('selected');
        } else {
            state.selectedFiles.delete(index);
            item.classList.remove('selected');
        }

        updateSelectionButtons();
    });

    if (state.selectedFiles.has(index)) {
        item.classList.add('selected');
    }

    const preview = document.createElement('div');
    preview.className = 'result-preview';

    const img = document.createElement('img');
    const url = URL.createObjectURL(file.compressedFile || file.file);
    img.src = url;
    // Keep the blob URL alive for hover previews
    // The URL is cleared on page unload or when the item is removed
    preview.appendChild(img);

    // Store the blob URL for later cleanup
    item.dataset.blobUrl = url;

    const name = document.createElement('div');
    name.className = 'result-name';
    name.textContent = file.newName || file.compressedFile.name;

    const size = document.createElement('div');
    size.className = 'result-size';

    // Always show size changes as original → new (percentage)
    if (file.originalSize && file.compressedSize) {
        const ratio = file.originalSize > 0
            ? ((file.originalSize - file.compressedSize) / file.originalSize * 100).toFixed(1)
            : '0.0';
        const savedSize = file.originalSize - file.compressedSize;

        if (savedSize > 0) {
            // File size decreased (successful compression)
            size.innerHTML = `<span style="color: var(--muted);">${formatFileSize(file.originalSize)}</span> <span style="color: var(--muted);">→</span> ${formatFileSize(file.compressedSize)} <span style="color: var(--success); font-weight: 600;">(-${ratio}%)</span>`;