134 lines
4.5 KiB
JavaScript
134 lines
4.5 KiB
JavaScript
//since this _entire thing_ will be generated,
|
|
//you could "theoretically" (you definitive can)
|
|
//just sorta. skip the whole "scan all words" bit,
|
|
//which is why that's in a separate function
|
|
|
|
let words = {}
|
|
|
|
let currentFont = "r";
|
|
|
|
let timeout = "";
|
|
|
|
function init() {
|
|
createWordList();
|
|
// injectWords();
|
|
document.querySelector("#popup-container").addEventListener("click", () => {
|
|
document.querySelector("#popup-container").style.opacity = 0;
|
|
document.querySelector("#popup-container").style.pointerEvents = "none";
|
|
});
|
|
// above are commented out until wordlist is added~
|
|
document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
|
|
}
|
|
|
|
function showPopup(word) {
|
|
clearHover();
|
|
let p = document.querySelector("#popup");
|
|
let c = document.querySelector("#popup-container")
|
|
p.querySelector("h1").innerText = word;
|
|
p.querySelector("#popup-heo").innerText = words[word]["heonian"];
|
|
p.querySelector("#popup-type").innerText = words[word]["type"];
|
|
p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
|
|
c.style.opacity = 1;
|
|
c.style.pointerEvents = "all";
|
|
}
|
|
|
|
function showSmolPopup(word, event) {
|
|
let p = document.querySelector("#smol-popup");
|
|
p.querySelector("h1").innerText = word;
|
|
p.querySelector("#smol-heo").innerText = words[word]["heonian"];
|
|
p.querySelector("#smol-type").innerText = words[word]["type"];
|
|
p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
|
|
p.style.opacity = 1;
|
|
p.style.pointerEvents = "all";
|
|
// set position to cursor position
|
|
let rect = document.body.getBoundingClientRect();
|
|
let x = event.clientX - rect.left;
|
|
let y = event.clientY - rect.top;
|
|
p.style.left = x - 100 + "px";
|
|
p.style.top = y + 25 + "px";
|
|
}
|
|
|
|
function checkHover(word, event) {
|
|
if (timeout != "") {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(() => {
|
|
showSmolPopup(word, event);
|
|
}, 450);
|
|
}
|
|
|
|
function clearHover() {
|
|
if (timeout != "") {
|
|
clearTimeout(timeout);
|
|
}
|
|
let p = document.querySelector("#smol-popup");
|
|
p.style.opacity = 0;
|
|
p.style.pointerEvents = "none";
|
|
}
|
|
|
|
function createWordList() { //sometimes i really dislike javascript..
|
|
let t = document.querySelector("tbody");
|
|
t.querySelectorAll("tr").forEach(element => {
|
|
if (element.querySelector("td")) {
|
|
let e = element.querySelectorAll("td");
|
|
let n = e[1].innerText;
|
|
words[n] = {};
|
|
words[n]["heonian"] = e[0].innerText;
|
|
words[n]["romanization"] = e[1].innerText;
|
|
words[n]["type"] = e[2].innerText;
|
|
words[n]["meaning"] = e[3].innerText;
|
|
}
|
|
});
|
|
}
|
|
|
|
function injectWords() {
|
|
Object.values(words).forEach(word => {
|
|
document.querySelectorAll(".convo p").forEach(convo => {
|
|
if (convo.innerText.includes(word["romanization"])) {
|
|
let m = convo.innerHTML.split(word["romanization"]);
|
|
let newhtml = document.createElement("p");
|
|
let c = m.length*2-1;
|
|
for (let x = 0; x < c; x++) {
|
|
if (x % 2 == 0) {
|
|
newhtml.innerHTML += m[x/2];
|
|
} else {
|
|
var e = document.createElement("span");
|
|
e.innerText = word["romanization"];
|
|
e.classList.add("clickable");
|
|
newhtml.appendChild(e)
|
|
}
|
|
}
|
|
convo.innerHTML = newhtml.innerHTML;
|
|
convo.querySelectorAll(".clickable").forEach(element => {
|
|
element.addEventListener('click', function(e) {
|
|
showPopup(element.innerText);
|
|
}, false);
|
|
element.addEventListener('mouseover', function(e) {
|
|
checkHover(element.innerText, e);
|
|
}
|
|
, false);
|
|
element.addEventListener('mouseout', function(e) {
|
|
clearHover();
|
|
}
|
|
, false);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function fontButton() {
|
|
if (currentFont == "r") {
|
|
document.querySelector("#style-heonian").disabled = false;
|
|
document.querySelector("#style-roman").disabled = true;
|
|
currentFont = "h";
|
|
} else {
|
|
document.querySelector("#style-heonian").disabled = true;
|
|
document.querySelector("#style-roman").disabled = false;
|
|
currentFont = "r";
|
|
}
|
|
}
|
|
|
|
window.onload = () => {
|
|
init();
|
|
} |