550 lines
19 KiB
JavaScript
550 lines
19 KiB
JavaScript
import autosize from '/admin/static/js/autosize.min.js';
|
|
|
|
var $container = $('[data-container=translations]');
|
|
|
|
var initCKEditor = function (elName, customOptions) {
|
|
if (!customOptions) {
|
|
customOptions = {};
|
|
}
|
|
var options = {
|
|
customConfig: '/admin/static/js/ckeditor.js',
|
|
'autoGrow_maxHeight': 0,
|
|
'autoGrow_onStartup': true,
|
|
toolbar: 'BasicTable',
|
|
filebrowserBrowseUrl: '/_ckfinder/browse/',
|
|
filebrowserImageBrowseUrl: '/_ckfinder/browse/?rsrcType=Obrázky',
|
|
filebrowserUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Soubory',
|
|
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Obrázky'
|
|
};
|
|
options = $.extend(options, customOptions);
|
|
CKEDITOR.replace(elName, options);
|
|
};
|
|
|
|
var init = function($container) {
|
|
// target ckeditor init
|
|
$container.find('[data-text-type=target]').each(function(index, el) {
|
|
var $el = $(el);
|
|
$el.data('initial', $el.val()).removeAttr('disabled');
|
|
if ($el.is('textarea[data-init=ckeditor]') && !(el.getAttribute('name') in CKEDITOR.instances)) {
|
|
initCKEditor(el.getAttribute('name'));
|
|
} else if ($el.is('textarea')) {
|
|
autosize($el);
|
|
}
|
|
$el.closest('[data-type=objectRow]').find('[data-acn-ajax=save]').removeAttr('disabled');
|
|
});
|
|
// source ckeditor init
|
|
$container.find('[data-text-type=source]').each(function(index, el) {
|
|
var $el = $(el);
|
|
if ($el.is('textarea[data-init=ckeditor]') && !(el.getAttribute('name') in CKEDITOR.instances)) {
|
|
initCKEditor(el.getAttribute('name'), {removePlugins: 'toolbar',readOnly: true});
|
|
} else if ($el.is('textarea')) {
|
|
autosize($el);
|
|
}
|
|
});
|
|
// file uploader init
|
|
$container.find('[data-translations-file-upload]').each(function(index, el) {
|
|
var $el = $(el);
|
|
var uploaderOptions = {
|
|
multiple: false,
|
|
template: 'qq-simple-thumbnails-template',
|
|
thumbnails: {
|
|
placeholders: {
|
|
waitingPath: '/admin/static/fineuploader/placeholders/waiting-generic.png',
|
|
notAvailablePath: '/admin/static/fineuploader/placeholders/not_available-generic.png'
|
|
}
|
|
},
|
|
request: {
|
|
inputName: 'imageTranslation-'+$el.data('unique-key'),
|
|
endpoint: 'launch.php?s=list.php&type='+$el.data('list-type')+'&uniqueKey='+$el.data('unique-key')+'&acn=uploadImage&sourceLanguage='+$el.data('source-language')+'&language='+$el.data('language')+'&objectID='+$el.data('object-id')+'&sourceColumn='+$el.data('source-column')
|
|
},
|
|
deleteFile: {
|
|
inputName: 'imageTranslation-'+$el.data('unique-key'),
|
|
enabled: true,
|
|
method: 'POST',
|
|
endpoint: 'launch.php?s=list.php&type='+$el.data('list-type')+'&uniqueKey='+$el.data('unique-key')+'&acn=deleteImage&sourceLanguage='+$el.data('source-language')+'&language='+$el.data('language')+'&objectID='+$el.data('object-id')+'&sourceColumn='+$el.data('source-column')
|
|
},
|
|
blobProperties: {
|
|
name: 'filename'
|
|
},
|
|
scaling: {
|
|
sendOriginal: false,
|
|
includeExif: true,
|
|
//defaultType: 'image/png',
|
|
sizes: [
|
|
{
|
|
// name: 'full',
|
|
maxSize: 4000
|
|
}
|
|
]
|
|
},
|
|
validation: {
|
|
itemLimit: 1,
|
|
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'svg', 'webp', 'avif']
|
|
},
|
|
maxConnections: 1,
|
|
};
|
|
$el.find('#translations-uploader-'+$el.data('unique-key')+'-'+$el.data('object-id'))
|
|
.fineUploader(uploaderOptions).on('allComplete', function(event, success, failed) { });
|
|
|
|
$el.find('[data-uploader-file-delete]').click(function () {
|
|
var objectID = $(this).data('uploader-file-delete');
|
|
|
|
$(this).text('Probíhá smazání...');
|
|
|
|
$.ajax({
|
|
method: 'POST',
|
|
data: { objectID: $el.data('object-id'), sourceColumn: $el.data('source-column') },
|
|
url: 'launch.php?s=list.php&type='+$el.data('list-type')+'&uniqueKey='+$el.data('unique-key')+'&acn=deleteImage&sourceLanguage='+$el.data('source-language')+'&language='+$el.data('language')+'&objectID='+$el.data('object-id')+'&sourceColumn='+$el.data('source-column')
|
|
}).done(function(result) {
|
|
var obj = JSON.parse(result);
|
|
if (obj.success == true) {
|
|
var $file = $(document).find('[data-file-uid="' + objectID + '"]');
|
|
$file.detach();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
};
|
|
init($container);
|
|
|
|
$container.on('click', '[data-acn=copyText]', function (event) {
|
|
event.preventDefault();
|
|
var $this = $(this);
|
|
if ($this.is('disabled')) {
|
|
return;
|
|
}
|
|
var $row = $this.closest('[data-type=columnRow]');
|
|
var source = $row.find('[data-text-type=source]').text();
|
|
var $target = $row.find('[data-text-type=target]');
|
|
if ($target.is('[data-init=ckeditor]')) {
|
|
var $source = $row.find('[data-text-type=source]');
|
|
if ($source.is('[data-init=ckeditor]')) {
|
|
var sourceEditor = CKEDITOR.instances[$source.attr('name')];
|
|
source = sourceEditor.getData();
|
|
} else {
|
|
source = $row.find('[data-text-type=source]').html();
|
|
}
|
|
|
|
var editor = CKEDITOR.instances[$target.attr('name')];
|
|
editor.setData(source);
|
|
editor.container.focus();
|
|
} else if ($target.is('select')) {
|
|
$target.find('option').each(function (){
|
|
$(this).removeAttr('selected');
|
|
if ($(this).text() == source) {
|
|
$(this).attr('selected', true);
|
|
}
|
|
});
|
|
$target.trigger('chosen:updated');
|
|
} else {
|
|
$target.val(source).focus();
|
|
// trigger autosize.update on textareas
|
|
if ($target.is('textarea')) {
|
|
autosize.update($target);
|
|
}
|
|
}
|
|
});
|
|
|
|
var changeLoadingState = function($objectRow, loadingEnabled) {
|
|
loadingEnabled = loadingEnabled === undefined;
|
|
var $btn = $objectRow.find('[data-acn-ajax=save]');
|
|
|
|
$btn.attr('data-loading', loadingEnabled);
|
|
|
|
$objectRow.find('[data-acn=copyText]').attr('disabled', loadingEnabled);
|
|
$objectRow.find('[data-text-type=target]').attr('disabled', loadingEnabled);
|
|
$objectRow.find('[data-text-type=target][data-init=ckeditor]').each(function(index, el) {
|
|
CKEDITOR.instances[$(el).attr('name')].setReadOnly(loadingEnabled);
|
|
});
|
|
|
|
if (loadingEnabled) {
|
|
$objectRow.find('[data-type=columnRow]').addClass('disabled');
|
|
if (!$btn.is('[data-original-text]')) {
|
|
$btn.attr('data-original-text', $btn.text());
|
|
}
|
|
$btn.attr('title', $btn.attr('data-progress-title'))
|
|
.html($('<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" data-type="translationSaveBtnLoader"></span>'));
|
|
} else {
|
|
$objectRow.find('[data-type=columnRow]').removeClass('disabled');
|
|
$btn.attr('title', '').text($btn.attr('data-original-text'))
|
|
.find('[data-type=translationSaveBtnLoader]').remove();
|
|
}
|
|
};
|
|
|
|
$container.on('click', '[data-acn-ajax=save]', function(event) {
|
|
event.preventDefault();
|
|
var $btn = $(this);
|
|
if ($btn.is('[data-loading=true]')) {
|
|
return;
|
|
}
|
|
var $objectRow = $btn.closest('[data-type=objectRow]');
|
|
var data = {
|
|
'sourceLanguage': $btn.attr('data-source-language')
|
|
};
|
|
changeLoadingState($objectRow);
|
|
$objectRow.find('[data-text-type=target]').each(function(index, el) {
|
|
var $el = $(el);
|
|
var value;
|
|
if ($el.is('[data-init=ckeditor]')) {
|
|
value = CKEDITOR.instances[$el.attr('name')].getData();
|
|
} else {
|
|
value = $el.val();
|
|
}
|
|
if ($el.data('initial').toString() !== value) {
|
|
data[$el.attr('name')] = value;
|
|
}
|
|
});
|
|
if (Object.keys(data).length <= 1) {
|
|
// no data has changed, so only disable loading state
|
|
changeLoadingState($objectRow, false);
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: $btn.attr('data-save-url'),
|
|
type: 'POST',
|
|
data: data,
|
|
success: function(jsonResponse, textStatus, jqXHR) {
|
|
if (jsonResponse.status) {
|
|
$objectRow.find('[data-type=objectLastModified]').text(jsonResponse.lastModified);
|
|
$objectRow.find('[data-type=objectAdminEmail]').text(jsonResponse.adminEmail);
|
|
$objectRow.find('[data-text-type=source]').each(function(index, el) {
|
|
var $el = $(el);
|
|
var column = jsonResponse.translateColumns[$el.attr('data-column')],
|
|
html = jsonResponse.row[column['sourceName']];
|
|
|
|
if (column['custom_data']) {
|
|
if ($el.attr('data-column') == 'json_content') {
|
|
return; // Block texts
|
|
}
|
|
html = html[$el.attr('data-column')];
|
|
}
|
|
|
|
if ('select' in column) {
|
|
html = column['select'][html];
|
|
}
|
|
|
|
$(el).html(html);
|
|
});
|
|
$objectRow.find('[data-text-type=target]').each(function(index, el) {
|
|
var $el = $(el);
|
|
var columnConfig = jsonResponse.translateColumns[$el.attr('data-column')],
|
|
value = jsonResponse.row[columnConfig['name']];
|
|
|
|
if (columnConfig['custom_data']) {
|
|
if ($el.attr('data-column') == 'json_content') {
|
|
$(el).data('initial', $el.is('[data-init=ckeditor]')
|
|
? CKEDITOR.instances[$el.attr('name')].getData()
|
|
: $(el).val()
|
|
);
|
|
return; // Block texts
|
|
}
|
|
|
|
value = value ? value[$el.attr('data-column')] : null;
|
|
}
|
|
|
|
value = value === null ? '' : value;
|
|
$(el).val(value).data('initial', value ? value : '');
|
|
if ($el.is('[data-init=ckeditor]')) {
|
|
CKEDITOR.instances[$el.attr('name')].setData(value);
|
|
}
|
|
});
|
|
} else {
|
|
window.alert(jsonResponse.msg);
|
|
}
|
|
|
|
changeLoadingState($objectRow, false);
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
window.alert('Chyba: '+errorThrown);
|
|
changeLoadingState($objectRow, false);
|
|
}
|
|
});
|
|
});
|
|
|
|
$container.on('click', '[data-acn-ajax=delete]', function(event) {
|
|
event.preventDefault();
|
|
if (!makeSure(this)) {
|
|
return;
|
|
}
|
|
|
|
var $btn = $(this);
|
|
var data = {
|
|
'object_id': $btn.attr('data-object-id')
|
|
};
|
|
var $objectRow = $btn.closest('[data-type=objectRow]');
|
|
|
|
$.ajax({
|
|
url: $btn.attr('data-delete-url'),
|
|
type: 'POST',
|
|
data: data,
|
|
success: function(jsonResponse, textStatus, jqXHR) {
|
|
if (jsonResponse.status) {
|
|
$objectRow.find('[data-type=objectLastModified]').text('');
|
|
$objectRow.find('[data-type=objectAdminEmail]').text('');
|
|
$objectRow.find('[data-text-type=target]').each(function(index, el) {
|
|
var $el = $(el);
|
|
$(el).val('').data('initial', '');
|
|
if ($el.is('[data-init=ckeditor]')) {
|
|
CKEDITOR.instances[$el.attr('name')].setData('');
|
|
}
|
|
});
|
|
} else {
|
|
window.alert(jsonResponse.msg);
|
|
}
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
window.alert('Chyba: '+errorThrown);
|
|
}
|
|
});
|
|
});
|
|
|
|
var ajaxTranslate = function ($btn, url, only_empty = false, no_focus = false) {
|
|
var $objectRow = $btn.closest('[data-type=columnRow]');
|
|
|
|
var $source = $objectRow.find('[data-text-type=source]');
|
|
var source = $source.text();
|
|
var $target = $objectRow.find('[data-text-type=target]');
|
|
var target = $target.val();
|
|
var type = 'text';
|
|
|
|
let data = {};
|
|
|
|
if ($target.is('[data-init=ckeditor]')) {
|
|
type = 'richtext';
|
|
if ($target.is('[data-init=ckeditor]')) {
|
|
var targetEditor = CKEDITOR.instances[$target.attr('name')];
|
|
target = targetEditor.getData();
|
|
} else {
|
|
target = $target.html();
|
|
}
|
|
|
|
if ($source.is('[data-init=ckeditor]')) {
|
|
var sourceEditor = CKEDITOR.instances[$source.attr('name')];
|
|
source = sourceEditor.getData();
|
|
} else {
|
|
source = $source.html();
|
|
}
|
|
}
|
|
if ($target.is('[data-init=link]')) {
|
|
type = 'link';
|
|
data.object_id = $source.data('link-object-id');
|
|
data.object_type = $source.data('link-object-type');
|
|
}
|
|
|
|
var translate = true;
|
|
if (only_empty && target != '') {
|
|
translate = false;
|
|
}
|
|
|
|
if (source && translate) {
|
|
data.sourceText = source;
|
|
data.field_type = type;
|
|
|
|
return $.ajax({
|
|
url: url,
|
|
type: 'POST',
|
|
data: data,
|
|
success: function (jsonResponse, textStatus, jqXHR) {
|
|
if (!jsonResponse.error) {
|
|
var translation = jsonResponse['translatedText'];
|
|
if ($target.is('[data-init=ckeditor]')) {
|
|
var editor = CKEDITOR.instances[$target.attr('name')];
|
|
editor.setData(translation);
|
|
if (!no_focus) {
|
|
editor.container.focus();
|
|
}
|
|
}
|
|
else {
|
|
$target.val(translation);
|
|
if (!no_focus) {
|
|
$target.focus();
|
|
}
|
|
}
|
|
} else {
|
|
window.alert(jsonResponse.error);
|
|
}
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
window.alert('Chyba: ' + errorThrown);
|
|
}
|
|
});
|
|
}
|
|
|
|
return new $.ajax();
|
|
};
|
|
|
|
$container.on('click', '[data-acn-ajax=translate]', function(event) {
|
|
event.preventDefault();
|
|
|
|
var $btn = $(this);
|
|
|
|
ajaxTranslate($btn, $btn.attr('data-save-url'));
|
|
});
|
|
|
|
$container.on('click', '[data-acn=loadSubObjects]', function(event) {
|
|
event.preventDefault();
|
|
var $btn = $(this);
|
|
var $subObjectsWrapper = $btn.closest('[data-type=subObjectsWrapper]');
|
|
var $subObjects = $subObjectsWrapper.find('#' + $btn.data('toggle'));
|
|
var $buttonsContainer = $subObjectsWrapper.find('[data-type=subObjectsToggleButtons]');
|
|
if ($subObjectsWrapper.data('working')) {
|
|
return;
|
|
}
|
|
$subObjectsWrapper.data('working', true);
|
|
$buttonsContainer.find('> li').removeClass('active');
|
|
if ($btn.data('active') && $btn.data('initialized')) {
|
|
$subObjects.slideUp(300, function() {
|
|
$btn.removeData('active');
|
|
$subObjectsWrapper.removeData('working');
|
|
});
|
|
} else if ($btn.data('initialized')) {
|
|
$btn.closest('li').addClass('active');
|
|
var displayObjects = function() {
|
|
$subObjectsWrapper.find('[data-acn=loadSubObjects]').removeData('active');
|
|
$subObjects.fadeIn(300, function() {
|
|
$btn.data('active', true);
|
|
$subObjectsWrapper.removeData('working');
|
|
});
|
|
};
|
|
if ($subObjectsWrapper.find('[data-type=subObjects]:visible').length) {
|
|
$subObjectsWrapper.find('[data-type=subObjects]:visible').fadeOut(300, displayObjects);
|
|
} else {
|
|
displayObjects();
|
|
}
|
|
} else if (!$btn.data('active')) {
|
|
$btn.closest('li').addClass('active');
|
|
var loadObjects = function() {
|
|
$subObjectsWrapper.find('[data-acn=loadSubObjects]').removeData('active');
|
|
var $loader = $('<li class="pull-right"><span class="glyphicon glyphicon-cog glyphicon-refresh-animate subObjectsLoader"></span></li>');
|
|
$buttonsContainer.append($loader);
|
|
$subObjects.load($btn.data('url') + ' .translationsContainer > *', function () {
|
|
$subObjects.fadeIn(300, function() {
|
|
// TODO: Remove the timeout if ckeditor is initialized on demand
|
|
setTimeout(function() {
|
|
init($($subObjects));
|
|
$buttonsContainer.find('.subObjectsLoader').remove();
|
|
$btn.data('initialized', true);
|
|
$btn.data('active', true);
|
|
$subObjectsWrapper.removeData('working');
|
|
}, 50);
|
|
});
|
|
});
|
|
};
|
|
if ($subObjectsWrapper.find('[data-type=subObjects]:visible').length) {
|
|
$subObjectsWrapper.find('[data-type=subObjects]').fadeOut(300, loadObjects);
|
|
} else {
|
|
loadObjects();
|
|
}
|
|
} else {
|
|
$subObjectsWrapper.removeData('working');
|
|
}
|
|
});
|
|
|
|
// mass ajax translation
|
|
var isTranslating = false;
|
|
var massAjaxTranslate = function ($wrapper, $button) {
|
|
var buttonOriginalText = $button.text(),
|
|
$translateButtons = $wrapper.find('[data-acn-ajax="translate"]').toArray(),
|
|
translateButtonsLength = $translateButtons.length;
|
|
|
|
var getTranslatingText = function (actualIndex, maxIndex) {
|
|
return 'Překládám ' + actualIndex + ' z ' + maxIndex + '...';
|
|
},
|
|
iterateButtons = function ($translateButtons, index) {
|
|
if ($translateButtons.length == 0) {
|
|
$button.text(buttonOriginalText);
|
|
isTranslating = false;
|
|
return true;
|
|
}
|
|
|
|
var btn = $translateButtons.shift(),
|
|
$btn = $(btn);
|
|
|
|
ajaxTranslate($btn, $btn.attr('data-save-url'), true, true).done(function () {
|
|
$button.text(getTranslatingText(index, translateButtonsLength));
|
|
iterateButtons($translateButtons, index + 1);
|
|
});
|
|
};
|
|
|
|
isTranslating = true;
|
|
iterateButtons($translateButtons, 1);
|
|
};
|
|
|
|
$container.on('click', '[data-google-translate="object"]', function () {
|
|
if (!isTranslating) {
|
|
massAjaxTranslate($(this).parents('[data-type="objectRow"]'), $(this));
|
|
}
|
|
});
|
|
|
|
$('body').on('click', '[data-google-translate="page"]', function () {
|
|
if (!isTranslating) {
|
|
massAjaxTranslate($('[data-container="translations"]'), $(this));
|
|
}
|
|
});
|
|
|
|
|
|
|
|
$('body').on('click', '[data-acn-ajax=save-all]', function(event) {
|
|
event.preventDefault();
|
|
$container.find('[data-acn-ajax=save]').trigger('click');
|
|
});
|
|
|
|
window.onbeforeunload = function() {
|
|
// check for changed fields
|
|
var unsavedChanges = false;
|
|
$container.find('[data-text-type=target]').each(function(index, el) {
|
|
var $el = $(el);
|
|
var value;
|
|
if ($el.is('textarea[data-init=ckeditor]')
|
|
&& ($el.attr('name') in CKEDITOR.instances)
|
|
) {
|
|
value = CKEDITOR.instances[$el.attr('name')].getData();
|
|
} else {
|
|
value = $el.val();
|
|
}
|
|
if ($el.data('initial').toString().trim() !== value.trim()) {
|
|
unsavedChanges = true;
|
|
return false;
|
|
}
|
|
});
|
|
if (unsavedChanges) {
|
|
return true;
|
|
}
|
|
};
|
|
|
|
$('body').on('keydown', '.targetText[maxlength]', function(event) {
|
|
if (($(this).attr('maxlength') - 20)< $(this).val().length) {
|
|
$(this).siblings('.help-block').fadeIn();
|
|
}
|
|
});
|
|
|
|
const initFilterTranslated = () => {
|
|
const $filterTranslatedRange = $('#filterTranslatedRange');
|
|
|
|
if(!$filterTranslatedRange.length){
|
|
return;
|
|
}
|
|
|
|
$('input[name=\'translated\']').on('change', function(e) {
|
|
const searchOption = $('input[name=\'translated\']:checked').val();
|
|
if (searchOption) {
|
|
$filterTranslatedRange.prop('disabled', false);
|
|
} else {
|
|
$filterTranslatedRange.prop('disabled', true);
|
|
}
|
|
$filterTranslatedRange.trigger('chosen:updated');
|
|
}).trigger('change');
|
|
|
|
const rangeCacheKey = 'translations_translated_range_' + $filterTranslatedRange.data('list-type');
|
|
$filterTranslatedRange.on('change', function() {
|
|
localStorage.setItem(rangeCacheKey, JSON.stringify($(this).val()));
|
|
});
|
|
|
|
|
|
if (Array.isArray($filterTranslatedRange.val()) && !$filterTranslatedRange.val().length) {
|
|
$filterTranslatedRange.val(JSON.parse(localStorage.getItem(rangeCacheKey)));
|
|
}
|
|
};
|
|
initFilterTranslated();
|