Remove testing code; use minified map JSON; hide spinner after map has loaded

Change function name; add code to hide, show and change text for the 'fetching translations/romanizations' text
Update translations DB
6 changed files with 105 additions and 20 deletions
--- a/htmx.min.js
+++ b/htmx.min.js
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
 		<title>Indian Translate</title>
 		<script src="https://d3js.org/d3.v7.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js" charset="utf-8"></script>
-		<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+		<script src="./htmx.min.js"></script>
 		<style>
 			body {
 				background-color: #f4f4f4;
@ -24,7 +24,16 @@
 			svg {
 				border: 1px solid;
 				padding: 2em;
+				visibility: hidden;
+				opacity: 0;
+				transition: opacity 1s, visibility 2s;
+			}
+
+			svg.show {
+					visibility: visible;
+					opacity: 1;
 			}
+
 		   h1 {
            margin-block: 0.67em;
            font-size: 2em;
@ -66,11 +75,6 @@
            visibility: visible;
         }

-			.testClass:hover {
-				fill: red;
-				cursor: default;
-			}
-
 			.district {
 				stroke: white;
 				stroke-width: 0.25;
@ -108,21 +112,93 @@
 				fill-opacity: 1;
 				 transition: fill-opacity 0.3s;
 			}
+
+			/* Position map load spinner in the middle of the SVG */
+			.svgContainer {
+					position: relative;
+					display: inline-block;
+			}
+
+			.svgContainer .mapLoadSpinner {
+					position: absolute;
+					top: 40%;
+					left: 40%;
+			}
+
+			/* Credit to https://lukehaas.me/projects/css-loaders/ */
+			.mapLoadSpinner,
+			.mapLoadSpinner:after {
+			  border-radius: 50%;
+			  width: 10em;
+			  height: 10em;
+			  transition: opacity 1s, visibility 2s;
+			}
+			.mapLoadSpinner.hide {
+					opacity: 0;
+					visibility: hidden;
+			}
+			.mapLoadSpinner {
+			  margin: 60px auto;
+			  font-size: 10px;
+			  position: relative;
+			  text-indent: -9999em;
+			  border-top: 1.1em solid rgba(255,158,83, 0.2);
+			  border-right: 1.1em solid rgba(255,158,83, 0.2);
+			  border-bottom: 1.1em solid rgba(255,158,83, 0.2);
+			  border-left: 1.1em solid #ff9e53;
+			  -webkit-transform: translateZ(0);
+			  -ms-transform: translateZ(0);
+			  transform: translateZ(0);
+			  -webkit-animation: load8 1.1s infinite linear;
+			  animation: load8 1.1s infinite linear;
+			}
+			@-webkit-keyframes load8 {
+			  0% {
+			    -webkit-transform: rotate(0deg);
+			    transform: rotate(0deg);
+			  }
+			  100% {
+			    -webkit-transform: rotate(360deg);
+			    transform: rotate(360deg);
+			  }
+			}
+			@keyframes load8 {
+			  0% {
+			    -webkit-transform: rotate(0deg);
+			    transform: rotate(0deg);
+			  }
+			  100% {
+			    -webkit-transform: rotate(360deg);
+			    transform: rotate(360deg);
+			  }
+			}
+
+			#fetchingText {
+				visibility: hidden;
+			}
+
 		</style>
 	</head>
 	<body>
 		<main>
 		<section id="textStuff">
 			<h1>Indian Translate</h1>
-			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
+			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideTranslationsAndShowText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
 				<input type="text" name="query" id="query" required/>
 				<input type="submit" value="Translate"/>
 			</form>
 		<progress id="loading-screen" class="loading-indicator"></progress>
+		<h3 id="fetchingText">Fetching translations...</h3>
+		<noscript>
+			<h2>This website requires javascript to work.</h2>
+		</noscript>
 		</section>

