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

Show all texts at once; hide them while the results are being fetched; show them after the results have been fetched

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-03-16 22:15:25 -04:00
parent 38316b0ea9
commit 0e26b2345a
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -40,18 +40,20 @@
stroke-width: 1; stroke-width: 1;
} }
.languageText, .romanizationText { .languageText, .romanizationText {
visibility: hidden; /* visibility: hidden; */
font-family: "Noto Sans"; font-family: "Noto Sans";
font-size:1.25em; font-size:1.25em;
pointer-events: none; pointer-events: none;
} }
/*
.language:hover ~ .languageText { .language:hover ~ .languageText {
visibility: visible; visibility: visible;
} }
.language:hover ~ .romanizationText { .language:hover ~ .romanizationText {
visibility: visible; visibility: visible;
} }
*/
.testClass:hover { .testClass:hover {
fill: red; fill: red;
@@ -100,7 +102,7 @@
<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::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="hideText(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"/>

6
updateTranslations.js
View File

@@ -1,3 +1,7 @@
function hideText(request) {
document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
}
function updateTranslations(response) { function updateTranslations(response) {
const translations = JSON.parse(response); const translations = JSON.parse(response);
document.querySelectorAll(".languageText").forEach(element => { document.querySelectorAll(".languageText").forEach(element => {
@@ -23,5 +27,7 @@ function updateTranslations(response) {
element.textContent = "(" + romanizations[element.id.replace("Romanization", "")] + ")"; element.textContent = "(" + romanizations[element.id.replace("Romanization", "")] + ")";
} }
}); });
// Show elements again
document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'visible')
}); });
} }