Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Rockingcool:c15bd02c171dac9497ac5aeffbdd6ee34ca8d48a
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
...
compare: Rockingcool:3d06971e77dd47317d686ce1a524156fb4a36228
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

6 Commits
c15bd02c17 ... 3d06971e77

Author SHA1 Message Date
Aadhavan Srinivasan
3d06971e77 Remove testing code; use minified map JSON; hide spinner after map has loaded 2025-03-28 14:41:51 -05:00
Aadhavan Srinivasan
50a476edad Change function name; add code to hide, show and change text for the 'fetching translations/romanizations' text 2025-03-28 14:41:02 -05:00
Aadhavan Srinivasan
2814f80fc8 Update translations DB 2025-03-28 14:40:39 -05:00
Aadhavan Srinivasan
74f3cb9740 Added minified version of JSON 2025-03-28 14:40:26 -05:00
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 2025-03-28 14:40:10 -05:00
Aadhavan Srinivasan
1fbe5a1abf Download HTMX locally 2025-03-28 13:46:31 -05:00
6 changed files with 105 additions and 20 deletions
Expand all files Collapse all files

1
htmx.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

92
index.html
View File

@@ -10,7 +10,7 @@
<title>Indian Translate</title> <title>Indian Translate</title>
<script src="https://d3js.org/d3.v7.min.js"></script> <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://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> <style>
body { body {
background-color: #f4f4f4; background-color: #f4f4f4;
@@ -24,7 +24,16 @@
svg { svg {
border: 1px solid; border: 1px solid;
padding: 2em; padding: 2em;
visibility: hidden;
opacity: 0;
transition: opacity 1s, visibility 2s;
} }
svg.show {
visibility: visible;
opacity: 1;
}
h1 { h1 {
margin-block: 0.67em; margin-block: 0.67em;
font-size: 2em; font-size: 2em;
@@ -66,11 +75,6 @@
visibility: visible; visibility: visible;
} }
.testClass:hover {
fill: red;
cursor: default;
}
.district { .district {
stroke: white; stroke: white;
stroke-width: 0.25; stroke-width: 0.25;
@@ -108,21 +112,93 @@
fill-opacity: 1; fill-opacity: 1;
transition: fill-opacity 0.3s; 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> </style>
</head> </head>
<body> <body>
<main> <main>
<section id="textStuff"> <section id="textStuff">
<h1>Indian Translate</h1> <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> <label for="query">Enter text to translate:</label>
<input type="text" name="query" id="query" required/> <input type="text" name="query" id="query" required/>
<input type="submit" value="Translate"/> <input type="submit" value="Translate"/>
</form> </form>
<progress id="loading-screen" class="loading-indicator"></progress> <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> </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> </main>
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>

25
index.js
View File

@@ -223,6 +223,10 @@ function drawMap(world) {
districtLang.districts.push(d) 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 .append("title") // Tooltip
.text(d => d.properties.district); .text(d => d.properties.district);
@@ -339,21 +343,20 @@ function drawMap(world) {
} else { } else {
d3.select(this).remove() // Only add this attribute if the element is a language d3.select(this).remove() // Only add this attribute if the element is a language
} }
}); })
let allLangs = [] let allLangs = []
const coordinates = [77.69916967457782,23.389970772934166]; const coordinates = [77.69916967457782,23.389970772934166];
const [xCoord, yCoord] = projection(coordinates); const [xCoord, yCoord] = projection(coordinates);
svg.append("text") // svg.append("text")
.attr("x", xCoord) // .attr("x", xCoord)
.attr("y", yCoord) // .attr("y", yCoord)
.attr("class", "testClass") // .attr("class", "testClass")
.attr("text-anchor", "middle") // .attr("text-anchor", "middle")
.attr("font-size", "12px") // .attr("font-size", "12px")
.attr("fill", "black") // .attr("fill", "black")
.text("Hello, Map!"); // .text("Hello, Map!");
// for (const [langId,lang] of Object.entries(languages)) { // for (const [langId,lang] of Object.entries(languages)) {
// let geojson = { // let geojson = {
// "type": "FeatureCollection", // "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)

1
india_with_districts_with_languages_min.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
translations.db
View File

Binary file not shown.

6
updateTranslations.js
View File

@@ -1,5 +1,6 @@
function hideText(request) { function hideTranslationsAndShowText(request) {
document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'hidden') document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
document.getElementById("fetchingText").style.visibility = "visible";
} }
function updateTranslations(response) { function updateTranslations(response) {
@@ -14,6 +15,7 @@ function updateTranslations(response) {
// bar used to track translations, and then remove it in the 'resolved' handler. // bar used to track translations, and then remove it in the 'resolved' handler.
const elem = document.getElementById("loading-screen") const elem = document.getElementById("loading-screen")
elem.classList.toggle("loading") elem.classList.toggle("loading")
document.getElementById("fetchingText").textContent = "Fetching romanizations..."
fetch("/romanize", { fetch("/romanize", {
method: "POST", method: "POST",
body: response body: response
@@ -29,5 +31,7 @@ function updateTranslations(response) {
}); });
// Show elements again // Show elements again
document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'visible') 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"
}); });
} }