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.
328 lines
10 KiB
JavaScript
328 lines
10 KiB
JavaScript
let pause_othres_conversion = true;
|
|
|
|
$(document).ready(() => {
|
|
|
|
$('.list-files:not(.is-loading)').on('click', 'li.dir:not(.is-loaded) p', function (e) {
|
|
|
|
if ($(e.target).is('input')) return;
|
|
$('.list-files').addClass('is-loading');
|
|
$(this).addClass('loading');
|
|
ajaxFileManager($(this).parent());
|
|
|
|
});
|
|
|
|
$('.list-files:not(.is-loading)').on('click', 'li.dir.is-loaded > p', function (e) {
|
|
|
|
if ($(e.target).is('input')) return;
|
|
$(this).parent().toggleClass(['is-open', 'is-closed']);
|
|
toggleState($(this).find('.state'), $(this).parent().hasClass('is-open'));
|
|
|
|
});
|
|
|
|
$('.list-files').on('change', 'input[type="checkbox"][name="others_item"]', function () {
|
|
|
|
if ($(this).prop('checked')) {
|
|
|
|
$('.btn-item-start-others').attr('disabled', false);
|
|
|
|
} else {
|
|
|
|
$('.btn-item-start-others').attr('disabled', $('input[name="others_item"]:checked:not(:disabled)').length ? false : true);
|
|
|
|
}
|
|
|
|
const li = $(this).closest('li');
|
|
|
|
if (li.length && li.hasClass('dir')) {
|
|
|
|
li.find('input:not(:disabled)').prop('checked', $(this).prop('checked'));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('.btn-item-start-others').on('click',function(){
|
|
|
|
actionStartConversion();
|
|
|
|
let items = [];
|
|
|
|
$('.list-files').find('input[name="others_item"]:checked:not(:disabled)').each(function(){
|
|
items.push($(this).val())
|
|
});
|
|
|
|
ajaxGenerateOthersItem(items)
|
|
|
|
});
|
|
|
|
$('.btn-item-pause-others').on('click', function () {
|
|
|
|
actionPauseConversion();
|
|
|
|
});
|
|
|
|
$('.btn-item-refresh-others').on('click', function(){
|
|
|
|
$.ajax({
|
|
url: x13webp_refresh_others_url,
|
|
method: 'POST',
|
|
}).done((resp) => {
|
|
|
|
if(resp.length){
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if(content.error){
|
|
|
|
alert(content.error);
|
|
actionPauseConversion();
|
|
|
|
} else if(content.items.length){
|
|
|
|
resetProgressItem();
|
|
actionStartConversion();
|
|
|
|
$(content.items).each(function(){
|
|
const input = getInputByValue(this)
|
|
|
|
if (input.length) input.attr('disabled', false);
|
|
|
|
});
|
|
|
|
ajaxGenerateOthersItem(content.items);
|
|
|
|
} else {
|
|
|
|
alert(x13webp_unexpected_error);
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const getInputByValue = (val) => {
|
|
return $('.list-files input[value="' + val + '"]');
|
|
}
|
|
|
|
const resetProgressItem = () => {
|
|
|
|
const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
|
|
progress_bar.attr('aria-valuenow', 0);
|
|
const totals = $('#tab-x13wepb-others').find('.images-done-total');
|
|
totals.find('.done').text(0);
|
|
progress_bar.parent().removeClass('is-done')
|
|
progress_bar.find('.progressbar-inner').text(`0%`);
|
|
progress_bar.css('width', '0%');
|
|
|
|
}
|
|
|
|
const actionStartConversion = () => {
|
|
|
|
pause_othres_conversion = false;
|
|
$('#form-tabs').find('li:not(.active)').tooltip('enable').find('a').addClass('disabled');
|
|
$('.btn-item-start-others').addClass('hidden').attr('disabled', true).parent().tooltip('disable');
|
|
$('.btn-item-refresh-others').addClass('hidden').attr('disabled', true);
|
|
$('.btn-item-pause-others').removeClass('hidden').attr('disabled', false);
|
|
|
|
}
|
|
|
|
const actionPauseConversion = () => {
|
|
|
|
pause_othres_conversion = true;
|
|
$('#form-tabs').find('li:not(.active)').tooltip('disable').find('a').removeClass('disabled');
|
|
const disable_button = $('input[name="others_item"]:checked:not(:disabled)').length ? false : true;
|
|
$('.btn-item-start-others').removeClass('hidden').attr('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
|
|
$('.btn-item-refresh-others').removeClass('hidden').attr('disabled', false);
|
|
$('.btn-item-pause-others').addClass('hidden').attr('disabled', true);
|
|
|
|
}
|
|
|
|
const ajaxGenerateOthersItem = (items) => {
|
|
|
|
if (!pause_othres_conversion && items.length) {
|
|
|
|
$.ajax({
|
|
url: x13webp_generate_others_item_url,
|
|
method: 'POST',
|
|
data: {
|
|
item: items[0]
|
|
}
|
|
}).done((resp) => {
|
|
|
|
if(resp.length){
|
|
const output = JSON.parse(resp);
|
|
if(output && !output.error){
|
|
|
|
if (output.dir) {
|
|
|
|
if(output.complete){
|
|
|
|
const input = getInputByValue(items[0]);
|
|
if (input.length) input.attr('disabled', true).parent().addClass('disabled');
|
|
items.splice(0, 1);
|
|
|
|
} else {
|
|
|
|
const input = getInputByValue(output.image);
|
|
if (input.length) input.attr('disabled', true).parent().addClass('disabled');
|
|
|
|
const index = items.indexOf(output.image);
|
|
if (index !== -1) {
|
|
items.splice(index, 1);
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
const input = getInputByValue(items[0]);
|
|
if (input.length) input.attr('disabled', true).parent().addClass('disabled');
|
|
|
|
items.splice(0, 1);
|
|
|
|
}
|
|
|
|
const done = $('#tab-x13wepb-others').find('.images-done-total .done').text();
|
|
if(!output.complete){
|
|
addOthersLog(`<p class="log-li ${output.warning ? 'has-warning' : ''}">${output.object_name} <strong>#${parseInt(done) + 1}</strong>: <span class="log-format">WebP [${output.image}]</span> <span class="log log-${output.success ? 'success' : 'danger'}">${output.warning ? output.warning : x13webp_success_alert}</span></p>`, output.warning);
|
|
}
|
|
|
|
increaseProgressItem()
|
|
|
|
if (items.length) {
|
|
ajaxGenerateOthersItem(items)
|
|
} else {
|
|
actionPauseConversion()
|
|
}
|
|
|
|
if ($('#x13webp-delete-all-webp').hasClass('hidden')) {
|
|
|
|
$('#x13webp-delete-all-webp').removeClass('hidden').siblings('.help-block').addClass('hidden');
|
|
|
|
}
|
|
|
|
} else {
|
|
actionPauseConversion()
|
|
addOthersLog(`<p class="log-li"><span class="log log-danger">${output.error}</span></p>`, true);
|
|
}
|
|
} else {
|
|
actionPauseConversion()
|
|
addOthersLog(`<p class="log-li"><span class="log log-danger">${x13webp_unexpected_error}</span></p>`, true);
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const addOthersLog = (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 increaseProgressItem = () => {
|
|
|
|
const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
|
|
progress_bar.attr('aria-valuenow', parseInt(progress_bar.attr('aria-valuenow')) + 1);
|
|
const percent = parseFloat(progress_bar.attr('aria-valuenow') * 100 / progress_bar.attr('aria-valuemax')).toFixed(2);
|
|
|
|
const totals = $('#tab-x13wepb-others').find('.images-done-total');
|
|
|
|
totals.find('.done').text(progress_bar.attr('aria-valuenow'));
|
|
|
|
if (totals.find('.total').text() == totals.find('.done').text() && !progress_bar.parent().hasClass('is-done')) {
|
|
|
|
progress_bar.parent().addClass('is-done')
|
|
|
|
}
|
|
progress_bar.find('.progressbar-inner').text(`${percent}%`);
|
|
progress_bar.css('width', percent + '%');
|
|
|
|
}
|
|
|
|
const toggleState = (state, open) => $(state).find('i').toggleClass('icon-folder').toggleClass('icon-folder-open');
|
|
|
|
const ajaxFileManager = (li) => {
|
|
|
|
li.addClass(['is-open', 'is-loaded']);
|
|
|
|
$.ajax({
|
|
url: x13webp_file_manager_url,
|
|
method: 'POST',
|
|
data: {
|
|
file: li.data('file')
|
|
}
|
|
}).done((resp) => {
|
|
|
|
if (resp.length) {
|
|
|
|
const content = JSON.parse(resp);
|
|
|
|
if (content.error) {
|
|
|
|
alert(content.error);
|
|
|
|
} else if (content.tree.length) {
|
|
|
|
toggleState(li.find('.state'), false);
|
|
|
|
let ul = '<ul>';
|
|
|
|
$(content.tree).each(function(){
|
|
ul += `<li data-file="${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>`;
|
|
}
|
|
if (li.find('p input').prop('checked') && $('.btn-item-start-others').attr('disabled') == true) {
|
|
$('.btn-item-start-others').attr('disabled', false);
|
|
}
|
|
const props = this.exists ?
|
|
this.type == 'dir' ?
|
|
'disabled' :
|
|
'checked disabled':
|
|
li.find('p input').prop('checked') ?
|
|
'checked' :
|
|
'';
|
|
|
|
ul += `<input type="checkbox" name="others_item" value="${li.data('file')}/${this.name}" ${props}>`;
|
|
ul += this.name;
|
|
ul += `</p>`;
|
|
ul += `</li>`;
|
|
|
|
})
|
|
|
|
ul += '</ul>';
|
|
|
|
li.append(ul);
|
|
|
|
li.find('.dir p').tooltip('enable');
|
|
|
|
$('.list-files').removeClass('is-loading');
|
|
|
|
} else {
|
|
|
|
li.append('<ul class="empty"><li>..</li></ul>');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.find('.loading').removeClass('loading');
|
|
});
|
|
|
|
}
|