|
|
@@ -3,207 +3,576 @@
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
- var $uploadWrap = $('.studiou-fpp-upload-wrap');
|
|
|
- if (!$uploadWrap.length) {
|
|
|
+ var $wrap = $('.studiou-fpp-upload-wrap');
|
|
|
+ if (!$wrap.length) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- var productId = $uploadWrap.data('product-id');
|
|
|
- var maxFileSize = parseInt($uploadWrap.data('max-file-size'), 10) || 50;
|
|
|
- var chunkSize = parseInt(studiouWcfppFront.chunkSize, 10) || 1048576;
|
|
|
- var uploadedAttachmentId = null;
|
|
|
- var uploadedFileRecordId = null;
|
|
|
- var isUploading = false;
|
|
|
- var originalGalleryImages = {};
|
|
|
-
|
|
|
- // Upload area elements
|
|
|
- var $dropzone = $uploadWrap.find('#studiou-fpp-dropzone');
|
|
|
- var $fileInput = $uploadWrap.find('#studiou-fpp-file-input');
|
|
|
- var $progress = $uploadWrap.find('.studiou-fpp-progress');
|
|
|
- var $progressFill = $uploadWrap.find('.studiou-fpp-progress-fill');
|
|
|
- var $progressText = $uploadWrap.find('.studiou-fpp-progress-text');
|
|
|
- var $preview = $uploadWrap.find('.studiou-fpp-preview');
|
|
|
- var $previewImg = $preview.find('img');
|
|
|
- var $previewName = $uploadWrap.find('.studiou-fpp-preview-name');
|
|
|
- var $removeBtn = $uploadWrap.find('.studiou-fpp-remove-file');
|
|
|
- var $messages = $uploadWrap.find('.studiou-fpp-messages');
|
|
|
+ // ==========================================
|
|
|
+ // Config + data
|
|
|
+ // ==========================================
|
|
|
+ var cfg = {
|
|
|
+ productId: parseInt($wrap.data('product-id'), 10) || 0,
|
|
|
+ maxFileSize: parseInt($wrap.data('max-file-size'), 10) || 50,
|
|
|
+ maxUploads: parseInt($wrap.data('max-uploads'), 10) || 0,
|
|
|
+ chunkSize: parseInt(studiouWcfppFront.chunkSize, 10) || 1048576
|
|
|
+ };
|
|
|
+ var i18n = studiouWcfppFront.i18n || {};
|
|
|
+ var data = window.studiouFppCardData || {variants: [], batchFiles: []};
|
|
|
+ var variants = data.variants || [];
|
|
|
+
|
|
|
+ var $dropzone = $('#studiou-fpp-dropzone');
|
|
|
+ var $fileInput = $('#studiou-fpp-file-input');
|
|
|
+ var $cards = $('#studiou-fpp-cards');
|
|
|
+ var $messages = $wrap.find('.studiou-fpp-messages');
|
|
|
+
|
|
|
+ var originalGallery = {};
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // Bootstrap
|
|
|
+ // ==========================================
|
|
|
+ initExistingCards();
|
|
|
+ initDropzone();
|
|
|
+ initCardDelegation();
|
|
|
+ initOverviewDelegation();
|
|
|
+ initLightbox();
|
|
|
+ initOverviewThumbClicks();
|
|
|
+ applyHeroImage(data.heroPreviewUrl);
|
|
|
|
|
|
// ==========================================
|
|
|
- // Restore session state on page load
|
|
|
+ // Card construction
|
|
|
// ==========================================
|
|
|
- if (typeof studiouWcfppSession !== 'undefined' && studiouWcfppSession.attachment_id) {
|
|
|
- uploadedAttachmentId = studiouWcfppSession.attachment_id;
|
|
|
- uploadedFileRecordId = studiouWcfppSession.file_record_id;
|
|
|
- showPreview(studiouWcfppSession.thumbnail_url, studiouWcfppSession.file_name);
|
|
|
- updateProductGallery(studiouWcfppSession.preview_url || studiouWcfppSession.thumbnail_url);
|
|
|
+ function initExistingCards() {
|
|
|
+ (data.batchFiles || []).forEach(function (f) {
|
|
|
+ var $card = buildCard({
|
|
|
+ fileRecordId: f.file_record_id,
|
|
|
+ attachmentId: f.attachment_id,
|
|
|
+ fileName: f.file_name,
|
|
|
+ thumbUrl: f.thumb_url,
|
|
|
+ previewUrl: f.preview_url || f.thumb_url,
|
|
|
+ variationId: f.variation_id || 0,
|
|
|
+ uploading: false
|
|
|
+ });
|
|
|
+ $cards.append($card);
|
|
|
+ });
|
|
|
+ refreshMaxReachedState();
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildCard(opts) {
|
|
|
+ var $card = $('<div class="studiou-fpp-card"></div>');
|
|
|
+ $card.attr('data-file-record-id', opts.fileRecordId || '');
|
|
|
+ $card.attr('data-attachment-id', opts.attachmentId || '');
|
|
|
+ if (opts.uploading) $card.addClass('studiou-fpp-card-uploading');
|
|
|
+
|
|
|
+ // Remove-upload button (×)
|
|
|
+ $card.append('<button type="button" class="studiou-fpp-card-remove" title="' +
|
|
|
+ escAttr(i18n.removeFile || 'Remove') + '" aria-label="' +
|
|
|
+ escAttr(i18n.removeFile || 'Remove') + '">×</button>');
|
|
|
+
|
|
|
+ // Thumb column
|
|
|
+ var $thumb = $('<div class="studiou-fpp-card-thumb"></div>');
|
|
|
+ if (opts.thumbUrl) {
|
|
|
+ var $img = $('<img>').attr('src', opts.thumbUrl).attr('alt', opts.fileName || '');
|
|
|
+ if (opts.previewUrl) {
|
|
|
+ $img.attr('data-preview-url', opts.previewUrl);
|
|
|
+ }
|
|
|
+ $thumb.append($img);
|
|
|
+ } else {
|
|
|
+ $thumb.append('<div class="studiou-fpp-card-thumb-placeholder"></div>');
|
|
|
+ }
|
|
|
+ // Element-level click binding — survives even if something intercepts bubble-phase
|
|
|
+ // or capture-phase on document. Fires at target phase for clicks inside $thumb.
|
|
|
+ bindThumbClick($thumb[0]);
|
|
|
+ var $progress = $('<div class="studiou-fpp-card-progress"></div>');
|
|
|
+ $progress.append('<div class="studiou-fpp-card-progress-fill"></div>');
|
|
|
+ $progress.append('<span class="studiou-fpp-card-progress-text">0%</span>');
|
|
|
+ if (!opts.uploading) {
|
|
|
+ $progress.hide();
|
|
|
+ }
|
|
|
+ $thumb.append($progress);
|
|
|
+ $card.append($thumb);
|
|
|
+
|
|
|
+ // Body column
|
|
|
+ var $body = $('<div class="studiou-fpp-card-body"></div>');
|
|
|
+ $body.append($('<div class="studiou-fpp-card-name"></div>').text(opts.fileName || ''));
|
|
|
+
|
|
|
+ var $controls = $('<div class="studiou-fpp-card-controls"></div>');
|
|
|
+ $controls.append(buildVariantSelect(opts.variationId || 0));
|
|
|
+ $controls.append(buildQtyStepper());
|
|
|
+ $body.append($controls);
|
|
|
+
|
|
|
+ var $priceRow = $('<div class="studiou-fpp-card-price-row"></div>');
|
|
|
+ $priceRow.append('<span class="studiou-fpp-card-price">—</span>');
|
|
|
+ $priceRow.append('<span class="studiou-fpp-card-badge" style="display:none;"></span>');
|
|
|
+ var $enlargeBtn = $('<button type="button" class="studiou-fpp-card-enlarge"></button>').text(i18n.enlarge || 'Enlarge');
|
|
|
+ // Direct target-phase binding — primitive, runs regardless of delegation state.
|
|
|
+ $enlargeBtn[0].onclick = onEnlargeClick;
|
|
|
+ $priceRow.append($enlargeBtn);
|
|
|
+ $priceRow.append('<button type="button" class="button studiou-fpp-card-addtocart">' +
|
|
|
+ escHtml(i18n.addToCart || 'Add to cart') + '</button>');
|
|
|
+ $body.append($priceRow);
|
|
|
+
|
|
|
+ $card.append($body);
|
|
|
+
|
|
|
+ if (!opts.uploading) {
|
|
|
+ updateCardPrice($card);
|
|
|
+ }
|
|
|
+ return $card;
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildVariantSelect(initialVariationId) {
|
|
|
+ var $select = $('<select class="studiou-fpp-card-variant"></select>');
|
|
|
+ $select.append($('<option></option>').val(0).text(i18n.selectVariant || 'Select variant'));
|
|
|
+ for (var i = 0; i < variants.length; i++) {
|
|
|
+ var v = variants[i];
|
|
|
+ // <option> text nodes cannot render HTML, so use a plain-text price formatter
|
|
|
+ var priceLabel = v.base_price ? ' — ' + formatPricePlain(v.base_price) : '';
|
|
|
+ var label = v.label + priceLabel;
|
|
|
+ if (!v.in_stock) {
|
|
|
+ label += ' — ' + (i18n.outOfStock || 'out of stock');
|
|
|
+ }
|
|
|
+ var $opt = $('<option></option>')
|
|
|
+ .val(v.id)
|
|
|
+ .text(label)
|
|
|
+ .attr('data-base-price', v.base_price);
|
|
|
+ if (!v.in_stock) {
|
|
|
+ $opt.prop('disabled', true);
|
|
|
+ }
|
|
|
+ $select.append($opt);
|
|
|
+ }
|
|
|
+ if (initialVariationId) {
|
|
|
+ $select.val(initialVariationId);
|
|
|
+ }
|
|
|
+ return $select;
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildQtyStepper() {
|
|
|
+ var $stepper = $('<div class="studiou-fpp-card-qty"></div>');
|
|
|
+ $stepper.append('<button type="button" class="studiou-fpp-qty-btn studiou-fpp-qty-minus">−</button>');
|
|
|
+ $stepper.append('<input type="number" class="studiou-fpp-qty-input" min="1" step="1" value="1">');
|
|
|
+ $stepper.append('<button type="button" class="studiou-fpp-qty-btn studiou-fpp-qty-plus">+</button>');
|
|
|
+ return $stepper;
|
|
|
}
|
|
|
|
|
|
// ==========================================
|
|
|
- // Drag and drop
|
|
|
+ // Card live updates
|
|
|
// ==========================================
|
|
|
- $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]);
|
|
|
+ function initCardDelegation() {
|
|
|
+ $cards.on('change', '.studiou-fpp-card-variant', function () {
|
|
|
+ updateCardPrice($(this).closest('.studiou-fpp-card'));
|
|
|
+ });
|
|
|
+ $cards.on('input change keyup', '.studiou-fpp-qty-input', function () {
|
|
|
+ updateCardPrice($(this).closest('.studiou-fpp-card'));
|
|
|
+ });
|
|
|
+ $cards.on('click', '.studiou-fpp-qty-plus', function () {
|
|
|
+ var $input = $(this).closest('.studiou-fpp-card-qty').find('.studiou-fpp-qty-input');
|
|
|
+ $input.val((parseInt($input.val(), 10) || 1) + 1).trigger('change');
|
|
|
+ });
|
|
|
+ $cards.on('click', '.studiou-fpp-qty-minus', function () {
|
|
|
+ var $input = $(this).closest('.studiou-fpp-card-qty').find('.studiou-fpp-qty-input');
|
|
|
+ var v = Math.max(1, (parseInt($input.val(), 10) || 1) - 1);
|
|
|
+ $input.val(v).trigger('change');
|
|
|
+ });
|
|
|
+ $cards.on('click', '.studiou-fpp-card-addtocart', function () {
|
|
|
+ onAddToCartClick($(this).closest('.studiou-fpp-card'));
|
|
|
+ });
|
|
|
+ $cards.on('click', '.studiou-fpp-card-remove', function () {
|
|
|
+ onRemoveUploadClick($(this).closest('.studiou-fpp-card'));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function findVariant(variationId) {
|
|
|
+ variationId = parseInt(variationId, 10) || 0;
|
|
|
+ if (!variationId) return null;
|
|
|
+ for (var i = 0; i < variants.length; i++) {
|
|
|
+ if (variants[i].id === variationId) return variants[i];
|
|
|
}
|
|
|
- });
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ function resolveTier(tiers, qty) {
|
|
|
+ if (!tiers || !tiers.length) return null;
|
|
|
+ var match = null;
|
|
|
+ for (var i = 0; i < tiers.length; i++) {
|
|
|
+ if (tiers[i].from_qty <= qty) match = tiers[i];
|
|
|
+ else break;
|
|
|
+ }
|
|
|
+ return match;
|
|
|
+ }
|
|
|
|
|
|
- $dropzone.on('click', function () {
|
|
|
- if (!isUploading) {
|
|
|
- $fileInput.trigger('click');
|
|
|
+ function updateCardPrice($card) {
|
|
|
+ var $price = $card.find('.studiou-fpp-card-price');
|
|
|
+ var $badge = $card.find('.studiou-fpp-card-badge');
|
|
|
+ var $btn = $card.find('.studiou-fpp-card-addtocart');
|
|
|
+
|
|
|
+ var variationId = parseInt($card.find('.studiou-fpp-card-variant').val(), 10) || 0;
|
|
|
+ var qty = Math.max(1, parseInt($card.find('.studiou-fpp-qty-input').val(), 10) || 1);
|
|
|
+ var variant = findVariant(variationId);
|
|
|
+
|
|
|
+ if (!variant || !variant.base_price) {
|
|
|
+ $price.html('—');
|
|
|
+ $badge.hide();
|
|
|
+ $btn.prop('disabled', true);
|
|
|
+ return;
|
|
|
}
|
|
|
- });
|
|
|
|
|
|
- $fileInput.on('change', function () {
|
|
|
- if (this.files.length > 0) {
|
|
|
- handleFile(this.files[0]);
|
|
|
+ var tier = resolveTier(variant.tiers || [], qty);
|
|
|
+ var unit = variant.base_price;
|
|
|
+ if (tier && tier.percent > 0) {
|
|
|
+ unit = variant.base_price * (1 - (tier.percent / 100));
|
|
|
+ $badge.show().text('−' + formatPercent(tier.percent));
|
|
|
+ } else {
|
|
|
+ $badge.hide();
|
|
|
}
|
|
|
- });
|
|
|
+ var lineTotal = unit * qty;
|
|
|
+ $price.html(formatPriceHtml(lineTotal));
|
|
|
|
|
|
- // Remove file
|
|
|
- $removeBtn.on('click', function () {
|
|
|
- removeUploadedFile();
|
|
|
- });
|
|
|
+ var uploading = $card.hasClass('studiou-fpp-card-uploading');
|
|
|
+ $btn.prop('disabled', uploading);
|
|
|
+ }
|
|
|
|
|
|
// ==========================================
|
|
|
- // Upload logic
|
|
|
+ // Upload dropzone
|
|
|
// ==========================================
|
|
|
- function handleFile(file) {
|
|
|
- if (isUploading) return;
|
|
|
+ function initDropzone() {
|
|
|
+ $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;
|
|
|
+ enqueueFiles(files);
|
|
|
+ });
|
|
|
+ $dropzone.on('click', function (e) {
|
|
|
+ if ($dropzone.hasClass('studiou-fpp-dropzone-disabled')) return;
|
|
|
+ // File input lives INSIDE the dropzone, so a click on it bubbles up and
|
|
|
+ // re-enters this handler. On mobile the synthetic .trigger('click') also
|
|
|
+ // bubbles, producing infinite recursion ("Maximum call stack size exceeded").
|
|
|
+ // Ignore clicks that originate on (or bubble from) the input itself.
|
|
|
+ if (e.target === $fileInput[0]) return;
|
|
|
+ // Use the native .click() on the DOM element — it opens the file picker
|
|
|
+ // without dispatching a bubbling jQuery event that would re-trigger us.
|
|
|
+ $fileInput[0].click();
|
|
|
+ });
|
|
|
+ $fileInput.on('click', function (e) {
|
|
|
+ // Defense in depth: stop the click from bubbling back to the dropzone.
|
|
|
+ e.stopPropagation();
|
|
|
+ });
|
|
|
+ $fileInput.on('change', function () {
|
|
|
+ enqueueFiles(this.files);
|
|
|
+ $fileInput.val('');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var uploadQueue = [];
|
|
|
+ var activeUpload = false;
|
|
|
+
|
|
|
+ function enqueueFiles(fileList) {
|
|
|
+ if (!fileList || !fileList.length) return;
|
|
|
+ clearMessages();
|
|
|
+
|
|
|
+ if (cfg.maxUploads > 0) {
|
|
|
+ var existing = $cards.children('.studiou-fpp-card').length;
|
|
|
+ var available = Math.max(0, cfg.maxUploads - existing - uploadQueue.length);
|
|
|
+ if (available <= 0) {
|
|
|
+ showMessage(formatI18n(i18n.maxUploadsReached, cfg.maxUploads), 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (fileList.length > available) {
|
|
|
+ showMessage(formatI18n(i18n.maxUploadsReached, cfg.maxUploads), 'error');
|
|
|
+ }
|
|
|
+ for (var i = 0; i < Math.min(fileList.length, available); i++) {
|
|
|
+ pushFile(fileList[i]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var j = 0; j < fileList.length; j++) {
|
|
|
+ pushFile(fileList[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ refreshMaxReachedState();
|
|
|
+ drainQueue();
|
|
|
+ }
|
|
|
|
|
|
- var maxBytes = maxFileSize * 1024 * 1024;
|
|
|
+ function pushFile(file) {
|
|
|
+ var maxBytes = cfg.maxFileSize * 1024 * 1024;
|
|
|
if (file.size > maxBytes) {
|
|
|
- showMessage(studiouWcfppFront.i18n.fileTooLarge.replace('%s', maxFileSize), 'error');
|
|
|
+ showMessage(formatI18n(i18n.fileTooLarge, cfg.maxFileSize), 'error');
|
|
|
return;
|
|
|
}
|
|
|
+ var $card = buildCard({
|
|
|
+ fileRecordId: 0,
|
|
|
+ attachmentId: 0,
|
|
|
+ fileName: file.name,
|
|
|
+ thumbUrl: '',
|
|
|
+ variationId: 0,
|
|
|
+ uploading: true
|
|
|
+ });
|
|
|
+ $cards.append($card);
|
|
|
+ uploadQueue.push({file: file, $card: $card});
|
|
|
+ }
|
|
|
|
|
|
- clearMessages();
|
|
|
- startChunkedUpload(file);
|
|
|
+ function drainQueue() {
|
|
|
+ if (activeUpload || !uploadQueue.length) return;
|
|
|
+ activeUpload = true;
|
|
|
+ var next = uploadQueue.shift();
|
|
|
+ uploadOne(next.file, next.$card, function () {
|
|
|
+ activeUpload = false;
|
|
|
+ drainQueue();
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- function startChunkedUpload(file) {
|
|
|
- isUploading = true;
|
|
|
- var totalChunks = Math.ceil(file.size / chunkSize);
|
|
|
- var uploadId = 'upload_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
|
+ function uploadOne(file, $card, done) {
|
|
|
+ var totalChunks = Math.ceil(file.size / cfg.chunkSize);
|
|
|
+ var uploadId = 'upload_' + Date.now() + '_' + Math.random().toString(36).slice(2, 10);
|
|
|
var currentChunk = 0;
|
|
|
-
|
|
|
- $dropzone.hide();
|
|
|
- $progress.show();
|
|
|
-
|
|
|
- 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');
|
|
|
-
|
|
|
- var isLastChunk = (currentChunk === totalChunks - 1);
|
|
|
- if (isLastChunk) {
|
|
|
- $progressFill.css('width', '100%');
|
|
|
- $progressText.text(studiouWcfppFront.i18n.processing || 'Processing...');
|
|
|
+ var $fill = $card.find('.studiou-fpp-card-progress-fill');
|
|
|
+ var $text = $card.find('.studiou-fpp-card-progress-text');
|
|
|
+ $card.find('.studiou-fpp-card-progress').show();
|
|
|
+
|
|
|
+ function next() {
|
|
|
+ var start = currentChunk * cfg.chunkSize;
|
|
|
+ var end = Math.min(start + cfg.chunkSize, file.size);
|
|
|
+ var blob = file.slice(start, end);
|
|
|
+
|
|
|
+ var form = new FormData();
|
|
|
+ form.append('action', 'studiou_wcfpp_upload_chunk');
|
|
|
+ form.append('nonce', studiouWcfppFront.nonce);
|
|
|
+ form.append('product_id', cfg.productId);
|
|
|
+ form.append('upload_id', uploadId);
|
|
|
+ form.append('chunk_index', currentChunk);
|
|
|
+ form.append('total_chunks', totalChunks);
|
|
|
+ form.append('file_name', file.name);
|
|
|
+ form.append('file_size', file.size);
|
|
|
+ form.append('chunk', blob, 'chunk');
|
|
|
+
|
|
|
+ var isLast = (currentChunk === totalChunks - 1);
|
|
|
+ if (isLast) {
|
|
|
+ $fill.css('width', '100%');
|
|
|
+ $text.text(i18n.processing || 'Processing...');
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
url: studiouWcfppFront.ajaxUrl,
|
|
|
type: 'POST',
|
|
|
- data: formData,
|
|
|
+ data: form,
|
|
|
processData: false,
|
|
|
contentType: false,
|
|
|
- timeout: isLastChunk ? 120000 : 30000,
|
|
|
+ timeout: isLast ? 120000 : 30000,
|
|
|
success: function (response) {
|
|
|
- if (response.success) {
|
|
|
- if (!isLastChunk) {
|
|
|
- currentChunk++;
|
|
|
- var percent = Math.round((currentChunk / totalChunks) * 100);
|
|
|
- $progressFill.css('width', percent + '%');
|
|
|
- $progressText.text(percent + '%');
|
|
|
- }
|
|
|
-
|
|
|
- if (response.data.complete) {
|
|
|
- uploadedAttachmentId = response.data.attachment_id;
|
|
|
- uploadedFileRecordId = response.data.file_record_id;
|
|
|
-
|
|
|
- storeInSession(
|
|
|
- response.data.attachment_id,
|
|
|
- response.data.file_record_id,
|
|
|
- response.data.file_name
|
|
|
- );
|
|
|
-
|
|
|
- showPreview(response.data.thumbnail_url, response.data.file_name);
|
|
|
- updateProductGallery(response.data.preview_url || response.data.thumbnail_url);
|
|
|
- $progress.hide();
|
|
|
- isUploading = false;
|
|
|
- } else {
|
|
|
- uploadNextChunk();
|
|
|
- }
|
|
|
+ if (!response.success) {
|
|
|
+ failUpload($card, response.data ? response.data.message : (i18n.uploadError || 'Upload failed.'));
|
|
|
+ done();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!response.data.complete) {
|
|
|
+ currentChunk++;
|
|
|
+ var pct = Math.round((currentChunk / totalChunks) * 100);
|
|
|
+ $fill.css('width', pct + '%');
|
|
|
+ $text.text(pct + '%');
|
|
|
+ next();
|
|
|
} else {
|
|
|
- uploadFailed(response.data ? response.data.message : studiouWcfppFront.i18n.uploadError);
|
|
|
+ finishUpload($card, response.data);
|
|
|
+ done();
|
|
|
}
|
|
|
},
|
|
|
error: function () {
|
|
|
- uploadFailed(studiouWcfppFront.i18n.uploadError);
|
|
|
+ failUpload($card, i18n.uploadError || 'Upload failed.');
|
|
|
+ done();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+ next();
|
|
|
+ }
|
|
|
+
|
|
|
+ function finishUpload($card, res) {
|
|
|
+ $card.removeClass('studiou-fpp-card-uploading');
|
|
|
+ $card.find('.studiou-fpp-card-progress').hide();
|
|
|
+ $card.attr('data-file-record-id', res.file_record_id);
|
|
|
+ $card.attr('data-attachment-id', res.attachment_id);
|
|
|
+ var previewUrl = res.preview_url || res.thumbnail_url;
|
|
|
+ var $img = $card.find('.studiou-fpp-card-thumb img');
|
|
|
+ if ($img.length) {
|
|
|
+ $img.attr('src', res.thumbnail_url).attr('data-preview-url', previewUrl);
|
|
|
+ } else {
|
|
|
+ $card.find('.studiou-fpp-card-thumb-placeholder').replaceWith(
|
|
|
+ $('<img>').attr('src', res.thumbnail_url)
|
|
|
+ .attr('alt', res.file_name)
|
|
|
+ .attr('data-preview-url', previewUrl)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ updateCardPrice($card);
|
|
|
+ refreshMaxReachedState();
|
|
|
+
|
|
|
+ // If this is now the first/only card, swap the hero gallery image
|
|
|
+ if ($cards.children('.studiou-fpp-card').index($card) === 0) {
|
|
|
+ applyHeroImage(previewUrl);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function failUpload($card, message) {
|
|
|
+ $card.remove();
|
|
|
+ showMessage(message, 'error');
|
|
|
+ refreshMaxReachedState();
|
|
|
+ }
|
|
|
|
|
|
- uploadNextChunk();
|
|
|
+ function refreshMaxReachedState() {
|
|
|
+ if (cfg.maxUploads <= 0) return;
|
|
|
+ var reached = $cards.children('.studiou-fpp-card').length >= cfg.maxUploads;
|
|
|
+ $dropzone.toggleClass('studiou-fpp-dropzone-disabled', reached);
|
|
|
}
|
|
|
|
|
|
// ==========================================
|
|
|
- // Session management
|
|
|
+ // Remove upload (per-card × button)
|
|
|
// ==========================================
|
|
|
- function storeInSession(attachmentId, fileRecordId, fileName) {
|
|
|
+ function onRemoveUploadClick($card) {
|
|
|
+ var fileRecordId = parseInt($card.attr('data-file-record-id'), 10) || 0;
|
|
|
+ if (!fileRecordId) {
|
|
|
+ // Still uploading — just cancel locally
|
|
|
+ $card.remove();
|
|
|
+ refreshMaxReachedState();
|
|
|
+ return;
|
|
|
+ }
|
|
|
$.ajax({
|
|
|
url: studiouWcfppFront.ajaxUrl,
|
|
|
type: 'POST',
|
|
|
data: {
|
|
|
- action: 'studiou_wcfpp_set_upload_session',
|
|
|
- nonce: studiouWcfppFront.nonce,
|
|
|
- attachment_id: attachmentId,
|
|
|
- file_record_id: fileRecordId,
|
|
|
- file_name: fileName
|
|
|
+ action: 'studiou_wcfpp_remove_upload',
|
|
|
+ nonce: studiouWcfppFront.nonce,
|
|
|
+ file_record_id: fileRecordId
|
|
|
+ },
|
|
|
+ success: function (response) {
|
|
|
+ if (response.success) {
|
|
|
+ var wasFirst = ($cards.children('.studiou-fpp-card').index($card) === 0);
|
|
|
+ $card.remove();
|
|
|
+ refreshMaxReachedState();
|
|
|
+
|
|
|
+ if (wasFirst) {
|
|
|
+ var $nextFirst = $cards.children('.studiou-fpp-card').first();
|
|
|
+ if ($nextFirst.length) {
|
|
|
+ var nextImg = $nextFirst.find('.studiou-fpp-card-thumb img').attr('src');
|
|
|
+ applyHeroImage(nextImg || '');
|
|
|
+ } else {
|
|
|
+ restoreHeroImage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ showMessage(response.data ? response.data.message : (i18n.error || 'Error'), 'error');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ showMessage(i18n.error || 'Error', 'error');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function clearSession() {
|
|
|
+ // ==========================================
|
|
|
+ // Add to cart
|
|
|
+ // ==========================================
|
|
|
+ function onAddToCartClick($card) {
|
|
|
+ var fileRecordId = parseInt($card.attr('data-file-record-id'), 10) || 0;
|
|
|
+ var variationId = parseInt($card.find('.studiou-fpp-card-variant').val(), 10) || 0;
|
|
|
+ var qty = Math.max(1, parseInt($card.find('.studiou-fpp-qty-input').val(), 10) || 1);
|
|
|
+
|
|
|
+ if (!fileRecordId) {
|
|
|
+ showMessage(i18n.uploadFile || 'Please upload a file.', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!variationId) {
|
|
|
+ showMessage(i18n.selectVariant || 'Please select a variant.', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var $btn = $card.find('.studiou-fpp-card-addtocart');
|
|
|
+ $btn.prop('disabled', true);
|
|
|
+
|
|
|
$.ajax({
|
|
|
url: studiouWcfppFront.ajaxUrl,
|
|
|
type: 'POST',
|
|
|
data: {
|
|
|
- action: 'studiou_wcfpp_clear_upload_session',
|
|
|
- nonce: studiouWcfppFront.nonce
|
|
|
+ action: 'studiou_wcfpp_add_file_to_cart',
|
|
|
+ nonce: studiouWcfppFront.nonce,
|
|
|
+ file_record_id: fileRecordId,
|
|
|
+ variation_id: variationId,
|
|
|
+ quantity: qty
|
|
|
+ },
|
|
|
+ success: function (response) {
|
|
|
+ if (response.success) {
|
|
|
+ showMessage(i18n.addedToCart || 'Added to cart.', 'success');
|
|
|
+ if (response.data && response.data.overview_html) {
|
|
|
+ updateOverview(response.data.overview_html);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ showMessage(response.data ? response.data.message : (i18n.addToCartError || 'Could not add to cart.'), 'error');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ showMessage(i18n.addToCartError || 'Could not add to cart.', 'error');
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $btn.prop('disabled', false);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// ==========================================
|
|
|
- // Product gallery image replacement
|
|
|
+ // Order overview
|
|
|
// ==========================================
|
|
|
- function updateProductGallery(imageUrl) {
|
|
|
- if (!imageUrl) return;
|
|
|
+ function initOverviewDelegation() {
|
|
|
+ // Remove-line on overview panel (cart-only, upload stays)
|
|
|
+ $(document).on('click', '.studiou-fpp-overview-remove', function (e) {
|
|
|
+ var $link = $(this);
|
|
|
+ var href = $link.attr('href');
|
|
|
+ // Only intercept if the link has a nonce arg — otherwise let browser navigate
|
|
|
+ if (!href || href.indexOf('studiou-fpp-remove-line') < 0) return;
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ var $line = $link.closest('.studiou-fpp-overview-line');
|
|
|
+ var key = $line.data('cart-item-key');
|
|
|
+ if (!key) return;
|
|
|
|
|
|
+ $.ajax({
|
|
|
+ url: studiouWcfppFront.ajaxUrl,
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ action: 'studiou_wcfpp_remove_cart_line',
|
|
|
+ nonce: studiouWcfppFront.nonce,
|
|
|
+ cart_item_key: key
|
|
|
+ },
|
|
|
+ success: function (response) {
|
|
|
+ if (response.success && response.data && response.data.overview_html) {
|
|
|
+ updateOverview(response.data.overview_html);
|
|
|
+ } else if (!response.success) {
|
|
|
+ showMessage(response.data ? response.data.message : (i18n.error || 'Error'), 'error');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ showMessage(i18n.error || 'Error', 'error');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateOverview(html) {
|
|
|
+ var $new = $(html);
|
|
|
+ var $existing = $('#studiou-fpp-overview');
|
|
|
+ if ($existing.length) {
|
|
|
+ $existing.replaceWith($new);
|
|
|
+ } else {
|
|
|
+ $wrap.after($new);
|
|
|
+ }
|
|
|
+ initOverviewThumbClicks();
|
|
|
+ $(document).trigger('studiou-fpp:cart-updated');
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // Hero image
|
|
|
+ // ==========================================
|
|
|
+ function applyHeroImage(url) {
|
|
|
+ if (!url) return;
|
|
|
var selectors = [
|
|
|
'.woocommerce-product-gallery__image img',
|
|
|
'.product .wp-post-image',
|
|
|
@@ -212,7 +581,6 @@
|
|
|
'.entry-summary img.attachment-woocommerce_thumbnail',
|
|
|
'.product-gallery img:first'
|
|
|
];
|
|
|
-
|
|
|
var $img = null;
|
|
|
for (var i = 0; i < selectors.length; i++) {
|
|
|
$img = $(selectors[i]).first();
|
|
|
@@ -220,22 +588,186 @@
|
|
|
}
|
|
|
if (!$img || !$img.length) return;
|
|
|
|
|
|
- if (!originalGalleryImages.src) {
|
|
|
- originalGalleryImages.src = $img.attr('src');
|
|
|
- originalGalleryImages.srcset = $img.attr('srcset') || '';
|
|
|
- originalGalleryImages.sizes = $img.attr('sizes') || '';
|
|
|
+ if (!originalGallery.src) {
|
|
|
+ originalGallery.src = $img.attr('src');
|
|
|
+ originalGallery.srcset = $img.attr('srcset') || '';
|
|
|
+ originalGallery.sizes = $img.attr('sizes') || '';
|
|
|
var $link = $img.closest('a');
|
|
|
- if ($link.length) originalGalleryImages.href = $link.attr('href');
|
|
|
+ if ($link.length) originalGallery.href = $link.attr('href');
|
|
|
+ }
|
|
|
+ $img.attr('src', url).removeAttr('srcset').removeAttr('sizes');
|
|
|
+ var $a = $img.closest('a');
|
|
|
+ if ($a.length) $a.attr('href', url);
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // Lightbox (click thumbnail → enlarged preview)
|
|
|
+ // ==========================================
|
|
|
+ var $lightbox = null;
|
|
|
+
|
|
|
+ // Attach a target-phase click listener directly on a thumbnail element.
|
|
|
+ // Element-level listeners are the most reliable form of click binding — no
|
|
|
+ // delegation, no capture/bubble surprises. Called from buildCard + finishUpload
|
|
|
+ // (upload cards) and from initOverviewThumbClicks (after every overview render).
|
|
|
+ function bindThumbClick(el) {
|
|
|
+ if (!el || el.__studiouFppBound) return;
|
|
|
+ el.__studiouFppBound = true;
|
|
|
+ el.addEventListener('click', function (ev) {
|
|
|
+ var t = ev.target;
|
|
|
+ if (t && t.closest && t.closest('button, input, select, textarea, a')) return;
|
|
|
+
|
|
|
+ var card = el.closest ? el.closest('.studiou-fpp-card') : null;
|
|
|
+ if (card && card.classList.contains('studiou-fpp-card-uploading')) return;
|
|
|
+
|
|
|
+ var img = el.matches && el.matches('.studiou-fpp-overview-thumb')
|
|
|
+ ? el
|
|
|
+ : (el.querySelector ? el.querySelector('img') : null);
|
|
|
+ if (!img) return;
|
|
|
+
|
|
|
+ var url = img.getAttribute('data-preview-url') || img.getAttribute('src');
|
|
|
+ if (!url) return;
|
|
|
+
|
|
|
+ var name = '';
|
|
|
+ if (card) {
|
|
|
+ var nameEl = card.querySelector('.studiou-fpp-card-name');
|
|
|
+ name = nameEl ? nameEl.textContent : '';
|
|
|
+ } else {
|
|
|
+ name = img.getAttribute('data-file-name') || img.getAttribute('alt') || '';
|
|
|
+ }
|
|
|
+
|
|
|
+ ev.preventDefault();
|
|
|
+ ev.stopPropagation();
|
|
|
+ openLightbox(url, name);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Explicit "Enlarge" button handler — survives any parent-level click interceptor
|
|
|
+ // because clicks on <button type="button"> don't match the thumb-image selectors that
|
|
|
+ // theme lightboxes (iLightBox/Magnific) delegate to.
|
|
|
+ function onEnlargeClick(ev) {
|
|
|
+ ev.preventDefault();
|
|
|
+ ev.stopPropagation();
|
|
|
+ var btn = this;
|
|
|
+ var card = btn.closest('.studiou-fpp-card');
|
|
|
+ var line = btn.closest('.studiou-fpp-overview-line');
|
|
|
+ var img, name;
|
|
|
+ if (card) {
|
|
|
+ img = card.querySelector('.studiou-fpp-card-thumb img');
|
|
|
+ var nameEl = card.querySelector('.studiou-fpp-card-name');
|
|
|
+ name = nameEl ? nameEl.textContent : '';
|
|
|
+ } else if (line) {
|
|
|
+ img = line.querySelector('.studiou-fpp-overview-thumb');
|
|
|
+ name = img ? (img.getAttribute('data-file-name') || img.getAttribute('alt') || '') : '';
|
|
|
+ }
|
|
|
+ if (!img) return;
|
|
|
+ var url = img.getAttribute('data-preview-url') || img.getAttribute('src');
|
|
|
+ if (!url) return;
|
|
|
+ openLightbox(url, name);
|
|
|
+ }
|
|
|
+
|
|
|
+ // (Re)bind all overview thumbs — called after initial render and after updateOverview.
|
|
|
+ function initOverviewThumbClicks() {
|
|
|
+ var nodes = document.querySelectorAll('.studiou-fpp-overview-thumb');
|
|
|
+ for (var i = 0; i < nodes.length; i++) {
|
|
|
+ bindThumbClick(nodes[i]);
|
|
|
+ }
|
|
|
+ var btns = document.querySelectorAll('.studiou-fpp-overview-enlarge');
|
|
|
+ for (var j = 0; j < btns.length; j++) {
|
|
|
+ btns[j].onclick = onEnlargeClick;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ function initLightbox() {
|
|
|
+ $lightbox = $(
|
|
|
+ '<div class="studiou-fpp-lightbox" role="dialog" aria-modal="true" style="display:none;">' +
|
|
|
+ '<button type="button" class="studiou-fpp-lightbox-close" aria-label="' + escAttr(i18n.close || 'Close') + '">×</button>' +
|
|
|
+ '<div class="studiou-fpp-lightbox-inner">' +
|
|
|
+ '<img class="studiou-fpp-lightbox-img" alt="" />' +
|
|
|
+ '<div class="studiou-fpp-lightbox-caption"></div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>'
|
|
|
+ );
|
|
|
+ $('body').append($lightbox);
|
|
|
+
|
|
|
+ // Enlarge button — primary, reliable opener. Delegated on document so newly
|
|
|
+ // rendered cards and overview lines pick it up automatically.
|
|
|
+ $(document).on('click', '.studiou-fpp-card-enlarge, .studiou-fpp-overview-enlarge', function (e) {
|
|
|
+ onEnlargeClick.call(this, e);
|
|
|
+ });
|
|
|
|
|
|
- $img.attr('src', imageUrl).removeAttr('srcset').removeAttr('sizes');
|
|
|
- var $link = $img.closest('a');
|
|
|
- if ($link.length) $link.attr('href', imageUrl);
|
|
|
+ // Use native capture-phase listener so theme/plugin handlers that stopPropagation
|
|
|
+ // on <img> clicks (common in gallery-lightbox plugins) can't swallow us. Target the
|
|
|
+ // .studiou-fpp-card-thumb wrapper, not just the <img>, so any click inside the
|
|
|
+ // thumbnail — including padding around the image — opens the preview.
|
|
|
+ document.addEventListener('click', function (ev) {
|
|
|
+ var target = ev.target;
|
|
|
+ if (!target || !target.closest) return;
|
|
|
+
|
|
|
+ // Ignore clicks on interactive controls (remove button, progress text, etc.)
|
|
|
+ if (target.closest('button, input, select, textarea, a')) return;
|
|
|
+
|
|
|
+ var cardThumb = target.closest('.studiou-fpp-card-thumb');
|
|
|
+ if (cardThumb) {
|
|
|
+ var card = cardThumb.closest('.studiou-fpp-card');
|
|
|
+ if (!card || card.classList.contains('studiou-fpp-card-uploading')) return;
|
|
|
+ var img = cardThumb.querySelector('img');
|
|
|
+ if (!img) return;
|
|
|
+ ev.preventDefault();
|
|
|
+ ev.stopPropagation();
|
|
|
+ var nameEl = card.querySelector('.studiou-fpp-card-name');
|
|
|
+ openLightbox(
|
|
|
+ img.getAttribute('data-preview-url') || img.getAttribute('src'),
|
|
|
+ nameEl ? nameEl.textContent : ''
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var overviewImg = target.closest('.studiou-fpp-overview-thumb');
|
|
|
+ if (overviewImg) {
|
|
|
+ ev.preventDefault();
|
|
|
+ ev.stopPropagation();
|
|
|
+ openLightbox(
|
|
|
+ overviewImg.getAttribute('data-preview-url') || overviewImg.getAttribute('src'),
|
|
|
+ overviewImg.getAttribute('data-file-name') || overviewImg.getAttribute('alt') || ''
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }, true);
|
|
|
+
|
|
|
+ // Close: × button, backdrop click, ESC key
|
|
|
+ $lightbox.on('click', '.studiou-fpp-lightbox-close', closeLightbox);
|
|
|
+ $lightbox.on('click', function (e) {
|
|
|
+ if (e.target === this) closeLightbox();
|
|
|
+ });
|
|
|
+ $(document).on('keydown.studiouFppLightbox', function (e) {
|
|
|
+ if (e.key === 'Escape' && $lightbox && $lightbox.is(':visible')) {
|
|
|
+ closeLightbox();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function openLightbox(url, caption) {
|
|
|
+ if (!url) return;
|
|
|
+ // Fallback: if the overlay DOM somehow failed to initialize, at least open the
|
|
|
+ // preview in a new tab so the button is never a no-op.
|
|
|
+ if (!$lightbox || !$lightbox.length) {
|
|
|
+ window.open(url, '_blank', 'noopener');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $lightbox.find('.studiou-fpp-lightbox-img').attr('src', url).attr('alt', caption || '');
|
|
|
+ $lightbox.find('.studiou-fpp-lightbox-caption').text(caption || '');
|
|
|
+ $lightbox.css('display', 'flex');
|
|
|
+ $('body').addClass('studiou-fpp-lightbox-open');
|
|
|
}
|
|
|
|
|
|
- function restoreProductGallery() {
|
|
|
- if (!originalGalleryImages.src) return;
|
|
|
+ function closeLightbox() {
|
|
|
+ if (!$lightbox) return;
|
|
|
+ $lightbox.hide();
|
|
|
+ $lightbox.find('.studiou-fpp-lightbox-img').attr('src', '');
|
|
|
+ $('body').removeClass('studiou-fpp-lightbox-open');
|
|
|
+ }
|
|
|
|
|
|
+ function restoreHeroImage() {
|
|
|
+ if (!originalGallery.src) return;
|
|
|
var selectors = [
|
|
|
'.woocommerce-product-gallery__image img',
|
|
|
'.product .wp-post-image',
|
|
|
@@ -244,87 +776,89 @@
|
|
|
'.entry-summary img.attachment-woocommerce_thumbnail',
|
|
|
'.product-gallery img:first'
|
|
|
];
|
|
|
-
|
|
|
var $img = null;
|
|
|
for (var i = 0; i < selectors.length; i++) {
|
|
|
$img = $(selectors[i]).first();
|
|
|
if ($img.length) break;
|
|
|
}
|
|
|
if (!$img || !$img.length) return;
|
|
|
-
|
|
|
- $img.attr('src', originalGalleryImages.src);
|
|
|
- if (originalGalleryImages.srcset) $img.attr('srcset', originalGalleryImages.srcset);
|
|
|
- if (originalGalleryImages.sizes) $img.attr('sizes', originalGalleryImages.sizes);
|
|
|
- if (originalGalleryImages.href) $img.closest('a').attr('href', originalGalleryImages.href);
|
|
|
-
|
|
|
- originalGalleryImages = {};
|
|
|
+ $img.attr('src', originalGallery.src);
|
|
|
+ if (originalGallery.srcset) $img.attr('srcset', originalGallery.srcset);
|
|
|
+ if (originalGallery.sizes) $img.attr('sizes', originalGallery.sizes);
|
|
|
+ if (originalGallery.href) $img.closest('a').attr('href', originalGallery.href);
|
|
|
+ originalGallery = {};
|
|
|
}
|
|
|
|
|
|
// ==========================================
|
|
|
- // UI helpers
|
|
|
+ // Helpers
|
|
|
// ==========================================
|
|
|
- function uploadFailed(message) {
|
|
|
- isUploading = false;
|
|
|
- $progress.hide();
|
|
|
- $dropzone.show();
|
|
|
- showMessage(message, 'error');
|
|
|
- $fileInput.val('');
|
|
|
+ function showMessage(text, type) {
|
|
|
+ var cls = type === 'error' ? 'studiou-fpp-msg-error'
|
|
|
+ : type === 'success' ? 'studiou-fpp-msg-success'
|
|
|
+ : 'studiou-fpp-msg-info';
|
|
|
+ $messages.html('<div class="studiou-fpp-msg ' + cls + '">' + escHtml(text) + '</div>');
|
|
|
}
|
|
|
|
|
|
- function showPreview(thumbnailUrl, fileName) {
|
|
|
- if (thumbnailUrl) {
|
|
|
- $previewImg.attr('src', thumbnailUrl).show();
|
|
|
- } else {
|
|
|
- $previewImg.hide();
|
|
|
- }
|
|
|
- $previewName.text(fileName);
|
|
|
- $preview.show();
|
|
|
- $dropzone.hide();
|
|
|
+ function clearMessages() { $messages.empty(); }
|
|
|
+
|
|
|
+ function escHtml(str) {
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.appendChild(document.createTextNode(str == null ? '' : String(str)));
|
|
|
+ return div.innerHTML;
|
|
|
}
|
|
|
|
|
|
- function removeUploadedFile() {
|
|
|
- if (!uploadedFileRecordId) return;
|
|
|
+ function escAttr(str) {
|
|
|
+ return String(str == null ? '' : str).replace(/"/g, '"');
|
|
|
+ }
|
|
|
|
|
|
- $.ajax({
|
|
|
- url: studiouWcfppFront.ajaxUrl,
|
|
|
- type: 'POST',
|
|
|
- data: {
|
|
|
- action: 'studiou_wcfpp_remove_upload',
|
|
|
- nonce: studiouWcfppFront.nonce,
|
|
|
- file_record_id: uploadedFileRecordId
|
|
|
- },
|
|
|
- success: function () {
|
|
|
- resetUpload();
|
|
|
- }
|
|
|
- });
|
|
|
+ function formatI18n(tpl, val) {
|
|
|
+ if (!tpl) return String(val);
|
|
|
+ return tpl.replace('%d', val).replace('%s', val);
|
|
|
}
|
|
|
|
|
|
- function resetUpload() {
|
|
|
- uploadedAttachmentId = null;
|
|
|
- uploadedFileRecordId = null;
|
|
|
- clearSession();
|
|
|
- restoreProductGallery();
|
|
|
- $preview.hide();
|
|
|
- $previewImg.attr('src', '');
|
|
|
- $previewName.text('');
|
|
|
- $dropzone.show();
|
|
|
- $fileInput.val('');
|
|
|
- clearMessages();
|
|
|
+ function formatPercent(p) {
|
|
|
+ var n = parseFloat(p) || 0;
|
|
|
+ var str = n.toFixed(2).replace(/\.?0+$/, '');
|
|
|
+ return str + ' %';
|
|
|
}
|
|
|
|
|
|
- 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 formatPrice(amount) {
|
|
|
+ return formatPriceHtml(amount);
|
|
|
}
|
|
|
|
|
|
- function clearMessages() {
|
|
|
- $messages.empty();
|
|
|
+ // Plain-text price (no HTML) — used for <option> labels where spans aren't rendered
|
|
|
+ function formatPricePlain(amount) {
|
|
|
+ var c = studiouWcfppFront.currency || {};
|
|
|
+ var decimals = parseInt(c.decimals, 10); if (isNaN(decimals)) decimals = 2;
|
|
|
+ var decSep = c.decimalSeparator || '.';
|
|
|
+ var thouSep = c.thousandSeparator || ',';
|
|
|
+ var fmt = c.priceFormat || '%1$s%2$s';
|
|
|
+ var symbol = c.symbol || '';
|
|
|
+ var fixed = parseFloat(amount).toFixed(decimals);
|
|
|
+ var parts = fixed.split('.');
|
|
|
+ var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thouSep);
|
|
|
+ var decPart = parts.length > 1 ? parts[1] : '';
|
|
|
+ var numStr = decPart ? intPart + decSep + decPart : intPart;
|
|
|
+ // strip any HTML tags that might arrive from priceFormat (defensive)
|
|
|
+ return fmt.replace('%1$s', symbol).replace('%2$s', numStr).replace(/<[^>]*>/g, '');
|
|
|
}
|
|
|
|
|
|
- function escHtml(str) {
|
|
|
- var div = document.createElement('div');
|
|
|
- div.appendChild(document.createTextNode(str));
|
|
|
- return div.innerHTML;
|
|
|
+ function formatPriceHtml(amount) {
|
|
|
+ var c = studiouWcfppFront.currency || {};
|
|
|
+ var decimals = parseInt(c.decimals, 10); if (isNaN(decimals)) decimals = 2;
|
|
|
+ var decSep = c.decimalSeparator || '.';
|
|
|
+ var thouSep = c.thousandSeparator || ',';
|
|
|
+ var fmt = c.priceFormat || '%1$s%2$s';
|
|
|
+ var symbol = c.symbol || '';
|
|
|
+ var fixed = parseFloat(amount).toFixed(decimals);
|
|
|
+ var parts = fixed.split('.');
|
|
|
+ var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thouSep);
|
|
|
+ var decPart = parts.length > 1 ? parts[1] : '';
|
|
|
+ var numStr = decPart ? intPart + decSep + decPart : intPart;
|
|
|
+ var sym = '<span class="woocommerce-Price-currencySymbol">' + symbol + '</span>';
|
|
|
+ return '<span class="woocommerce-Price-amount amount">' +
|
|
|
+ fmt.replace('%1$s', sym).replace('%2$s', numStr) +
|
|
|
+ '</span>';
|
|
|
}
|
|
|
});
|
|
|
})(jQuery);
|