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

Fix minor bugs and layout

Browse Source
This commit is contained in:
Will Bradley 2023-08-31 17:52:45 -07:00
parent 62a0a33a29
commit bb649e8a1d
Signed by: will
GPG Key ID: 1159B930701263F3
1 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@ -11,8 +11,9 @@
--bs-badge-padding-y: 0.15em; --bs-badge-padding-y: 0.15em;
} }
div.output .input-group { width: 55em; } /*div.output .input-group { width: 55em; }*/
div.output { div.output {
width: 70%;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px dashed; border-bottom: 1px dashed;
@ -25,7 +26,7 @@
.tranString.badge { .tranString.badge {
height: 2.5em; height: 2.5em;
margin: 0 0.1em; margin: 0 0.1em 0.2em;
} }
.tranString input[type='text'] { .tranString input[type='text'] {
border-collapse: collapse; border-collapse: collapse;
@ -35,6 +36,10 @@
background: transparent; background: transparent;
color: white; color: white;
} }
.buttonwrapper {
display: inline-block;
width: 2em;
}
.wide { width: 18em; } .wide { width: 18em; }
.narrow { width: 7em; } .narrow { width: 7em; }
.text-bg-warning { background-color: RGBA(183,138,2,var(--bs-bg-opacity,1)) !important } .text-bg-warning { background-color: RGBA(183,138,2,var(--bs-bg-opacity,1)) !important }
@ -43,7 +48,7 @@
<body style="padding: 1em;"> <body style="padding: 1em;">
<div style="position: fixed; top: 0; right: 0; width: 30%; z-index: 999; background: white; border: 1px solid gray; padding: 1em;"> <div style="position: fixed; top: 0; right: 0; width: 30%; z-index: 999; background: white; border: 1px solid gray; padding: 1em;">
<h3 style="font-size: 1.5em;">Organic Maps Locale Viewer / Editor</h3> <h3 style="font-size: 1.5em;">Organic Maps Locale Viewer / Editor</h3>
<p>Don't worry about adding or removing periods like <span class="badge bg-secondary">.</span> <span class="badge bg-secondary">。</span>(Japanese) or <span class="badge bg-secondary">।</span>(Hindi) at the end of strings. They will not affect the TTS speech either way.<br/>You may hover over phrases to see their English version in a popup. Right-to-left languages may not be displayed correctly. Click the edit button next to a string and then click the save button to make changes.</p> <p>Don't worry about adding or removing periods like <span class="badge bg-secondary">.</span> <span class="badge bg-secondary">。</span>(Japanese) or <span class="badge bg-secondary">।</span>(Hindi) at the end of strings. They are automatically removed as appropriate. <br/>You may hover over phrases to see their English version in a popup. Right-to-left languages may not be displayed correctly. Click the edit button next to a string and then click the save button to make changes. <br/><b>Your changes are not saved anywhere,</b> so copy the change request that appears below when you're ready.</p>
<b>Locale language:</b> <b>Locale language:</b>
<select id="localeSelect" class="form-control"> <select id="localeSelect" class="form-control">
<option value="ar">ﺎﻠﻋﺮﺒﻳﺓ</option> <option value="ar">ﺎﻠﻋﺮﺒﻳﺓ</option>
@ -96,7 +101,7 @@
<!-- 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;" --> <!-- 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;"> <div id="submitpopup" style="display: none;">
<b>Copy this text: </b><button address="any text" class="btn btn-sm btn-primary copyToClipboard"><span>Copy</span></button> <b>Copy this text: </b><button address="any text" class="btn btn-sm btn-primary copyToClipboard"><span>Copy</span></button>
<textarea class="form-control" style="height: 20em; font-family: monospace;"></textarea> <textarea class="form-control" style="height: 20em; font-family: monospace; font-size: 0.7em"></textarea>
<p><b>Then,</b> paste it into a new comment on <a href="https://github.com/organicmaps/organicmaps/pull/3130" target="_blank">this Github pull request</a></p> <p><b>Then,</b> paste it into a new comment on <a href="https://github.com/organicmaps/organicmaps/pull/3130" target="_blank">this Github pull request</a></p>
<!-- <!--
<p style="text-align: center; margin-top: 2em;"> <p style="text-align: center; margin-top: 2em;">
@ -250,11 +255,8 @@
function buildTranStringInput(key, value, color="text-bg-primary", editable=true) { function buildTranStringInput(key, value, color="text-bg-primary", editable=true) {
var classes = "stringTxt"; var classes = "stringTxt";
if (value.length > 22) {
classes += " wide"; var size = value.length+2;
} else if (value.length < 10) {
classes += " narrow";
}
var english = ""; var english = "";
var englishVersion = window.originalEnglishData[key]; var englishVersion = window.originalEnglishData[key];
@ -262,7 +264,7 @@
english = "en: "+englishVersion; english = "en: "+englishVersion;
} }
var out = "<span class='tranString badge "+color+"'><input type='text' class='"+classes+"' readonly data-key='"+ var out = "<span class='tranString badge "+color+"'><input type='text' class='"+classes+"' size='"+size+"' readonly data-key='"+
key + key +
"' title='" + "' title='" +
english + english +
@ -271,7 +273,7 @@
"'>"; "'>";
if (editable) { if (editable) {
out += "&nbsp;&nbsp;<button class='editbutton btn btn-xs btn-light text-warning' type='button' style='display:none;'><i class='bi bi-pencil-fill'></i></button><button class='savebutton btn btn-xs btn-light text-success' style='display: none;' type='button'><i class='bi bi-check-lg'></i></button>"; out += "<span class='buttonwrapper'><button class='editbutton btn btn-xs btn-light text-warning' type='button' style='display:none;'><i class='bi bi-pencil-fill'></i></button><button class='savebutton btn btn-xs btn-light text-success' style='display: none;' type='button'><i class='bi bi-check-lg'></i></button></span>";
} }
out += "</span>"; out += "</span>";
@ -294,7 +296,7 @@
"</span>"; "</span>";
if (editable) { if (editable) {
out += "&nbsp;&nbsp;<button class='fmteditbutton btn btn-xs btn-light text-warning' type='button' style='display:none;'><i class='bi bi-pencil-fill'></i></button>"; out += "<span class='buttonwrapper'><button class='fmteditbutton btn btn-xs btn-light text-warning' type='button' style='display:none;'><i class='bi bi-pencil-fill'></i></button></span>";
} }
out += "</span>"; out += "</span>";
@ -305,29 +307,36 @@
function loadEventHandlers(){ function loadEventHandlers(){
$(".tranString").hover(function(){ $(".tranString").hover(function(){
let editBtn = $(this).children(".editbutton"); let editBtn = $(this).children(".buttonwrapper").find(".editbutton");
if (editBtn.prop("disabled") == false) { if (editBtn.prop("disabled") == false) {
editBtn.show(); // only show when not disabled editBtn.show(); // only show when not disabled
} }
let ttsEditBtn = $(this).children(".fmteditbutton"); let ttsEditBtn = $(this).children(".buttonwrapper").find(".fmteditbutton");
if (ttsEditBtn.prop("disabled") == false) { if (ttsEditBtn.prop("disabled") == false) {
ttsEditBtn.show(); // only show when not disabled ttsEditBtn.show(); // only show when not disabled
} }
}, function(){ }, function(){
$(this).children(".editbutton").hide(); $(this).children(".buttonwrapper").find(".editbutton").hide();
$(this).children(".fmteditbutton").hide(); $(this).children(".buttonwrapper").find(".fmteditbutton").hide();
}); });
$(".stringTxt").on('keyup', function (e) { $(".stringTxt").on('keyup', function (e) {
// handle enter = save
if (e.key === 'Enter' || e.keyCode === 13) { if (e.key === 'Enter' || e.keyCode === 13) {
$(this).siblings(".savebutton").click(); $(this).siblings().find(".savebutton").click();
$(this).blur();
} }
// adjust input size by text content
var size = $(this).val().length;
$(this).attr('size', size+2);
}).dblclick(function(){ }).dblclick(function(){
$(this).siblings(".editbutton").click(); $(this).siblings().find(".editbutton").click();
}); });
$(".editbutton").click(function(){ $(".editbutton").click(function(){
$(this).siblings(".stringTxt").prop("readonly",false); $(this).parent().siblings(".stringTxt").prop("readonly",false).focus();
$(this).prop("disabled",true).hide(); $(this).prop("disabled",true).hide();
$(this).siblings(".savebutton").show(); $(this).siblings(".savebutton").show();
}); });
@ -341,11 +350,11 @@
$(".savebutton").click(function(){ $(".savebutton").click(function(){
var changes = []; var changes = [];
$(this).siblings(".stringTxt").prop("readonly",true); $(this).parent().siblings(".stringTxt").prop("readonly",true);
$(this).hide(); $(this).hide();
$(this).siblings(".editbutton").prop("disabled",false).show(); $(this).siblings(".editbutton").prop("disabled",false).show();
var stringTxt = $(this).siblings(".stringTxt")[0]; var stringTxt = $(this).parent().siblings(".stringTxt")[0];
window.modifiedSoundData[$(stringTxt).data("key")] = $(stringTxt).val(); window.modifiedSoundData[$(stringTxt).data("key")] = $(stringTxt).val();