master
htm 723 lines 40 KB
Raw
1 <!DOCTYPE html>
2 <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5 <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
6 <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
7 <meta name="apple-mobile-web-app-capable" content="yes" />
8 <meta name="format-detection" content="telephone=no" />
9 <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
10 <script type="text/javascript" src="scripts/common-0.0.1.js"></script>
11 <script type="text/javascript" src="scripts/filesaver.js"></script>
12 <style>
13 .listItem {
14 width: calc(100vh - 8);
15 background-color: lightgray;
16 border-radius: 5px;
17 box-sizing: border-box;
18 margin: 4px;
19 padding: 6px;
20 text-align: left;
21 cursor: pointer;
22 }
23
24 .listItem:hover {
25 background-color: darkgray;
26 }
27
28 .listItemSel {
29 width: calc(100vh - 8);
30 background-color: #CFC;
31 border-radius: 5px;
32 box-sizing: border-box;
33 margin: 4px;
34 padding: 6px;
35 text-align: left;
36 }
37 </style>
38 </head>
39 <body style="overflow:hidden" onbeforeunload="return onBeforeUnload(event)">
40 <div id=p11 class="noselect" style="overflow:hidden;position:relative">
41 <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">
42 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 />
43 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 />
44 <a onclick="closeStartTips()"><b>Close</b></a>
45 </div>
46 <div id=deskarea0>
47 <div id="bigok" style="display:none;left:calc((100vh / 2))"><b>&checkmark;</b></div>
48 <div id="bigfail" style="display:none;left:calc((100vh / 2))"><b>&#10007;</b></div>
49 <div id=deskarea0 style="position:absolute;left:0;right:0;top:0;height:28px;background-color:#036;color:#c8c8c8">
50 <input style="float:right;margin:3px" id="TransServerButton" type=button value="Translate Server" onclick="translateServer()">
51 <div style="float:right;padding:2px" id="mainStatus"></div>
52 <div style="font-size:20px;font-family:Arial;padding:3px"><b>MeshCentral Translator</b></div>
53 </div>
54 <div id=deskarea1 class="areaHead" style="margin-top:28px">
55 <div class="toright2" style="margin-top:3px;margin-right:5px">
56 <span id="status"></span>
57 </div>
58 <div>
59 <input id="OpenFileButton" type=button value="Open File..." onclick="openfile()" style="display:none">
60 <input id="SaveServerButton" title="Ctrl-S" type=button value="Save to Server (F3)" onclick="saveServerTranslations()">
61 <input id="SaveFileButton" title="Ctrl-Shift-S" type=button value="Save to File (F4)" onclick="saveToFile()">
62 <select id="langSelector" onchange="langSelectorChange()">
63 <option value="af">Afrikaans (af)</option>
64 <option value="sq">Albanian (sq)</option>
65 <option value="ar">Arabic (Standard) (ar)</option>
66 <option value="ar-dz">Arabic (Algeria) (ar-dz)</option>
67 <option value="ar-bh">Arabic (Bahrain) (ar-bh)</option>
68 <option value="ar-eg">Arabic (Egypt) (ar-eg)</option>
69 <option value="ar-iq">Arabic (Iraq) (ar-iq)</option>
70 <option value="ar-jo">Arabic (Jordan) (ar-jo)</option>
71 <option value="ar-kw">Arabic (Kuwait) (ar-kw)</option>
72 <option value="ar-lb">Arabic (Lebanon) (ar-lb)</option>
73 <option value="ar-ly">Arabic (Libya) (ar-ly)</option>
74 <option value="ar-ma">Arabic (Morocco) (ar-ma)</option>
75 <option value="ar-om">Arabic (Oman) (ar-om)</option>
76 <option value="ar-qa">Arabic (Qatar) (ar-qa)</option>
77 <option value="ar-sa">Arabic (Saudi Arabia) (ar-sa)</option>
78 <option value="ar-sy">Arabic (Syria) (ar-sy)</option>
79 <option value="ar-tn">Arabic (Tunisia) (ar-tn)</option>
80 <option value="ar-ae">Arabic (U.A.E.) (ar-ae)</option>
81 <option value="ar-ye">Arabic (Yemen) (ar-ye)</option>
82 <option value="an">Aragonese (an)</option>
83 <option value="hy">Armenian (hy)</option>
84 <option value="as">Assamese (as)</option>
85 <option value="ast">Asturian (ast)</option>
86 <option value="az">Azerbaijani (az)</option>
87 <option value="eu">Basque (eu)</option>
88 <option value="bg">Bulgarian (bg)</option>
89 <option value="be">Belarusian (be)</option>
90 <option value="bn">Bengali (bn)</option>
91 <option value="bs">Bosnian (bs)</option>
92 <option value="br">Breton (br)</option>
93 <option value="my">Burmese (my)</option>
94 <option value="ca">Catalan (ca)</option>
95 <option value="ch">Chamorro (ch)</option>
96 <option value="ce">Chechen (ce)</option>
97 <option value="zh">Chinese (zh)</option>
98 <option value="zh-hk">Chinese (Hong Kong) (zh-hk)</option>
99 <option value="zh-cn">Chinese (PRC) (zh-cn)</option>
100 <option value="zh-sg">Chinese (Singapore) (zh-sg)</option>
101 <option value="zh-tw">Chinese (Taiwan) (zh-tw)</option>
102 <option value="zh-CHS">Simplified Chinese (zh-CHS)</option>
103 <option value="zh-CHT">Traditional Chinese (zh-CHT)</option>
104 <option value="cv">Chuvash (cv)</option>
105 <option value="co">Corsican (co)</option>
106 <option value="cr">Cree (cr)</option>
107 <option value="hr">Croatian (hr)</option>
108 <option value="cs">Czech (cs)</option>
109 <option value="da">Danish (da)</option>
110 <option value="nl">Dutch (Standard) (nl)</option>
111 <option value="nl-be">Dutch (Belgian) (nl-be)</option>
112 <option value="en">English (en)</option>
113 <option value="en-au">English (Australia) (en-au)</option>
114 <option value="en-bz">English (Belize) (en-bz)</option>
115 <option value="en-ca">English (Canada) (en-ca)</option>
116 <option value="en-ie">English (Ireland) (en-ie)</option>
117 <option value="en-jm">English (Jamaica) (en-jm)</option>
118 <option value="en-nz">English (New Zealand) (en-nz)</option>
119 <option value="en-ph">English (Philippines) (en-ph)</option>
120 <option value="en-za">English (South Africa) (en-za)</option>
121 <option value="en-tt">English (Trinidad & Tobago) (en-tt)</option>
122 <option value="en-gb">English (United Kingdom) (en-gb)</option>
123 <option value="en-us">English (United States) (en-us)</option>
124 <option value="en-zw">English (Zimbabwe) (en-zw)</option>
125 <option value="eo">Esperanto (eo)</option>
126 <option value="et">Estonian (et)</option>
127 <option value="fo">Faeroese (fo)</option>
128 <option value="fa">Farsi (Persian) (fa)</option>
129 <option value="fj">Fijian (fj)</option>
130 <option value="fi">Finnish (fi)</option>
131 <option value="fr">French (Standard) (fr)</option>
132 <option value="fr-be">French (Belgium) (fr-be)</option>
133 <option value="fr-ca">French (Canada) (fr-ca)</option>
134 <option value="fr-fr">French (France) (fr-fr)</option>
135 <option value="fr-lu">French (Luxembourg) (fr-lu)</option>
136 <option value="fr-mc">French (Monaco) (fr-mc)</option>
137 <option value="fr-ch">French (Switzerland) (fr-ch)</option>
138 <option value="fy">Frisian (fy)</option>
139 <option value="fur">Friulian (fur)</option>
140 <option value="gd">Gaelic (Scots) (gd)</option>
141 <option value="gd-ie">Gaelic (Irish) (gd-ie)</option>
142 <option value="gl">Galacian (gl)</option>
143 <option value="ka">Georgian (ka)</option>
144 <option value="de">German (Standard) (de)</option>
145 <option value="de-at">German (Austria) (de-at)</option>
146 <option value="de-de">German (Germany) (de-de)</option>
147 <option value="de-li">German (Liechtenstein) (de-li)</option>
148 <option value="de-lu">German (Luxembourg) (de-lu)</option>
149 <option value="de-ch">German (Switzerland) (de-ch)</option>
150 <option value="el">Greek (el)</option>
151 <option value="gu">Gujurati (gu)</option>
152 <option value="ht">Haitian (ht)</option>
153 <option value="he">Hebrew (he)</option>
154 <option value="hi">Hindi (hi)</option>
155 <option value="hu">Hungarian (hu)</option>
156 <option value="is">Icelandic (is)</option>
157 <option value="id">Indonesian (id)</option>
158 <option value="iu">Inuktitut (iu)</option>
159 <option value="ga">Irish (ga)</option>
160 <option value="it">Italian (Standard) (it)</option>
161 <option value="it-ch">Italian (Switzerland) (it-ch)</option>
162 <option value="ja">Japanese (ja)</option>
163 <option value="kn">Kannada (kn)</option>
164 <option value="ks">Kashmiri (ks)</option>
165 <option value="kk">Kazakh (kk)</option>
166 <option value="km">Khmer (km)</option>
167 <option value="ky">Kirghiz (ky)</option>
168 <option value="tlh">Klingon (tlh)</option>
169 <option value="ko">Korean (ko)</option>
170 <option value="ko-kp">Korean (North Korea) (ko-kp)</option>
171 <option value="ko-kr">Korean (South Korea) (ko-kr)</option>
172 <option value="la">Latin (la)</option>
173 <option value="lv">Latvian (lv)</option>
174 <option value="lt">Lithuanian (lt)</option>
175 <option value="lb">Luxembourgish (lb)</option>
176 <option value="mk">FYRO Macedonian (mk)</option>
177 <option value="ms">Malay (ms)</option>
178 <option value="ml">Malayalam (ml)</option>
179 <option value="mt">Maltese (mt)</option>
180 <option value="mi">Maori (mi)</option>
181 <option value="mr">Marathi (mr)</option>
182 <option value="mo">Moldavian (mo)</option>
183 <option value="nv">Navajo (nv)</option>
184 <option value="ng">Ndonga (ng)</option>
185 <option value="ne">Nepali (ne)</option>
186 <option value="no">Norwegian (no)</option>
187 <option value="nb">Norwegian (Bokmal) (nb)</option>
188 <option value="nn">Norwegian (Nynorsk) (nn)</option>
189 <option value="oc">Occitan (oc)</option>
190 <option value="or">Oriya (or)</option>
191 <option value="om">Oromo (om)</option>
192 <option value="fa-ir">Persian/Iran (fa-ir)</option>
193 <option value="pl">Polish (pl)</option>
194 <option value="pt">Portuguese (pt)</option>
195 <option value="pt-br">Portuguese (Brazil) (pt-br)</option>
196 <option value="pa">Punjabi (pa)</option>
197 <option value="pa-in">Punjabi (India) (pa-in)</option>
198 <option value="pa-pk">Punjabi (Pakistan) (pa-pk)</option>
199 <option value="qu">Quechua (qu)</option>
200 <option value="rm">Rhaeto-Romanic (rm)</option>
201 <option value="ro">Romanian (ro)</option>
202 <option value="ro-mo">Romanian (Moldavia) (ro-mo)</option>
203 <option value="ru">Russian (ru)</option>
204 <option value="ru-mo">Russian (Moldavia) (ru-mo)</option>
205 <option value="sz">Sami (Lappish) (sz)</option>
206 <option value="sg">Sango (sg)</option>
207 <option value="sa">Sanskrit (sa)</option>
208 <option value="sc">Sardinian (sc)</option>
209 <option value="sd">Sindhi (sd)</option>
210 <option value="si">Singhalese (si)</option>
211 <option value="sr">Serbian (sr)</option>
212 <option value="sk">Slovak (sk)</option>
213 <option value="sl">Slovenian (sl)</option>
214 <option value="so">Somani (so)</option>
215 <option value="sb">Sorbian (sb)</option>
216 <option value="es">Spanish (es)</option>
217 <option value="es-ar">Spanish (Argentina) (es-ar)</option>
218 <option value="es-bo">Spanish (Bolivia) (es-bo)</option>
219 <option value="es-cl">Spanish (Chile) (es-cl)</option>
220 <option value="es-co">Spanish (Colombia) (es-co)</option>
221 <option value="es-cr">Spanish (Costa Rica) (es-cr)</option>
222 <option value="es-do">Spanish (Dominican Republic) (es-do)</option>
223 <option value="es-ec">Spanish (Ecuador) (es-ec)</option>
224 <option value="es-sv">Spanish (El Salvador) (es-sv)</option>
225 <option value="es-gt">Spanish (Guatemala) (es-gt)</option>
226 <option value="es-hn">Spanish (Honduras) (es-hn)</option>
227 <option value="es-mx">Spanish (Mexico) (es-mx)</option>
228 <option value="es-ni">Spanish (Nicaragua) (es-ni)</option>
229 <option value="es-pa">Spanish (Panama) (es-pa)</option>
230 <option value="es-py">Spanish (Paraguay) (es-py)</option>
231 <option value="es-pe">Spanish (Peru) (es-pe)</option>
232 <option value="es-pr">Spanish (Puerto Rico) (es-pr)</option>
233 <option value="es-es">Spanish (Spain) (es-es)</option>
234 <option value="es-uy">Spanish (Uruguay) (es-uy)</option>
235 <option value="es-ve">Spanish (Venezuela) (es-ve)</option>
236 <option value="sx">Sutu (sx)</option>
237 <option value="sw">Swahili (sw)</option>
238 <option value="sv">Swedish (sv)</option>
239 <option value="sv-fi">Swedish (Finland) (sv-fi)</option>
240 <option value="sv-sv">Swedish (Sweden) (sv-sv)</option>
241 <option value="ta">Tamil (ta)</option>
242 <option value="tt">Tatar (tt)</option>
243 <option value="te">Teluga (te)</option>
244 <option value="th">Thai (th)</option>
245 <option value="tig">Tigre (tig)</option>
246 <option value="ts">Tsonga (ts)</option>
247 <option value="tn">Tswana (tn)</option>
248 <option value="tr">Turkish (tr)</option>
249 <option value="tk">Turkmen (tk)</option>
250 <option value="uk">Ukrainian (uk)</option>
251 <option value="hsb">Upper Sorbian (hsb)</option>
252 <option value="ur">Urdu (ur)</option>
253 <option value="ve">Venda (ve)</option>
254 <option value="vi">Vietnamese (vi)</option>
255 <option value="vo">Volapuk (vo)</option>
256 <option value="wa">Walloon (wa)</option>
257 <option value="cy">Welsh (cy)</option>
258 <option value="xh">Xhosa (xh)</option>
259 <option value="ji">Yiddish (ji)</option>
260 <option value="zu">Zulu (zu)</option>
261 </select>
262 <input id="searchInput" type="text" placeholder="Search" onchange="onSearchChanged()" onkeyup="onSearchChanged()">
263 <label><input id="showLocCheck" type="checkbox" onchange="onLocChanged()"> Show Location</label>
264 <label><input id="showNoTransOnlyCheck" type="checkbox" onchange="onSearchChanged(true)">Show No Translations Only</label>
265 </div>
266 </div>
267 <div id=deskarea2 style="">
268 <div class="areaProgress"><div id="progressbar" style="background-color:blue"></div></div>
269 </div>
270 <div id=deskarea3x style="max-height:calc(100vh - 82px);height:calc(100vh - 54px);background-color:gray">
271 <div id="mainListArea" style="height:calc(33.33vh);overflow-y:scroll">
272 <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>
273 </div>
274 <textarea id="defaultTextArea" autocomplete=off readonly style="height:calc(28.33vh);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE"></textarea>
275 <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>
276 </div>
277 <div id=deskarea4 class="areaFoot">
278 <div class="toright2">
279 <input id="CopySource" type=button value="Copy English (F5)" onclick="copySource()">
280 <input id="PrevButton" type=button value="Prev (PgUp)" onclick="prev()">
281 <input id="NextButton" type=button value="Next (PgDn)" onclick="next()">
282 </div>
283 <div style="height:22px">
284 &nbsp;
285 <input id="SetButton" type=button value="Set (F1)" onclick="setTranslation()">
286 <input id="CancelButton" type=button value="Cancel (F2)" onclick="cancelTranslation()">
287 </div>
288 </div>
289 </div>
290 <div id=dialog class="noselect" style="display:none">
291 <div id=dialogHeader>
292 <div tabindex=0 id=id_dialogclose onclick=setDialogMode() onkeypress="if (event.key == 'Enter') setDialogMode()">&#x2716;</div>
293 <div id=id_dialogtitle></div>
294 </div>
295 <div id=dialogBody>
296 <div id=dialog1>
297 <div id=id_dialogMessage style=""></div>
298 </div>
299 <div id=dialog2 style="">
300 <div id=id_dialogOptions></div>
301 </div>
302 </div>
303 <div id="idx_dlgButtonBar">
304 <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)">
305 <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)">
306 <div><input id="idx_dlgDeleteButton" type="button" value="Delete" style="display:none" onclick="dialogclose(2)"></div>
307 </div>
308 </div>
309 </div>
310 <script>
311 var translations = null;
312 var selectedLanguage = Q('langSelector').value;
313 var selectedItem = 0;
314 var changes = false;
315
316 function start() {
317 window.onresize = deskAdjust;
318 document.ondrop = ondrop;
319 document.ondragover = ondragover;
320 document.ondragleave = ondragleave;
321 document.onkeypress = onkeypress;
322 document.onkeydown = onkeydown;
323 document.onkeyup = onkeyup;
324 updateMainList();
325 loadServerTranslations();
326 QE('SaveServerButton', false);
327 }
328
329 function onBeforeUnload(e) {
330 if (changes) { e.preventDefault(); e.resturnValue = ''; }
331 }
332
333 function closeStartTips() { QV('startTips', false); }
334
335 function langSelectorChange() {
336 selectedLanguage = Q('langSelector').value;
337 updateMainList();
338 onSearchChanged(true);
339 select(0, true, false);
340 }
341
342 function cleanup() {
343 translationFile = null;
344 updateMainList();
345 Q('searchInput').value = '';
346 currentSearchFilter = '';
347 }
348
349 function ondrop(e) {
350 haltEvent(e);
351 QV('bigfail', false);
352 QV('bigok', false);
353
354 // Check if these are files we can upload, remove all folders.
355 if (e.dataTransfer == null) return;
356 var files = [];
357 for (var i in e.dataTransfer.files) {
358 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'))) {
359 files.push(e.dataTransfer.files[i]);
360 }
361 }
362 if (files.length == 0) return;
363 cleanup();
364 readFile(files[0]);
365 }
366
367 var dragtimer = null;
368 function ondragover(e) {
369 haltEvent(e);
370 if (dragtimer != null) { clearTimeout(dragtimer); dragtimer = null; }
371 var ac = true;
372 QV('bigok', ac);
373 QV('bigfail', !ac);
374 }
375
376 function ondragleave(e) {
377 haltEvent(e);
378 dragtimer = setTimeout(function () { QV('bigfail', false); QV('bigok', false); dragtimer = null; }, 10);
379 }
380
381 function onkeypress(e) {
382 if (xxdialogMode) return;
383 //if (e.key == ' ') { togglePause(); haltEvent(e); }
384 }
385
386 function onkeydown(e) {
387 if (xxdialogMode) return;
388 if (e.key == 'F1') { setTranslation(); haltEvent(e); return false; } // Set translation
389 if (e.key == 'F2') { cancelTranslation(); haltEvent(e); return false; } // Cancel translation
390 if (e.key == 'F3') { saveServerTranslations(); haltEvent(e); return false; } // Save to server
391 if (e.key == 'F4') { saveToFile(); haltEvent(e); return false; } // Save to file
392 if (e.key == 'F5') { copySource(); haltEvent(e); return false; } // Copy source
393 }
394
395 function onkeyup(e) {
396 if (xxdialogMode) return;
397 if (e.key == 'PageUp') { setTranslation(); prev(); haltEvent(e); return false; } // Save and move to previous
398 if (e.key == 'PageDown') { setTranslation(); next(); haltEvent(e); return false; } // Save and move to next
399 }
400
401 function deskAdjust() {
402
403 }
404
405 function openfile() {
406 var x = '<input type=file name=files id=p2fileinput style=width:100% accept=".json" onchange="openfileChanged()" />';
407 setDialogMode(2, "Open File...", 3, openfileEx, x);
408 QE('idx_dlgOkButton', false);
409 }
410
411 function openfileEx() {
412 var xfiles = Q('p2fileinput').files;
413 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]); } } }
414 if (files.length == 0) return;
415 cleanup();
416 readFile(files[0]);
417 Q('OpenFileButton').blur();
418 }
419
420 function openfileChanged() {
421 var xfiles = Q('p2fileinput').files;
422 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]); } } }
423 QE('idx_dlgOkButton', files.length == 1);
424 }
425
426 function readFile(translationFile) {
427 var fr = new FileReader();
428 fr.onload = function () {
429 var file = null;
430 try { file = JSON.parse(this.result); } catch (ex) { }
431 if ((file != null) && (typeof file.strings == 'object') && (file.strings.length > 0)) {
432 translations = file.strings;
433 translations.sort(enSort);
434 Q('searchInput').value = '';
435 currentSearchFilter = '';
436 updateMainList();
437 select(0, true);
438 }
439 };
440 fr.readAsText(translationFile);
441 }
442
443 function updateMainList() {
444 var x = [];
445 if (translations != null) {
446 //console.log(translations);
447 for (var i in translations) {
448 var source = EscapeHtml(translations[i].en);
449 var target = '';
450 if (translations[i][selectedLanguage] != null) { target = EscapeHtml(translations[i][selectedLanguage]); }
451 var comment = '';
452 // <span id=ns' + i + ' style=display:none>&#9654;&nbsp;</span>
453 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>');
454 }
455 }
456 QH('mainListArea', x.join(''));
457 updateButtons();
458 onSearchChanged(true);
459 }
460
461 function select(i, scroll, nofocus) {
462 // Hold selection is a change was made but not commited.
463 if ((scroll == null) && (isTargetChanged() == true)) { return; }
464
465 Q('nx' + selectedItem).classList.remove('listItemSel');
466 Q('nx' + selectedItem).classList.add('listItem');
467 selectedItem = i;
468 Q('nx' + selectedItem).classList.remove('listItem');
469 Q('nx' + selectedItem).classList.add('listItemSel');
470 if (scroll === true) {
471 var x = (Q('mainListArea').clientHeight / 2) - (Q('nx' + selectedItem).clientHeight / 2);
472 if (x < 0) { x = 0; }
473 Q('mainListArea').scrollTop = Q('nx' + selectedItem).offsetTop - x;
474 }
475 onLocChanged();
476 if (translations[i][selectedLanguage] != null) {
477 Q('translatedTextArea').value = translations[selectedItem][selectedLanguage];
478 } else {
479 Q('translatedTextArea').value = '';
480 }
481 if (nofocus == true) { Q('translatedTextArea').focus(); }
482 updateButtons();
483 }
484
485 function next() { if (selectedItem < (translations.length - 1)) { select(selectedItem + 1, true); } }
486 function prev() { if (selectedItem > 0) { select(selectedItem - 1, true); } }
487 function copySource() { Q('translatedTextArea').value = translations[selectedItem].en; Q('translatedTextArea').focus(); }
488
489 function updateButtons() {
490 QE('SaveFileButton', translations != null);
491 QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1)));
492 QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0));
493 QE('CopySource', translations != null);
494 if (translations == null) {
495 QH('status', '');
496 QS('progressbar').width = '0%';
497 } else {
498 QH('status', (selectedItem + 1) + ' / ' + translations.length);
499 QS('progressbar').width = Math.floor(100 * ((selectedItem + 1) / translations.length)) + '%';
500 }
501 onSourceChange();
502 }
503
504 function enSort(a, b) { if (a.en.toLowerCase() > b.en.toLowerCase()) return 1; if (a.en.toLowerCase() < b.en.toLowerCase()) return -1; return 0; }
505
506 var currentSearchFilter = '';
507 function onSearchChanged(force) {
508 var showNoTranslationOnly = Q('showNoTransOnlyCheck').checked;
509 if ((force != true) && (currentSearchFilter == Q('searchInput').value)) return;
510 currentSearchFilter = Q('searchInput').value;
511 var currentSearchFilterLower = currentSearchFilter.toLowerCase();
512 if (translations != null) {
513 for (var i in translations) {
514 var show = (!showNoTranslationOnly) || (translations[i][selectedLanguage] == null) || (translations[i][selectedLanguage] == '');
515 if (currentSearchFilter == '') {
516 QV('nx' + i, show);
517 } else {
518 QV('nx' + i, show && (((translations[i][selectedLanguage] != null) && (translations[i][selectedLanguage].toLowerCase().indexOf(currentSearchFilterLower) >= 0)) || (translations[i]['en'].toLowerCase().indexOf(currentSearchFilterLower) >= 0)));
519 }
520 }
521 }
522 }
523
524 function onLocChanged() {
525 if (Q('showLocCheck').checked) {
526 if ((translations[selectedItem].xloc != null) && (translations[selectedItem].xloc.length > 0)) {
527 if (translations[selectedItem].xloc.length == 1) {
528 QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocation:\r\n' + translations[selectedItem].xloc.join('\r\n'));
529 } else {
530 QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocations:\r\n' + translations[selectedItem].xloc.join('\r\n'));
531 }
532 } else {
533 QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nNo locations.');
534 }
535 } else {
536 QH('defaultTextArea', translations[selectedItem]['en']);
537 }
538 }
539
540 // Poll the server, if it responds, refresh the page.
541 function loadServerTranslations() {
542 var xdr = null;
543 try { xdr = new XDomainRequest(); } catch (e) { }
544 if (!xdr) xdr = new XMLHttpRequest();
545 xdr.open('POST', window.location.origin + '/translations');
546 xdr.timeout = 30000;
547 xdr.onload = function () {
548 var x = null;
549 try { x = JSON.parse(this.responseText); } catch (ex) { }
550 if ((x == null) || (typeof x.strings != 'object')) { messagebox('Translations', 'ERROR: Unable to parse translations from the server.'); return; }
551 translations = x.strings;
552 translations.sort(enSort);
553 Q('searchInput').value = '';
554 currentSearchFilter = '';
555 updateMainList();
556 select(0, true);
557 };
558 xdr.onerror = function () {
559 messagebox('Translations', 'ERROR: Unable to load translations from the server.');
560 };
561 xdr.send('{ "action":"getTranslations" }');
562 }
563
564 // Save to server
565 function saveServerTranslations() {
566 var xdr = null;
567 try { xdr = new XDomainRequest(); } catch (e) { }
568 if (!xdr) xdr = new XMLHttpRequest();
569 xdr.open('POST', window.location.origin + '/translations');
570 xdr.timeout = 30000;
571 xdr.onload = function () {
572 var x = null;
573 try { x = JSON.parse(this.responseText); } catch (ex) { }
574 if ((x == null) || (x.response == null)) { messagebox('Translations', 'ERROR: Unable to parse server response.'); return; }
575 if (x.response == 'ok') {
576 changes = false;
577 QE('SaveServerButton', false);
578 QS('SaveServerButton')['background-color'] = null;
579 } else {
580 messagebox('Translations', 'ERROR: ' + x.response);
581 }
582 };
583 xdr.onerror = function () { messagebox('Translations', 'ERROR: Unable to save translations to server.'); };
584 xdr.send(JSON.stringify({ 'action': 'setTranslations', strings: translations }));
585 }
586
587 // Convert the translations to a standardized JSON we can use in GitHub
588 // Strings are sorder by english source and object keys are sorted
589 function translationsToJson(t) {
590 var arr2 = [], arr = t.strings;
591 for (var i in arr) {
592 var names = []; el = arr[i], el2 = {};
593 for (var j in el) { names.push(j); }
594 names.sort();
595 for (var j in names) { el2[names[j]] = el[names[j]]; }
596 if (el2.xloc != null) { el2.xloc.sort(); }
597 arr2.push(el2);
598 }
599 arr2.sort(function (a, b) { if (a.en > b.en) return 1; if (a.en < b.en) return -1; return 0; });
600 return JSON.stringify({ strings: arr2 }, null, ' ');
601 }
602
603 function saveToFile() {
604 saveAs(utf2blob(translationsToJson({ strings: translations })), 'translate.json');
605 }
606
607 function setTranslation() {
608 if (Q('translatedTextArea').value == '') {
609 delete translations[selectedItem][selectedLanguage];
610 QH('nt' + selectedItem, '');
611 } else {
612 translations[selectedItem][selectedLanguage] = Q('translatedTextArea').value;
613 QH('nt' + selectedItem, translations[selectedItem][selectedLanguage]);
614 }
615 onSourceChange();
616 changes = true;
617 QE('SaveServerButton', true);
618 QS('SaveServerButton')['background-color'] = '#F93';
619 }
620
621 function cancelTranslation() {
622 Q('translatedTextArea').value = translations[selectedItem][selectedLanguage];
623 }
624
625 function isTargetChanged() {
626 if (translations == null) { return false; }
627 var source = '';
628 if (translations[selectedItem][selectedLanguage] != null) { source = translations[selectedItem][selectedLanguage]; }
629 return (source != Q('translatedTextArea').value);
630 }
631
632 function onSourceChange() {
633 var x = isTargetChanged();
634 QE('SetButton', x);
635 QE('CancelButton', x);
636 QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1)));
637 QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0));
638 QS('translatedTextArea')['background-color'] = ((x == true) ? 'white' : '#EFE');
639 QE('SaveFileButton', !x);
640 QE('searchInput', !x);
641 QE('showLocCheck', !x);
642 QE('langSelector', !x);
643 QE('TransServerButton', !x);
644 QE('SaveServerButton', changes && !x);
645 }
646
647 function translateServer() {
648 var x = "Perform server translation? The MeshCentral server will reset for 10 to 30 seconds to perform this operation.";
649 setDialogMode(2, "Translate Server", 3, translateServerEx, x);
650 }
651
652 function translateServerEx() {
653 QE('TransServerButton', false);
654 setTimeout(function () { QE('TransServerButton', true); }, 5000);
655 var xdr = null;
656 try { xdr = new XDomainRequest(); } catch (e) { }
657 if (!xdr) xdr = new XMLHttpRequest();
658 xdr.open('POST', window.location.origin + '/translations');
659 xdr.timeout = 30000;
660 xdr.onload = function () {
661 var x = null;
662 try { x = JSON.parse(this.responseText); } catch (ex) { }
663 if ((x == null) || (x.response == null)) { messagebox("Server Translation", "ERROR: Unable to parse server response."); return; }
664 if (x.response == 'ok') {
665 var text = "The server translation process is now running.<br />Please allow up to 5 minutes for completion.<br /><br />";
666 text += "If this is your <b>first translation</b>,<br />Please restart your MeshCentral server after the 5 minutes.<br /></br />";
667 text += "If you are <b>updating a translation</b>,<br />Please refresh your MeshCentral web browser tabs after the 5 minutes.<br /><br />";
668 text += "To submit your work, please email the generated <b>translate.json</b> file (located in <code>meshcentral-data/</code>) to one of the developers.";
669 messagebox("Server Translation", text);
670 } else {
671 messagebox("Server Translation", "ERROR: " + x.response);
672 }
673 };
674 xdr.onerror = function () { messagebox("Translations", "ERROR: Unable to save translations to server."); };
675 xdr.send(JSON.stringify({ 'action': 'translateServer', strings: translations }));
676 }
677
678 //
679 // POPUP DIALOG
680 //
681
682 // null = Hidden, 1 = Generic Message
683 var xxdialogMode;
684 var xxdialogFunc;
685 var xxdialogButtons;
686 var xxdialogTag;
687 var xxcurrentView = -1;
688
689 // Display a dialog box
690 // 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)
691 function setDialogMode(x, y, b, f, c, tag) {
692 xxdialogMode = x;
693 xxdialogFunc = f;
694 xxdialogButtons = b;
695 xxdialogTag = tag;
696 QE('idx_dlgOkButton', true);
697 QV('idx_dlgOkButton', b & 1);
698 QV('idx_dlgCancelButton', b & 2);
699 QV('id_dialogclose', (b & 2) || (b & 8));
700 QV('idx_dlgDeleteButton', b & 4);
701 QV('idx_dlgButtonBar', b & 7);
702 if (y) QH('id_dialogtitle', y);
703 for (var i = 1; i < 3; i++) { QV('dialog' + i, i == x); } // Edit this line when more dialogs are added
704 QV('dialog', x);
705 if (c) { if (x == 2) { QH('id_dialogOptions', c); } else { QH('id_dialogMessage', c); } }
706 }
707
708 function dialogclose(x) {
709 var f = xxdialogFunc, b = xxdialogButtons, t = xxdialogTag;
710 setDialogMode();
711 if (((b & 8) || x) && f) f(x, t);
712 }
713
714 function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
715 function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
716 function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
717 function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); }
718 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; }); };
719
720 start();
721 </script>
722 </body>
723 </html>