-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
691ec00
commit 55fd009
Showing
9 changed files
with
582 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,64 @@ | ||
| //on page load change all the tlt spans to be formatted for reading | ||
| // On page load, change all the tlt spans to be formatted for reading | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| let tlts = document.querySelectorAll("span.tlt"); | ||
| for (let i = 0; i < tlts.length; i++) { | ||
| let input = tlts[i].innerHTML; | ||
| let output = ""; | ||
| let words = input.split("} {"); | ||
| for (let i = 0; i < words.length; i++) { | ||
| let word = words[i]; | ||
| word = word.replace("{", ""); | ||
| word = word.replace("}", ""); | ||
| let wordt = word.split("|"); | ||
| output += "<span class='og'>"; | ||
| output += wordt[0]; | ||
| output += "<span class='tl'>"; | ||
| output += wordt[1]; | ||
| output += "</span></span>"; | ||
|
|
||
| // Match all substrings enclosed in braces, preserving spaces | ||
| let matches = input.match(/{[^}]*}|[^{}]+/g); | ||
|
|
||
| if (matches) { | ||
| matches.forEach((match) => { | ||
| if (match.startsWith("{") && match.endsWith("}")) { | ||
| // Handle word with translation | ||
| let word = match.replace(/{|}/g, ""); | ||
| let wordt = word.split("|"); | ||
| output += "<span class='og'>"; | ||
| output += wordt[0]; // Original word | ||
| output += "<span class='tl'>"; | ||
| output += wordt[1] || ""; // Translation | ||
| output += "</span></span>"; | ||
| } else { | ||
| // Handle plain text (spaces or non-brace content) | ||
| output += match; | ||
| } | ||
| }); | ||
| } | ||
| tlts[i].innerHTML = output; | ||
|
|
||
| //read the document and find all the spans with class og and their corresponding tl | ||
| let translateables = document.querySelectorAll("span.og"); | ||
| let translations = document.querySelectorAll("span.tl"); | ||
| for (let i = 0; i < translateables.length; i++) { | ||
| //add mouselistener to each og that shows the tl | ||
| translateables[i].addEventListener("mouseenter", () => { | ||
| translations[i].style.display = "inherit"; | ||
| translateables[i].style.background = "rgba(0,0,0,0.2)"; | ||
|
|
||
| tlts[i].innerHTML = output; // Update the content | ||
|
|
||
| // Get translateables and their corresponding translations within this `tlt` | ||
| let translateables = tlts[i].querySelectorAll("span.og"); | ||
| let translations = tlts[i].querySelectorAll("span.tl"); | ||
|
|
||
| for (let j = 0; j < translateables.length; j++) { | ||
| let og = translateables[j]; | ||
| let tl = translations[j]; | ||
|
|
||
| // Add mouse listener to each og that shows the tl | ||
| og.addEventListener("mouseenter", () => { | ||
| tl.style.display = "inherit"; | ||
| og.style.background = "rgba(0,0,0,0.2)"; | ||
| }); | ||
| translateables[i].addEventListener("click", () => { | ||
| translations[i].style.display = "inherit"; | ||
| translateables[i].style.background = "rgba(0,0,0,0.2)"; | ||
|
|
||
| og.addEventListener("click", () => { | ||
| tl.style.display = "inherit"; | ||
| og.style.background = "rgba(0,0,0,0.2)"; | ||
| }); | ||
|
|
||
| //when the mouse leaves it, hide the tl | ||
| // When the mouse leaves it, hide the tl | ||
| window.addEventListener("click", (event) => { | ||
| if (!translateables[i].contains(event.target)) { | ||
| translations[i].style.display = "none"; | ||
| translateables[i].style.background = ""; | ||
| if (!og.contains(event.target)) { | ||
| tl.style.display = "none"; | ||
| og.style.background = ""; | ||
| } | ||
| }); | ||
| translateables[i].addEventListener("mouseleave", () => { | ||
| translations[i].style.display = "none"; | ||
| translateables[i].style.background = ""; | ||
|
|
||
| og.addEventListener("mouseleave", () => { | ||
| tl.style.display = "none"; | ||
| og.style.background = ""; | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.