mirror of
https://github.com/zyphlar/organicmaps-locale-viewer.git
synced 2024-03-08 13:27:46 +00:00
505 lines
18 KiB
HTML
505 lines
18 KiB
HTML
<html>
|
|
<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 parseSoundTxt(raw) {
|
|
var lines = raw.split("\n");
|
|
var thisSection = "";
|
|
var out = {};
|
|
|
|
for (var i=0;i<lines.length;i++) {
|
|
var line = lines[i];
|
|
|
|
var sectionMatch = line.match(/\s+\[(\w+)\]/);
|
|
var stringMatch = line.match(/\s+([\w\-]+) = (.+)/);
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
function buildTranStringInput(key, value) {
|
|
return "<span class='tranString badge text-bg-primary'><input type='text' class='stringTxt' readonly data-key='"+
|
|
key +
|
|
"' value='" +
|
|
value +
|
|
"'> <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>";
|
|
}
|
|
|
|
function showData(){
|
|
var locale = $("#localeSelect").val();
|
|
var data = parseSoundTxt(window.soundTxtRaw)[locale];
|
|
|
|
window.originalSoundData = data;
|
|
|
|
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" // exception: shouldn't have a street afterwards
|
|
];
|
|
|
|
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><div class='form-control'>";
|
|
var inputPost = "</div></div>";
|
|
var tranStringTtsPre = "<span class='tranString badge text-bg-secondary'>";
|
|
|
|
$.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">
|
|
div.output .input-group { width: 55em; }
|
|
div.output {
|
|
margin-bottom: 1em;
|
|
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;">
|
|
<div style="float: right; width: 25%">
|
|
<p><b>Review the sample strings and suggest edits as desired. You do not need to edit every single example, only enough to communicate the needed changes.</b></p>
|
|
Locale file:
|
|
<select id="localeSelect" class="form-control">
|
|
<option value="ar">ﺎﻠﻋﺮﺒﻳﺓ</option>
|
|
<option value="be">Беларусь</option>
|
|
<option value="ca">Català</option>
|
|
<option value="cs">Čeština</option>
|
|
<option value="da">Dansk</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="el">Ελληνικά</option>
|
|
<option value="en">English</option>
|
|
<option value="es">Español</option>
|
|
<option value="es-MX">Español (MX)</option>
|
|
<option value="eu">Euskara</option>
|
|
<option value="fa">ﻑﺍﺮﺴﯾ</option>
|
|
<option value="fi">Suomi</option>
|
|
<option value="fr">Français</option>
|
|
<option value="hi">हिंदी</option>
|
|
<option value="hr">Hrvatski</option>
|
|
<option value="hu">Magyar</option>
|
|
<option value="id">Indonesia</option>
|
|
<option value="it">Italiano</option>
|
|
<option value="ja">日本語</option>
|
|
<option value="ko">한국어</option>
|
|
<option value="mr">मराठी</option>
|
|
<option value="nb">Norsk</option>
|
|
<option value="nl">Nederlands</option>
|
|
<option value="pl">Polski</option>
|
|
<option value="pt">Português</option>
|
|
<option value="pt-BR">Português (BR)</option>
|
|
<option value="ro">Română</option>
|
|
<option value="ru">Русский</option>
|
|
<option value="sk">Slovenčina</option>
|
|
<option value="sv">Svenska</option>
|
|
<option value="sw">Kiswahili</option>
|
|
<option value="th">ภาษาไทย</option>
|
|
<option value="tr">Türkçe</option>
|
|
<option value="uk">Українська</option>
|
|
<option value="vi">Tiếng Việt</option>
|
|
<option value="zh-Hans">中文简体</option>
|
|
<option value="zh-Hant">中文繁體</option>
|
|
</select><br/>
|
|
TTS Voice: <select id="voiceSelect" class="form-control"></select><br/><br/>
|
|
|
|
<!--
|
|
<a id="sourceUrl" href="#" target="_blank">json</a><br/>
|
|
<a href="https://github.com/organicmaps/organicmaps/blob/ada410b5825e2dfd7c1ed95d539292dcef7d09dc/data/strings/sound.txt" target="_blank">sound.txt</a><br/>
|
|
<em>Please propose any fixes by editing sound.txt or by adding a comment to the <a href="https://github.com/organicmaps/organicmaps/pull/3130">pull request</a></em>
|
|
-->
|
|
|
|
<!-- position: absolute; z-index: 999; padding: 1em; box-shadow: 2px 2px 6px #999; top: 20%; left: 20%; width: 60%; background: white; border: 1px solid black;" -->
|
|
<div id="submitpopup" style="display: none;">
|
|
<h3>Copy this text: <button address="any text" class="btn btn-sm btn-primary copyToClipboard"><span>Copy</span></h3>
|
|
<textarea class="form-control" style="height: 20em;"></textarea>
|
|
<h5>Then, paste it into a new comment on <a href="https://github.com/organicmaps/organicmaps/pull/3130" target="_blank">this Github pull request</a></h5>
|
|
<!--
|
|
<p style="text-align: center; margin-top: 2em;">
|
|
<button id="closesubmitpopup" class="btn btn-danger">Done</button>
|
|
</p>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 74%; height: 55em; overflow: scroll; border: 1px solid #ccc; padding: 1em;">
|
|
|
|
<div class="output" id="out-e"></div>
|
|
<div class="output" id="out-f"></div>
|
|
<div class="output" id="out-g"></div>
|
|
<div class="output" id="out-a"></div>
|
|
<div class="output" id="out-b"></div>
|
|
<div class="output" id="out-c"></div>
|
|
<div class="output" id="out-d"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
const synth = window.speechSynthesis;
|
|
var voices;
|
|
|
|
function loadTts(){
|
|
voices = synth.getVoices();
|
|
$.each(voices, function(i, voice){
|
|
$("#voiceSelect").append('<option value="'+i+'" lang="'+voice.lang+'">'+voice.name+'</option>');
|
|
});
|
|
if (voices.length == 0) {
|
|
$("#voiceSelect").attr("disabled", "disabled").after('<em>Try another browser to use TTS, or install TTS support for this browser.</em>');
|
|
window.hideTts = true;
|
|
}
|
|
|
|
let params = new URLSearchParams(document.location.search);
|
|
let lang = params.get("lang");
|
|
let tts = params.get("tts");
|
|
|
|
const userLocale =
|
|
navigator.languages && navigator.languages.length
|
|
? navigator.languages[0]
|
|
: navigator.language;
|
|
|
|
if (lang) {
|
|
$("#localeSelect").val(lang);
|
|
} else {
|
|
$("#localeSelect option").each(function(i, o){
|
|
if (userLocale.match($(o).attr('value'))) {
|
|
$("#localeSelect").val($(o).attr('value'));
|
|
}
|
|
});
|
|
}
|
|
if (tts) {
|
|
$("#voiceSelect").val(tts);
|
|
} else {
|
|
if (lang) {
|
|
$("#voiceSelect option").each(function(i, o){
|
|
// console.log(lang,$(o).attr('lang').substr(0,2));
|
|
if (lang.match($(o).attr('lang').substr(0,2))) {
|
|
// console.log("got it");
|
|
$("#voiceSelect").val($(o).attr('value'));
|
|
return false;
|
|
}
|
|
});
|
|
} else {
|
|
$("#voiceSelect option").each(function(i, o){
|
|
// console.log(userLocale,$(o).attr('lang'));
|
|
if (userLocale.match($(o).attr('lang'))) {
|
|
$("#voiceSelect").val($(o).attr('value'));
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$("#localeSelect").change(function(){
|
|
showData();
|
|
// params.set('lang', $("#localeSelect").val());
|
|
// document.location.search = params.toString();
|
|
});
|
|
|
|
$("#voiceSelect").change(function(){
|
|
loadTts();
|
|
// params.set('tts', $("#voiceSelect").val());
|
|
// document.location.search = params.toString();
|
|
});
|
|
|
|
loadLocale();
|
|
}
|
|
|
|
$(document).ready(function(){ loadTts(); });
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|