mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
feat(1.89.19): google translate support
This commit is contained in:
Azgaar
parent
e2af899792
commit
b13d72e639
4 changed files with 98 additions and 43 deletions
30
index.css
30
index.css
|
|
@ -4,6 +4,21 @@
|
|||
--sans-serif: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* hide Google translate header */
|
||||
body > .skiptranslate {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hide Google translate in-progress widget */
|
||||
body > .skiptranslate + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* make translated text wrapper non-blocking */
|
||||
font {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
|
|
@ -597,6 +612,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#loadGoogleTranslateButton {
|
||||
font-size: smaller;
|
||||
padding: 0.4em 0.5em;
|
||||
}
|
||||
|
||||
#options input[type="color"] {
|
||||
width: 2em;
|
||||
padding: 1px;
|
||||
|
|
@ -697,6 +717,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
margin: 0.35em 0;
|
||||
transition: 0.1s;
|
||||
font-size: 1em;
|
||||
text-transform: capitalize;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabcontent button.pressed {
|
||||
|
|
@ -750,6 +775,11 @@ fieldset {
|
|||
float: left;
|
||||
width: 28%;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabcontent .buttonoff {
|
||||
|
|
|
|||
67
index.html
67
index.html
|
|
@ -40,6 +40,7 @@
|
|||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
top: 0 !important;
|
||||
font-size: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -362,10 +363,10 @@
|
|||
<use href="#rose" x="50%" y="50%" />
|
||||
</svg>
|
||||
<div id="loading-typography">
|
||||
<div id="titleName"><t data-t="titleName">Azgaar's</t></div>
|
||||
<div id="title"><t data-t="title">Fantasy Map Generator</t></div>
|
||||
<div id="versionText"><t data-t="version">v</t><span id="version"></span></div>
|
||||
<p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
|
||||
<div id="titleName">Azgaar's</div>
|
||||
<div id="title">Fantasy Map Generator</div>
|
||||
<div id="versionText">v<span id="version"></span></div>
|
||||
<p id="loading-text">LOADING<span>.</span><span>.</span><span>.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -373,7 +374,6 @@
|
|||
<div id="collapsible">
|
||||
<button
|
||||
id="optionsTrigger"
|
||||
data-t="tipOptionsTrigger"
|
||||
data-tip="Click to show the Menu"
|
||||
data-shortcut="Tab"
|
||||
class="options glow"
|
||||
|
|
@ -383,24 +383,22 @@
|
|||
</button>
|
||||
<button
|
||||
id="regenerate"
|
||||
data-t="tipRegenerate"
|
||||
data-tip="Click to generate a new map"
|
||||
data-shortcut="F2"
|
||||
onclick="regeneratePrompt()"
|
||||
class="options"
|
||||
style="display: none"
|
||||
>
|
||||
<t data-t="newMap">New Map!</t>
|
||||
New Map!
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="options" style="display: none">
|
||||
<div class="drag-trigger" data-t="optionsDragTrigger" data-tip="Drag to move the Menu"></div>
|
||||
<div class="drag-trigger" data-tip="Drag to move the Menu"></div>
|
||||
|
||||
<div class="tab">
|
||||
<button
|
||||
id="optionsHide"
|
||||
data-t="optionsHide"
|
||||
data-tip="Click to hide the Menu"
|
||||
data-shortcut="Tab or Esc"
|
||||
class="options"
|
||||
|
|
@ -408,26 +406,11 @@
|
|||
>
|
||||
◄
|
||||
</button>
|
||||
<button id="layersTab" data-t="layersTab" data-tip="Click to change map layers" class="options active">
|
||||
<t data-t="layers">Layers</t>
|
||||
</button>
|
||||
<button id="styleTab" data-t="styleTab" data-tip="Click to open style editor" class="options">
|
||||
<t data-t="style">Style</t>
|
||||
</button>
|
||||
<button
|
||||
id="optionsTab"
|
||||
data-t="optionsTab"
|
||||
data-tip="Click to change generation and UI options"
|
||||
class="options"
|
||||
>
|
||||
<t data-t="options">Options</t>
|
||||
</button>
|
||||
<button id="toolsTab" data-t="toolsTab" data-tip="Click to open tools menu" class="options">
|
||||
<t data-t="tools">Tools</t>
|
||||
</button>
|
||||
<button id="aboutTab" data-t="aboutTab" data-tip="Click to see Generator info" class="options">
|
||||
<t data-t="about">About</t>
|
||||
</button>
|
||||
<button id="layersTab" data-tip="Click to change map layers" class="options active">Layers</button>
|
||||
<button id="styleTab" data-tip="Click to open style editor" class="options">Style</button>
|
||||
<button id="optionsTab" data-tip="Click to change generation and UI options" class="options">Options</button>
|
||||
<button id="toolsTab" data-tip="Click to open tools menu" class="options">Tools</button>
|
||||
<button id="aboutTab" data-tip="Click to see Generator info" class="options">About</button>
|
||||
</div>
|
||||
|
||||
<div id="layersContent" class="tabcontent" style="display: block">
|
||||
|
|
@ -1905,17 +1888,19 @@
|
|||
<td></td>
|
||||
</tr>
|
||||
|
||||
<!-- <tr data-tip="Select language (not all languages are fully supported). Reload the page to apply">
|
||||
<td></td>
|
||||
<td>Language</td>
|
||||
<td>
|
||||
<select id="selectLanguage" data-stored="lang">
|
||||
<option value="en" selected>English (100%)</option>
|
||||
<option value="ru">Русский (1%)</option>
|
||||
</select>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr> -->
|
||||
<tr
|
||||
data-tip="Load Google Translate and select language. Note that automatic translation can break some page functional. In this case reset the language back to English or refresh the page"
|
||||
>
|
||||
<td>
|
||||
<i data-tip="Reset language to English" id="resetLanguage" class="icon-ccw"></i>
|
||||
</td>
|
||||
<td>Language</td>
|
||||
<td>
|
||||
<button id="loadGoogleTranslateButton">Init Google Translate</button>
|
||||
<div id="google_translate_element"></div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
|
|
@ -7877,7 +7862,7 @@
|
|||
<script src="modules/ui/stylePresets.js?v=1.89.11"></script>
|
||||
|
||||
<script src="modules/ui/general.js?v=1.87.03"></script>
|
||||
<script src="modules/ui/options.js?v=1.89.15"></script>
|
||||
<script src="modules/ui/options.js?v=1.89.19"></script>
|
||||
<script src="main.js?v=1.89.15"></script>
|
||||
|
||||
<script defer src="modules/relief-icons.js"></script>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,8 @@ optionsContent.addEventListener("click", function (event) {
|
|||
else if (id === "translateExtent") toggleTranslateExtent(event.target);
|
||||
else if (id === "speakerTest") testSpeaker();
|
||||
else if (id === "themeColorRestore") restoreDefaultThemeColor();
|
||||
else if (id === "loadGoogleTranslateButton") loadGoogleTranslate();
|
||||
else if (id === "resetLanguage") resetLanguage();
|
||||
});
|
||||
|
||||
function mapSizeInputChange() {
|
||||
|
|
@ -474,6 +476,44 @@ function changeDialogsTheme(themeColor, transparency) {
|
|||
});
|
||||
}
|
||||
|
||||
function loadGoogleTranslate() {
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://translate.google.com/translate_a/element.js?cb=initGoogleTranslate";
|
||||
script.onload = () => {
|
||||
document.getElementById("loadGoogleTranslateButton")?.remove();
|
||||
|
||||
// replace mapLayers underline <u> with bare text to avoid translation issue
|
||||
document
|
||||
.getElementById("mapLayers")
|
||||
.querySelectorAll("li")
|
||||
.forEach(el => {
|
||||
const text = el.innerHTML.replace(/<u>(.+)<\/u>/g, "$1");
|
||||
el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
function initGoogleTranslate() {
|
||||
new google.translate.TranslateElement(
|
||||
{pageLanguage: "en", layout: google.translate.TranslateElement.InlineLayout.VERTICAL},
|
||||
"google_translate_element"
|
||||
);
|
||||
}
|
||||
|
||||
function resetLanguage() {
|
||||
const languageSelect = document.querySelector("#google_translate_element select");
|
||||
if (!languageSelect.value) return;
|
||||
|
||||
languageSelect.value = "en";
|
||||
languageSelect.dispatchEvent(new Event("change"));
|
||||
|
||||
// do once again to actually reset the language
|
||||
languageSelect.value = "en";
|
||||
languageSelect.dispatchEvent(new Event("change"));
|
||||
}
|
||||
|
||||
function changeZoomExtent(value) {
|
||||
if (+zoomExtentMin.value > +zoomExtentMax.value) {
|
||||
[zoomExtentMin.value, zoomExtentMax.value] = [zoomExtentMax.value, zoomExtentMin.value];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
// version and caching control
|
||||
const version = "1.89.18"; // generator version, update each time
|
||||
const version = "1.89.19"; // generator version, update each time
|
||||
|
||||
{
|
||||
document.title += " v" + version;
|
||||
|
|
@ -28,6 +28,7 @@ const version = "1.89.18"; // generator version, update each time
|
|||
|
||||
<ul>
|
||||
<strong>Latest changes:</strong>
|
||||
<li>Google translation support (in Options)</li>
|
||||
<li>Religions can be edited and redrawn like cultures</li>
|
||||
<li>Lock states, provinces, cultures, and religions from regeneration</li>
|
||||
<li>Heightmap brushes: linear edit option</li>
|
||||
|
|
@ -36,7 +37,6 @@ const version = "1.89.18"; // generator version, update each time
|
|||
<li>Heightmap selection screen</li>
|
||||
<li>Dialogs optimization for mobile</li>
|
||||
<li>New heightmap template: Fractious</li>
|
||||
<li>Template Editor: mask and invert tools</li>
|
||||
</ul>
|
||||
|
||||
<p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue