better handling of translation

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

Hide file tree

Showing 2 changed files with 55 additions and 20 deletions.
diff --git a/static/functions.js b/static/functions.js
@@ -139,8 +139,6 @@ function createTables() {
 	createCluesTable("bathroom-tutorial", 6, data.timeOffset, false, true);
 }
 
-createTables();
-
 function drawClueTable(table) {
 	table.ctx.fillStyle = "#cccccc";
 	table.ctx.fillRect(0, 0, table.canvas.width, table.canvas.height);
@@ -374,21 +372,38 @@ function checkIfWebsiteShouldBeTranslated() {
 	language = window.navigator.languages[0];
 	language = language.split("-")[0];
 	console.log(language);
-	if (language == "es")
-		translateContent();
+	if (sessionStorage.getItem("language") === null && language == "es") {
+		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");
+	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() {
 	var goog_te_combo = document.getElementsByClassName("goog-te-combo")[0];
 	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');
-	} else {
-		goog_te_combo.value = "en";
-		document.documentElement.classList.add("notranslate");
-		triggerEvent(document.querySelector('.goog-te-combo'), 'change');
-		document.cookie = "";
-		location.reload();
 	}
 }
+
+checkIfWebsiteShouldBeTranslated();
diff --git a/static/index.template.html b/static/index.template.html
@@ -4,14 +4,6 @@
 <head>
 	<!-- Google fonts -->
 	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-	<script>
-	  WebFont.load({
-		google: {
-		  families: ['Raleway']
-		},
-		active: createTables()
-	  });
-	</script>
 	<!-- Google tag (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-C7DCY6FN81"></script>
 	<script>
@@ -39,7 +31,7 @@
 
 <!-- Modals -->
 <div class="modal fade" id="portraitModal" tabindex="-1" aria-labelledby="portraitLabel" aria-hidden="true">
-	<div class="modal-dialog">
+	<div class="modal-dialog modal-dialog-centered">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title" id="portraitLabel">📸 Suspect portrait</h5>
@@ -57,6 +49,26 @@ <h5 class="modal-title" id="portraitLabel">📸 Suspect portrait</h5>
 	</div>
 </div>
 
+<div class="modal fade" id="languageSelector" tabindex="-1" aria-labelledby="languageSelector" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered">
+		<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
+				</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>
+			</div>
+		</div>
+	</div>
+</div>
+
+
 <body>
 	<div class="container p-3 text-center">
 		<img id="logoImage" src="images/logo_light.png" class="w-100" style="max-width:600px" alt="...">
@@ -68,7 +80,7 @@ <h5 class="modal-title" id="portraitLabel">📸 Suspect portrait</h5>
 
 	<p class="floating-button float">
 		<a href="#/" onClick="switchTheme()" class="link-underline link-underline-opacity-0">🌓
-		<a href="#/" onClick="translateContent()" class="link-underline link-underline-opacity-0">🗺️</a>
+		<a href="#/" onClick="untranslateContent()" class="link-underline link-underline-opacity-0">🗺️</a>
 	</p>
 
 	<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@@ -370,6 +382,14 @@ <h4>🤖 Answer is.. <span class="font-monospace">beep boop, wrong!</span></h4>
 
 	<script src="data.js"></script>
 	<script src="functions.js"></script>
+	<script>
+		WebFont.load({
+		  google: {
+			families: ['Raleway']
+		  },
+		  active: createTables()
+		});
+	</script>
 </body>
 
 </html>