Jacek Pyziak
9003eede2d
- Implemented the X13Webp class with core functionalities for converting images to WebP format. - Added support for different PHP versions and defined constants for versioning. - Included translation strings for various user interface elements and messages. - Created XML file for module versioning.
1095 lines
32 KiB
JavaScript
1095 lines
32 KiB
JavaScript
///////////////// GENERATOR ////////////////
|
|
let pause_conversion = false;
|
|
let refreshIntervalId = false;
|
|
let item_type = false;
|
|
let process_done = false;
|
|
let process_stop = false;
|
|
let item_done = false;
|
|
let conversion_started = false;
|
|
let delete_all_process = false;
|
|
let regeneration_warning_started = false;
|
|
let current_formats = [];
|
|
const ajaxGetProgressItem = (tab, link_item) => {
|
|
|
|
if (link_item.data('fieldset') == 'others') {
|
|
|
|
initFileManager(tab);
|
|
|
|
}
|
|
|
|
$.ajax({
|
|
url: x13webp_totals_url,
|
|
method: 'POST',
|
|
data: {
|
|
type: link_item.data('fieldset')
|
|
}
|
|
}).done((resp) => {
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if (!content.error) {
|
|
|
|
let all_items_done = true;
|
|
|
|
tab.find('.images-done-total .total').text(content.output.total);
|
|
tab.find('.progress-bar').attr('aria-valuemax', content.output.total);
|
|
|
|
if (content.output.types.length) {
|
|
|
|
$(content.output.types).each(function () {
|
|
|
|
const wrapper = tab.find('tr[data-image_type="' + this.name + '"]');
|
|
|
|
all_items_done = processinitProgressItems(this, wrapper, content.output.total);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
processinitProgressAll(tab, content)
|
|
|
|
}
|
|
|
|
link_item.addClass('is-loaded');
|
|
|
|
tab.find('.bottom-button-conversion-progress button').attr('disabled', false);
|
|
if (all_items_done) {
|
|
|
|
tab.find('.bottom-button-conversion-progress .btn-start-conversion').prop('disabled', true).parent().tooltip('enable')
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
tab.append('<div class="alert alert-danger">' + content.error + '</div>');
|
|
|
|
}
|
|
|
|
|
|
});
|
|
}
|
|
|
|
const processinitProgressItems = (output, wrapper, total) => {
|
|
|
|
const formats = ['jpg', 'webp'];
|
|
|
|
$(formats).each(function(){
|
|
|
|
wrapper.find('.images-done-total[data-format="'+this+'"] .done').text(output.done[this]).parent().addClass('active').siblings('.preloader').removeClass('active');
|
|
|
|
const progress = wrapper.find('.progress[data-format="'+this+'"]');
|
|
|
|
progress.find('.progress-bar').css('width', output.percent[this] + '%');
|
|
progress.find('.progressbar-inner').text(output.percent[this] + '%');
|
|
progress.find('.progress-bar').attr('aria-valuenow', output.done[this]);
|
|
progress.css('display', 'block');
|
|
|
|
if (output.done[this] == total) {
|
|
|
|
progress.addClass('is-done');
|
|
|
|
}
|
|
|
|
})
|
|
|
|
wrapper.find('.progress-button button').prop('disabled', false);
|
|
|
|
let disable_button = true;
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
if (output.done[item] != total){
|
|
disable_button = false;
|
|
}
|
|
|
|
});
|
|
|
|
if (disable_button) {
|
|
|
|
wrapper.find('.progress-button .btn-item-start').prop('disabled', true).parent().tooltip('enable');
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
}
|
|
|
|
}
|
|
const processinitProgressAll = (tab, content) => {
|
|
|
|
const formats = ['jpg', 'webp'];
|
|
$(formats).each(function () {
|
|
|
|
const progress = tab.find('.progress[data-format="' + this + '"]');
|
|
|
|
progress.find('.progress-bar').attr('aria-valuenow', content.output.done[this]);
|
|
progress.find('.progress-bar').css('width', content.output.percent[this] + '%');
|
|
progress.find('.progressbar-inner').text(content.output.percent[this] + '%');
|
|
|
|
tab.find('.images-done-total[data-format="'+this+'"] .done').text(content.output.done[this]);
|
|
|
|
if (content.output.done[this] == content.output.total) {
|
|
|
|
progress.find('.progress-bar').parent().addClass('is-done');
|
|
|
|
}
|
|
});
|
|
|
|
tab.find('.progress-button button').prop('disabled', false);
|
|
tab.find('.progress').css('display', 'block');
|
|
|
|
if (content.output.done.webp == content.output.done.jpg == content.output.total) {
|
|
|
|
tab.find('.progress-button .btn-item-start').prop('disabled', true).parent().tooltip('enable');
|
|
|
|
}
|
|
|
|
tab.find('.preloader').removeClass('active');
|
|
tab.find('.images-done-total').addClass('active');
|
|
|
|
}
|
|
|
|
const processItemStart = (wrapper) => {
|
|
|
|
disableTabs();
|
|
disableSelect();
|
|
process_stop = true;
|
|
pause_conversion = false;
|
|
conversion_started = true;
|
|
wrapper.closest('table').find('.progress-button button').prop('disabled', true);
|
|
wrapper.closest('table').find('.progress-button-wrapper').tooltip('enable');
|
|
wrapper.closest('table').find('.progress-button .tooltip-wrapper').tooltip('disable');
|
|
wrapper.find('.btn-item-pause').removeClass('hidden');
|
|
wrapper.find('.btn-item-refresh').addClass('hidden');
|
|
wrapper.find('button:not(.btn-item-start)').prop('disabled', false);
|
|
wrapper.closest('form').find('.bottom-button-conversion-progress button').prop('disabled', true);
|
|
wrapper.closest('form').find('.bottom-buttons-wrapper').tooltip('enable');
|
|
|
|
}
|
|
|
|
const processItemStop = (wrapper, stop = false) => {
|
|
|
|
enableTabs();
|
|
enableSelect();
|
|
pause_conversion = true;
|
|
conversion_started = false;
|
|
wrapper.find('.btn-item-pause').addClass('hidden');
|
|
wrapper.find('.btn-item-refresh').removeClass('hidden');
|
|
wrapper.find('.btn-item-start').removeClass('hidden');
|
|
wrapper.closest('table').find('.progress-button-wrapper').tooltip('disable');
|
|
|
|
let all_items_done = true;
|
|
|
|
wrapper.closest('form').find('.btn-item-refresh').prop('disabled', false);
|
|
|
|
wrapper.closest('table').find('tr[data-image_type]').each(function(){
|
|
|
|
let disable_button = true;
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
if ($(this).find('.progress[data-format="' + item + '"]').length && !$(this).find('.progress[data-format="' + item + '"]').hasClass('is-done')) {
|
|
|
|
disable_button = false;
|
|
all_items_done = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$(this).find('.progress-button .btn-item-start').attr('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
|
|
|
|
});
|
|
|
|
if (all_items_done) {
|
|
wrapper.closest('form').find('.btn-start-conversion').prop('disabled', true);
|
|
wrapper.closest('form').find('.btn-refresh-conversion').prop('disabled', false);
|
|
} else {
|
|
wrapper.closest('form').find('.bottom-button-conversion-progress button').prop('disabled', false);
|
|
}
|
|
|
|
wrapper.closest('form').find('.bottom-buttons-wrapper').tooltip('disable');
|
|
|
|
if (stop) window.location.reload();
|
|
|
|
}
|
|
|
|
const processAllItemsStart = (wrapper) => {
|
|
|
|
disableTabs();
|
|
disableSelect();
|
|
pause_conversion = false;
|
|
conversion_started = true;
|
|
wrapper.closest('form').find('.progress-button button').attr('disabled', true);
|
|
wrapper.closest('form').find('.progress-button .btn-item-start').parent().tooltip('disable');
|
|
wrapper.closest('form').find('.progress-button-wrapper').tooltip('enable');
|
|
wrapper.find('.btn-start-conversion').addClass('hidden').parent().tooltip('disable');
|
|
wrapper.find('.btn-pause-conversion').removeClass('hidden');
|
|
wrapper.find('.btn-refresh-conversion').addClass('hidden');
|
|
|
|
}
|
|
const processAllItemsStop = (wrapper, stop = false) => {
|
|
|
|
enableTabs();
|
|
enableSelect();
|
|
pause_conversion = true;
|
|
conversion_started = false;
|
|
wrapper.closest('form').find('.progress-button button').attr('disabled', false);
|
|
wrapper.closest('form').find('.progress-button-wrapper').tooltip('disable');
|
|
wrapper.find('.btn-start-conversion').removeClass('hidden').attr('disabled', false);
|
|
wrapper.find('.btn-pause-conversion').addClass('hidden');
|
|
wrapper.find('.btn-refresh-conversion').removeClass('hidden').attr('disabled', false);
|
|
|
|
wrapper.closest('form').find('tr[data-image_type]').each(function () {
|
|
|
|
let disable_button = true;
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
if ($(this).find('.progress[data-format="' + item + '"]').length && !$(this).find('.progress[data-format="' + item + '"]').hasClass('is-done')) {
|
|
|
|
disable_button = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$(this).find('.progress-button .btn-item-start').attr('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
|
|
|
|
|
|
});
|
|
|
|
if (stop) window.location.reload();
|
|
|
|
}
|
|
|
|
const processAllItemsDone = () => {
|
|
|
|
$('.tab-pane.active .bottom-button-conversion-progress .btn-start-conversion').prop('disabled', true).parent().tooltip('enable');
|
|
$('.tab-pane.active .progress-button .btn-item-start').prop('disabled', true).parent().tooltip('enable');
|
|
|
|
}
|
|
|
|
const disableTabs = () => $('#form-tabs').find('li:not(.active)').tooltip('enable').find('a').addClass('disabled');
|
|
const enableTabs = () => {
|
|
if ($('#x13webp_image_format').val() == 'jpg') {
|
|
$('#form-tabs').find('li:not(.active)').tooltip('disable').find('a.has_types').removeClass('disabled');
|
|
} else {
|
|
$('#form-tabs').find('li:not(.active)').tooltip('disable').find('a').removeClass('disabled');
|
|
}
|
|
}
|
|
|
|
const disableSelect = () => $('#x13webp_image_format').addClass('disabled').prop('disabled', true);
|
|
const enableSelect = () => {
|
|
if ($('#form-tabs li.active a').hasClass('has_types')){
|
|
$('#x13webp_image_format').removeClass('disabled').prop('disabled', false);
|
|
}
|
|
}
|
|
|
|
|
|
const ajaxImageConversion = (image_type, type, done, total, progress_bar) => {
|
|
|
|
if (!pause_conversion) {
|
|
|
|
$.ajax({
|
|
url: x13webp_conversion_url,
|
|
method: 'POST',
|
|
data: {
|
|
image_type,
|
|
type,
|
|
done: done,
|
|
total: total
|
|
}
|
|
|
|
}).done((resp) => {
|
|
|
|
let log;
|
|
let log_warning = false;
|
|
|
|
if (resp) {
|
|
|
|
const resp_data = JSON.parse(resp);
|
|
|
|
let has_errors = false;
|
|
let is_complete = true;
|
|
|
|
let output_done = {}
|
|
|
|
$(resp_data).each(function(){
|
|
|
|
output_done[this.format] = this.done;
|
|
|
|
if (this.error) {
|
|
|
|
log = `<p class="log-li has-warning"><span class="log log-danger">${this.object_name} <strong>${this.id_object ? '#'+this.id_object : '--'} ${this.format} [${this.format}]</strong>: ${this.error}</span></p>`;
|
|
log_warning = true;
|
|
has_errors = true;
|
|
|
|
addImageLog(log, log_warning);
|
|
|
|
// Reload current active tab
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
// Add log
|
|
log = `<p class="log-li"><span class="log log-success">-- Reloading current tab --</span></p>`;
|
|
addImageLog(log, false);
|
|
log = `<p class="log-li"><span class="log log-success">-- Retrying conversion --</span></p>`;
|
|
addImageLog(log, false);
|
|
ajaxImageConversion(image_type, type, output_done, total, progress_bar);
|
|
|
|
} else {
|
|
|
|
$(progress_bar[this.format]).attr('aria-valuenow', this.done).css('width', this.percent + '%').find('.progressbar-inner').text(this.percent + '%');
|
|
$(progress_bar[this.format]).closest('tr').find('.images-done-total[data-format="'+this.format+'"] .done').text(this.done);
|
|
|
|
if (this.complete) {
|
|
|
|
$(progress_bar[this.format]).parent().addClass('is-done');
|
|
|
|
} else {
|
|
|
|
is_complete = false;
|
|
}
|
|
if(this.id_object){
|
|
log = `<p class="log-li ${this.warning ? 'has-warning' : ''}">
|
|
${this.object_name}
|
|
<strong>#${this.id_object}</strong>:
|
|
<span class="log-format">${this.format == 'webp' ? 'WebP' : 'JPG'} [${image_type == 'all' ? this.image : image_type}]</span>
|
|
<span class="log log-${this.success ? 'success' : 'danger'}">${this.warning ? this.warning : x13webp_success_alert}</span>
|
|
</p>`;
|
|
|
|
log_warning = this.warning;
|
|
|
|
addImageLog(log, log_warning);
|
|
}
|
|
|
|
if (this.format == 'webp' && $('#x13webp-delete-all-webp').hasClass('hidden')) {
|
|
|
|
$('#x13webp-delete-all-webp').removeClass('hidden').siblings('.help-block').addClass('hidden');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if(is_complete){
|
|
|
|
process_done = true;
|
|
|
|
if (process_stop) {
|
|
processItemStop($('.tab-pane.active').find('tr[data-image_type="'+image_type+'"]'));
|
|
processAllItemsStop($('.tab-pane.active').find('tr[data-image_type="'+image_type+'"]'));
|
|
}
|
|
|
|
} else {
|
|
|
|
ajaxImageConversion(image_type, type, output_done, total, progress_bar);
|
|
|
|
}
|
|
|
|
if(has_errors){
|
|
|
|
process_stop = true;
|
|
|
|
if (refreshIntervalId) clearInterval(refreshIntervalId);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
addImageLog(`<p class="log-li"><span class="log log-danger">${x13webp_unexpected_error}</span></p>`, true);
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
const startConversionAll = () => {
|
|
|
|
process_done = false;
|
|
|
|
process_stop = false;
|
|
|
|
const rows = $('.tab-pane.active .progress-item-table tbody').find('tr[data-image_type]')
|
|
|
|
if (refreshIntervalId) clearInterval(refreshIntervalId);
|
|
|
|
rows.each((k, v) => {
|
|
|
|
let item_is_done = true;
|
|
|
|
let items = {};
|
|
let done = {};
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
const progress = $(v).find('.progress[data-format="'+item+'"]');
|
|
|
|
if (progress.length && !progress.hasClass('is-done')) {
|
|
item_is_done = false;
|
|
}
|
|
done[item] = progress.find('.progress-bar').attr('aria-valuenow');
|
|
items[item] = progress.find('.progress-bar');
|
|
|
|
});
|
|
|
|
const total = $(v).find('.progress-bar').attr('aria-valuemax');
|
|
if (!item_is_done) {
|
|
|
|
refreshIntervalId = setInterval(intervalProgressBar, 1000);
|
|
|
|
ajaxImageConversion(
|
|
$(v).data('image_type'),
|
|
item_type,
|
|
done,
|
|
total,
|
|
items
|
|
);
|
|
|
|
return false;
|
|
|
|
} else if (rows.length == k + 1) {
|
|
|
|
process_stop = true;
|
|
processAllItemsStop($('.tab-pane.active .bottom-button-conversion-progress'));
|
|
processAllItemsDone();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const cleanProgress = (wrapper) => {
|
|
|
|
const image_type = wrapper.data('image_type');
|
|
const type = wrapper.find('.progress-button').data('type');
|
|
current_formats.forEach((item) => {
|
|
progressObjectClean(wrapper, image_type, item);
|
|
});
|
|
if ($('#x13webp_image_format').val() != 'jpg'){
|
|
ajaxCleanProgress(image_type, type);
|
|
}
|
|
|
|
}
|
|
|
|
const progressObjectClean = (wrapper, image_type, format = false) => {
|
|
|
|
const progress_bar = wrapper.find(`.progress[data-image_type="${image_type}"]${format ? '[data-format="'+format+'"]' : ''} .progress-bar`);
|
|
progress_bar.attr('aria-valuenow', 0).css('width', 0).parent().removeClass('is-done').find('.progressbar-inner').text('0%');
|
|
wrapper.find(`.images-done-total${format ? '[data-format="'+format+'"]' : ''} .done`).text('0');
|
|
}
|
|
|
|
|
|
const ajaxCleanProgress = (image_type, type) => {
|
|
|
|
$.ajax({
|
|
url: x13webp_clean_progress_item,
|
|
method: 'POST',
|
|
async: false,
|
|
data: {
|
|
image_type,
|
|
type
|
|
}
|
|
}).done((resp) => {
|
|
|
|
if (resp.length) {
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if (content.error) {
|
|
|
|
alert(content.error);
|
|
pause_conversion = true;
|
|
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
const addImageLog = (log, warning = false) => {
|
|
|
|
if ($('.x13webp-log-info').parent().hasClass('hidden')) $('.x13webp-log-info').parent().removeClass('hidden')
|
|
if (log) $('.x13webp-log-info').prepend(log);
|
|
if (warning && $('#x13webp-log-warning').hasClass('hidden')) $('#x13webp-log-warning').removeClass('hidden');
|
|
|
|
|
|
}
|
|
|
|
const intervalProgressBar = () => {
|
|
|
|
if (process_done){
|
|
startConversionAll();
|
|
}
|
|
}
|
|
|
|
const ajaxUpdateConfig = (name, val) => {
|
|
|
|
$.ajax({
|
|
url: x13webp_update_config,
|
|
method: 'POST',
|
|
data: {
|
|
name,
|
|
val
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
const updateCurrentFormats = () => {
|
|
|
|
const current_format = $('#x13webp_image_format').val();
|
|
|
|
switch(current_format){
|
|
case 'all':
|
|
current_formats = ['jpg', 'webp'];
|
|
break;
|
|
case 'jpg':
|
|
current_formats = ['jpg'];
|
|
break;
|
|
case 'webp':
|
|
current_formats = ['webp'];
|
|
break;
|
|
}
|
|
|
|
};
|
|
|
|
const updateButtonsActivity = () => {
|
|
|
|
$('tr[data-image_type]').each(function(){
|
|
|
|
let disable_button = true;
|
|
|
|
current_formats.forEach((format) => {
|
|
|
|
const done = $(this).find('.images-done-total[data-format="'+format+'"] .done').text();
|
|
const total = $(this).find('.images-done-total[data-format="'+format+'"] .total').text();
|
|
|
|
if (done != total) {
|
|
disable_button = false;
|
|
}
|
|
|
|
});
|
|
|
|
$(this).find('.progress-button .btn-item-start').prop('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const updateTabsActivity = () => {
|
|
|
|
if ($('#x13webp_image_format').val() == 'jpg') {
|
|
|
|
$('#form-tabs').find('li:not(.active)').find('a:not(.has_types)').addClass('disabled');
|
|
|
|
} else {
|
|
|
|
$('#form-tabs').find('li:not(.active)').find('a');
|
|
enableTabs();
|
|
|
|
}
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
|
|
$('a.scrollto').on('click', function(e){
|
|
|
|
e.preventDefault();
|
|
$([document.documentElement, document.body]).animate({
|
|
scrollTop: $($(this).attr('href')).offset().top - 150
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
$('#form-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
if (!$(this).hasClass('has_types')){
|
|
$('#x13webp_image_format').prop('disabled', true);
|
|
} else {
|
|
$('#x13webp_image_format').prop('disabled', false);
|
|
}
|
|
})
|
|
|
|
updateCurrentFormats()
|
|
|
|
$('#x13webp_image_format').on('change', function () {
|
|
|
|
ajaxUpdateConfig($(this).attr('name'), $(this).val());
|
|
|
|
$('.progress-item-table tr').removeClass().addClass('tr-format-' + $(this).val());
|
|
|
|
updateCurrentFormats()
|
|
updateButtonsActivity()
|
|
updateTabsActivity()
|
|
|
|
});
|
|
|
|
$('.btn-item-start').on('click', function (e) {
|
|
|
|
// Reload current active tab
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
|
|
if (delete_all_process || regeneration_warning_started) {
|
|
|
|
alert(x13webp_process_started_alert);
|
|
e.preventDefault();
|
|
|
|
} else {
|
|
const image_type = $(this).closest('tr').data('image_type');
|
|
const type = $(this).closest('.progress-button').data('type');
|
|
|
|
let items = {};
|
|
let done = {};
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
const progress_bar = $(this).closest('tr').find('.progress[data-format="' + item + '"] .progress-bar');
|
|
done[item] = progress_bar.attr('aria-valuenow');
|
|
items[item] = progress_bar;
|
|
|
|
});
|
|
|
|
const total = $(this).closest('tr').find('.progress-bar').attr('aria-valuemax');
|
|
|
|
if(!$(this).closest('tr').find('.progress-bar').hasClass('is-done')){
|
|
processItemStart($(this).closest('.progress-button'));
|
|
ajaxImageConversion(image_type, type, done, total, items);
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
$('.btn-item-pause').on('click', function () {
|
|
|
|
processItemStop($(this).closest('tr'), false);
|
|
|
|
});
|
|
|
|
$('.btn-item-refresh').on('click', function (e) {
|
|
|
|
// Reload current active tab
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
|
|
if (delete_all_process || regeneration_warning_started) {
|
|
|
|
alert(x13webp_process_started_alert);
|
|
e.preventDefault()
|
|
|
|
} else {
|
|
|
|
const wrapper = $(this).closest('tr');
|
|
const image_type = $(this).closest('.progress-button').data('image_type');
|
|
const type = $(this).closest('.progress-button').data('type');
|
|
|
|
if(!confirm(x13webp_refresh_confirm_text)){
|
|
|
|
e.preventDefault();
|
|
return;
|
|
|
|
} else {
|
|
|
|
processItemStart(wrapper);
|
|
|
|
cleanProgress(wrapper);
|
|
|
|
current_formats.forEach((item) => {
|
|
wrapper.find('.images-done-total[data-format="'+item+'"] .done').text('0');
|
|
})
|
|
|
|
let items = {};
|
|
let done = {};
|
|
|
|
current_formats.forEach((item) => {
|
|
|
|
const progress_bar = $(this).closest('tr').find('.progress[data-format="' + item + '"] .progress-bar');
|
|
progress_bar.attr('aria-valuenow', 0).css('width', 0).parent().removeClass('is-done').find('.progressbar-inner').text('0%');
|
|
done[item] = progress_bar.attr('aria-valuenow');
|
|
items[item] = progress_bar;
|
|
|
|
});
|
|
|
|
const total = $(this).closest('tr').find('.progress-bar').attr('aria-valuemax');
|
|
|
|
ajaxImageConversion(image_type, type, done, total, items);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
|
|
$('body').on('shown.bs.tab', 'a[data-toggle="tab"]:not(.is-loaded)', function (e) {
|
|
|
|
ajaxGetProgressItem($($(this).attr('href')), $(this));
|
|
|
|
})
|
|
|
|
$('body').on('click', '#form-tabs a.disabled', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
|
|
$('.btn-start-conversion').on('click', function (e) {
|
|
|
|
// Reload current active tab
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
|
|
if (delete_all_process || regeneration_warning_started) {
|
|
|
|
alert(x13webp_process_started_alert);
|
|
e.preventDefault()
|
|
|
|
} else {
|
|
|
|
let allow_start = false;
|
|
|
|
$(this).closest('form').find('.progress').each(function(){
|
|
|
|
if(!$(this).hasClass('is-done')){
|
|
|
|
allow_start = true;
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if(allow_start) {
|
|
const parent = $(this).closest('.bottom-button-conversion-progress');
|
|
processAllItemsStart(parent);
|
|
item_type = parent.data('type');
|
|
startConversionAll();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
$('.btn-pause-conversion').on('click', function () {
|
|
|
|
processAllItemsStop($(this).closest('.bottom-button-conversion-progress'));
|
|
|
|
});
|
|
|
|
$('.btn-refresh-conversion').on('click', function (e) {
|
|
|
|
// Reload current active tab
|
|
ajaxGetProgressItem($($('#form-tabs li.active a').attr('href')), $('#form-tabs li.active a'))
|
|
|
|
if (delete_all_process || regeneration_warning_started) {
|
|
|
|
alert(x13webp_process_started_alert);
|
|
e.preventDefault()
|
|
|
|
} else {
|
|
|
|
let is_something_generated = false;
|
|
|
|
$(this).closest('form').find('.progress-bar').each(function(){
|
|
|
|
if($(this).attr('aria-valuenow') != 0){
|
|
|
|
is_something_generated = true;
|
|
return;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (is_something_generated && !confirm(x13webp_refresh_confirm_text)) {
|
|
|
|
e.preventDefault();
|
|
return;
|
|
|
|
} else {
|
|
|
|
const parent = $(this).closest('.bottom-button-conversion-progress');
|
|
processAllItemsStart(parent);
|
|
|
|
$(this).closest('form').find('table tr[data-image_type]').each(function(){
|
|
|
|
cleanProgress($(this));
|
|
|
|
});
|
|
|
|
item_type = parent.data('type');
|
|
startConversionAll();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#x13webp-log-warning').on('click', function(){
|
|
|
|
const text = $(this).data('text');
|
|
$(this).data('text', $(this).text()).text(text);
|
|
|
|
if ($(this).data('toggle') == 'warnings'){
|
|
$(this).data('toggle', 'all');
|
|
$('.x13webp-log-info').addClass('warnings-only');
|
|
} else {
|
|
$(this).data('toggle', 'warnings');
|
|
$('.x13webp-log-info').removeClass('warnings-only');
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
///////////// CLEANER FORM //////////////////
|
|
|
|
|
|
const doAjaxDeleteAllWebp = () => {
|
|
|
|
$.ajax({
|
|
url: x13webp_delete_all_webp_url,
|
|
method: 'POST'
|
|
}).done((resp) => {
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if (content.complete) {
|
|
|
|
alert(content.alert);
|
|
delete_all_process = false;
|
|
$('#x13webp-delete-all-wrapper').find('.help-block').removeClass('hidden');
|
|
|
|
} else if (content.error) {
|
|
|
|
alert(content.error);
|
|
window.location.reload();
|
|
|
|
} else {
|
|
|
|
addDeleteLog(content.alert, content.warning, content.type_name, content.image_type);
|
|
|
|
const tr = $(`#tab-x13wepb-${content.type.indexOf('theme') != -1 ? 'theme' : content.type}`).find(`tr[data-image_type="${content.image_type}"]`);
|
|
tr.find('.btn-item-start').attr('disabled', false).parent().tooltip('disable');
|
|
$('.btn-start-conversion').attr('disabled', false);
|
|
progressObjectClean(tr, content.image_type, 'webp');
|
|
doAjaxDeleteAllWebp();
|
|
|
|
if(content.type == 'others'){
|
|
$('#tab-x13wepb-others .list-files li:not(.dir) input[name="others_item"]').attr('disabled', false).prop('checked', false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const addDeleteLog = (alert, warning, type_name, image_type) => {
|
|
|
|
let log;
|
|
|
|
log = `<p class="log-li">`;
|
|
|
|
if (alert) {
|
|
|
|
log += '' + type_name + ' <strong>' + (image_type == 'all' ? '' : image_type) + '</strong>: <span class="log log-success"> ' + alert + '</span>';
|
|
|
|
} else if (warning) {
|
|
|
|
log += '' + type_name + ' <strong>' + (image_type == 'all' ? '' : image_type) + '</strong>: <span class="log log-warning"> ' + warning + '</span>';
|
|
|
|
} else {
|
|
|
|
log += '' + type_name + ' <strong>' + (image_type == 'all' ? '' : image_type) + '</strong>: <span class="log log-error"> ' + x13webp_error_wrong +'</span>';
|
|
|
|
}
|
|
|
|
log += `</p>`;
|
|
|
|
$('#x13webp-logs-delete-all').prepend(log).removeClass('hidden');
|
|
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
|
|
$('.x13webp-button-confirm').on('click', function (e) {
|
|
|
|
if (conversion_started) {
|
|
|
|
alert(x13webp_conversion_started_alert);
|
|
e.preventDefault();
|
|
|
|
} else if (confirm($(this).data('confirm'))) {
|
|
|
|
if ($(this).attr('id') == 'x13webp-delete-all-webp'){
|
|
|
|
delete_all_process = true;
|
|
|
|
doAjaxDeleteAllWebp();
|
|
$(this).addClass('hidden');
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
e.preventDefault();
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
$('#regenerate-warnings').on('click', function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
if (conversion_started) {
|
|
|
|
alert(x13webp_conversion_started_alert);
|
|
|
|
} else if (delete_all_process || regeneration_warning_started) {
|
|
|
|
alert(x13webp_process_started_alert);
|
|
e.preventDefault()
|
|
|
|
} else {
|
|
|
|
ajaxRegenerateWarnings();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
const ajaxRegenerateWarnings = (id_x13webp = false) => {
|
|
|
|
regeneration_warning_started = true;
|
|
|
|
$.ajax({
|
|
url: x13webp_regenerate_warnings,
|
|
method: 'POST',
|
|
data: {
|
|
id_x13webp
|
|
}
|
|
}).done(resp => {
|
|
|
|
if(resp){
|
|
const output = JSON.parse(resp);
|
|
|
|
if(output.error){
|
|
|
|
log = `<p class="log-li has-warning"><span class="log log-danger">${output.object_name} <strong>${output.id_object ? '#'+output.id_object : '--'} ${output.format} [${output.format}]</strong>: ${output.error}</span></p>`;
|
|
regeneration_warning_started = false;
|
|
addImageLog(log, true);
|
|
|
|
} else if(output.complete){
|
|
|
|
if(!output.warning_exists){
|
|
|
|
$('#regenerate-warnings').hide();
|
|
|
|
}
|
|
regeneration_warning_started = false;
|
|
alert(x13webp_alert_done);
|
|
|
|
} else {
|
|
|
|
log = `<p class="log-li ${output.warning ? 'has-warning' : ''}">
|
|
${output.object_name}:
|
|
${output.id_object != 0 ? '<strong>#'+output.id_object+'</strong>: ' : ''}
|
|
<span class="log-format">${output.format == 'webp' ? 'WebP' : 'JPG'} [${output.image_type == 'all' ? output.image : output.image_type}]</span>
|
|
<span class="log log-${output.success ? 'success' : 'danger'}">${output.warning ? output.warning : 'success'}</span>
|
|
</p>`;
|
|
|
|
log_warning = this.warning;
|
|
|
|
addImageLog(log, log_warning);
|
|
|
|
ajaxRegenerateWarnings(output.id_x13webp);
|
|
|
|
}
|
|
} else {
|
|
regeneration_warning_started = false;
|
|
addImageLog(`<p class="log-li"><span class="log log-danger">${x13webp_unexpected_error}</span></p>`, true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const initFileManager = (tab) => {
|
|
|
|
$.ajax({
|
|
url: x13webp_file_manager_url,
|
|
}).done(resp => {
|
|
|
|
if (resp.length) {
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if (content.error) {
|
|
|
|
alert(content.error);
|
|
|
|
} else if (content.tree.length) {
|
|
|
|
let ul = '<ul>';
|
|
|
|
$(content.tree).each(function () {
|
|
ul += `<li data-file="${this.name}" ${this.type == 'dir' ? 'class="dir"' : ''}>`;
|
|
ul += `<p ${this.exists && this.type == 'dir' ? 'data-toggle="tooltip" title="'+x13webp_empty_folder+'"' : ''}>`;
|
|
|
|
if (this.type == 'dir') {
|
|
ul += `<span class="state"><i class="icon-folder"></i></span>`;
|
|
}
|
|
|
|
let props = '';
|
|
if(this.exists){
|
|
props += ' disabled';
|
|
if(this.type != 'dir'){
|
|
props +=' checked';
|
|
}
|
|
}
|
|
|
|
ul += `<input type="checkbox" name="others_item" value="${this.name}" ${props}>`;
|
|
ul += this.name;
|
|
ul += `</p>`;
|
|
ul += `</li>`;
|
|
|
|
})
|
|
|
|
ul += '</ul>';
|
|
|
|
$('.list-files').html(ul);
|
|
|
|
$('.list-files').removeClass('is-loading');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$(tab).find('.list-files').removeClass('hidden');
|
|
$(tab).find('.dir p').tooltip('enable');
|
|
$(tab).find('.btn-item-start-others').attr('disabled', true).parent().tooltip('enable');
|
|
|
|
});
|
|
|
|
}
|