Translations works alpha

api/src/main/java/edu/cornell/mannlib/vitro/webapp/i18n/I18nBundle.java

@@ -20,7 +20,10 @@ import org.apache.commons.logging.LogFactory;
  */
 public class I18nBundle {
 	private static final Log log = LogFactory.getLog(I18nBundle.class);
-
+	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}''";
 
@@ -76,12 +79,21 @@ public class I18nBundle {
 			log.warn(message);
 			textString = "ERROR: " + message;
 		}			
-		String result = formatString(textString, parameters);
+		String message = formatString(textString, parameters);	
 
 		if (i18nLogger != null) {
-			i18nLogger.log(bundleName, key, parameters, textString, result);
+			i18nLogger.log(bundleName, key, parameters, textString, message);
 		}
-		return result;
+		if (exportInfo) {
+			String separatedArgs = "";
+			for (int i = 0; i < parameters.length; i++) {
+				separatedArgs += parameters[i] + intSep;
+			}
+			return startSep + key + intSep + textString + intSep + separatedArgs + message + endSep;
+		} else {
+			return message;	
+		}
+		
 	}
 
 	private static String formatString(String textString, Object... parameters) {

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

@@ -0,0 +1,431 @@
+var pageTranslations = new Map();
+var overridenTranslations = new Map();
+
+var startSep = '\u25a4';
+var endSep = '\u25a5';
+var intSep = '\u25a6';
+var resultSep = '\u200b\uFEFF\u200b\uFEFF\u200b';
+var resultSepChars = '\u200b\uFEFF';
+
+
+class PropAddr {
+	constructor(node, number, args) {
+		this.node = node;
+		this.number = number;
+		this.args = args;
+	}
+}
+
+class PropInfo {
+	constructor(rawText, formText, address) {
+		this.rawText = rawText;
+		this.formText = formText;
+		this.addresses = [];
+		this.addresses.push(address);
+	}
+}
+
+function saveTranslations() {
+	var storage = window.localStorage;
+	var serializedTranslations = JSON.stringify(Array.from(overridenTranslations.entries()));
+	storage.setItem("overridenTranslations", serializedTranslations);
+}
+function readTranslations() {
+	var storage = window.localStorage;
+	var serializedTranslations = storage.getItem("overridenTranslations");
+	if (serializedTranslations != null) {
+		overridenTranslations = new Map(JSON.parse(serializedTranslations));
+	}
+}
+
+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);
+	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(){
+	overridenTranslations.clear();
+	saveTranslations();
+	location.reload();
+}
+
+function onImportFileUpload(e){
+	const fileList =  e.target.files;
+	const numFiles = fileList.length;
+	if (numFiles > 0) {
+		const file = fileList[0];
+		var reader = new FileReader();
+		reader.onload = function(progressEvent) {
+			var lines = this.result.split(/\r\n|\n\r|\n|\r/);
+			var followLine = false;
+			var lineKey = null;
+			for (var i = 0; i < lines.length; i++) {
+				if (!isCommentLine(lines[i])){
+					if (followLine){
+						followLine = goesToNextLine(lines[i]);
+						var lineValue = lines[i].replace(/\\$/,"");
+						overridenTranslations.set(lineKey, overridenTranslations.get(lineKey) + lineValue);
+					} else {
+						followLine = goesToNextLine(lines[i]);
+						lineKey = getLineKey(lines[i]);
+						if (lineKey.trim() != ""){
+							let lineValue = getLineValue(lines[i]);
+							overridenTranslations.set(lineKey,lineValue);	
+						}
+					}
+				}
+			}
+			saveTranslations();
+			location.reload()
+		}
+		reader.readAsText(file);
+	}
+}
+
+function onExportFileUpload(e) {
+	const fileList =  e.target.files;
+	const numFiles = fileList.length;
+	if (numFiles > 0) {
+		const file = fileList[0];
+		var fileName = e.target.value.split(/(\\|\/)/g).pop()
+		var reader = new FileReader();
+		reader.onload = function(progressEvent) {
+			var lines = this.result.split(/\r\n|\n\r|\n|\r/);
+			var followLine = false;
+			var keyLineHasChanged = false;
+			var lineKey = null;
+			for (var i = 0; i < lines.length; i++) {
+				if (!isCommentLine(lines[i])){
+					if (followLine){
+						followLine = goesToNextLine(lines[i]);
+						if (keyLineHasChanged){
+							//clean line as it's upper content has changed
+							lines[i]="";
+							if (!followLine){
+								keyLineHasChanged = false;
+							}
+						}
+						// skip line						
+					} else {
+						keyLineHasChanged = false;
+						followLine = goesToNextLine(lines[i]);
+						lineKey = getLineKey(lines[i]);
+						if (overridenTranslations.has(lineKey)){
+							var value = overridenTranslations.get(lineKey);
+							lines[i] = lineKey + " = " + value;
+							keyLineHasChanged = true;
+						}
+					}
+				}
+			}
+			exportFile(fileName, lines);
+		}
+		reader.readAsText(file);
+	}
+	//const selectedFile = document.getElementById('exportFile').files[0];	
+}
+
+function exportFile(fileName, lines){
+	var blob = new Blob([lines.join("\n")], {type:'text/plain;charset=utf-8'});
+	saveAs(blob, fileName);
+}
+
+function getLineKey(line){
+	var matches = line.match(/^\s*[^=\s]*(?=\s*=)/);
+	var key;
+	if (matches == null){
+		key = "";
+	} else {
+		key = matches[0].trim();
+	}
+	return key;
+}
+
+function getLineValue(line){
+	var value = line.replace(/^\s*[^=\s]*\s*=\s*/,"");
+	value = value.replace(/\\$/,"");
+	return value;
+}
+
+function goesToNextLine(line){
+	return line.match(/\\(\\\\)*$/) != null;
+}
+
+function isCommentLine(line){
+	return line.match(/^\s*[#!]/) != null;
+}
+
+function createTableFromPageTranslations(container) {
+	var table = document.createElement("table");
+	table.setAttribute("id", "translationsTable");
+	table.setAttribute("style", "width:100%;");
+
+	document.getElementById("translationsContainer").appendChild(table);
+	for (let [key, propInfo] of pageTranslations) {
+		var tr = document.createElement("tr");
+		table.appendChild(tr);
+		var td1 = document.createElement("td");
+		td1.setAttribute("style", " width:1%;white-space:nowrap;")
+		var keyText = document.createTextNode(key);
+		var td2 = document.createElement("td");
+		var rawText = document.createElement("input");
+		rawText.setAttribute("style", "width:100%; ");
+		if (overridenTranslations.has(key)) {
+			rawText.value = overridenTranslations.get(key);
+			rawText.style.backgroundColor = "green";
+		} else {
+			rawText.value = propInfo.rawText;
+		}
+		var rawTextHidden = document.createElement("input");
+		rawTextHidden.setAttribute("style", "display:none;");
+		rawTextHidden.value = propInfo.rawText;
+		td1.appendChild(keyText);
+		tr.appendChild(td1);
+		td2.appendChild(rawText);
+		td2.appendChild(rawTextHidden);
+		tr.appendChild(td2);
+		rawText.addEventListener("blur", function() {
+			onTranslationChange(this);
+		});
+	}
+}
+
+function onTranslationChange(input) {
+	if (input.value != input.nextSibling.value) {
+		var key = input.parentElement.previousSibling.firstChild.textContent;
+		if (input.value == "") {
+			input.value = input.nextSibling.value;
+			input.style.backgroundColor = "white";
+			overridenTranslations.delete(key);
+			var value = input.nextSibling.value;
+		} else {
+			var value = input.value;
+			if (pageTranslations.get(key).rawText != value) {
+				input.style.backgroundColor = "green";
+				overridenTranslations.set(key, value);
+			} else {
+				input.style.backgroundColor = "white";
+				overridenTranslations.delete(key);
+			}
+		}
+		saveTranslations();
+		if (jsHasChanged(key)){
+			location.reload();
+		}
+		updateTranslationOnPage(key, value);
+	}
+}
+
+function jsHasChanged(key){
+	var result = false;
+	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"){
+				result = true;
+			}
+		}
+	}
+	return result;
+}
+
+function updateTranslationOnPage(key, value) {
+	var propInfo = pageTranslations.get(key);
+	var addresses = propInfo.addresses;
+	for (let i = 0; i < addresses.length; i++) {
+		var node = addresses[i].node;
+		var number = addresses[i].number + 1;
+		var content = node.textContent;
+		var formattedValue = formatTranslation(value, addresses[i].args);
+		var regexStr = resultSep + "[^" + resultSepChars + "]*" + resultSep;
+		const regEx = new RegExp("^(?:[^" + resultSepChars + "]*" + regexStr + "){" + number + "}");
+		var newString = content.replace(regEx,
+			function(x) {
+				return x.replace(RegExp(regexStr + "$"), resultSep + formattedValue + resultSep)
+			});
+		node.textContent = newString;
+	}
+}
+
+function formatTranslation(value, args) {
+	for (let i = 0; i < args.length; i++) {
+		value = value.replaceAll("{" + i + "}", args[i])
+	}
+	return value;
+}
+
+function translationsParsing() {
+	var translatedTexts = [];
+	var translatedAttrs = [];
+	var xpath = "//attribute::*[contains(., '" + startSep + "')]";
+	var result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
+	var node = null;
+	var node = null;
+	while (node = result.iterateNext()) {
+		translatedAttrs.push(node);
+		addPropsFromAttribute(node);
+	}
+	xpath = "//*[text()[contains(.,'" + startSep + "')]]";
+	result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
+	while (node = result.iterateNext()) {
+		translatedTexts.push(node);
+		addPropsFromTextNode(node);
+	}
+	readTranslations();
+	removePropInfoFromPage();
+	updatePageWithOverridenTranslations();
+	reloadJS();
+}
+
+function reloadJS() {
+	var scriptBlocks = document.getElementsByTagName('script');
+	for (let i = 0; i < scriptBlocks.length; i++) {
+		var scriptBlock = scriptBlocks[i];
+		if (scriptBlock.hasAttribute("src")) {
+			var srcAttr = scriptBlock.getAttribute("src");
+			if (!srcAttr.endsWith("translations.js")) {
+				if (srcAttr.indexOf("?") == -1) {
+					srcAttr += "?" + new Date().getTime();
+				} else {
+					srcAttr += "&" + new Date().getTime();
+				}
+				scriptBlock.remove();
+				addJSLink(srcAttr);
+			}
+		} else {
+			var content = scriptBlock.textContent;
+			scriptBlock.remove();
+			addInlineJS(content);
+		}
+	}
+}
+
+function addInlineJS(content) {
+	var head = document.getElementsByTagName('head')[0];
+	var script = document.createElement('script');
+	script.textContent = content;
+	head.appendChild(script);
+}
+
+function addJSLink(fileUrl) {
+	var head = document.getElementsByTagName('head')[0];
+	var script = document.createElement('script');
+	script.type = "text/javascript";
+	script.src = fileUrl;
+	head.appendChild(script);
+}
+
+function updatePageWithOverridenTranslations() {
+	for (let [key, value] of overridenTranslations) {
+		if (pageTranslations.has(key)) {
+			updateTranslationOnPage(key, value);
+		}
+	}
+}
+
+function removePropInfoFromPage() {
+	for (let [key, propInfo] of pageTranslations) {
+		var addresses = propInfo.addresses;
+		for (let i = 0; i < addresses.length; i++) {
+			var node = addresses[i].node;
+			var content = node.textContent;
+			var regexStr = startSep + "[^" + endSep + "]*" + intSep + "([^" + endSep + intSep + "]*)" + endSep;
+			const regEx = new RegExp(regexStr, "g");
+			//console.log(regexStr);
+			var newString = content.replaceAll(regEx, resultSep + "$1" + resultSep);
+			node.textContent = newString;
+		}
+	}
+}
+
+function addPropsFromTextNode(node) {
+	var textString = node.textContent;
+	var i = 0;
+	while (textString.indexOf(startSep) >= 0) {
+		textString = textString.substring(textString.indexOf(startSep) + startSep.length);
+		var prop = textString.substring(0, textString.indexOf(endSep))
+		var address = new PropAddr(node, i, []);
+		addProp(prop, address);
+		i++;
+	}
+}
+
+function addPropsFromAttribute(node) {
+	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));
+	prop = prop.substring(prop.indexOf(intSep) + intSep.length)
+	var rawText = prop.substring(0, prop.indexOf(intSep));
+	prop = prop.substring(prop.indexOf(intSep) + intSep.length)
+	var textArgs = [];
+	var i = 0;
+	while (prop.indexOf(intSep) >= 0) {
+		var textArg = prop.substring(0, prop.indexOf(intSep))
+		prop = prop.substring(prop.indexOf(intSep) + intSep.length);
+		textArgs.push(textArg);
+		i++;
+	}
+	address.args = textArgs;
+	var formText = prop;
+	var propInfo = null;
+	if (pageTranslations.has(key)) {
+		propInfo = pageTranslations.get(key);
+		//TODO: CHECK ADDRESS BEFORE ADDING ANOTHER ONE
+		propInfo.addresses.push(address);
+	} else {
+		propInfo = new PropInfo(rawText, formText, address);
+		pageTranslations.set(key, propInfo)
+	}
+	return propInfo;
+}
+
+window.addEventListener('load', function() {
+	setTimeout(function() {
+		translationsParsing();
+		createTranslationsInterface();
+	}, 1000);
+})

webapp/src/main/webapp/templates/freemarker/page/partials/headScripts.ftl

@@ -9,6 +9,8 @@ var i18nStrings = {
 <script type="text/javascript" src="${urls.base}/js/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="${urls.base}/js/jquery-migrate-1.4.1.js"></script>
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
+<script type="text/javascript" src="${urls.base}/js/FileSaver.js"></script>
+<script defer type="text/javascript" src="${urls.base}/js/translations.js"></script>
 
 <#-- script for enabling new HTML5 semantic markup in IE browsers -->
 <!--[if lt IE 9]>