JetFormBuilder choose files: Dynamic plus icon & total file tracking

gistfile1.txt

1. New custom code for JetFormBuilder improves how files are uploaded and displayed. 
The feature shows a set number of uploaded files directly (four on desktops, fewer on smaller devices), 
with additional files represented by a dynamic plus icon that indicates the count of remaining uploads. 
This enhancement ensures users can easily track and manage their uploads across different devices.

2. Copy this code, create a new HTML snippet, and paste it into your snippet plugin. Save it as a header or footer.

________________________________________________________

<style>
/* Plus Icon Style */
.plus-icon-container {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #0073e6;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin-left: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for the plus icon */
.plus-icon-container:hover {
    background-color: #059668; /* Hover background color */
    color: #ffffff; /* Hover text color */
}

/* Hide additional previews initially */
.jet-form-builder-file-upload__file.hidden {
    display: none;
}

/* Smooth reveal animation */
.jet-form-builder-file-upload__file {
    opacity: 0;
    transform: translateY(20px); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
}
.jet-form-builder-file-upload__file.shown {
    opacity: 1;
    transform: translateY(0); 
}
</style>

<script>
jQuery(document).ready(function($) {
    function updateImageDisplay(container) {
        container.find('.plus-icon-container').remove(); // Remove existing plus icon to avoid duplicates

        var imageCountToShow = window.innerWidth <= 768 || window.innerWidth <= 1024 ? 2 : 4;
        var totalImages = container.find('.jet-form-builder-file-upload__file').length;
        var hiddenImagesCount = totalImages - imageCountToShow;

        // Apply staggered fade-in effect to all initially visible images
        container.find('.jet-form-builder-file-upload__file').css('opacity', '0').addClass('hidden');
        for (let i = 0; i < imageCountToShow && i < totalImages; i++) {
            setTimeout(function() {
                container.find('.jet-form-builder-file-upload__file').eq(i).css('opacity', '1').removeClass('hidden').addClass('shown');
            }, 300 + (i * 100)); // Increment delay for each image
        }

        // Add plus icon if more images are present
        if (hiddenImagesCount > 0) {
            var plusIconHtml = '<div class="plus-icon-container" onclick="showMoreImages(this)">' +
                                '+' + hiddenImagesCount + '</div>';
            container.append(plusIconHtml);
        }
    }

    window.showMoreImages = function(clickedElement) {
        var container = $(clickedElement).parent();
        var delay = 300; // Start with initial delay
        container.find('.jet-form-builder-file-upload__file.hidden').each(function(index, element) {
            setTimeout(function() {
                $(element).css('opacity', '1').removeClass('hidden').addClass('shown');
            }, delay + (index * 100)); // Increment delay for each additional image
        });
        $(clickedElement).remove();
    };

    function removeDuplicatePlusIcons() {
        $('.plus-icon-container').each(function() {
            if ($(this).siblings('.jet-form-builder-file-upload__file.hidden').length === 0) {
                $(this).remove();
            }
        });
    }

    // Initialize a MutationObserver for dynamic changes in file upload and repeater areas
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === 1 && $(node).hasClass('jet-form-builder-file-upload__file')) {
                    var container = $(node).closest('.jet-form-builder-file-upload__files, .jet-form-builder-repeater__items');
                    updateImageDisplay(container);
                }
                // Handle newly added repeater rows which might not be immediately complete
                if (node.nodeType === 1 && $(node).find('.jet-form-builder-file-upload__files, .jet-form-builder-repeater__items').length) {
                    $(node).find('.jet-form-builder-file-upload__files, .jet-form-builder-repeater__items').each(function() {
                        updateImageDisplay($(this));
                    });
                }
            });
        });
    });

    // Apply observer to the document body to capture all relevant mutations including repeaters
    observer.observe(document.body, { childList: true, subtree: true });

    $(window).resize(function() {
        $('.jet-form-builder-file-upload__files, .jet-form-builder-repeater__items').each(function() {
            updateImageDisplay($(this)); // Re-apply display rules on resize
            removeDuplicatePlusIcons(); // Remove any duplicated plus icons
        });
    });

    $('.jet-form-builder__action-button').on('click', function() {
        $('.plus-icon-container').hide(); // Hide plus icon on form submission
    });

    // Initial display update for each container
    $('.jet-form-builder-file-upload__files, .jet-form-builder-repeater__items').each(function() {
        updateImageDisplay($(this));
    });
});

</script>