translator.htm 40 KB

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