Add language button

2024-04-14 00:48:00 +02:00 · 2024-04-14 00:48:00 +02:00 · 0e17eabb1c
commit 0e17eabb1c
parent 41a351fc0a
3 changed files with 105 additions and 10 deletions
--- a/TRANSLATIONS.md
+++ b/TRANSLATIONS.md
@ -0,0 +1,42 @@
+# Translations Guidelines
+
+## Overview
+Translations for the "DualShock Calibration GUI" project are managed through
+JSON files located in the [lang/ directory](https://github.com/dualshock-tools/dualshock-tools.github.io/tree/main/lang). 
+
+This document provides guidelines on how to contribute translations for new languages.
+
+## Getting Started
+To translate the project into a new language, follow these steps:
+
+1. **Duplicate an Existing File**: Start by duplicating an existing language file located in the `lang/` directory. For example, if you're translating into Spanish, duplicate `lang/it_it.json` and rename it to `lang/es_es.json`.
+
+2. **Edit the File**: Open the duplicated JSON file and replace the translations of strings with the corresponding translations in the target language. The first entry `.authorMsg` is customizable, write there your name and, if you want, your website!
+
+3. **Save the File**: Save the changes to the JSON file.
+
+4. **Update `core.js`**: Add the new language to the list of available languages (`available_langs`) in [core.js](https://github.com/dualshock-tools/dualshock-tools.github.io/blob/main/core.js). For example:
+   
+```json
+var available_langs = {
+    "zh_cn": { "name": "Chinese", "file": "zh_cn.json"},                        
+    "fr_fr": { "name": "Français", "file": "fr_fr.json"},                       
+    "hu_hu": { "name": "Hungarian", "file": "hu_hu.json"},                      
+    "it_it": { "name": "Italiano", "file": "it_it.json"}, 
+    "es_es": { "name": "Español", "file": "es_es.json"},
+};
+```
+
+## Submitting Translations
+Once you have completed the translation, you can contribute it in one of the following ways:
+
+- **Pull Request (PR)**: Open a Pull Request with the changes.
+- **Discord**: Send the translated file to `the_al` on Discord.
+- **Email**: Send the translated file to `ds4@the.al` via email.
+
+Feel free to adjust any details or formatting according to your preferences!
+
+## Thank you
+
+We extend our heartfelt gratitude to everyone who contributes translations to
+make this project accessible to a wider audience. Thank you!
--- a/core.js
+++ b/core.js
@ -8,10 +8,10 @@ var lang_cur = {};
 var lang_disabled = true;

 var available_langs = {
-    "fr_fr": "fr_fr.json",
-    "hu_hu": "hu_hu.json",
-    "it_it": "it_it.json",
-    "zh_cn": "zh_cn.json",
+    "zh_cn": { "name": "中文", "file": "zh_cn.json"},
+    "fr_fr": { "name": "Français", "file": "fr_fr.json"},
+    "it_it": { "name": "Italiano", "file": "it_it.json"},
+    "hu_hu": { "name": "Magyar", "file": "hu_hu.json"},
 };

 function dec2hex(i) {
@ -1030,7 +1030,38 @@ function lang_init() {
    var nlang = navigator.language.replace('-', '_').toLowerCase();
    var ljson = available_langs[nlang];
    if(ljson !== undefined) {
-        lang_translate(ljson);
+        lang_translate(ljson["file"], nlang);
+    }
+
+    var langs = Object.keys(available_langs);
+    var olangs = "";
+    olangs += '<li><a class="dropdown-item" href="#" onclick="lang_set(\'en_us\');">English</a></li>';
+    for(i=0;i<langs.length;i++) {
+        name = available_langs[langs[i]]["name"];
+        olangs += '<li><a class="dropdown-item" href="#" onclick="lang_set(\'' + langs[i] + '\');">' + name + '</a></li>';
+    }
+    olangs += '<li><hr class="dropdown-divider"></li>';
+    olangs += '<li><a class="dropdown-item" href="https://github.com/dualshock-tools/dualshock-tools.github.io/blob/main/TRANSLATIONS.md" target="_blank">Missing your language?</a></li>';
+    $("#availLangs").html(olangs);
+
+    var force_lang = readCookie("force_lang");
+    if (force_lang != null) {
+        lang_set(force_lang, true);
+    }
+}
+
+function lang_set(l, skip_modal=false) {
+    if(l == "en_us") {
+        lang_reset_page();
+    } else {
+        var file = available_langs[l]["file"];
+        lang_translate(file, l);
+    }
+
+    createCookie("force_lang", l);
+    if(!skip_modal) {
+        createCookie("welcome_accepted", "0");
+        welcome_modal();
    }
 }

@ -1040,6 +1071,8 @@ function lang_reset_page() {
        var item = items[i];
        $(item).html(lang_orig_text[item.id]);
    }
+    $("#authorMsg").html("");
+    $("#curLang").html("English");
 }

 function l(text) {
@ -1055,9 +1088,9 @@ function l(text) {
    return text;
 }

-function lang_translate(target_lang) {
+function lang_translate(target_file, target_lang) {
    lang_cur = {}
-    $.getJSON("lang/" + target_lang, function(data) {
+    $.getJSON("lang/" + target_file, function(data) {
        $.each( data, function( key, val ) {
             if(lang_cur[key] !== undefined) {
                 console.log("Warn: already exists " + key);
@ -1085,8 +1118,9 @@ function lang_translate(target_lang) {
        var old_title = lang_orig_text[".title"];
        document.title = lang_cur[old_title];
        if(lang_cur[".authorMsg"] !== undefined) {
-            $("#authorMsg").html(lang_cur[".authorMsg"])
+            $("#authorMsg").html(lang_cur[".authorMsg"]);
        }
+        $("#curLang").html(available_langs[target_lang]["name"]);
    });

 }
--- a/index.html
+++ b/index.html
@ -36,13 +36,32 @@
 <symbol id="mug" viewBox="0 0 512 512">
 <path fill="#ffffff" d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"/>
 </symbol>
+<symbol id="lang" viewBox="0 0 640 512">
+<path d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/>
+</symbol>
 </svg>


 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

+<nav class="navbar bg-body-tertiary navbar-expand-lg bg-body-tertiary">
+  <div class="container-fluid">
+    <a class="navbar-brand ds-i18n">DualShock Calibration GUI</a>
+
+    <div class="d-flex" id="navbarNavAltMarkup">
+        <div class="nav-item dropdown me-2">
+            <a class="nav-link dropdown-toggle" id="langMenuButton" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
+                <svg class="bi text-secondary" width="1.5em" height="1.5em" ><use xlink:href="#lang"/></svg>&nbsp;<span id="curLang">English</span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langMenuButton"  id="availLangs">
+            </ul>
+        </div>
+    </div>
+  </div>
+</nav>
+
+
 <div class="container p-2">
-<h1 class="ds-i18n">DualShock Calibration GUI</h1>

 <div id="missinghid" style="display: none;">
 <p class="ds-i18n">Unsupported browser. Please use a web browser with WebHID support (e.g. Chrome).</p>
@ -295,7 +314,7 @@
 <div class="container">
  <footer>
    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top" id="footbody">
-      <p><span class="ds-i18n">Version</span> 0.4<small class="text-muted">beta</small> (2024-04-09) - <a href="#" class="ds-i18n" data-bs-toggle="modal" data-bs-target="#donateModal">Support this project</a>&nbsp;<span id="authorMsg"></span></p>
+      <p><span class="ds-i18n">Version</span> 0.5 (2024-04-14) - <a href="#" class="ds-i18n" data-bs-toggle="modal" data-bs-target="#donateModal">Support this project</a>&nbsp;<span id="authorMsg"></span></p>

      <ul class="list-unstyled d-flex">
        <li class="ms-3"><a class="link-body-emphasis" href="mailto:ds4@the.al" target="_blank"><svg class="bi" width="24" height="24"><use xlink:href="#mail"/></svg></a></li>