Merge pull request #15 from Cyb10101/cyb-translate

Cyb translate
Cyb10101 · Oct 12, 2019 · 775f136 · 775f136
2 parents 35480bc + bf91ae9
commit 775f136
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 29 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -8,3 +8,4 @@ require('bootstrap');
 require('./development.js');
 require('./sound-board.js');
 require('./settings.js');
+require('./translate.js');
diff --git a/assets/js/language.js b/assets/js/language.js
@@ -2,17 +2,46 @@
 
 const electron = require('electron');
 const fs = require('fs');
+const Store = require('electron-store');
+const store = new Store();
 let loadedLanguage;
 let app = electron.app ? electron.app : electron.remote.app;
 let pathLanguage = electron.app ? __dirname + '/../../' : '';
+let languages = ['en', 'de'];
 
 class Language {
     constructor() {
-        let currentLanguage = 'en';
-        if (fs.existsSync(pathLanguage + 'public/language/' + app.getLocale() + '.json')) {
-            currentLanguage = app.getLocale();
+        this.load();
+    }
+
+    load() {
+        let language = this.getCurrent();
+        loadedLanguage = JSON.parse(fs.readFileSync(pathLanguage + 'public/language/en.json', 'utf8'));
+        if (language !== '' && language !== 'en') {
+            let loadedLanguage2 = JSON.parse(fs.readFileSync(pathLanguage + 'public/language/' + language + '.json', 'utf8'));
+            loadedLanguage = {...loadedLanguage, ...loadedLanguage2}; // Merge language objects
         }
-        loadedLanguage = JSON.parse(fs.readFileSync(pathLanguage + 'public/language/' + currentLanguage + '.json', 'utf8'));
+    }
+
+    getAvailable() {
+        return ['en', 'de'];
+    }
+
+    getCurrent() {
+        let language = store.get('language', '');
+        if (!this.getAvailable().includes(language)) {
+            language = app.getLocale();
+
+            if (!this.getAvailable().includes(language)) {
+                language = 'en';
+            }
+        }
+
+        if (!fs.existsSync(pathLanguage + 'public/language/' + language + '.json')) {
+            language = 'en';
+        }
+
+        return language;
     }
 
     __(phrase) {
@@ -22,9 +51,32 @@ class Language {
         }
         return translation
     }
+
+    translate() {
+        let instance = this;
+        document.querySelectorAll('.translate').forEach(function (obj) {
+            obj.innerHTML = instance.__(obj.innerHTML.trim());
+        });
+    }
+
+    reTranslate() {
+        let instance = this;
+        loadedLanguage = this.objectFlip(loadedLanguage);
+        this.translate();
+        language.load();
+        this.translate();
+    }
+
+    objectFlip(obj) {
+        const ret = {};
+        Object.keys(obj).forEach(key => {
+            ret[obj[key]] = key;
+        });
+        return ret;
+    }
 }
 
 const language = new Language();
 const __ = language.__;
-// module.exports = language;
-module.exports = __;
+exports.language = language;
+exports.__ = language.__;
diff --git a/assets/js/settings.js b/assets/js/settings.js
@@ -3,19 +3,23 @@
 const {ipcRenderer, remote, shell} = require('electron');
 const Store = require('electron-store');
 const store = new Store();
+const {__, language} = require('./language.js');
 
 class Settings {
     constructor() {
-        this.setVolume();
         this.bindVolume();
+        this.setVolume();
 
-        this.setModifier();
         this.bindModifier();
+        this.setModifier();
 
-        this.setPageColor();
-        this.setButtonColor();
         this.bindPageColor();
         this.bindButtonColor();
+        this.setPageColor();
+        this.setButtonColor();
+
+        this.bindLanguage();
+        this.setLanguage();
 
         this.bindAppSettings();
         this.setAppSettings();
@@ -81,6 +85,35 @@ class Settings {
         ipcRenderer.send('setGlobalShortcuts', amount);
     }
 
+    bindLanguage() {
+        let settingLanguage = document.querySelector('#settings-language');
+
+        for (let languageAvailable of language.getAvailable()) {
+            let option = document.createElement('option');
+            option.className = 'translate';
+            option.value = languageAvailable;
+            option.innerText = __('language.' + languageAvailable);
+            settingLanguage.appendChild(option);
+        }
+
+        settingLanguage.addEventListener('change', function () {
+            let oldLanguage = store.get('language', 'en');
+            store.set('language', this.value);
+            language.reTranslate();
+            ipcRenderer.send('app', {do: 'reTranslate'});
+        });
+    }
+
+    setLanguage() {
+        let settingLanguage = document.querySelector('#settings-language');
+        let languageStored = store.get('language', '');
+        if (language.getAvailable().includes(languageStored)) {
+            settingLanguage.value = languageStored;
+        } else {
+            settingLanguage.value = '';
+        }
+    }
+
     bindAppSettings() {
         let instance = this;
         document.querySelector('#settings-app-start-minimized').addEventListener('change', function () {

diff --git a/assets/js/sound-board.js b/assets/js/sound-board.js
@@ -6,11 +6,10 @@ const Store = require('electron-store');
 const store = new Store();
 import Sortable from 'sortablejs';
 import {predefinedSounds} from './predefined-sounds.js';
-const __ = require('./language.js');
+const {__} = require('./language.js');
 
 class SoundBoard {
     constructor() {
-        this.translate();
         this.initializeUserData();
         this.createSoundBoard();
         this.addTestSoundButtons();
@@ -22,12 +21,6 @@ class SoundBoard {
         this.connectExternalLinks();
     }
 
-    translate() {
-        document.querySelectorAll('.translate').forEach(function (obj) {
-            obj.innerHTML = __(obj.innerHTML.trim());
-        });
-    }
-
     initializeUserData() {
         this.userData = remote.app.getPath('userData');
         this.userDataSounds = this.userData + '/sounds';

diff --git a/assets/js/translate.js b/assets/js/translate.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const {language} = require('./language.js');
+
+document.addEventListener('DOMContentLoaded', function () {
+    language.translate();
+});
diff --git a/main.js b/main.js
@@ -38,7 +38,9 @@ let initializeStartMinimized = store.get('app-tray-instead-taskbar', false) && s
 
 class ElectronApp {
     initializeLanguage() {
-        this.__ = require('./assets/js/language.js');
+        const {language} = require('./assets/js/language.js');
+        language.load();
+        this.__ = language.__;
     }
 
     mainWindowMenu() {
@@ -229,7 +231,9 @@ class ElectronApp {
         }
 
         let instance = this;
-        trayMenu = new Tray(path.join(__dirname, 'assets/images/icons/iconfinder_S_1553065_32.png'));
+        if (!trayMenu) {
+            trayMenu = new Tray(path.join(__dirname, 'assets/images/icons/iconfinder_S_1553065_32.png'));
+        }
         trayMenu.addListener('click', function () {
             instance.trayMenuOpenPage('.page-sound-board');
         });
@@ -310,6 +314,10 @@ class ElectronApp {
                     // @todo destroy tray menu
                 }
                 mainWindow.setSkipTaskbar(isTray);
+            } else if (args.do === 'reTranslate') {
+                instance.initializeLanguage();
+                instance.mainWindowMenu();
+                instance.trayMenu();
             } else if (args.do === 'restart') {
                 if (store.get('app-tray-instead-taskbar', false)) {
                     appQuit = true;
@@ -383,7 +391,7 @@ app.on('second-instance', (event, argv, cwd) => {
 });
 
 app.on('ready', () => {
-    electronApp.initializeLanguage()
+    electronApp.initializeLanguage();
     electronApp.mainWindowMenu();
     electronApp.mainWindowCreate();
     electronApp.connectIpc();

diff --git a/public/build/app.js b/public/build/app.js
diff --git a/public/build/app.js.map b/public/build/app.js.map
diff --git a/public/index.html b/public/index.html
@@ -213,6 +213,12 @@ <h3 class="translate">Button color</h3>
                     <div class="color-circle setting-color-21"></div>
                 </div>
             </div>
+            <div class="col-12 mb-3">
+                <h3 class="translate">Language</h3>
+                <select class="custom-select" id="settings-language">
+                    <option class="translate" value="" selected>- System default -</option>
+                </select>
+            </div>
             <div class="col-12 mb-3">
                 <h3 class="translate">Application</h3>
                 <div class="custom-control custom-checkbox mb-1">

diff --git a/public/language/de.json b/public/language/de.json
@@ -69,5 +69,10 @@
     "Do you want to change window frame and restart the application?": "Willst du den Fensterrahmen ändern und die Anwendung neu starten?",
     "Reset app data": "Anwendungsdaten zurücksetzen",
     "If you reset the app, all settings will be reset to default.": "Wenn Sie die Anwendung zurücksetzen, werden alle Einstellungen auf die Standardeinstellungen zurückgesetzt.",
-    "Note: Windows maybe does not start the application automatically.": "Hinweis: Windows startet die Anwendung möglicherweise nicht automatisch."
+    "Note: Windows maybe does not start the application automatically.": "Hinweis: Windows startet die Anwendung möglicherweise nicht automatisch.",
+
+    "Language": "Sprache",
+    "- System default -": "- System Standard -",
+    "English": "Englisch",
+    "German": "Deutsch"
 }
diff --git a/public/language/en.json b/public/language/en.json
@@ -70,4 +70,12 @@
     "Reset app data": "Reset app data",
     "If you reset the app, all settings will be reset to default.": "If you reset the app, all settings will be reset to default.",
     "Note: Windows maybe does not start the application automatically.": "Note: Windows maybe does not start the application automatically.",
+
+    "Language": "Language",
+    "- System default -": "- System default -",
+    "English": "English",
+    "German": "German",
+
+    "language.en": "English",
+    "language.de": "German"
 }