Changed the language selection so it also shows the flags

This commit is contained in:
2026-01-08 15:32:30 +01:00
parent 0a5fa79668
commit f3cc6b5798
2 changed files with 10 additions and 5 deletions
+4 -2
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Video to document</title> <title id="title">Video to document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css">
</head> </head>
<body> <body>
@@ -88,8 +89,9 @@
<div class="language-wrapper"> <div class="language-wrapper">
<label id="labelLanguage">Select language:</label> <label id="labelLanguage">Select language:</label>
<img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
<select name="language_option" id="language_option"> <select name="language_option" id="language_option">
</select> </select>
</div> </div>
</div> </div>
@@ -179,7 +181,7 @@
<button id ="nextBtn" class="navBtn">&rarr;</button> <button id ="nextBtn" class="navBtn">&rarr;</button>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
<script src="languages.js"></script> <script src="languages.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script src="./renderer.js"></script> <script src="./renderer.js"></script>
+6 -3
View File
@@ -9,12 +9,12 @@ Functions used in the setup or affect most of the gui
//language changing feature => changes the language of every displayed text //language changing feature => changes the language of every displayed text
function changeLanguage(language) { function changeLanguage(language) {
try { try {
document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; //document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath;
document.getElementById('labelKI').textContent = languageOptions[language].labelKI; document.getElementById('labelKI').textContent = languageOptions[language].labelKI;
document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription; document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription;
document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage; document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage;
document.getElementById('title').textContent = languageOptions[language].title; document.getElementById('title').textContent = languageOptions[language].title;
document.getElementById('h1').textContent = languageOptions[language].h1; //document.getElementById('h1').textContent = languageOptions[language].h1;
document.getElementById('p1').textContent = languageOptions[language].p1; document.getElementById('p1').textContent = languageOptions[language].p1;
document.getElementById('fileName').textContent = languageOptions[language].fileName; document.getElementById('fileName').textContent = languageOptions[language].fileName;
document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn; document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn;
@@ -27,7 +27,7 @@ function changeLanguage(language) {
document.getElementById('step_nav4').textContent = languageOptions[language].step_nav4; document.getElementById('step_nav4').textContent = languageOptions[language].step_nav4;
document.getElementById('step_nav5').textContent = languageOptions[language].step_nav5; document.getElementById('step_nav5').textContent = languageOptions[language].step_nav5;
document.getElementById('step_nav6').textContent = languageOptions[language].step_nav6; document.getElementById('step_nav6').textContent = languageOptions[language].step_nav6;
document.getElementById('h2').textContent = languageOptions[language].h2; //document.getElementById('h2').textContent = languageOptions[language].h2;
document.getElementById('labelSpeaker').textContent = languageOptions[language].labelSpeaker; document.getElementById('labelSpeaker').textContent = languageOptions[language].labelSpeaker;
document.getElementById('labelSpeakerAudio').textContent = languageOptions[language].labelSpeakerAudio; document.getElementById('labelSpeakerAudio').textContent = languageOptions[language].labelSpeakerAudio;
document.getElementById('labelSpeakerWriter').textContent = languageOptions[language].labelSpeakerWriter; document.getElementById('labelSpeakerWriter').textContent = languageOptions[language].labelSpeakerWriter;
@@ -190,6 +190,7 @@ function loadDataTypeOptions(options){
//function to load language options to the drop down list //function to load language options to the drop down list
function loadLanguageOptions(){ function loadLanguageOptions(){
try { try {
var menu = document.getElementById('language_option'); var menu = document.getElementById('language_option');
var object_holdy; var object_holdy;
var choice ; var choice ;
@@ -198,8 +199,10 @@ function loadLanguageOptions(){
choice = document.createElement('option'); choice = document.createElement('option');
choice.textContent = object_holdy[i]; choice.textContent = object_holdy[i];
choice.value = object_holdy[i]; choice.value = object_holdy[i];
choice.setAttribute('data-image', languageOptions[object_holdy[i]].flagPath);
menu.appendChild(choice); menu.appendChild(choice);
} }
new lc_select(document.getElementById('language_option')); //loads the flag images so they get displayed in the gui
} catch (error) { } catch (error) {
console.log("Error in script.js loadLanguageOptions function"); console.log("Error in script.js loadLanguageOptions function");
console.log(error); console.log(error);