-		<svg id = "indiaMap" width="1300" height="1300"></svg>
+		<section class="svgContainer">
+			<svg id = "indiaMap" width="1300" height="1300"></svg>
+			<div id="mapLoadSpinner" class="mapLoadSpinner"></div>
+		</section>
 		</main>

 		<script type="text/javascript" src="index.js"></script>
--- a/index.js
+++ b/index.js
@ -223,6 +223,10 @@ function drawMap(world) {
 							districtLang.districts.push(d)
 						}
 				}
+				// Hide map load spinner after map has loaded
+				document.getElementById("mapLoadSpinner").classList.add("hide");
+				document.querySelector("svg").classList.add("show");
+
 		})
 		.append("title") // Tooltip
 		.text(d => d.properties.district);
@ -339,21 +343,20 @@ function drawMap(world) {
 			} else {
 				d3.select(this).remove() // Only add this attribute if the element is a language
 			}
-		});
-
+		})
 		let allLangs = []

 	const coordinates = [77.69916967457782,23.389970772934166];
 	const [xCoord, yCoord] = projection(coordinates);

-	svg.append("text")
-    .attr("x", xCoord)
-    .attr("y", yCoord)
-	.attr("class", "testClass")
-    .attr("text-anchor", "middle")
-    .attr("font-size", "12px")
-    .attr("fill", "black")
-    .text("Hello, Map!");
+//	svg.append("text")
+//    .attr("x", xCoord)
+//    .attr("y", yCoord)
+//	.attr("class", "testClass")
+//    .attr("text-anchor", "middle")
+//    .attr("font-size", "12px")
+//    .attr("fill", "black")
+//    .text("Hello, Map!");
 //	for (const [langId,lang] of Object.entries(languages)) {
 //		let geojson = {
 //		    "type": "FeatureCollection",
@ -377,4 +380,4 @@ function drawMap(world) {

 }

-d3.json("india_with_districts_with_languages.json").then(drawMap)
+d3.json("india_with_districts_with_languages_min.json").then(drawMap)
--- a/india_with_districts_with_languages_min.json
+++ b/india_with_districts_with_languages_min.json
--- a/translations.db
+++ b/translations.db
--- a/updateTranslations.js
+++ b/updateTranslations.js
@ -1,5 +1,6 @@
-function hideText(request) {
+function hideTranslationsAndShowText(request) {
 		document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
+		document.getElementById("fetchingText").style.visibility = "visible";
 }

 function updateTranslations(response) {
@ -14,6 +15,7 @@ function updateTranslations(response) {
 		// bar used to track translations, and then remove it in the 'resolved' handler.
 		const elem = document.getElementById("loading-screen")
 		elem.classList.toggle("loading")
+		document.getElementById("fetchingText").textContent = "Fetching romanizations..."
 		fetch("/romanize", {
 				method: "POST",
 				body: response
@ -29,5 +31,7 @@ function updateTranslations(response) {
 			});
 			// Show elements again
 			document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'visible')
+			document.getElementById("fetchingText").textContent = "Fetching translations..." // Restore the original text content
+			document.getElementById("fetchingText").style.visibility = "hidden"
 		});
 }
Author	SHA1	Message	Date
Aadhavan Srinivasan	3d06971e77	Remove testing code; use minified map JSON; hide spinner after map has loaded	6 days ago
Aadhavan Srinivasan	50a476edad	Change function name; add code to hide, show and change text for the 'fetching translations/romanizations' text	6 days ago
Aadhavan Srinivasan	2814f80fc8	Update translations DB	6 days ago
Aadhavan Srinivasan	74f3cb9740	Added minified version of JSON	6 days ago
Aadhavan Srinivasan	2f7cdd2ea7	Add loading spinner while map loads; fade in map and fade out spinner; load HTMX locally; show text while translations and romanizations are being fetched	6 days ago
Aadhavan Srinivasan	1fbe5a1abf	Download HTMX locally	6 days ago