litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Translations refactoring

Browse source
This commit is contained in:
Georgy Litvinov 2021-07-06 13:30:06 +02:00
parent f9a017cc9f
commit 74799b08a6
1 changed files with 40 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
webapp/src/main/webapp/js/developer/translations.js
View file

@ -15,7 +15,6 @@ class PropInfo {
} }
} }
function onlineTranslation() {
var pageTranslations = new Map(); var pageTranslations = new Map();
var overridenTranslations = new Map(); var overridenTranslations = new Map();
var startSep = '\u25a4'; var startSep = '\u25a4';
@ -23,8 +22,6 @@ function onlineTranslation() {
var intSep = '\u25a6'; var intSep = '\u25a6';
var resultSep = '\u200b\uFEFF\u200b\uFEFF\u200b'; var resultSep = '\u200b\uFEFF\u200b\uFEFF\u200b';
var resultSepChars = '\u200b\uFEFF'; var resultSepChars = '\u200b\uFEFF';
translationsParsing();
createTranslationsInterface();
function saveTranslations() { function saveTranslations() {
var storage = window.localStorage; var storage = window.localStorage;
@ -40,16 +37,16 @@ function onlineTranslation() {
} }
} }
function createTranslationsInterface() { function createTranslationPanel() {
var devPanel = document.getElementById("developerPanel"); var devPanel = document.getElementById("developerPanel");
if (devPanel !== null) { if (devPanel !== null) {
var container = document.createElement("div"); var container = document.createElement("div");
container.setAttribute("id", "translationsContainer"); container.setAttribute("id", "translationPanel");
container.setAttribute("style", "font-size:0.8em !important;width: 440px; resize: horizontal; \ container.setAttribute("style", "font-size:0.8em !important;width: 440px; resize: horizontal; \
overflow: auto; padding: 10px; position: absolute;background-color:#f7dd8a;border:1px dotted;z-index:10000"); overflow: auto; padding: 10px; position: absolute;background-color:#f7dd8a;border:1px dotted;z-index:10000");
devPanel.parentNode.insertBefore(container, devPanel.nextSibling); devPanel.parentNode.insertBefore(container, devPanel.nextSibling);
createTranslationControls(container); createTranslationControls(container);
createTableFromPageTranslations(container); createPageTranslationsTable(container);
} }
} }
@ -61,32 +58,31 @@ function onlineTranslation() {
var cleanButton = document.createElement("button"); var cleanButton = document.createElement("button");
cleanButton.textContent = "Clean All"; cleanButton.textContent = "Clean All";
cleanButton.setAttribute("onclick", "cleanTranslations()"); cleanButton.setAttribute("onclick", "cleanTranslationStorage()");
cleanButton.setAttribute("style", "margin-right:10px;"); cleanButton.setAttribute("style", "margin-right:10px;");
controls.appendChild(cleanButton); controls.appendChild(cleanButton);
var exportAllButton = document.createElement("button"); var exportAllButton = document.createElement("button");
exportAllButton.textContent = "Export All"; exportAllButton.textContent = "Export All";
exportAllButton.setAttribute("onclick", "exportAll()"); exportAllButton.setAttribute("onclick", "exportTranslations()");
exportAllButton.setAttribute("style", "margin-right:10px;"); exportAllButton.setAttribute("style", "margin-right:10px;");
controls.appendChild(exportAllButton); controls.appendChild(exportAllButton);
var exportFileInput = document.createElement("input"); var updateFileInput = document.createElement("input");
var exportFileButton = document.createElement("button"); var updateFileButton = document.createElement("button");
exportFileButton.setAttribute("style", "margin-right:10px;"); updateFileButton.setAttribute("style", "margin-right:10px;");
exportFileInput.type = "file"; updateFileInput.type = "file";
exportFileInput.setAttribute("id", "exportFile"); updateFileInput.setAttribute("id", "exportFile");
exportFileInput.setAttribute("style", "display:none;"); updateFileInput.setAttribute("style", "display:none;");
exportFileInput.setAttribute("accept", ".properties"); updateFileInput.setAttribute("accept", ".properties");
var exportFileLabel = document.createElement("label"); var updateFileLabel = document.createElement("label");
exportFileLabel.setAttribute("for", "exportFile"); updateFileLabel.setAttribute("for", "exportFile");
exportFileLabel.textContent = "Update file"; updateFileLabel.textContent = "Update file";
exportFileLabel.setAttribute("style", "margin:0px;color:black;") updateFileLabel.setAttribute("style", "margin:0px;color:black;")
exportFileButton.appendChild(exportFileLabel); updateFileButton.appendChild(updateFileLabel);
controls.appendChild(exportFileButton); controls.appendChild(updateFileButton);
controls.appendChild(exportFileInput); controls.appendChild(updateFileInput);
exportFileInput.addEventListener("change", onExportFileUpload); updateFileInput.addEventListener("change", updateTranslationsFile);
var importFileInput = document.createElement("input"); var importFileInput = document.createElement("input");
var importFileButton = document.createElement("button"); var importFileButton = document.createElement("button");
@ -101,16 +97,16 @@ function onlineTranslation() {
importFileButton.appendChild(importFileLabel); importFileButton.appendChild(importFileLabel);
controls.appendChild(importFileButton); controls.appendChild(importFileButton);
controls.appendChild(importFileInput); controls.appendChild(importFileInput);
importFileInput.addEventListener("change", onImportFileUpload); importFileInput.addEventListener("change", importTranslationsFromFile);
} }
function cleanTranslations() { function cleanTranslationStorage() {
overridenTranslations.clear(); overridenTranslations.clear();
saveTranslations(); saveTranslations();
location.reload(); location.reload();
} }
function onImportFileUpload(e) { function importTranslationsFromFile(e) {
const fileList = e.target.files; const fileList = e.target.files;
const numFiles = fileList.length; const numFiles = fileList.length;
if (numFiles > 0) { if (numFiles > 0) {
@ -143,7 +139,7 @@ function onlineTranslation() {
} }
} }
function onExportFileUpload(e) { function updateTranslationsFile(e) {
const fileList = e.target.files; const fileList = e.target.files;
const numFiles = fileList.length; const numFiles = fileList.length;
if (numFiles > 0) { if (numFiles > 0) {
@ -179,23 +175,23 @@ function onlineTranslation() {
} }
} }
} }
exportFile(fileName, lines); saveFile(fileName, lines);
} }
reader.readAsText(file); reader.readAsText(file);
} }
} }
function exportAll() { function exportTranslations() {
var date = new Date; var date = new Date;
var fileName = "export_" + date.toLocaleString() + "_all.properties"; var fileName = "export_" + date.toLocaleString() + "_all.properties";
var lines = []; var lines = [];
for (let [key, value] of overridenTranslations) { for (let [key, value] of overridenTranslations) {
lines.push(key + " = " + value); lines.push(key + " = " + value);
} }
exportFile(fileName, lines); saveFile(fileName, lines);
} }
function exportFile(fileName, lines) { function saveFile(fileName, lines) {
var blob = new Blob([lines.join("\n")], { type: 'text/plain;charset=utf-8' }); var blob = new Blob([lines.join("\n")], { type: 'text/plain;charset=utf-8' });
saveAs(blob, fileName); saveAs(blob, fileName);
} }
@ -225,12 +221,12 @@ function onlineTranslation() {
return line.match(/^\s*[#!]/) != null; return line.match(/^\s*[#!]/) != null;
} }
function createTableFromPageTranslations(container) { function createPageTranslationsTable(container) {
var table = document.createElement("table"); var table = document.createElement("table");
table.setAttribute("id", "translationsTable"); table.setAttribute("id", "translationsTable");
table.setAttribute("style", "width:100%;"); table.setAttribute("style", "width:100%;");
document.getElementById("translationsContainer").appendChild(table); document.getElementById("translationPanel").appendChild(table);
for (let [key, propInfo] of pageTranslations) { for (let [key, propInfo] of pageTranslations) {
var tr = document.createElement("tr"); var tr = document.createElement("tr");
table.appendChild(tr); table.appendChild(tr);
@ -255,12 +251,12 @@ function onlineTranslation() {
td2.appendChild(rawTextHidden); td2.appendChild(rawTextHidden);
tr.appendChild(td2); tr.appendChild(td2);
rawText.addEventListener("blur", function() { rawText.addEventListener("blur", function() {
onTranslationChange(this); updateTranslation(this);
}); });
} }
} }
function onTranslationChange(input) { function updateTranslation(input) {
if (input.value != input.nextSibling.value) { if (input.value != input.nextSibling.value) {
var key = input.parentElement.previousSibling.firstChild.textContent; var key = input.parentElement.previousSibling.firstChild.textContent;
if (input.value == "") { if (input.value == "") {
@ -325,7 +321,7 @@ function onlineTranslation() {
return value; return value;
} }
function translationsParsing() { function parseHTMLTranslations() {
var translatedTexts = []; var translatedTexts = [];
var translatedAttrs = []; var translatedAttrs = [];
var xpath = "//attribute::*[contains(., '" + startSep + "')]"; var xpath = "//attribute::*[contains(., '" + startSep + "')]";
@ -334,13 +330,13 @@ function onlineTranslation() {
var node = null; var node = null;
while (node = result.iterateNext()) { while (node = result.iterateNext()) {
translatedAttrs.push(node); translatedAttrs.push(node);
addPropsFromAttribute(node); parsePropsInNode(node);
} }
xpath = "//*[text()[contains(.,'" + startSep + "')]]"; xpath = "//*[text()[contains(.,'" + startSep + "')]]";
result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null); result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
while (node = result.iterateNext()) { while (node = result.iterateNext()) {
translatedTexts.push(node); translatedTexts.push(node);
addPropsFromTextNode(node); parsePropsInNode(node);
} }
readTranslations(); readTranslations();
removePropInfoFromPage(); removePropInfoFromPage();
@ -408,42 +404,28 @@ function onlineTranslation() {
} }
} }
function addPropsFromTextNode(node) { function parsePropsInNode(node) {
var textString = node.textContent; var textString = node.textContent;
var i = 0; var i = 0;
while (textString.indexOf(startSep) >= 0) { while (textString.indexOf(startSep) >= 0) {
textString = textString.substring(textString.indexOf(startSep) + startSep.length); textString = textString.substring(textString.indexOf(startSep) + startSep.length);
var prop = textString.substring(0, textString.indexOf(endSep)); var prop = textString.substring(0, textString.indexOf(endSep));
var address = new PropAddr(node, i, []); var address = new PropAddr(node, i, []);
addProp(prop, address); addToPageTranslations(prop, address);
i++; i++;
} }
} }
function addPropsFromAttribute(node) { function addToPageTranslations(prop, address) {
var attrString = node.textContent;
var i = 0;
while (attrString.indexOf(startSep) >= 0) {
attrString = attrString.substring(attrString.indexOf(startSep) + startSep.length);
var prop = attrString.substring(0, attrString.indexOf(endSep));
var address = new PropAddr(node, i, []);
addProp(prop, address);
i++;
}
}
function addProp(prop, address) {
var key = prop.substring(0, prop.indexOf(intSep)); var key = prop.substring(0, prop.indexOf(intSep));
prop = prop.substring(prop.indexOf(intSep) + intSep.length); prop = prop.substring(prop.indexOf(intSep) + intSep.length);
var rawText = prop.substring(0, prop.indexOf(intSep)); var rawText = prop.substring(0, prop.indexOf(intSep));
prop = prop.substring(prop.indexOf(intSep) + intSep.length); prop = prop.substring(prop.indexOf(intSep) + intSep.length);
var textArgs = []; var textArgs = [];
var i = 0;
while (prop.indexOf(intSep) >= 0) { while (prop.indexOf(intSep) >= 0) {
var textArg = prop.substring(0, prop.indexOf(intSep)); var textArg = prop.substring(0, prop.indexOf(intSep));
prop = prop.substring(prop.indexOf(intSep) + intSep.length); prop = prop.substring(prop.indexOf(intSep) + intSep.length);
textArgs.push(textArg); textArgs.push(textArg);
i++;
} }
address.args = textArgs; address.args = textArgs;
var formText = prop; var formText = prop;
@ -455,15 +437,14 @@ function onlineTranslation() {
propInfo = new PropInfo(rawText, formText, address); propInfo = new PropInfo(rawText, formText, address);
pageTranslations.set(key, propInfo); pageTranslations.set(key, propInfo);
} }
return propInfo;
} }
}
window.addEventListener('load', function() { window.addEventListener('load', function() {
setTimeout(function() { setTimeout(function() {
var developerSetting = document.getElementById("developer_i18n_onlineTranslation"); var developerSetting = document.getElementById("developer_i18n_onlineTranslation");
if (developerSetting !== null && developerSetting.checked) { if (developerSetting !== null && developerSetting.checked) {
onlineTranslation(); parseHTMLTranslations();
createTranslationPanel();
} }
}, 1000); }, 1000);
}) })