Updated positioning of text

Reviewed-on: #1

index.html

@@ -71,9 +71,6 @@
             font-family: sans-serif;
             visibility: hidden;
          }
-         .language:hover ~ .languageText {
-            visibility: visible;
-         }
 
 			.district {
 				stroke: white;
@@ -113,11 +110,17 @@
 				 transition: fill-opacity 0.3s;
 			}
 
+         section#textStuff {
+            min-width: 30em;
+            flex: 0 1 0;
+         }
+
 			/* Position map load spinner in the middle of the SVG */
 			#svgContainer {
 					position: relative;
 					display: inline-block;
-					flex-grow: 1;
+               flex-shrink: 1;
+               flex-grow: 1;
                max-width: 100%;
 			}
 
@@ -178,7 +181,7 @@
 			#fetchingText {
 				visibility: hidden;
 			}
-			@media only screen and (max-width: 768px) {
+			@media only screen and (max-width: 1366px) {
 					main {
 						flex-direction: column;
                     	align-items: stretch;
@@ -186,14 +189,23 @@
 					.district {
 							stroke-width: 0.1;
 					}
+					.translationText, .romanizationText {
+						font-size: 1em;
+					}
+					.languageText {
+						font-size: 0.8em;
+					}
+
+			}
+
+			@media only screen and (max-width: 768px) {
 					.translationText, .romanizationText {
 						font-size: 0.7em;
 					}
 					.languageText {
 						font-size: 0.6em;
 					}
-
+         }
-			}
 
 		</style>
 	</head>
@@ -211,6 +223,15 @@
 		<noscript>
 			<h2>This website requires javascript to work.</h2>
 		</noscript>
+		<p>
+			<ul>
+					<li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).
+					<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.
+					<li>Translations are retrieved from Google Translate - they may be innacurate.
+					<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.
+					
+
+
 		</section>
 
 		<section id="svgContainer">
@@ -220,6 +241,7 @@
 
 		<script type="text/javascript" src="index.js"></script>
 		<script type="text/javascript" src="updateTranslations.js"></script>
+		<script type="text/javascript" src="svgHoverListener.js"></script>
 
 
 	</body>

index.js

@@ -213,9 +213,14 @@ function stateOrDistrictOrLanguage(d) {
 
 //	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
 //	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
-const mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
+let mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
 // const mapHeight = document.querySelector("#svgContainer").offsetHeight;
-const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top);
+let mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top);
+
+if (window.innerWidth <= 768) {
+	mapWidth *= 1.5;
+	mapHeight *= 1.5;
+}
 
 const svg = d3.select("#svgContainer")
 			.append('svg')
@@ -252,6 +257,11 @@ function drawMap(world) {
 	states.append("path")
 		.attr("d", path)
 		.attr("class", d => stateOrDistrictOrLanguage(d))
+		.attr("id", function(d) {
+				if (stateOrDistrictOrLanguage(d) === "language") {
+						return languages[d.properties.lang_name.toLowerCase()].code + "langMap";
+				}
+		})
 		.attr("fill", function(d) {
 		    if (stateOrDistrictOrLanguage(d) === "language") {
 		    	return languages[d.properties.lang_name.toLowerCase()].color;
@@ -272,7 +282,8 @@ function drawMap(world) {
 		.append("title") // Tooltip
 		.text(d => d.properties.district);
 
-	states.append("text")
+	const textItems = svg.selectAll("g.textItem").data(world.features).enter().append("g");
+	textItems.append("text")
       .attr("x", function(d) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
 					rtv = projection(d3.geoCentroid(d))[0];
@@ -282,6 +293,9 @@ function drawMap(world) {
                if (d.properties.lang_name == "Tamil") {
                   rtv += 20;
                }
+               if (d.properties.lang_name == "Kannada" && window.innerWidth <= 768) {
+                  rtv += 15;
+               }
                if (d.properties.lang_name == "Maithali") {
                   rtv += 10;
                }
@@ -298,7 +312,9 @@ function drawMap(world) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
 					rtv = projection(d3.geoCentroid(d))[1]
                if (d.properties.lang_name == "Kannada") {
-                  rtv += 15;
+		  if (window.innerWidth > 768) {
+                 	 rtv += 10;
+      		  }
                }
                if (d.properties.lang_name == "Tamil") {
                   rtv -= 20;
@@ -338,7 +354,7 @@ function drawMap(world) {
 		});
 
    // Romanization
-	states.append("text")
+	textItems.append("text")
       .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
 							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
 							projection(d3.geoCentroid(d))[0])
@@ -362,7 +378,7 @@ function drawMap(world) {
 		});
 
    // Language
-	states.append("text")
+	textItems.append("text")
       .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
 							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
 							projection(d3.geoCentroid(d))[0])
@@ -396,6 +412,22 @@ function drawMap(world) {
 	const coordinates = [77.69916967457782,23.389970772934166];
 	const [xCoord, yCoord] = projection(coordinates);
 
+	// Add a listener to toggle the language display when a language is hovered on the map
+	document.querySelectorAll(".language").
+				forEach(function(element) {
+						element.addEventListener("mouseover", toggleLanguageDisplay);
+						element.addEventListener("mouseout", toggleLanguageDisplay);
+				});
+
+	// Remove all 'g' elements that have no children (they don't have a language, translation, or romanization). This must mean they accidentally got created when I created the 'textItems' variable
+	document.querySelectorAll("g").
+			forEach(function(element) {
+					if (element.childElementCount == 0) {
+							element.remove()
+					}
+			});
+
+
 //	svg.append("text")
 //    .attr("x", xCoord)
 //    .attr("y", yCoord)

svgHoverListener.js

@@ -0,0 +1,8 @@
+function toggleLanguageDisplay(event) {
+		if (event.type == "mouseover") {
+				document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "visible";
+		}
+		if (event.type == "mouseout") {
+				document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "hidden";
+		}
+}