qdr.app.woo.plugins/studiou-wc-free-photo-product/assets/js/frontend.js

(function ($) {
    'use strict';

    $(document).ready(function () {
        var $container = $('.studiou-fpp-product');
        if (!$container.length) {
            return;
        }

        var productId = $container.data('product-id');
        var maxFileSize = parseInt($container.data('max-file-size'), 10) || 50;
        var chunkSize = parseInt(studiouWcfppFront.chunkSize, 10) || 1048576;
        var selectedVariation = null;
        var uploadedAttachmentId = null;
        var uploadedFileRecordId = null;
        var isUploading = false;

        // Elements
        var $dropzone = $('#studiou-fpp-dropzone');
        var $fileInput = $('#studiou-fpp-file-input');
        var $progress = $container.find('.studiou-fpp-progress');
        var $progressFill = $container.find('.studiou-fpp-progress-fill');
        var $progressText = $container.find('.studiou-fpp-progress-text');
        var $preview = $container.find('.studiou-fpp-preview');
        var $previewImg = $preview.find('img');
        var $previewName = $container.find('.studiou-fpp-preview-name');
        var $removeBtn = $container.find('.studiou-fpp-remove-file');
        var $addToCartBtn = $container.find('.studiou-fpp-add-to-cart-btn');
        var $messages = $container.find('.studiou-fpp-messages');
        var $attachmentInput = $('#studiou-fpp-attachment-id');
        var $fileRecordInput = $('#studiou-fpp-file-record-id');

        // Variant selection
        $container.on('change', 'input[name="studiou_fpp_variation"]', function () {
            selectedVariation = $(this).val();
            $(this).closest('tbody').find('tr').removeClass('studiou-fpp-variant-selected');
            $(this).closest('tr').addClass('studiou-fpp-variant-selected');
            updateAddToCartState();
        });

        // Variant row click
        $container.on('click', '.studiou-fpp-variant-row td:not(.studiou-fpp-col-select)', function () {
            $(this).closest('tr').find('input[type="radio"]').prop('checked', true).trigger('change');
        });

        // Drag and drop
        $dropzone.on('dragover dragenter', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).addClass('studiou-fpp-dragover');
        });

        $dropzone.on('dragleave drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).removeClass('studiou-fpp-dragover');
        });

        $dropzone.on('drop', function (e) {
            var files = e.originalEvent.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        $dropzone.on('click', function (e) {
            if (!isUploading) {
                $fileInput.trigger('click');
            }
        });

        $fileInput.on('change', function () {
            if (this.files.length > 0) {
                handleFile(this.files[0]);
            }
        });

        // Remove file
        $removeBtn.on('click', function () {
            removeUploadedFile();
        });

        // Add to cart
        $addToCartBtn.on('click', function () {
            addToCart();
        });

        function handleFile(file) {
            if (isUploading) {
                return;
            }

            // Validate file size
            var maxBytes = maxFileSize * 1024 * 1024;
            if (file.size > maxBytes) {
                showMessage(studiouWcfppFront.i18n.fileTooLarge.replace('%s', maxFileSize), 'error');
                return;
            }

            clearMessages();
            startChunkedUpload(file);
        }

        function startChunkedUpload(file) {
            isUploading = true;
            var totalChunks = Math.ceil(file.size / chunkSize);
            var uploadId = 'upload_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
            var currentChunk = 0;

            $dropzone.hide();
            $progress.show();
            $addToCartBtn.prop('disabled', true);

            function uploadNextChunk() {
                var start = currentChunk * chunkSize;
                var end = Math.min(start + chunkSize, file.size);
                var blob = file.slice(start, end);

                var formData = new FormData();
                formData.append('action', 'studiou_wcfpp_upload_chunk');
                formData.append('nonce', studiouWcfppFront.nonce);
                formData.append('product_id', productId);
                formData.append('upload_id', uploadId);
                formData.append('chunk_index', currentChunk);
                formData.append('total_chunks', totalChunks);
                formData.append('file_name', file.name);
                formData.append('file_size', file.size);
                formData.append('chunk', blob, 'chunk');

                $.ajax({
                    url: studiouWcfppFront.ajaxUrl,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            currentChunk++;
                            var percent = Math.round((currentChunk / totalChunks) * 100);
                            $progressFill.css('width', percent + '%');
                            $progressText.text(percent + '%');

                            if (response.data.complete) {
                                // Upload complete
                                uploadedAttachmentId = response.data.attachment_id;
                                uploadedFileRecordId = response.data.file_record_id;
                                $attachmentInput.val(uploadedAttachmentId);
                                $fileRecordInput.val(uploadedFileRecordId);

                                showPreview(response.data.thumbnail_url, response.data.file_name);
                                $progress.hide();
                                isUploading = false;
                                updateAddToCartState();
                            } else {
                                // Upload next chunk
                                uploadNextChunk();
                            }
                        } else {
                            uploadFailed(response.data ? response.data.message : studiouWcfppFront.i18n.uploadError);
                        }
                    },
                    error: function () {
                        uploadFailed(studiouWcfppFront.i18n.uploadError);
                    }
                });
            }

            uploadNextChunk();
        }

        function uploadFailed(message) {
            isUploading = false;
            $progress.hide();
            $dropzone.show();
            showMessage(message, 'error');
            $fileInput.val('');
        }

        function showPreview(thumbnailUrl, fileName) {
            if (thumbnailUrl) {
                $previewImg.attr('src', thumbnailUrl).show();
            } else {
                $previewImg.hide();
            }
            $previewName.text(fileName);
            $preview.show();
        }

        function removeUploadedFile() {
            if (!uploadedFileRecordId) {
                return;
            }

            $.ajax({
                url: studiouWcfppFront.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'studiou_wcfpp_remove_upload',
                    nonce: studiouWcfppFront.nonce,
                    file_record_id: uploadedFileRecordId
                },
                success: function () {
                    uploadedAttachmentId = null;
                    uploadedFileRecordId = null;
                    $attachmentInput.val('');
                    $fileRecordInput.val('');
                    $preview.hide();
                    $previewImg.attr('src', '');
                    $previewName.text('');
                    $dropzone.show();
                    $fileInput.val('');
                    updateAddToCartState();
                }
            });
        }

        function addToCart() {
            if (!selectedVariation) {
                showMessage(studiouWcfppFront.i18n.selectVariant, 'error');
                return;
            }
            if (!uploadedAttachmentId) {
                showMessage(studiouWcfppFront.i18n.uploadFile, 'error');
                return;
            }

            $addToCartBtn.prop('disabled', true);
            clearMessages();

            $.ajax({
                url: studiouWcfppFront.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'studiou_wcfpp_add_to_cart',
                    nonce: studiouWcfppFront.nonce,
                    product_id: productId,
                    variation_id: selectedVariation,
                    attachment_id: uploadedAttachmentId,
                    file_record_id: uploadedFileRecordId
                },
                success: function (response) {
                    if (response.success) {
                        showMessage(studiouWcfppFront.i18n.addedToCart, 'success');
                        // Reset upload state for next photo
                        uploadedAttachmentId = null;
                        uploadedFileRecordId = null;
                        $attachmentInput.val('');
                        $fileRecordInput.val('');
                        $preview.hide();
                        $dropzone.show();
                        $fileInput.val('');
                        updateAddToCartState();

                        // Update WC cart fragments
                        $(document.body).trigger('wc_fragment_refresh');
                    } else {
                        showMessage(response.data ? response.data.message : studiouWcfppFront.i18n.addToCartError, 'error');
                        updateAddToCartState();
                    }
                },
                error: function () {
                    showMessage(studiouWcfppFront.i18n.addToCartError, 'error');
                    updateAddToCartState();
                }
            });
        }

        function updateAddToCartState() {
            $addToCartBtn.prop('disabled', !(selectedVariation && uploadedAttachmentId));
        }

        function showMessage(text, type) {
            var cls = type === 'error' ? 'studiou-fpp-msg-error' : 'studiou-fpp-msg-success';
            $messages.html('<div class="studiou-fpp-msg ' + cls + '">' + escHtml(text) + '</div>');
        }

        function clearMessages() {
            $messages.empty();
        }

        function escHtml(str) {
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(str));
            return div.innerHTML;
        }
    });
})(jQuery);