<!DOCTYPE html> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" /> <script type="text/javascript" src="scripts/common-0.0.1.js"></script> <script type="text/javascript" src="scripts/filesaver.js"></script> <style> .listItem { width: calc(100vh - 8); background-color: lightgray; border-radius: 5px; box-sizing: border-box; margin: 4px; padding: 6px; text-align: left; cursor: pointer; } .listItem:hover { background-color: darkgray; } .listItemSel { width: calc(100vh - 8); background-color: #CFC; border-radius: 5px; box-sizing: border-box; margin: 4px; padding: 6px; text-align: left; } </style> </head> <body style="overflow:hidden" onbeforeunload="return onBeforeUnload(event)"> <div id=p11 class="noselect" style="overflow:hidden;position:relative"> <div id="startTips" style="top:15px;right:15px;width:calc(50vh);position:absolute;background-color:gold;z-index:1000;padding:10px;border-radius:8px;box-shadow:3px 3px 10px gray"> Welcome to the MeshCentral translator. You can use this to help translate MeshCentral into other languages. Start by selecting a language, translate a few strings and save the strings to your server. Then, hit "Translate Server" to apply your changes to your server's web pages.<br /><br /> When ready, please mail the "meshcentral-data/translate.json" file to <a href="mailto:ylianst@gmail.com">ylianst@gmail.com</a> for inclusion in the MeshCentral official builds.<br /><br /> <a onclick="closeStartTips()"><b>Close</b></a> </div> <div id=deskarea0> <div id="bigok" style="display:none;left:calc((100vh / 2))"><b>✓</b></div> <div id="bigfail" style="display:none;left:calc((100vh / 2))"><b>✗</b></div> <div id=deskarea0 style="position:absolute;left:0;right:0;top:0;height:28px;background-color:#036;color:#c8c8c8"> <input style="float:right;margin:3px" id="TransServerButton" type=button value="Translate Server" onclick="translateServer()"> <div style="float:right;padding:2px" id="mainStatus"></div> <div style="font-size:20px;font-family:Arial;padding:3px"><b>MeshCentral Translator</b></div> </div> <div id=deskarea1 class="areaHead" style="margin-top:28px"> <div class="toright2" style="margin-top:3px;margin-right:5px"> <span id="status"></span> </div> <div> <input id="OpenFileButton" type=button value="Open File..." onclick="openfile()" style="display:none"> <input id="SaveServerButton" title="Ctrl-S" type=button value="Save to Server (F3)" onclick="saveServerTranslations()"> <input id="SaveFileButton" title="Ctrl-Shift-S" type=button value="Save to File (F4)" onclick="saveToFile()"> <select id="langSelector" onchange="langSelectorChange()"> <option value="ar">Arabic (ar)</option> <option value="da">Danish (da)</option> <option value="fi">Finnish (fi)</option> <option value="fr">French (fr)</option> <option value="cs">Czech (cs)</option> <option value="de">German (de)</option> <option value="el">Greek (el)</option> <option value="he">Hebrew (he)</option> <option value="hi">Hindi (hi)</option> <option value="it">Italian (it)</option> <option value="ja">Japanese (ja)</option> <option value="ko">Korean (ko)</option> <option value="nl">Dutch (nl)</option> <option value="pl">Polish (pl)</option> <option value="pt">Portuguese (pt)</option> <option value="pt-br">Portuguese Brazil (pt-br)</option> <option value="ru">Russian (ru)</option> <option value="ro">Romanian (ro)</option> <option value="zh-CHS">Simplified Chinese (zh-CHS)</option> <option value="zh-CHT">Traditional Chinese (zh-CHT)</option> <option value="es">Spanish (es)</option> <option value="sv">Swedish (sv)</option> <option value="tr">Turkish (tr)</option> </select> <input id="searchInput" type="text" placeholder="Search" onchange="onSearchChanged()" onkeyup="onSearchChanged()"> <label><input id="showLocCheck" type="checkbox" onchange="onLocChanged()"> Show Location</label> <label><input id="showNoTransOnlyCheck" type="checkbox" onchange="onSearchChanged(true)">Show No Translations Only</label> </div> </div> <div id=deskarea2 style=""> <div class="areaProgress"><div id="progressbar" style="background-color:blue"></div></div> </div> <div id=deskarea3x style="max-height:calc(100vh - 82px);height:calc(100vh - 54px);background-color:gray"> <div id="mainListArea" style="height:calc(33.33vh);overflow-y:scroll"> <div class="listItem"><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(20% - 10px)"></div></div> </div> <textarea id="defaultTextArea" autocomplete=off readonly style="height:calc(28.33vh);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE"></textarea> <textarea id="translatedTextArea" autocomplete=off style="height:calc(38.33vh - 96px);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE" onkeyup="onSourceChange()"></textarea> </div> <div id=deskarea4 class="areaFoot"> <div class="toright2"> <input id="CopySource" type=button value="Copy English (F5)" onclick="copySource()"> <input id="PrevButton" type=button value="Prev (PgUp)" onclick="prev()"> <input id="NextButton" type=button value="Next (PgDn)" onclick="next()"> </div> <div style="height:22px"> <input id="SetButton" type=button value="Set (F1)" onclick="setTranslation()"> <input id="CancelButton" type=button value="Cancel (F2)" onclick="cancelTranslation()"> </div> </div> </div> <div id=dialog class="noselect" style="display:none"> <div id=dialogHeader> <div tabindex=0 id=id_dialogclose onclick=setDialogMode() onkeypress="if (event.key == 'Enter') setDialogMode()">✖</div> <div id=id_dialogtitle></div> </div> <div id=dialogBody> <div id=dialog1> <div id=id_dialogMessage style=""></div> </div> <div id=dialog2 style=""> <div id=id_dialogOptions></div> </div> </div> <div id="idx_dlgButtonBar"> <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)"> <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)"> <div><input id="idx_dlgDeleteButton" type="button" value="Delete" style="display:none" onclick="dialogclose(2)"></div> </div> </div> </div> <script> var translations = null; var selectedLanguage = Q('langSelector').value; var selectedItem = 0; var changes = false; function start() { window.onresize = deskAdjust; document.ondrop = ondrop; document.ondragover = ondragover; document.ondragleave = ondragleave; document.onkeypress = onkeypress; document.onkeydown = onkeydown; document.onkeyup = onkeyup; updateMainList(); loadServerTranslations(); QE('SaveServerButton', false); } function onBeforeUnload(e) { if (changes) { e.preventDefault(); e.resturnValue = ''; } } function closeStartTips() { QV('startTips', false); } function langSelectorChange() { selectedLanguage = Q('langSelector').value; updateMainList(); onSearchChanged(true); select(0, true, false); } function cleanup() { translationFile = null; updateMainList(); Q('searchInput').value = ''; currentSearchFilter = ''; } function ondrop(e) { haltEvent(e); QV('bigfail', false); QV('bigok', false); // Check if these are files we can upload, remove all folders. if (e.dataTransfer == null) return; var files = []; for (var i in e.dataTransfer.files) { if ((e.dataTransfer.files[i].type != null) && (e.dataTransfer.files[i].size != null) && (e.dataTransfer.files[i].size != 0) && (e.dataTransfer.files[i].name.endsWith('.json'))) { files.push(e.dataTransfer.files[i]); } } if (files.length == 0) return; cleanup(); readFile(files[0]); } var dragtimer = null; function ondragover(e) { haltEvent(e); if (dragtimer != null) { clearTimeout(dragtimer); dragtimer = null; } var ac = true; QV('bigok', ac); QV('bigfail', !ac); } function ondragleave(e) { haltEvent(e); dragtimer = setTimeout(function () { QV('bigfail', false); QV('bigok', false); dragtimer = null; }, 10); } function onkeypress(e) { if (xxdialogMode) return; //if (e.key == ' ') { togglePause(); haltEvent(e); } } function onkeydown(e) { if (xxdialogMode) return; if (e.key == 'F1') { setTranslation(); haltEvent(e); return false; } // Set translation if (e.key == 'F2') { cancelTranslation(); haltEvent(e); return false; } // Cancel translation if (e.key == 'F3') { saveServerTranslations(); haltEvent(e); return false; } // Save to server if (e.key == 'F4') { saveToFile(); haltEvent(e); return false; } // Save to file if (e.key == 'F5') { copySource(); haltEvent(e); return false; } // Copy source } function onkeyup(e) { if (xxdialogMode) return; if (e.key == 'PageUp') { setTranslation(); prev(); haltEvent(e); return false; } // Save and move to previous if (e.key == 'PageDown') { setTranslation(); next(); haltEvent(e); return false; } // Save and move to next } function deskAdjust() { } function openfile() { var x = '<input type=file name=files id=p2fileinput style=width:100% accept=".json" onchange="openfileChanged()" />'; setDialogMode(2, "Open File...", 3, openfileEx, x); QE('idx_dlgOkButton', false); } function openfileEx() { var xfiles = Q('p2fileinput').files; if (xfiles != null) { var files = []; for (var i in xfiles) { if ((xfiles[i].type != null) && (xfiles[i].size != null) && (xfiles[i].size != 0) && (xfiles[i].name.endsWith('.json'))) { files.push(xfiles[i]); } } } if (files.length == 0) return; cleanup(); readFile(files[0]); Q('OpenFileButton').blur(); } function openfileChanged() { var xfiles = Q('p2fileinput').files; if (xfiles != null) { var files = []; for (var i in xfiles) { if ((xfiles[i].type != null) && (xfiles[i].size != null) && (xfiles[i].size != 0) && (xfiles[i].name.endsWith('.json'))) { files.push(xfiles[i]); } } } QE('idx_dlgOkButton', files.length == 1); } function readFile(translationFile) { var fr = new FileReader(); fr.onload = function () { var file = null; try { file = JSON.parse(this.result); } catch (ex) { } if ((file != null) && (typeof file.strings == 'object') && (file.strings.length > 0)) { translations = file.strings; translations.sort(enSort); Q('searchInput').value = ''; currentSearchFilter = ''; updateMainList(); select(0, true); } }; fr.readAsText(translationFile); } function updateMainList() { var x = []; if (translations != null) { //console.log(translations); for (var i in translations) { var source = EscapeHtml(translations[i].en); var target = ''; if (translations[i][selectedLanguage] != null) { target = EscapeHtml(translations[i][selectedLanguage]); } var comment = ''; // <span id=ns' + i + ' style=display:none>▶ </span> x.push('<div class="listItem" id=nx' + i + ' onclick=select(' + i + ')><div id=ns' + i + ' style="display:inline-block;width:calc(40% - 10px)">' + source + '</div><div id=nt' + i + ' style="display:inline-block;width:calc(40% - 10px)">' + target + '</div><div id=nc' + i + ' style="display:inline-block;width:calc(20% - 10px)">' + comment + '</div></div>'); } } QH('mainListArea', x.join('')); updateButtons(); onSearchChanged(true); } function select(i, scroll, nofocus) { // Hold selection is a change was made but not commited. if ((scroll == null) && (isTargetChanged() == true)) { return; } Q('nx' + selectedItem).classList.remove('listItemSel'); Q('nx' + selectedItem).classList.add('listItem'); selectedItem = i; Q('nx' + selectedItem).classList.remove('listItem'); Q('nx' + selectedItem).classList.add('listItemSel'); if (scroll === true) { var x = (Q('mainListArea').clientHeight / 2) - (Q('nx' + selectedItem).clientHeight / 2); if (x < 0) { x = 0; } Q('mainListArea').scrollTop = Q('nx' + selectedItem).offsetTop - x; } onLocChanged(); if (translations[i][selectedLanguage] != null) { Q('translatedTextArea').value = translations[selectedItem][selectedLanguage]; } else { Q('translatedTextArea').value = ''; } if (nofocus == true) { Q('translatedTextArea').focus(); } updateButtons(); } function next() { if (selectedItem < (translations.length - 1)) { select(selectedItem + 1, true); } } function prev() { if (selectedItem > 0) { select(selectedItem - 1, true); } } function copySource() { Q('translatedTextArea').value = translations[selectedItem].en; Q('translatedTextArea').focus(); } function updateButtons() { QE('SaveFileButton', translations != null); QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1))); QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0)); QE('CopySource', translations != null); if (translations == null) { QH('status', ''); QS('progressbar').width = '0%'; } else { QH('status', (selectedItem + 1) + ' / ' + translations.length); QS('progressbar').width = Math.floor(100 * ((selectedItem + 1) / translations.length)) + '%'; } onSourceChange(); } function enSort(a, b) { if (a.en.toLowerCase() > b.en.toLowerCase()) return 1; if (a.en.toLowerCase() < b.en.toLowerCase()) return -1; return 0; } var currentSearchFilter = ''; function onSearchChanged(force) { var showNoTranslationOnly = Q('showNoTransOnlyCheck').checked; if ((force != true) && (currentSearchFilter == Q('searchInput').value)) return; currentSearchFilter = Q('searchInput').value; var currentSearchFilterLower = currentSearchFilter.toLowerCase(); if (translations != null) { for (var i in translations) { var show = (!showNoTranslationOnly) || (translations[i][selectedLanguage] == null) || (translations[i][selectedLanguage] == ''); if (currentSearchFilter == '') { QV('nx' + i, show); } else { QV('nx' + i, show && (((translations[i][selectedLanguage] != null) && (translations[i][selectedLanguage].toLowerCase().indexOf(currentSearchFilterLower) >= 0)) || (translations[i]['en'].toLowerCase().indexOf(currentSearchFilterLower) >= 0))); } } } } function onLocChanged() { if (Q('showLocCheck').checked) { if ((translations[selectedItem].xloc != null) && (translations[selectedItem].xloc.length > 0)) { if (translations[selectedItem].xloc.length == 1) { QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocation:\r\n' + translations[selectedItem].xloc.join('\r\n')); } else { QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocations:\r\n' + translations[selectedItem].xloc.join('\r\n')); } } else { QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nNo locations.'); } } else { QH('defaultTextArea', translations[selectedItem]['en']); } } // Poll the server, if it responds, refresh the page. function loadServerTranslations() { var xdr = null; try { xdr = new XDomainRequest(); } catch (e) { } if (!xdr) xdr = new XMLHttpRequest(); xdr.open('POST', window.location.origin + '/translations'); xdr.timeout = 30000; xdr.onload = function () { var x = null; try { x = JSON.parse(this.responseText); } catch (ex) { } if ((x == null) || (typeof x.strings != 'object')) { messagebox('Translations', 'ERROR: Unable to parse translations from the server.'); return; } translations = x.strings; translations.sort(enSort); Q('searchInput').value = ''; currentSearchFilter = ''; updateMainList(); select(0, true); }; xdr.onerror = function () { messagebox('Translations', 'ERROR: Unable to load translations from the server.'); }; xdr.send('{ "action":"getTranslations" }'); } // Save to server function saveServerTranslations() { var xdr = null; try { xdr = new XDomainRequest(); } catch (e) { } if (!xdr) xdr = new XMLHttpRequest(); xdr.open('POST', window.location.origin + '/translations'); xdr.timeout = 30000; xdr.onload = function () { var x = null; try { x = JSON.parse(this.responseText); } catch (ex) { } if ((x == null) || (x.response == null)) { messagebox('Translations', 'ERROR: Unable to parse server response.'); return; } if (x.response == 'ok') { changes = false; QE('SaveServerButton', false); QS('SaveServerButton')['background-color'] = null; } else { messagebox('Translations', 'ERROR: ' + x.response); } }; xdr.onerror = function () { messagebox('Translations', 'ERROR: Unable to save translations to server.'); }; xdr.send(JSON.stringify({ 'action': 'setTranslations', strings: translations })); } // Convert the translations to a standardized JSON we can use in GitHub // Strings are sorder by english source and object keys are sorted function translationsToJson(t) { var arr2 = [], arr = t.strings; for (var i in arr) { var names = []; el = arr[i], el2 = {}; for (var j in el) { names.push(j); } names.sort(); for (var j in names) { el2[names[j]] = el[names[j]]; } if (el2.xloc != null) { el2.xloc.sort(); } arr2.push(el2); } arr2.sort(function (a, b) { if (a.en > b.en) return 1; if (a.en < b.en) return -1; return 0; }); return JSON.stringify({ strings: arr2 }, null, ' '); } function saveToFile() { saveAs(utf2blob(translationsToJson({ strings: translations })), 'translate.json'); } function setTranslation() { if (Q('translatedTextArea').value == '') { delete translations[selectedItem][selectedLanguage]; QH('nt' + selectedItem, ''); } else { translations[selectedItem][selectedLanguage] = Q('translatedTextArea').value; QH('nt' + selectedItem, translations[selectedItem][selectedLanguage]); } onSourceChange(); changes = true; QE('SaveServerButton', true); QS('SaveServerButton')['background-color'] = '#F93'; } function cancelTranslation() { Q('translatedTextArea').value = translations[selectedItem][selectedLanguage]; } function isTargetChanged() { if (translations == null) { return false; } var source = ''; if (translations[selectedItem][selectedLanguage] != null) { source = translations[selectedItem][selectedLanguage]; } return (source != Q('translatedTextArea').value); } function onSourceChange() { var x = isTargetChanged(); QE('SetButton', x); QE('CancelButton', x); QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1))); QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0)); QS('translatedTextArea')['background-color'] = ((x == true) ? 'white' : '#EFE'); QE('SaveFileButton', !x); QE('searchInput', !x); QE('showLocCheck', !x); QE('langSelector', !x); QE('TransServerButton', !x); QE('SaveServerButton', changes && !x); } function translateServer() { var x = "Perform server translation? The MeshCentral server will reset for 10 to 30 seconds to perform this operation."; setDialogMode(2, "Translate Server", 3, translateServerEx, x); } function translateServerEx() { QE('TransServerButton', false); setTimeout(function () { QE('TransServerButton', true); }, 5000); var xdr = null; try { xdr = new XDomainRequest(); } catch (e) { } if (!xdr) xdr = new XMLHttpRequest(); xdr.open('POST', window.location.origin + '/translations'); xdr.timeout = 30000; xdr.onload = function () { var x = null; try { x = JSON.parse(this.responseText); } catch (ex) { } if ((x == null) || (x.response == null)) { messagebox("Server Translation", "ERROR: Unable to parse server response."); return; } if (x.response == 'ok') { messagebox("Server Translation", "Server translation initiated, this will take a minute or two. Once done, you can refresh the MeshCentral web pages to see the changes.<br /><br />When ready, please mail the file \"meshcentral-data/translate.json\" to <a href=\"mailto:ylianst@gmail.com\">ylianst@gmail.com</a> for inclusion on the official build."); } else { messagebox("Server Translation", "ERROR: " + x.response); } }; xdr.onerror = function () { messagebox("Translations", "ERROR: Unable to save translations to server."); }; xdr.send(JSON.stringify({ 'action': 'translateServer', strings: translations })); } // // POPUP DIALOG // // null = Hidden, 1 = Generic Message var xxdialogMode; var xxdialogFunc; var xxdialogButtons; var xxdialogTag; var xxcurrentView = -1; // Display a dialog box // Parameters: Dialog Mode (0 = none), Dialog Title, Buttons (1 = OK, 2 = Cancel, 3 = OK & Cancel), Call back function(0 = Cancel, 1 = OK), Dialog Content (Mode 2 only) function setDialogMode(x, y, b, f, c, tag) { xxdialogMode = x; xxdialogFunc = f; xxdialogButtons = b; xxdialogTag = tag; QE('idx_dlgOkButton', true); QV('idx_dlgOkButton', b & 1); QV('idx_dlgCancelButton', b & 2); QV('id_dialogclose', (b & 2) || (b & 8)); QV('idx_dlgDeleteButton', b & 4); QV('idx_dlgButtonBar', b & 7); if (y) QH('id_dialogtitle', y); for (var i = 1; i < 3; i++) { QV('dialog' + i, i == x); } // Edit this line when more dialogs are added QV('dialog', x); if (c) { if (x == 2) { QH('id_dialogOptions', c); } else { QH('id_dialogMessage', c); } } } function dialogclose(x) { var f = xxdialogFunc, b = xxdialogButtons, t = xxdialogTag; setDialogMode(); if (((b & 8) || x) && f) f(x, t); } function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); } function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); } function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; } function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); } function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); }; start(); </script> </body> </html>