jQuery(document).ready(function($) {
$('.compress-image-button').click(function() {
var imageId = $(this).data('image-id');
var originalSize = $(this).data('original-size');
var imageType = $(this).data('image-type');
const supportedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
if (!supportedTypes.includes(imageType.toLowerCase())) {
alert('Image format not supported. Supported formats: JPEG, JPG, PNG, and WebP.');
return;
}
const modalHtml = `
<div id="compress-image-modal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10000; width: 300px; text-align: center;">
<p>Original Size: ${originalSize} KB</p>
<p>Compressed Size: <span id="compressed-size">Calculating...</span> KB</p>
<button id="replace-compress" data-image-id="${imageId}" disabled style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: not-allowed;">Compress and Replace</button>
<button id="cancel-compress" style="padding: 10px 20px; background-color: #a00; color: white; border: none; border-radius: 5px; margin-left: 10px; cursor: pointer;">Cancel</button>
</div>
<div id="modal-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999;"></div>
`;
$('body').append(modalHtml);
const $modal = $('#compress-image-modal');
const $overlay = $('#modal-overlay');
const $replaceButton = $('#replace-compress');
const $compressedSizeDisplay = $('#compressed-size');
$modal.fadeIn();
// Trigger size calculation
$.post(spro_compress.ajax_url, {
action: 'softaculous_pro_calculate_compressed_size',
image_id: imageId,
softaculous_pro_security: spro_compress.nonce
}, function(response) {
if (response.success) {
var compressedSize = response.data.compressed_size;
$('#compressed-size').text(compressedSize);
if (Math.round(compressedSize) >= Math.round(originalSize)) {
alert('The image cannot be compressed further.');
$modal.add($overlay).fadeOut().remove();
}else {
// Update the compressed size in the modal and enable the replace button
$compressedSizeDisplay.text(response.data.compressed_size);
$replaceButton.prop('disabled', false).css('cursor', 'pointer');
// Handle "Compress and Replace" (replaces the current image in place)
$replaceButton.click(function() {
var replaceImageId = $(this).data('image-id');
$.post(spro_compress.ajax_url, {
action: 'softaculous_pro_replace_compressed_image',
image_id: replaceImageId,
softaculous_pro_security: spro_compress.nonce
}, function(replaceResponse) {
if (replaceResponse.success) {
alert('Image has been compressed and replaced.');
$('#compress-image-modal, #modal-overlay').fadeOut().remove();
location.reload();
} else {
alert('Compression and replacement failed: ' + replaceResponse.data);
}
});
});
}
}else {
alert('Size calculation failed: ' + response.data);
}
});
$('#cancel-compress').click(function() {
$('#compress-image-modal, #modal-overlay').fadeOut().remove();
});
});
});