1
0
forked from me/IronOS
Files
IronOS/Translation Editor/TranslationEditor.html
2020-09-06 16:44:19 +10:00

329 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TS100 Translation Editor</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="translations_commons.js"></script>
<script src="translations_def.js"></script>
<script>
var app;
var defMap = {};
function save(){
saveJSON(app.current, "translation_"+app.current.languageCode.toLowerCase()+".json");
}
function view(){
showJSON(app.current, "translation_"+app.current.languageCode.toLowerCase()+".json");
}
function fileChanged(e) {
var target = e;
var id = target.id;
var file = target.files[0];
if (!file) {
return;
}
var fr = new FileReader();
fr.onload = function(e) {
try {
var json = JSON.parse(e.target.result);
} catch (ex) {
console.log(ex);
alert("Invalid JSON file: " + file.name);
return;
}
if (id == "referent-lang-file") {
if (checkTranslationFile(file.name)) {
app.referent = json;
app.meta.referentLoaded = true;
}
} else if (id == "current-lang-file") {
if (checkTranslationFile(file.name)) {
app.current = json;
if (!app.current.cyrillicGlyphs){
app.current.cyrillicGlyphs = false;
}
app.meta.currentLoaded = true;
}
}
synchronizeData();
}
fr.readAsText(file);
}
function synchronizeData() {
app.obsolete = {};
copyMissing(app.def.messages, app.referent.messages, app.current.messages);
copyMissing(app.def.characters, app.referent.characters, app.current.characters);
copyMissing(app.def.menuGroups, app.referent.menuGroups, app.current.menuGroups);
copyMissing(app.def.menuOptions, app.referent.menuOptions, app.current.menuOptions);
}
/**
* Copy all missing properties from referent to current
* for each entry in definition
*/
function copyMissing(defList, referentMap, currentMap) {
if (!isDefined(defList) || !isDefined(referentMap) || !isDefined(currentMap)) {
return;
}
var len = defList.length;
for (var i = 0; i < len; i++) {
var id = defList[i].id;
if (!isDefined(referentMap[id])) {
referentMap[id] = '';
}
if (!isDefined(currentMap[id])) {
currentMap[id] = referentMap[id];
}
}
processObsolete(defList, currentMap);
}
// Passes through all entries from the given map.
// If a corresponding entry is not found in the defList, it is removed from the map, and added into the obsolete map.
function processObsolete(defList, map) {
// Index list to map for faster search
var defMap = copyArrayToMap(defList);
Object.keys(map).forEach(function(key) {
if (!isDefined(defMap[key])) {
app.obsolete[key] = { id : key, value : map[key]};
delete map[key];
}
});
}
function length(obj, mode) {
if (!isDefined(mode) || mode == 0) {
// return direct length
return obj.length;
}
// return the longest length in text2 array
return Math.max(isDefinedNN(obj.text2[0]) ? obj.text2[0].length : 0, isDefinedNN(obj.text2[1]) ? obj.text2[1].length : 0);
}
function getAttribute(obj, attribute) {
var d = "2";
var v = obj[attribute+d];
if (isDefined(v))
return v;
return obj[attribute];
}
function loaded() {
app = new Vue({
el : '#app',
data : {
meta : {
referentLoaded : false,
currentLoaded : false,
},
def : {
},
referent : {
messages : {}
},
current : {
loaded: false,
},
obsolete : {},
},
methods : {
validateInput: function(valMap, id, mode) {
var d = defMap[id];
var vLen = 0;
if (!isDefined(mode))
mode = 0;
try {
// Sum for complex length
for (var i = 0; i < d.lenSum.fields.length; i++) {
vLen += length(valMap[d.lenSum.fields[i]], mode);
}
d = d.lenSum;
} catch (e) {
// Single field length
vLen = length(valMap[id], mode);
}
var maxLen = getAttribute(d, 'maxLen', mode == 2);
var minLen = getAttribute(d, 'minLen', mode == 2);
var len = getAttribute(d, 'len', mode == 2);
if (isNumber(maxLen) && vLen > maxLen
|| isNumber(minLen) && vLen < minLen
|| isNumber(len) && vLen != len
) {
return "invalid";
}
},
constraintString: function(e) {
var str = "";
var delim = "";
var v;
d = "2";
if (isDefinedNN(e.lenSum)) {
str = "len("+(e.lenSum.fields+"").replace(/,/g," + ")+") -> ";
e = e.lenSum;
}
v = getAttribute(e, 'len', d);
if (isNumber(v)) {
str += delim + "len=" + v;
delim = " and ";
}
v = getAttribute(e, 'minLen', d);
if (isNumber(v)) {
str += delim + "len>=" + v;
delim = " and ";
}
v = getAttribute(e, 'maxLen', d);
if (isNumber(v)) {
str += delim + "len<=" + v;
delim = " and ";
}
return str;
}
}
});
app.def = def;
copyArrayToMap(app.def.messages, defMap);
copyArrayToMap(app.def.characters, defMap);
copyArrayToMap(app.def.menuGroups, defMap);
copyArrayToMap(app.def.menuOptions, defMap);
}
window.onload=loaded;
</script>
<link href="translations.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<h1>TS100 Translation Editor<span v-if="meta.currentLoaded"> - {{ current.languageLocalName }} [{{current.languageCode}}]</span></h1>
<table class="header data">
<tr>
<td class="label">Referent Language</td>
<td class="value">
<input type="file" id="referent-lang-file" onchange="fileChanged(this)" accept=".json">
<span class="selected" v-if="meta.referentLoaded">{{ referent.languageLocalName }} [{{referent.languageCode}}]</span>
</td>
</tr>
<tr v-if="meta.referentLoaded">
<td class="label">Current Language</td>
<td class="value">
<input type="file" id="current-lang-file" onchange="fileChanged(this)" accept=".json">
<span class="selected" v-if="meta.currentLoaded">{{ current.languageLocalName }} [{{current.languageCode}}]</span>
</td>
</tr>
<tr v-if="meta.currentLoaded">
<td class="label">Local Language Code</td>
<td class="value"><input type="text" v-model="current.languageCode" maxlength="8" v-on:change="current.languageCode=current.languageCode.toUpperCase()" class="short"></td>
</tr>
<tr v-if="meta.currentLoaded">
<td class="label">Local Language Name</td>
<td class="value"><input type="text" v-model="current.languageLocalName" class="short"></td>
</tr>
<tr v-if="meta.currentLoaded">
<td class="label">Font table to use</td>
<td class="value">
<select v-model="current.cyrillicGlyphs" v-on:change="current.cyrillicGlyphs = current.cyrillicGlyphs=='true'">
<option value="false">Latin Extended</option>
<option value="true">Cyrillic Glyphs</option>
</select>
</td>
</tr>
</table>
<div v-if="def.messages && referent.messages && current.messages">
<div class="footer">
<input type="button" value="Save" onclick="save()">
<input type="button" value="View" onclick="view()">
</div>
<div v-if="Object.keys(obsolete).length > 0">
<h2>Obsolete</h2>
<table class="data">
<tr v-for="entry in obsolete">
<td class="label"><div class="stringId">{{entry.id}}</div></td>
<td class="value"><div class="ref">{{entry.value}}</div></td>
</tr>
</table>
</div>
<h2>Messages and Strings</h2>
<table class="data">
<tr v-for="message in def.messages" v-bind:class="validateInput(current.messages, message.id)">
<td class="label"><div class="stringId">{{message.id}}</div></td>
<td class="value">
<div class="constraint">{{constraintString(message)}}</div>
<div class="ref">{{referent.messages[message.id]}}</div>
<div class="note" v-if="message.note">{{message.note}}</div>
<div class="tran"><input :id="'in_'+message.id" type="text" v-model="current.messages[message.id]" v-bind:class="{unchanged : current.messages[message.id] == referent.messages[message.id], empty : current.messages[message.id]==''}"></div>
</td>
</tr>
</table>
<h2>Characters</h2>
<table class="data">
<tr v-for="char in def.characters" v-bind:class="validateInput(current.characters, char.id)">
<td class="label"><div class="stringId">{{char.id}}</div></td>
<td class="value">
<div class="constraint">{{constraintString(char)}}</div>
<div class="ref">{{referent.characters[char.id]}}</div>
<div class="tran"><input type="text" v-model="current.characters[char.id]" v-bind:class="{unchanged : current.characters[char.id] == referent.characters[char.id], empty : current.characters[char.id].length != 1}"></div>
</td>
</tr>
</table>
<h2>Menu Groups</h2>
<table class="data">
<tr v-for="menu in def.menuGroups" v-bind:class="validateInput(current.menuGroups, menu.id, 2)">
<td class="label"><div class="stringId">{{menu.id}}</div></td>
<td class="value">
<div class="label">Menu Name</div>
<div class="constraint">{{constraintString(menu)}}</div>
<div class="ref">{{referent.menuGroups[menu.id].text2}}</div>
<div class="tran" v-bind:class="{unchanged : current.menuGroups[menu.id].text2[0] == referent.menuGroups[menu.id].text2[0] && current.menuGroups[menu.id].text2[1] == referent.menuGroups[menu.id].text2[1], empty : current.menuGroups[menu.id].text2[0] == '' || current.menuGroups[menu.id].text2[1] == ''}"><input type="text" v-model="current.menuGroups[menu.id].text2[0]"><input type="text" v-model="current.menuGroups[menu.id].text2[1]"></div>
<div class="label">Description</div>
<div class="ref">{{referent.menuGroups[menu.id].desc}}</div>
<div class="tran"><input type="text" v-model="current.menuGroups[menu.id].desc" v-bind:class="{unchanged : current.menuGroups[menu.id].desc == referent.menuGroups[menu.id].desc, empty : current.menuGroups[menu.id].desc == ''}"></div>
</td>
</tr>
</table>
<h2>Menu Options</h2>
<table class="data">
<tr v-for="menu in def.menuOptions" v-bind:class="validateInput(current.menuOptions, menu.id, 2)">
<td class="label"><div class="stringId">{{menu.id}}</div></td>
<td class="value">
<div v-bind:class="{hidden : false}">
<div class="label">Menu Name (Double-Line)</div>
<div class="constraint">{{constraintString(menu)}}</div>
<div class="ref">{{referent.menuOptions[menu.id].text2}}</div>
<div class="tran" v-bind:class="{unchanged : current.menuOptions[menu.id].text2[0] == referent.menuOptions[menu.id].text2[0] && current.menuOptions[menu.id].text2[1] == referent.menuOptions[menu.id].text2[1], empty : current.menuOptions[menu.id].text2[0] == '' || current.menuOptions[menu.id].text2[1] == ''}"><input type="text" v-model="current.menuOptions[menu.id].text2[0]"><input type="text" v-model="current.menuOptions[menu.id].text2[1]"></div>
</div>
<div class="label">Description</div>
<div class="ref">{{referent.menuOptions[menu.id].desc}}</div>
<div class="tran"><input type="text" v-model="current.menuOptions[menu.id].desc" v-bind:class="{unchanged : current.menuOptions[menu.id].desc == referent.menuOptions[menu.id].desc, empty : current.menuOptions[menu.id].desc == ''}"></div>
</td>
</tr>
</table>
<div class="footer">
<input type="button" value="Save" onclick="save()">
<input type="button" value="View" onclick="view()">
</div>
</div>
</div>
</body>
</html>