Online translation interface integrated into Developer panel

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;
@@ -96,6 +98,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) {
 			return textString;

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.
 	 */

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;

webapp/src/main/webapp/js/translations.js

@@ -41,48 +41,75 @@ 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;");
+	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);
+	//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){
+function onImportFileUpload(e) {
 	const fileList = e.target.files;
 	const numFiles = fileList.length;
 	if (numFiles > 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 (!isCommentLine(lines[i])) {
-					if (followLine){
+					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);
 						}
 					}
 				}
@@ -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 (!isCommentLine(lines[i])) {
-					if (followLine){
+					if (followLine) {
 						followLine = goesToNextLine(lines[i]);
-						if (keyLineHasChanged){
+						if (keyLineHasChanged) {
 							//clean line as it's upper content has changed
-							lines[i]="";
+							lines[i] = "";
-							if (!followLine){
+							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){
+function exportAll() {
-	var blob = new Blob([lines.join("\n")], {type:'text/plain;charset=utf-8'});
+	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){
+function getLineValue(line) {
-	var value = line.replace(/^\s*[^=\s]*\s*=\s*/,"");
+	var value = line.replace(/^\s*[^=\s]*\s*=\s*/, "");
-	value = value.replace(/\\$/,"");
+	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() {
+		var developerSetting = document.getElementById("developer_i18n_onlineTranslation");
+		if (developerSetting !== null && developerSetting.checked) {
 			translationsParsing();
 			createTranslationsInterface();
+		}
 	}, 1000);
 })

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" />
 						</div>
 
 						<div class="container">