Initial xentral_oss_20.3.c9ffacf
This commit is contained in:
Alex
@@ -0,0 +1,50 @@
|
||||
.edittranslation {
|
||||
border: 1px dashed red;
|
||||
}
|
||||
|
||||
#ui-translation-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 100001;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 360px;
|
||||
min-height: 100px;
|
||||
border: 2px solid rgb(166, 201, 226);
|
||||
background-color: var(--body-background);
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, .33);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#ui-translation-overlay legend {
|
||||
width: 100%;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#ui-translation-overlay .line {
|
||||
margin: 0 0 5px 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
#ui-translation-item {
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
background-color: var(--body-background);
|
||||
border: 2px solid rgb(166, 201, 226);
|
||||
margin: 0 20px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, .33);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#ui-translation-item .line {
|
||||
margin: 0 0 5px 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
var WBase64 = {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=WBase64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=WBase64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}};
|
||||
|
||||
var UiTranslation = (function ($, base64) {
|
||||
|
||||
var me = {
|
||||
|
||||
storage: {
|
||||
translationModeDisabled: true,
|
||||
translationModePaused: true,
|
||||
currentTranslationElement: null,
|
||||
currentTranslationLanguage: null
|
||||
},
|
||||
|
||||
elem: {
|
||||
$translationItems: null,
|
||||
$itemOverlay: null,
|
||||
$controlOverlay: null,
|
||||
$languageSelect: null,
|
||||
$startButton: null,
|
||||
$pauseButton: null,
|
||||
$closeButton: null
|
||||
},
|
||||
|
||||
init: function () {
|
||||
me.initSpecialElements();
|
||||
|
||||
me.elem.$translationItems = $('.edittranslation');
|
||||
if (me.elem.$translationItems.length > 0) {
|
||||
me.storage.translationModeDisabled = false;
|
||||
me.storage.translationModePaused = false;
|
||||
}
|
||||
|
||||
me.initItemOverlay();
|
||||
|
||||
me.initControlOverlay();
|
||||
me.fetchLanguageList();
|
||||
|
||||
if (me.storage.translationModeDisabled === false) {
|
||||
me.resumeTranslationMode();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzungs-Overlay erstellen
|
||||
*/
|
||||
initControlOverlay: function () {
|
||||
me.elem.$controlOverlay = $('<div id="ui-translation-overlay"></div>');
|
||||
var content =
|
||||
'<fieldset>' +
|
||||
'<legend>Oberflächen-Übersetzung</legend>' +
|
||||
'<div class="line"><label>Sprache auswählen: ' +
|
||||
'<select id="ui-translation-language-select"></select>' +
|
||||
'</label></div>' +
|
||||
'<div class="line">';
|
||||
if (me.storage.translationModeDisabled) {
|
||||
content += '<a id="ui-translation-start-button" class="button" href="#">Übersetzung starten</a>';
|
||||
} else {
|
||||
content += '<a id="ui-translation-pause-button" class="button" href="#">Übersetzung pausieren</a>';
|
||||
content += '<a id="ui-translation-close-button" class="button" href="#">Übersetzung beenden</a>';
|
||||
}
|
||||
content += '</div></fieldset>';
|
||||
|
||||
// Overlay erzeugen und einblenden
|
||||
me.elem.$controlOverlay
|
||||
.html(content)
|
||||
.appendTo('body')
|
||||
.show()
|
||||
.draggable({
|
||||
handle: 'legend'
|
||||
});
|
||||
|
||||
/*
|
||||
* Events für Overlay-Elemente registrieren
|
||||
*/
|
||||
|
||||
me.elem.$languageSelect = $('#ui-translation-language-select');
|
||||
me.elem.$startButton = $('#ui-translation-start-button');
|
||||
me.elem.$closeButton = $('#ui-translation-close-button');
|
||||
me.elem.$pauseButton = $('#ui-translation-pause-button');
|
||||
|
||||
me.elem.$languageSelect.on('change', function () {
|
||||
if (me.storage.translationModeDisabled === true) {
|
||||
return;
|
||||
}
|
||||
me.changeLanguage($(this).val());
|
||||
});
|
||||
|
||||
me.elem.$startButton.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var selectedLanguage = me.elem.$languageSelect.val();
|
||||
me.startTranslationMode(selectedLanguage);
|
||||
});
|
||||
|
||||
me.elem.$closeButton.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
me.stopTranslationMode();
|
||||
});
|
||||
|
||||
me.elem.$pauseButton.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (me.storage.translationModePaused === true) {
|
||||
me.resumeTranslationMode();
|
||||
} else {
|
||||
me.pauseTranslationMode();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Kleines Overlay zum Übersetzen erstellen
|
||||
*/
|
||||
initItemOverlay: function () {
|
||||
var content =
|
||||
'<div id="ui-translation-item">' +
|
||||
'<div class="line">' +
|
||||
'<input id="ui-translation-item-input" type="text" size="30" value="">' +
|
||||
'<input id="ui-translation-item-hidden" type="hidden" value="">' +
|
||||
'</div>' +
|
||||
'<div class="line">' +
|
||||
'<a id="ui-translation-item-save" class="button btnGreen" href="#">Speichern</a>' +
|
||||
'<a id="ui-translation-item-cancel" class="button" href="#">Abbrechen</a>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
me.elem.$itemOverlay = $(content).appendTo('body').hide();
|
||||
|
||||
me.elem.$itemOverlay
|
||||
.on('keypress', '#ui-translation-item-input', function (e) {
|
||||
if (e.which === 13) { // Enter-Taste
|
||||
me.saveTranslation();
|
||||
}
|
||||
})
|
||||
.on('click', '#ui-translation-item-save', function (e) {
|
||||
e.preventDefault();
|
||||
me.saveTranslation();
|
||||
})
|
||||
.on('click', '#ui-translation-item-cancel', function (e) {
|
||||
e.preventDefault();
|
||||
me.elem.$itemOverlay.hide();
|
||||
});
|
||||
},
|
||||
|
||||
initSpecialElements: function () {
|
||||
$('button, input[type="button"], input[type="submit"]').each(function () {
|
||||
var val = $(this).val();
|
||||
if (val.indexOf('****') > -1) {
|
||||
val = val.replace('****', '');
|
||||
var content =
|
||||
'<span>' +
|
||||
'<input type="hidden" class="wawision_uebersetzung_text" value="' + base64.encode(val) + '">' +
|
||||
'<input type="hidden" class="wawision_uebersetzung_type" value="">' +
|
||||
'<input type="hidden" class="wawision_uebersetzung_elem" value="' + base64.encode(val) + '">' +
|
||||
'</span>';
|
||||
|
||||
$(this)
|
||||
.val(val)
|
||||
.addClass('edittranslation')
|
||||
.css('border', '1px dashed red')
|
||||
.after(content);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Verfügbare Sprachen abrufen
|
||||
*/
|
||||
fetchLanguageList: function () {
|
||||
$.ajax({
|
||||
url: 'index.php?module=wawision_uebersetzung&action=list&cmd=fetch-languages',
|
||||
method: 'post',
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (typeof data.languages === 'undefined') {
|
||||
throw 'Sprachenliste konnte nicht geladen werden.';
|
||||
}
|
||||
if (typeof data.selected === 'undefined') {
|
||||
throw 'Zielsprache konnte nicht geladen werden.';
|
||||
}
|
||||
|
||||
// Sprachen-Dropdown füllen
|
||||
data.languages.forEach(function (language) {
|
||||
var $option = $('<option value="' + language + '">' + language + '</option>');
|
||||
if (language === data.selected) {
|
||||
$option.prop('selected', 'selected');
|
||||
}
|
||||
me.elem.$languageSelect.append($option);
|
||||
});
|
||||
|
||||
// Aktuell eingestellte Sprache merken
|
||||
me.storage.currentTranslationLanguage = data.selected;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzungsmodus aktivieren
|
||||
*/
|
||||
resumeTranslationMode: function () {
|
||||
|
||||
me.elem.$translationItems
|
||||
.on('mouseover', function () {
|
||||
me.onHoverTranslationItem(this);
|
||||
})
|
||||
// .on('mouseout', function (e) {
|
||||
// if (e.relatedTarget.id !== 'ui-translation-item') {
|
||||
// me.elem.$itemOverlay.hide();
|
||||
// }
|
||||
// })
|
||||
.css('border', '1px dashed red');
|
||||
|
||||
me.elem.$pauseButton.text('Übersetzung pausieren');
|
||||
me.storage.translationModePaused = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzung nur pausieren; aber nicht beenden
|
||||
*/
|
||||
pauseTranslationMode: function () {
|
||||
me.elem.$translationItems
|
||||
//.off('mouseout')
|
||||
.off('mouseover')
|
||||
.css('border', '1px solid transparent');
|
||||
|
||||
me.elem.$itemOverlay.hide();
|
||||
|
||||
me.elem.$pauseButton.text('Übersetzung fortsetzen');
|
||||
me.storage.translationModePaused = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzungsmodus starten
|
||||
*/
|
||||
startTranslationMode: function (selectedLanguage) {
|
||||
$.ajax({
|
||||
url: 'index.php?module=wawision_uebersetzung&action=list&cmd=start-translation',
|
||||
method: 'post',
|
||||
data: {selected: selectedLanguage},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (typeof data.success === 'undefined') {
|
||||
return;
|
||||
}
|
||||
if (data.success === false) {
|
||||
alert('FEHLER: ' + data.error);
|
||||
}
|
||||
if (data.success === true) {
|
||||
window.location.reload(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzungsmodus beenden
|
||||
*/
|
||||
stopTranslationMode: function () {
|
||||
$.ajax({
|
||||
url: 'index.php?module=wawision_uebersetzung&action=list&cmd=stop-translation',
|
||||
method: 'post',
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (typeof data.success !== 'undefined' && data.success === true) {
|
||||
// Zurück zum Übersetzungs-Modul
|
||||
window.location.href = 'index.php?module=wawision_uebersetzung&action=list';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Die zu übersetzende Sprache wechseln
|
||||
*
|
||||
* @param {string} selectedLanguage
|
||||
*/
|
||||
changeLanguage: function (selectedLanguage) {
|
||||
me.pauseTranslationMode();
|
||||
$.ajax({
|
||||
url: 'index.php?module=wawision_uebersetzung&action=list&cmd=change-language',
|
||||
method: 'post',
|
||||
data: {selected: selectedLanguage},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (typeof data.success !== 'undefined' && data.success === true) {
|
||||
window.location.reload(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Beim Hovern eines Übersetzungs-Elements
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
onHoverTranslationItem: function (element) {
|
||||
me.storage.currentTranslationElement = element;
|
||||
|
||||
// Aktuelle Übersetzung auslesen
|
||||
var $element = $(element);
|
||||
var currentItemTranslation = $element.text(); // Span-Element
|
||||
if (currentItemTranslation === '' || currentItemTranslation === null) {
|
||||
currentItemTranslation = $element.val(); // Input-Element
|
||||
}
|
||||
|
||||
// Aktuelle Übersetzungen in Eingabefelder schreiben
|
||||
$('#ui-translation-item-input').val(currentItemTranslation);
|
||||
$('#ui-translation-item-hidden').val(currentItemTranslation);
|
||||
|
||||
// Position für Übersetzung-Overlay berechnen
|
||||
var windowWidth = $(window).width();
|
||||
var currentItemOffset = $element.offset();
|
||||
var currentItemRightPos = currentItemOffset.left + 300;
|
||||
var currentItemNewLeftPos = currentItemRightPos > windowWidth ? windowWidth - 320 : currentItemOffset.left;
|
||||
var currentItemNewTopPos = currentItemOffset.top - 16;
|
||||
|
||||
// Übersetzung-Overlay anzeigen und positionieren
|
||||
me.elem.$itemOverlay.show()
|
||||
.css('top', currentItemNewTopPos)
|
||||
.css('left', currentItemNewLeftPos);
|
||||
},
|
||||
|
||||
/**
|
||||
* Übersetzung abspeichern
|
||||
*/
|
||||
saveTranslation: function () {
|
||||
if (me.storage.translationModeDisabled === true) {
|
||||
return;
|
||||
}
|
||||
if (me.storage.translationModePaused === true) {
|
||||
return;
|
||||
}
|
||||
if (me.storage.currentTranslationElement === null) {
|
||||
return;
|
||||
}
|
||||
if (me.storage.currentTranslationLanguage === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var translationNew = $('#ui-translation-item-input').val();
|
||||
var translationOriginal = $('#ui-translation-item-hidden').val();
|
||||
if (translationNew === translationOriginal) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $dataContainer = $(me.storage.currentTranslationElement).next('span');
|
||||
var dataType = $dataContainer.find('input.wawision_uebersetzung_type').first().val();
|
||||
var dataText = $dataContainer.find('input.wawision_uebersetzung_text').first().val();
|
||||
var dataElem = $dataContainer.find('input.wawision_uebersetzung_elem').first().val();
|
||||
|
||||
$.ajax({
|
||||
url: 'index.php?module=wawision_uebersetzung&action=list&cmd=savetext',
|
||||
method: 'post',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
orig: translationOriginal,
|
||||
neu: translationNew,
|
||||
type: dataType,
|
||||
text: dataText,
|
||||
elem: dataElem
|
||||
},
|
||||
success: function (data) {
|
||||
if (typeof data.success === 'undefined') {
|
||||
throw 'Unbekannter Fehler beim Speichern';
|
||||
}
|
||||
if (data.success === true) {
|
||||
if (me.storage.currentTranslationElement !== null) {
|
||||
$(me.storage.currentTranslationElement).html(data.text);
|
||||
$(me.storage.currentTranslationElement).val(data.text);
|
||||
}
|
||||
me.elem.$itemOverlay.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
init: me.init,
|
||||
pauseTranslation: me.pauseTranslationMode,
|
||||
resumeTranslation: me.resumeTranslationMode,
|
||||
startTranslation: me.startTranslationMode,
|
||||
stopTranslation: me.stopTranslationMode,
|
||||
changeLanguage: me.changeLanguage
|
||||
};
|
||||
|
||||
})(jQuery, WBase64);
|
||||
|
||||
$(document).ready(UiTranslation.init);
|
||||
Reference in New Issue
Block a user