Add X13 WebP module for image conversion to next-generation formats
- 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.
This commit is contained in:
327
modules/x13webp/views/js/x13filemanager.admin.js
Normal file
327
modules/x13webp/views/js/x13filemanager.admin.js
Normal file
@@ -0,0 +1,327 @@
|
||||
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');
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user