allow to select language

mystery-o-matic · Nov 7, 2023 · 5a76ddd · 5a76ddd
1 parent 044bb3e
commit 5a76ddd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 29 deletions.
diff --git a/static/functions.js b/static/functions.js
@@ -364,46 +364,36 @@ function googleTranslateElementInit() {
 
 // Create a new onchange event and trigger it
 const triggerEvent = (element,eventName) =>{
-	const event = new Event(eventName);
+	const event = new Event(eventName, {'bubbles': true});
 	element.dispatchEvent(event);
 };
 
-function checkIfWebsiteShouldBeTranslated() {
-	language = window.navigator.languages[0];
+function checkIfWebsiteShouldBeTranslated(force) {
+	language = window.navigator.language;
 	language = language.split("-")[0];
 	console.log(language);
-	if (sessionStorage.getItem("language") === null && language == "es") {
+	if (force || (sessionStorage.getItem("language") === null && language != "en")) {
 		let modal = new bootstrap.Modal(document.getElementById('languageSelector'), {});
 		modal.show();
 	}
 }
 
 function keepInEnglish() {
-	sessionStorage.setItem("language", "en");
-	var goog_te_combo = document.getElementsByClassName("goog-te-combo")[0];
-	goog_te_combo.value = "";
-	document.cookie = "";
-	location.reload();
-}
-
-function untranslateContent() {
-	console.log("untranslate!");
-	sessionStorage.removeItem("language");
+	sessionStorage.setItem("language", "");
 	var goog_te_combo = document.getElementsByClassName("goog-te-combo")[0];
 	goog_te_combo.value = "en";
 	triggerEvent(document.querySelector('.goog-te-combo'), 'change');
-	document.cookie = "";
-	location.reload();
 }
 
-function translateContent() {
+function translateContent(language) {
 	var goog_te_combo = document.getElementsByClassName("goog-te-combo")[0];
+	console.log(goog_te_combo);
+	goog_te_combo.value = language;
 	console.log(goog_te_combo.value);
-	if (goog_te_combo.value == "" || goog_te_combo.value == "en") {
-		goog_te_combo.value = "es";
-		sessionStorage.setItem("language", goog_te_combo.value)
-		triggerEvent(document.querySelector('.goog-te-combo'), 'change');
-	}
+	sessionStorage.setItem("language", goog_te_combo.value)
+	triggerEvent(goog_te_combo, 'change');
+	goog_te_combo.value = language;
+	triggerEvent(goog_te_combo, 'change');
 }
 
-checkIfWebsiteShouldBeTranslated();
+checkIfWebsiteShouldBeTranslated(false);
diff --git a/static/index.template.html b/static/index.template.html
@@ -54,15 +54,13 @@ <h5 class="modal-title" id="portraitLabel">📸 Suspect portrait</h5>
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title w-100 text-center notranslate" id="">
-					mystery-🌐-matic está disponible en tu idioma
+					mystery-🌐-matic in your language
 				</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
-				<div class="col text-center">
-					<button type="button" class="close btn btn-secondary notranslate" data-bs-dismiss="modal" onClick="keepInEnglish()">Go back to English</button>
-					<button type="button" class="close btn btn-secondary notranslate" data-bs-dismiss="modal" onClick="translateContent()">¡Adelante!</button>
-				</div>
+					<button type="button" class="close btn btn-secondary notranslate" data-bs-dismiss="modal" onClick="keepInEnglish()">English</button>
+					<button type="button" class="close btn btn-secondary notranslate" data-bs-dismiss="modal" onClick="translateContent('es')">Español</button>
 			</div>
 		</div>
 	</div>
@@ -80,7 +78,7 @@ <h5 class="modal-title w-100 text-center notranslate" id="">
 
 	<p class="floating-button float">
 		<a href="#/" onClick="switchTheme()" class="link-underline link-underline-opacity-0">🌓
-		<a href="#/" onClick="untranslateContent()" class="link-underline link-underline-opacity-0">🗺️</a>
+		<a href="#/" onClick="checkIfWebsiteShouldBeTranslated(true)" class="link-underline link-underline-opacity-0">🗺️</a>
 	</p>
 
 	<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>