From 0fc2218b88d362a589c780728740b014b3a0eb1e Mon Sep 17 00:00:00 2001 From: Georgy Litvinov Date: Mon, 5 Jul 2021 18:50:03 +0200 Subject: [PATCH] Online translation interface integrated into Developer panel --- .../mannlib/vitro/webapp/i18n/I18nBundle.java | 10 +- .../vitro/webapp/utils/developer/Key.java | 5 +- .../webapp/js/developer/developerPanel.js | 1 + webapp/src/main/webapp/js/translations.js | 166 +++++++++++------- .../page/partials/developerPanel.ftl | 2 + 5 files changed, 118 insertions(+), 66 deletions(-) diff --git a/api/src/main/java/edu/cornell/mannlib/vitro/webapp/i18n/I18nBundle.java b/api/src/main/java/edu/cornell/mannlib/vitro/webapp/i18n/I18nBundle.java index 4894f4105..c2060d99b 100644 --- a/api/src/main/java/edu/cornell/mannlib/vitro/webapp/i18n/I18nBundle.java +++ b/api/src/main/java/edu/cornell/mannlib/vitro/webapp/i18n/I18nBundle.java @@ -10,6 +10,9 @@ import java.util.ResourceBundle; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; +import edu.cornell.mannlib.vitro.webapp.utils.developer.DeveloperSettings; +import edu.cornell.mannlib.vitro.webapp.utils.developer.Key; + /** * A wrapper for a ResourceBundle that will not throw an exception, no matter * what string you request. @@ -23,7 +26,6 @@ public class I18nBundle { private static final String startSep = "\u25a4"; private static final String endSep = "\u25a5"; private static final String intSep = "\u25a6"; - private static boolean exportInfo = true; private static final String MESSAGE_BUNDLE_NOT_FOUND = "Text bundle ''{0}'' not found."; private static final String MESSAGE_KEY_NOT_FOUND = "Text bundle ''{0}'' has no text for ''{1}''"; @@ -84,7 +86,7 @@ public class I18nBundle { if (i18nLogger != null) { i18nLogger.log(bundleName, key, parameters, textString, message); } - if (exportInfo) { + if (isNeedExportInfo()) { String separatedArgs = ""; for (int i = 0; i < parameters.length; i++) { separatedArgs += parameters[i] + intSep; @@ -95,6 +97,10 @@ public class I18nBundle { } } + + private static boolean isNeedExportInfo() { + return DeveloperSettings.getInstance().getBoolean(Key.I18N_ONLINE_TRANSLATION); + } private static String formatString(String textString, Object... parameters) { if (parameters.length == 0) { diff --git a/api/src/main/java/edu/cornell/mannlib/vitro/webapp/utils/developer/Key.java b/api/src/main/java/edu/cornell/mannlib/vitro/webapp/utils/developer/Key.java index 4414c1b8d..1037330e5 100644 --- a/api/src/main/java/edu/cornell/mannlib/vitro/webapp/utils/developer/Key.java +++ b/api/src/main/java/edu/cornell/mannlib/vitro/webapp/utils/developer/Key.java @@ -43,7 +43,10 @@ public enum Key { * Load language property files every time they are requested. */ I18N_DEFEAT_CACHE("developer.i18n.defeatCache", true), - + /** + * Enable online translations. + */ + I18N_ONLINE_TRANSLATION("developer.i18n.onlineTranslation", true), /** * Enable the I18nLogger to log each string request. */ diff --git a/webapp/src/main/webapp/js/developer/developerPanel.js b/webapp/src/main/webapp/js/developer/developerPanel.js index b92f2abdf..d8cf42b47 100644 --- a/webapp/src/main/webapp/js/developer/developerPanel.js +++ b/webapp/src/main/webapp/js/developer/developerPanel.js @@ -52,6 +52,7 @@ function DeveloperPanel(developerAjaxUrl) { document.getElementById("developer_pageContents_logCustomShortView").disabled = !developerEnabled; document.getElementById("developer_i18n_defeatCache").disabled = !developerEnabled; document.getElementById("developer_i18n_logStringRequests").disabled = !developerEnabled; + document.getElementById("developer_i18n_onlineTranslation").disabled = !developerEnabled; document.getElementById("developer_loggingRDFService_enable").disabled = !developerEnabled; document.getElementById("developer_searchIndex_enable").disabled = !developerEnabled; document.getElementById("developer_searchIndex_logIndexingBreakdownTimings").disabled = !developerEnabled; diff --git a/webapp/src/main/webapp/js/translations.js b/webapp/src/main/webapp/js/translations.js index 08b403495..ebc4c8cd5 100644 --- a/webapp/src/main/webapp/js/translations.js +++ b/webapp/src/main/webapp/js/translations.js @@ -41,49 +41,76 @@ function readTranslations() { function createTranslationsInterface() { var container = document.createElement("div"); container.setAttribute("id", "translationsContainer"); - container.setAttribute("style", "font-size:0.8em !important;width: 440px; resize: horizontal; overflow: auto; padding: 10px; position: absolute;background-color:orange;top:0px;border:2px;"); - document.body.appendChild(container); + container.setAttribute("style", "font-size:0.8em !important;width: 440px; resize: horizontal; overflow: auto; padding: 10px; position: absolute;background-color:#f7dd8a;border:1px dotted;"); + //document.body.appendChild(container); + var devPanel = document.getElementById("developerPanel"); + devPanel.parentNode.insertBefore(container, devPanel.nextSibling); + + createTranslationControls(container); createTableFromPageTranslations(container); - var table = document.createElement("table"); - - var cleanButton = document.createElement("button"); - cleanButton.textContent = "Clean All"; - cleanButton.setAttribute("onclick","cleanTranslations()"); - container.appendChild(cleanButton); - - var exportFileInput = document.createElement("input"); - exportFileInput.type = "file"; - exportFileInput.setAttribute("id", "exportFile"); - exportFileInput.setAttribute("accept", ".properties"); - var exportFileLabel = document.createElement("label"); - exportFileLabel.setAttribute("for","exportFile"); - exportFileLabel.textContent = "Update file"; - container.appendChild(exportFileLabel); - container.appendChild(exportFileInput); - exportFileInput.addEventListener("change", onExportFileUpload); - - var importFileInput = document.createElement("input"); - importFileInput.type = "file"; - importFileInput.setAttribute("id", "importFile"); - importFileInput.setAttribute("accept", ".properties"); - var importFileLabel = document.createElement("label"); - importFileLabel.setAttribute("for","importFile"); - importFileLabel.textContent = "Import from file"; - container.appendChild(importFileLabel); - container.appendChild(importFileInput); - importFileInput.addEventListener("change", onImportFileUpload); - //$(document.getElementById("translationsContainer")).draggable(); } -function cleanTranslations(){ +function createTranslationControls(container){ + var controls = document.createElement("div") + controls.setAttribute("id", "translationControls"); + controls.setAttribute("style", "margin-bottom:8px;") + container.appendChild(controls); + + var cleanButton = document.createElement("button"); + cleanButton.textContent = "Clean All"; + cleanButton.setAttribute("onclick", "cleanTranslations()"); + cleanButton.setAttribute("style","margin-right:10px;") + + controls.appendChild(cleanButton); + + var exportAllButton = document.createElement("button"); + exportAllButton.textContent = "Export All"; + exportAllButton.setAttribute("onclick", "exportAll()"); + exportAllButton.setAttribute("style","margin-right:10px;") + controls.appendChild(exportAllButton); + + var exportFileInput = document.createElement("input"); + var exportFileButton = document.createElement("button"); + exportFileButton.setAttribute("style","margin-right:10px;") + exportFileInput.type = "file"; + exportFileInput.setAttribute("id", "exportFile"); + exportFileInput.setAttribute("style", "display:none;"); + exportFileInput.setAttribute("accept", ".properties"); + var exportFileLabel = document.createElement("label"); + exportFileLabel.setAttribute("for", "exportFile"); + exportFileLabel.textContent = "Update file"; + exportFileLabel.setAttribute("style","margin:0px;color:black;") + exportFileButton.appendChild(exportFileLabel); + controls.appendChild(exportFileButton); + controls.appendChild(exportFileInput); + exportFileInput.addEventListener("change", onExportFileUpload); + + var importFileInput = document.createElement("input"); + var importFileButton = document.createElement("button"); + importFileInput.type = "file"; + importFileInput.setAttribute("style", "display:none;"); + importFileInput.setAttribute("id", "importFile"); + importFileInput.setAttribute("accept", ".properties"); + var importFileLabel = document.createElement("label"); + importFileLabel.setAttribute("style","margin:0px;color:black;") + importFileLabel.setAttribute("for", "importFile"); + importFileLabel.textContent = "Import from file"; + importFileButton.appendChild(importFileLabel); + controls.appendChild(importFileButton); + controls.appendChild(importFileInput); + importFileInput.addEventListener("change", onImportFileUpload); + +} + +function cleanTranslations() { overridenTranslations.clear(); saveTranslations(); location.reload(); } -function onImportFileUpload(e){ - const fileList = e.target.files; +function onImportFileUpload(e) { + const fileList = e.target.files; const numFiles = fileList.length; if (numFiles > 0) { const file = fileList[0]; @@ -93,17 +120,17 @@ function onImportFileUpload(e){ var followLine = false; var lineKey = null; for (var i = 0; i < lines.length; i++) { - if (!isCommentLine(lines[i])){ - if (followLine){ + if (!isCommentLine(lines[i])) { + if (followLine) { followLine = goesToNextLine(lines[i]); - var lineValue = lines[i].replace(/\\$/,""); + var lineValue = lines[i].replace(/\\$/, ""); overridenTranslations.set(lineKey, overridenTranslations.get(lineKey) + lineValue); } else { followLine = goesToNextLine(lines[i]); lineKey = getLineKey(lines[i]); - if (lineKey.trim() != ""){ + if (lineKey.trim() != "") { let lineValue = getLineValue(lines[i]); - overridenTranslations.set(lineKey,lineValue); + overridenTranslations.set(lineKey, lineValue); } } } @@ -116,7 +143,7 @@ function onImportFileUpload(e){ } function onExportFileUpload(e) { - const fileList = e.target.files; + const fileList = e.target.files; const numFiles = fileList.length; if (numFiles > 0) { const file = fileList[0]; @@ -128,13 +155,13 @@ function onExportFileUpload(e) { var keyLineHasChanged = false; var lineKey = null; for (var i = 0; i < lines.length; i++) { - if (!isCommentLine(lines[i])){ - if (followLine){ + if (!isCommentLine(lines[i])) { + if (followLine) { followLine = goesToNextLine(lines[i]); - if (keyLineHasChanged){ + if (keyLineHasChanged) { //clean line as it's upper content has changed - lines[i]=""; - if (!followLine){ + lines[i] = ""; + if (!followLine) { keyLineHasChanged = false; } } @@ -143,7 +170,7 @@ function onExportFileUpload(e) { keyLineHasChanged = false; followLine = goesToNextLine(lines[i]); lineKey = getLineKey(lines[i]); - if (overridenTranslations.has(lineKey)){ + if (overridenTranslations.has(lineKey)) { var value = overridenTranslations.get(lineKey); lines[i] = lineKey + " = " + value; keyLineHasChanged = true; @@ -158,15 +185,25 @@ function onExportFileUpload(e) { //const selectedFile = document.getElementById('exportFile').files[0]; } -function exportFile(fileName, lines){ - var blob = new Blob([lines.join("\n")], {type:'text/plain;charset=utf-8'}); +function exportAll() { + var date = new Date; + var fileName = "export_" + date.toLocaleString() + "_all.properties" + var lines = []; + for (let [key, value] of overridenTranslations) { + lines.push(key + " = " + value); + } + exportFile(fileName, lines); +} + +function exportFile(fileName, lines) { + var blob = new Blob([lines.join("\n")], { type: 'text/plain;charset=utf-8' }); saveAs(blob, fileName); } -function getLineKey(line){ +function getLineKey(line) { var matches = line.match(/^\s*[^=\s]*(?=\s*=)/); var key; - if (matches == null){ + if (matches == null) { key = ""; } else { key = matches[0].trim(); @@ -174,17 +211,17 @@ function getLineKey(line){ return key; } -function getLineValue(line){ - var value = line.replace(/^\s*[^=\s]*\s*=\s*/,""); - value = value.replace(/\\$/,""); +function getLineValue(line) { + var value = line.replace(/^\s*[^=\s]*\s*=\s*/, ""); + value = value.replace(/\\$/, ""); return value; } -function goesToNextLine(line){ +function goesToNextLine(line) { return line.match(/\\(\\\\)*$/) != null; } -function isCommentLine(line){ +function isCommentLine(line) { return line.match(/^\s*[#!]/) != null; } @@ -205,7 +242,7 @@ function createTableFromPageTranslations(container) { rawText.setAttribute("style", "width:100%; "); if (overridenTranslations.has(key)) { rawText.value = overridenTranslations.get(key); - rawText.style.backgroundColor = "green"; + rawText.style.backgroundColor = "#8BAB2E"; } else { rawText.value = propInfo.rawText; } @@ -234,7 +271,7 @@ function onTranslationChange(input) { } else { var value = input.value; if (pageTranslations.get(key).rawText != value) { - input.style.backgroundColor = "green"; + input.style.backgroundColor = "#8BAB2E"; overridenTranslations.set(key, value); } else { input.style.backgroundColor = "white"; @@ -242,20 +279,20 @@ function onTranslationChange(input) { } } saveTranslations(); - if (jsHasChanged(key)){ + if (jsHasChanged(key)) { location.reload(); } updateTranslationOnPage(key, value); } } -function jsHasChanged(key){ +function jsHasChanged(key) { var result = false; - if (pageTranslations.has(key)){ + if (pageTranslations.has(key)) { var addresses = pageTranslations.get(key).addresses; for (let i = 0; i < addresses.length; i++) { var nodeName = addresses[i].node.nodeName; - if (nodeName == "SCRIPT"){ + if (nodeName == "SCRIPT") { result = true; } } @@ -425,7 +462,10 @@ function addProp(prop, address) { window.addEventListener('load', function() { setTimeout(function() { - translationsParsing(); - createTranslationsInterface(); + var developerSetting = document.getElementById("developer_i18n_onlineTranslation"); + if (developerSetting !== null && developerSetting.checked) { + translationsParsing(); + createTranslationsInterface(); + } }, 1000); }) \ No newline at end of file diff --git a/webapp/src/main/webapp/templates/freemarker/page/partials/developerPanel.ftl b/webapp/src/main/webapp/templates/freemarker/page/partials/developerPanel.ftl index 4ab08a563..e0de6a480 100644 --- a/webapp/src/main/webapp/templates/freemarker/page/partials/developerPanel.ftl +++ b/webapp/src/main/webapp/templates/freemarker/page/partials/developerPanel.ftl @@ -56,6 +56,8 @@ "Defeat the cache of language property files" /> <@showCheckbox "developer_i18n_logStringRequests", "Log the retrieval of language strings" /> + <@showCheckbox "developer_i18n_onlineTranslation", + "Enable online translation" />