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

Compare commits

base: Rockingcool:79944180d5431bf44acf378fd3b2537181c7728d
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
..
compare: Rockingcool:42e31dab13773449f3879ce0185604135397caf4
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

4 Commits
79944180d5 ... 42e31dab13

Author SHA1 Message Date
Aadhavan Srinivasan
42e31dab13 Use language code instead of language name; removed 'unavail' language; don't add text for districts 2025-03-02 22:05:35 -05:00
Aadhavan Srinivasan
da3b3b8a16 Added loading indicator when translations are being retrieved 2025-03-02 22:02:23 -05:00
Aadhavan Srinivasan
0de268eec5 Replace text on map with translation 2025-03-02 22:02:02 -05:00
Aadhavan Srinivasan
2b8bed7587 Added language codes for all languages; removed 'unavail' langauge (not really a language) 2025-03-02 22:01:46 -05:00
4 changed files with 94 additions and 1595 deletions
Expand all files Collapse all files

17
index.html
View File

@@ -66,24 +66,35 @@
/* .district:hover ~ .districtText { /* .district:hover ~ .districtText {
visibility: visible; visibility: visible;
}*/ }*/
.loading-indicator {
display: none;
}
.htmx-request.loading-indicator /* While request is being made */ {
display: inline;
}
</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-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::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>
</section> </section>
<svg id = "indiaMap" width="1000" height="1000"></svg> <svg id = "indiaMap" width="1000" height="1000"></svg>
</main> </main>
<script src="index.js"></script> <script type="text/javascript" src="index.js"></script>
<script src="updateTranslations.js"></script> <script type="text/javascript" src="updateTranslations.js"></script>
</body> </body>
</html> </html>

41
index.js
View File

@@ -25,7 +25,7 @@ const santaliColor = "#96bf60" // Santhali
const sindhiColor = "#e89931" // Sindhi const sindhiColor = "#e89931" // Sindhi
const awadhiColor = "#847fb5" // Awadhi const awadhiColor = "#847fb5" // Awadhi
const unavailLangColor = "#555555" const defaultColor = "#555555"
const languages = { const languages = {
tamil: {name: "Tamil", color: tamilColor, code: "ta", districts: []}, tamil: {name: "Tamil", color: tamilColor, code: "ta", districts: []},
@@ -52,7 +52,6 @@ const languages = {
santali: {name: "Santali", color: santaliColor, code: "sat", districts: []}, santali: {name: "Santali", color: santaliColor, code: "sat", districts: []},
sindhi: {name: "Sindhi", color: sindhiColor, code: "sd", districts: []}, sindhi: {name: "Sindhi", color: sindhiColor, code: "sd", districts: []},
awadhi: {name: "Awadhi", color: awadhiColor, code: "awa", districts: []}, awadhi: {name: "Awadhi", color: awadhiColor, code: "awa", districts: []},
unavail: {name: "Unavailable", color: unavailLangColor, code: "unavailable", districts: []},
}; };
// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
@@ -71,12 +70,9 @@ const state2lang = {
"Jharkhand": languages["hindi"], // DEFAULT "Jharkhand": languages["hindi"], // DEFAULT
"West Bengal": languages["bengali"], "West Bengal": languages["bengali"],
"Assam": languages["assamese"], "Assam": languages["assamese"],
"Meghalaya": languages["unavail"], // DEFAULT
"Tripura": languages["bengali"], "Tripura": languages["bengali"],
"Mizoram": languages["mizo"], "Mizoram": languages["mizo"],
"Manipur": languages["manipuri"], "Manipur": languages["manipuri"],
"Nagaland": languages["unavail"], // DEFAULT
"Arunachal Pradesh": languages["unavail"], // DEFAULT
"Sikkim": languages["nepali"], "Sikkim": languages["nepali"],
"Bihar": languages["bhojpuri"], "Bihar": languages["bhojpuri"],
"Madhya Pradesh": languages["hindi"], "Madhya Pradesh": languages["hindi"],
@@ -91,7 +87,6 @@ const state2lang = {
"Dadra and Nagar Haveli and Daman and Diu": languages["gujarati"], "Dadra and Nagar Haveli and Daman and Diu": languages["gujarati"],
"Puducherry": languages["tamil"], "Puducherry": languages["tamil"],
"Lakshadweep": languages["malayalam"], "Lakshadweep": languages["malayalam"],
"Andaman and Nicobar Islands": languages["unavail"],
"Delhi": languages["hindi"], "Delhi": languages["hindi"],
"Chandigarh": languages["hindi"] "Chandigarh": languages["hindi"]
@@ -239,15 +234,26 @@ function drawMap(world) {
.attr("class", d => stateOrDistrictOrLanguage(d)) .attr("class", d => stateOrDistrictOrLanguage(d))
.attr("fill", function(d) { .attr("fill", function(d) {
if (stateOrDistrictOrLanguage(d) === "district") { if (stateOrDistrictOrLanguage(d) === "district") {
return district2lang.hasOwnProperty(d.properties.district) ? if (district2lang.hasOwnProperty(d.properties.district)) {
district2lang[d.properties.district].color : return district2lang[d.properties.district].color;
state2lang[d.properties.st_nm].color } else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
return state2lang[d.properties.st_nm].color;
} else {
return defaultColor;
}
} }
}) })
.each(function(d) { .each(function(d) {
if (stateOrDistrictOrLanguage(d) === "district") { if (stateOrDistrictOrLanguage(d) === "district") {
districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm]; let districtLang;
districtLang.districts.push(d) if (district2lang.hasOwnProperty(d.properties.district)) {
districtLang = district2lang[d.properties.district];
} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
districtLang = state2lang[d.properties.st_nm];
}
if (typeof districtLang !== 'undefined') {
districtLang.districts.push(d)
}
} }
}) })
.append("title") // Tooltip .append("title") // Tooltip
@@ -259,13 +265,19 @@ function drawMap(world) {
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("font-size", "12px") .attr("font-size", "12px")
.attr("fill", "black") .attr("fill", "black")
.attr("class", "languageText") .attr("class", "languageText")
.attr("id", d => d.properties.lang_name+"Text") .attr("id", function(d) {
if (stateOrDistrictOrLanguage(d) == "language") {
return d.properties.lang_code+"Text"
} else {
d3.select(this).remove()
}
})
.text(function(d) { .text(function(d) {
if (stateOrDistrictOrLanguage(d) == "language") { if (stateOrDistrictOrLanguage(d) == "language") {
return d.properties.lang_name; return d.properties.lang_name;
} else { } else {
return d.properties.district; d3.select(this).remove() // Only add text if the element is a language
} }
}); });
@@ -291,6 +303,7 @@ function drawMap(world) {
// let outerBound = getOuterBoundaryPolygon(geojson.features) // let outerBound = getOuterBoundaryPolygon(geojson.features)
// outerBound["id"] = "lang" + lang.name // outerBound["id"] = "lang" + lang.name
// outerBound.properties["lang_name"]= lang.name // outerBound.properties["lang_name"]= lang.name
// outerBound.properties["lang_code"]= lang.code
// allLangs.push(outerBound); // allLangs.push(outerBound);
// svg.append("path") // svg.append("path")

1626
india_with_districts_with_languages.json
View File

File diff suppressed because it is too large Load Diff

5
updateTranslations.js
View File

@@ -1,3 +1,6 @@
function updateTranslations(response) { function updateTranslations(response) {
console.log(response) const translations = JSON.parse(response);
document.querySelectorAll(".languageText").forEach(element => {
element.textContent = translations[element.id.replace("Text", "")];
});
} }