will/organicmaps-locale-viewer
1
0
Fork 0
mirror of https://github.com/zyphlar/organicmaps-locale-viewer.git synced 2024-03-08 13:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework to directly edit strings with complexity

Browse Source
This commit is contained in:
Will Bradley 2023-08-27 18:18:47 -07:00
parent 907eb15383
commit bc98c41359
1 changed files with 330 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

551
index.html
View File

@ -2,239 +2,339 @@
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style type="text/css">
input[type='text'][readonly] {
background: transparent;
color: white;
border-collapse: collapse;
border: none;
}
</style>
<script type="text/javascript">
function loadLocale(){
var commitHash = "b7138ae7f7f7f78da042edc8496d012ad4058334";
var sourceUrl = "https://raw.githubusercontent.com/organicmaps/organicmaps/"+commitHash+"/data/sound-strings/"+$("#localeSelect").val()+".json/localize.json";
var fancyUrl = "https://github.com/organicmaps/organicmaps/blob/"+commitHash+"/data/sound-strings/"+$("#localeSelect").val()+".json/localize.json"
function parseSoundTxt(raw) {
var lines = raw.split("\n");
var thisSection = "";
var out = {};
$("#sourceUrl").attr("href", fancyUrl).text($("#localeSelect").val()+".json");
for (var i=0;i<lines.length;i++) {
var line = lines[i];
$.getJSON(sourceUrl, function(data){
var sectionMatch = line.match(/\s+\[(\w+)\]/);
var stringMatch = line.match(/\s+([\w\-]+) = (.+)/);
const distance = [
"in_50_meters",
"in_100_meters",
"in_200_meters",
"in_250_meters",
"in_300_meters",
"in_400_meters",
"in_500_meters",
"in_600_meters",
"in_700_meters",
"in_750_meters",
"in_800_meters",
"in_900_meters",
"in_1_kilometer",
"in_1_5_kilometers",
"in_2_kilometers",
"in_2_5_kilometers",
"in_3_kilometers",
"in_50_feet",
"in_100_feet",
"in_200_feet",
"in_300_feet",
"in_400_feet",
"in_500_feet",
"in_600_feet",
"in_700_feet",
"in_800_feet",
"in_900_feet",
"in_1000_feet",
"in_1500_feet",
"in_2000_feet",
"in_2500_feet",
"in_3000_feet",
"in_3500_feet",
"in_4000_feet",
"in_4500_feet",
"in_5000_feet",
"in_1_mile",
"in_1_5_miles",
"in_2_miles"
];
const direction = [
"take_the_1_exit",
"take_the_2_exit",
"take_the_3_exit",
"take_the_4_exit",
"take_the_5_exit",
"take_the_6_exit",
"take_the_7_exit",
"take_the_8_exit",
"take_the_9_exit",
"take_the_10_exit",
"take_the_11_exit",
"make_a_slight_right_turn",
"make_a_right_turn",
"make_a_sharp_right_turn",
"enter_the_roundabout",
"leave_the_roundabout",
"make_a_slight_left_turn",
"make_a_left_turn",
"make_a_sharp_left_turn",
"make_a_u_turn",
"go_straight",
"exit",
"destination"
];
const nextStreets = [
"Main Street",
"Highway 99",
"Exit 12, Main Street, London",
];
// dist_direction_onto_street
// then
// you_have_reached_the_destination
// unknown_camera
$("#out-a").html("");
$("#out-b").html("");
$("#out-c").html("");
$("#out-d").html("");
$("#out-e").html("");
$("#out-f").html("");
$("#out-g").html("");
var inputPre = "<div class='input-group mb-3'><button type='button' class='playtts btn btn-outline-secondary'>🔊</button><button class='editbutton btn btn-secondary' type='button'>Edit</button><button class='savebutton btn btn-success' style='display: none;' type='button'>Save</button><input class='form-control' disabled='disabled' type='text' value='";
var inputPost = "' /></div>";
$.each(direction, function(i, dir){
// can't "you'll arrive" in the present tense
if (dir != "destination") {
$("#out-a").append(inputPre + data[dir] + inputPost);
if (sectionMatch && sectionMatch.length > 1) {
thisSection = sectionMatch[1];
} else if (stringMatch && stringMatch.length > 2) {
if (!out[stringMatch[1]]) {
out[stringMatch[1]] = {};
}
});
out[stringMatch[1]][thisSection] = stringMatch[2];
} else {
console.log("no match:", line);
}
}
$.each(direction, function(i, dir){
// can't "then" past your destination
if (dir != "destination") {
var nextDir = direction[(i + 1) % direction.length];
$("#out-b").append(inputPre + data[dir] + " " + data['then'] + " " + data[nextDir] + inputPost);
}
});
return out;
}
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
$("#out-c").append(inputPre + data[dist] + " " + data[dir] + inputPost);
});
function buildTranStringInput(key, value) {
return "<span class='tranString badge text-bg-primary'><input type='text' class='stringTxt' readonly data-key='"+
key +
"' value='" +
value +
"'>&nbsp;&nbsp;<button class='editbutton btn btn-xs btn-light' type='button' style='display:none;'>✏️</button><button class='savebutton btn btn-xs btn-success' style='display: none;' type='button'>Save</button></span>";
}
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
// can't "then" past your destination
if (dir != "destination") {
var nextDir = direction[(i + 1) % direction.length];
$("#out-d").append(inputPre + data[dist] + " " + data[dir] + " " + data['then'] + " " + data[nextDir] + inputPost);
}
});
function showData(){
var locale = $("#localeSelect").val();
var data = parseSoundTxt(window.soundTxtRaw)[locale];
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
var nextDir = direction[(i + 1) % direction.length];
var ttsFmt = data['dist_direction_onto_street'];
var streetDir = data[dir];
if (data[dir+"_street"]) {
streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
}
window.originalSoundData = data;
ttsFmt = ttsFmt.replace("%1$s", data[dist].replace(/[\.。।]/g, "")); // no full stops
ttsFmt = ttsFmt.replace("%2$s", streetDir.replace(/[\.。।]/g, "")); // no full stops
ttsFmt = ttsFmt.replace("%3$s", nextStreets[(i+1) % nextStreets.length]);
const distance = [
"in_50_meters",
"in_100_meters",
"in_200_meters",
"in_250_meters",
"in_300_meters",
"in_400_meters",
"in_500_meters",
"in_600_meters",
"in_700_meters",
"in_750_meters",
"in_800_meters",
"in_900_meters",
"in_1_kilometer",
"in_1_5_kilometers",
"in_2_kilometers",
"in_2_5_kilometers",
"in_3_kilometers",
"in_50_feet",
"in_100_feet",
"in_200_feet",
"in_300_feet",
"in_400_feet",
"in_500_feet",
"in_600_feet",
"in_700_feet",
"in_800_feet",
"in_900_feet",
"in_1000_feet",
"in_1500_feet",
"in_2000_feet",
"in_2500_feet",
"in_3000_feet",
"in_3500_feet",
"in_4000_feet",
"in_4500_feet",
"in_5000_feet",
"in_1_mile",
"in_1_5_miles",
"in_2_miles"
];
$("#out-e").append(inputPre + ttsFmt + inputPost);
});
const direction = [
"take_the_1_exit",
"take_the_2_exit",
"take_the_3_exit",
"take_the_4_exit",
"take_the_5_exit",
"take_the_6_exit",
"take_the_7_exit",
"take_the_8_exit",
"take_the_9_exit",
"take_the_10_exit",
"take_the_11_exit",
"make_a_slight_right_turn",
"make_a_right_turn",
"make_a_sharp_right_turn",
"enter_the_roundabout",
"leave_the_roundabout",
"make_a_slight_left_turn",
"make_a_left_turn",
"make_a_sharp_left_turn",
"make_a_u_turn",
"go_straight",
"exit",
"destination" // exception: shouldn't have a street afterwards
];
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
var nextDir = direction[(i + 1) % direction.length];
var ttsFmt = data['dist_direction_onto_street'];
var streetDir = data[dir];
if (data[dir+"_street"]) {
streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
}
const nextStreets = [
"Main Street",
"Highway 99",
"Exit 12, Main Street, London",
];
ttsFmt = ttsFmt.replace("%1$s", data[dist].replace(/[\.。।]/g, "")); // no full stops
ttsFmt = ttsFmt.replace("%2$s", streetDir.replace(/[\.。।]/g, "")); // no full stops
ttsFmt = ttsFmt.replace("%3$s", nextStreets[(i+1) % nextStreets.length]);
// dist_direction_onto_street
// then
// you_have_reached_the_destination
// unknown_camera
$("#out-f").append(inputPre + ttsFmt + " " + data['then'] + " " + data[nextDir] + inputPost);
});
$("#out-a").html("");
$("#out-b").html("");
$("#out-c").html("");
$("#out-d").html("");
$("#out-e").html("");
$("#out-f").html("");
$("#out-g").html("");
$("#out-g").append(inputPre + data['you_have_reached_the_destination'] + inputPost);
$("#out-g").append(inputPre + data['unknown_camera'] + inputPost);
var inputPre = "<div class='input-group mb-3'><button type='button' class='playtts btn btn-outline-secondary'>🔊</button><div class='form-control'>";
var inputPost = "</div></div>";
var tranStringTtsPre = "<span class='tranString badge text-bg-secondary'>";
$(".editbutton").click(function(){
var sibling = $($(this).siblings(".form-control")[0]);
// console.log(sibling);
// console.log(sibling.val());
sibling.data("orig-value", sibling.val());
// console.log(sibling.data("orig-value"));
sibling.prop( "disabled", false );
sibling.focus();
$(this).hide();
$(this).siblings(".savebutton").show();
});
$(".savebutton").click(function(){
var changes = [];
var thisSaveButton = $(this);
var thisSibling = $($(this).siblings(".form-control")[0]);
thisSibling.prop( "disabled", true );
thisSaveButton.hide();
thisSaveButton.siblings(".editbutton").show();
$("div.output .form-control").each(function(i,o){
var sibling = $(o);
// console.log("orig",sibling.data("orig-value"));
// console.log("val",sibling.val());
if (sibling.data("orig-value") && sibling.data("orig-value") != sibling.val()) {
// console.log("got",sibling.val());
changes.push([sibling.data("orig-value"), sibling.val()]);
}
});
if (changes.length > 0){
var out = "";
var locale = $("#localeSelect").val();
$.each(changes, function(x,y){
// console.log(x,y);
out += "- "+locale+" = "+y[0]+"\n"+
"+ "+locale+" = "+y[1]+"\n"
});
// console.log("writing", out);
$("#submitpopup textarea").text("Translation change request:\n```\n"+
"# data/strings/sound.txt\n"+
out+"```"
);
$("#submitpopup").show();
}
});
// $("#closesubmitpopup").click(function(){
// $("#submitpopup").hide();
// });
$('.copyToClipboard').click(function () {
$('#submitpopup textarea').select();
document.execCommand('copy');
$(this).addClass("btn-success").text("Copied!");
});
$(".playtts").click(function(){
var text = $($(this).siblings(".form-control")[0]).val();
const msg = new SpeechSynthesisUtterance(
text
);
msg.voice = voices[$("#voiceSelect").val()];
synth.speak(msg);
});
if (window.hideTts) {
$(".playtts").hide();
$.each(direction, function(i, dir){
// can't "you'll arrive" in the present tense
if (dir != "destination") {
$("#out-a").append(inputPre +
buildTranStringInput(dir, data[dir]) +
inputPost);
}
});
/*
$.each(data, function(i, d){
$("#out-a").append(i+":"+d+"<br/>");
});
$.each(direction, function(i, dir){
// can't "then" past your destination
if (dir != "destination") {
var nextDir = direction[(i + 1) % direction.length];
$("#out-b").append(inputPre +
tranStringPre + data[dir] + tranStringPost +
tranStringPre + data['then'] + tranStringPost +
tranStringPre + data[nextDir] + tranStringPost +
inputPost);
}
});
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
$("#out-c").append(inputPre +
tranStringPre + data[dist] + tranStringPost +
tranStringPre + data[dir] + tranStringPost +
inputPost);
});
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
// can't "then" past your destination
if (dir != "destination") {
var nextDir = direction[(i + 1) % direction.length];
$("#out-d").append(inputPre +
tranStringPre + data[dist] + tranStringPost +
tranStringPre + data[dir] + tranStringPost +
tranStringPre + data['then'] + tranStringPost +
tranStringPre + data[nextDir] + tranStringPost +
inputPost);
}
});
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
var nextDir = direction[(i + 1) % direction.length];
var ttsFmt = data['dist_direction_onto_street'];
var streetDir = data[dir];
if (data[dir+"_street"]) {
streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
}
ttsFmt = ttsFmt.replace("%1$s", tranStringPre + data[dist].replace(/[\.。।]/g, "") + tranStringPost); // no full stops
ttsFmt = ttsFmt.replace("%2$s", tranStringPre + streetDir.replace(/[\.。।]/g, "") + tranStringPost); // no full stops
ttsFmt = ttsFmt.replace("%3$s", tranStringPre + nextStreets[(i+1) % nextStreets.length] + tranStringPost);
$("#out-e").append(inputPre +
tranStringTtsPre + ttsFmt + tranStringPost +
inputPost);
});
$.each(distance, function(i, dist){
var dir = direction[i % direction.length];
var nextDir = direction[(i + 1) % direction.length];
var ttsFmt = data['dist_direction_onto_street'];
var streetDir = data[dir];
if (data[dir+"_street"]) {
streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
}
ttsFmt = ttsFmt.replace("%1$s", tranStringPre + data[dist].replace(/[\.。।]/g, "") + tranStringPost); // no full stops
ttsFmt = ttsFmt.replace("%2$s", tranStringPre + streetDir.replace(/[\.。।]/g, "") + tranStringPost); // no full stops
ttsFmt = ttsFmt.replace("%3$s", tranStringPre + nextStreets[(i+1) % nextStreets.length] + tranStringPost);
$("#out-f").append(inputPre +
tranStringTtsPre + ttsFmt + tranStringPost +
tranStringPre + data['then'] + tranStringPost +
tranStringPre + data[nextDir] + tranStringPost +
inputPost);
});
$("#out-g").append(inputPre +
tranStringPre + data['you_have_reached_the_destination'] + tranStringPost +
inputPost);
$("#out-g").append(inputPre +
tranStringPre + data['unknown_camera'] + tranStringPost +
inputPost);
*/
$(".tranString").hover(function(){
let editBtn = $(this).children(".editbutton");
console.log(editBtn);
if (editBtn.prop("disabled") == false) {
editBtn.show(); // only show when not disabled
}
}, function(){
$(this).children(".editbutton").hide();
});
$(".editbutton")
.click(function(){
$(this).siblings(".stringTxt").prop("readonly",false);
$(this).prop("disabled",true).hide();
$(this).siblings(".savebutton").show();
});
$(".savebutton").click(function(){
var changes = [];
$(this).siblings(".stringTxt").prop("readonly",true);
$(this).hide();
$(this).siblings(".editbutton").prop("disabled",false).show();
var stringTxt = $(this).siblings(".stringTxt")[0];
window.originalSoundData[$(stringTxt).data("key")] = $(stringTxt).val();
$("#submitpopup textarea").text("Translation change request:\n```\n"+
"# data/strings/sound.txt\n"+
JSON.stringify(window.originalSoundData)+"```"
);
$("#submitpopup").show();
/*
$("div.output .form-control").each(function(i,o){
var sibling = $(o);
// console.log("orig",sibling.data("orig-value"));
// console.log("val",sibling.val());
if (sibling.data("orig-value") && sibling.data("orig-value") != sibling.val()) {
// console.log("got",sibling.val());
changes.push([sibling.data("orig-value"), sibling.val()]);
}
});
if (changes.length > 0){
var out = "";
var locale = $("#localeSelect").val();
$.each(changes, function(x,y){
// console.log(x,y);
out += "- "+locale+" = "+y[0]+"\n"+
"+ "+locale+" = "+y[1]+"\n"
});
// console.log("writing", out);
}
*/
});
// $("#closesubmitpopup").click(function(){
// $("#submitpopup").hide();
// });
$('.copyToClipboard').click(function () {
$('#submitpopup textarea').select();
document.execCommand('copy');
$(this).addClass("btn-success").text("Copied!");
});
$(".playtts").click(function(){
var text = $($(this).siblings(".form-control")[0]).val();
const msg = new SpeechSynthesisUtterance(
text
);
msg.voice = voices[$("#voiceSelect").val()];
synth.speak(msg);
});
if (window.hideTts) {
$(".playtts").hide();
}
}
function loadLocale(){
var commitHash = "b7138ae7f7f7f78da042edc8496d012ad4058334";
var sourceUrl = "https://raw.githubusercontent.com/organicmaps/organicmaps/"+commitHash+"/data/strings/sound.txt";
$("#sourceUrl").attr("href", sourceUrl).text("sound.txt");
if (!window.soundTxtRaw) {
$.get(sourceUrl, function(rawData){
window.soundTxtRaw = rawData;
showData();
});
} else {
showData();
}
}
</script>
<style type="text/css">
@ -244,6 +344,11 @@
padding-bottom: 1em;
border-bottom: 1px dashed;
}
.btn.btn-xs {
--bs-btn-padding-y: .25rem;
--bs-btn-padding-x: .5rem;
--bs-btn-font-size: .5rem;
}
</style>
</head>
<body style="padding: 1em;">
@ -326,7 +431,7 @@
const synth = window.speechSynthesis;
var voices;
$(document).ready(function(){
function loadTts(){
voices = synth.getVoices();
$.each(voices, function(i, voice){
$("#voiceSelect").append('<option value="'+i+'" lang="'+voice.lang+'">'+voice.name+'</option>');
@ -377,17 +482,21 @@
}
$("#localeSelect").change(function(){
params.set('lang', $("#localeSelect").val());
document.location.search = params.toString();
showData();
// params.set('lang', $("#localeSelect").val());
// document.location.search = params.toString();
});
$("#voiceSelect").change(function(){
params.set('tts', $("#voiceSelect").val());
document.location.search = params.toString();
loadTts();
// params.set('tts', $("#voiceSelect").val());
// document.location.search = params.toString();
});
loadLocale();
});
}
$(document).ready(function(){ loadTts(); });
</script>
</body>