heonian.org/heonian-conversation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

popup halfway (no error handling, fails to figure out where cursor is)

Browse Source
This commit is contained in:
remi 2022-05-05 18:20:24 +02:00
parent 55bd92ec76
commit ad32ca9c46
3 changed files with 63 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
html/pop_up.html
View File

@ -3,7 +3,8 @@
<h1>um</h1>
<div>
heonian: <span id="popup-heo"></span><br>
type: <span id="popup-type"></span>
type: <span id="popup-type"></span><br>
quirks: <span id="popup-quirks"></span>
</div>
<p id="popup-meaning"></p>
</div>
@ -11,8 +12,9 @@
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<div>
heonian: <span id="smol-heo"></span><br>
type: <span id="smol-type"></span>
<span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
type: <span id="smol-type"></span><br>
quirks: <span id="smol-quirks"></span>
</div>
<p id="smol-meaning"></p>
</div>

67
main.js
View File

@ -20,40 +20,78 @@ function init() {
document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
}
function showPopup(word) {
function cleanWord(word) {
//only a-z, lowercase, stripped
return word.replace(/[^a-zA-Z]/g, "").toLowerCase();
}
function showPopup(ogword, word, quirks) {
clearHover();
//same shit as in smolpopup
let p = document.querySelector("#popup");
let c = document.querySelector("#popup-container")
p.querySelector("h1").innerText = word;
p.querySelector("#popup-heo").innerText = words[word]["heonian"];
let c = document.querySelector("#popup-container");
word = cleanWord(word);
if (currentFont == "r") {
p.querySelector("h1").innerText = words[word]["romanizationProper"];
p.querySelector("#popup-heo").innerText = words[word]["heonian"];
p.querySelector("h1").style.fontFamily = "var(--font-normal)";
p.querySelector("#popup-heo").style.fontFamily = "var(--font-heonian)";
} else {
p.querySelector("h1").innerText = words[word]["heonian"];
p.querySelector("#popup-heo").innerText = words[word]["romanizationProper"];
p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
p.querySelector("#popup-heo").style.fontFamily = "var(--font-normal)";
}
p.querySelector("#popup-type").innerText = words[word]["type"];
p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
let wq = "";
//todo: make all of this less sphagetti LOL
if (quirks.trim() != "") {
wq = quirks.split(" ").join(", ");
}
p.querySelector("#popup-quirks").innerText = wq;
c.style.opacity = 1;
c.style.pointerEvents = "all";
}
function showSmolPopup(word, event) {
function showSmolPopup(ogword, word, quirks) {
let p = document.querySelector("#smol-popup");
p.querySelector("h1").innerText = word;
p.querySelector("#smol-heo").innerText = words[word]["heonian"];
word = cleanWord(word);
if (currentFont == "r") {
p.querySelector("h1").innerText = words[word]["romanizationProper"];
p.querySelector("#smol-heo").innerText = words[word]["heonian"];
p.querySelector("h1").style.fontFamily = "var(--font-normal)";
p.querySelector("#smol-e").innerText = "heonian: ";
} else {
p.querySelector("h1").innerText = words[word]["heonian"];
p.querySelector("#smol-heo").innerText = words[word]["romanizationProper"];
p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
p.querySelector("#smol-e").innerText = "romanization: ";
}
p.querySelector("#smol-type").innerText = words[word]["type"];
p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
let wq = "";
console.log(quirks);
if (quirks.trim() != "") {
wq = quirks.split(" ").join(", ");
}
p.querySelector("#smol-quirks").innerText = wq;
p.style.opacity = 1;
p.style.pointerEvents = "all";
// set position to cursor position
// set position to cursor position (but we dont have the event)
let rect = document.body.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
let x = rect.left + window.event.clientX;
let y = rect.top + window.event.clientY;
p.style.left = x - 100 + "px";
p.style.top = y + 25 + "px";
}
function checkHover(word, event) {
function checkHover(ogword, word, quirks = "") {
if (timeout != "") {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
showSmolPopup(word, event);
showSmolPopup(ogword, word, quirks);
}, 450);
}
@ -71,10 +109,11 @@ function createWordList() { //sometimes i really dislike javascript..
t.querySelectorAll("tr").forEach(element => {
if (element.querySelector("td")) {
let e = element.querySelectorAll("td");
let n = e[1].innerText;
let n = e[1].innerText.replace(".", "");
words[n] = {};
words[n]["heonian"] = e[0].innerText;
words[n]["romanization"] = e[1].innerText;
words[n]["romanization"] = e[1].innerText.replace(". ", "");
words[n]["romanizationProper"] = e[1].innerText;
words[n]["type"] = e[2].innerText;
words[n]["meaning"] = e[3].innerText;
}

8
test.html
View File

@ -4331,7 +4331,8 @@ fayu
<h1>um</h1>
<div>
heonian: <span id="popup-heo"></span><br>
type: <span id="popup-type"></span>
type: <span id="popup-type"></span><br>
quirks: <span id="popup-quirks"></span>
</div>
<p id="popup-meaning"></p>
</div>
@ -4339,8 +4340,9 @@ fayu
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<div>
heonian: <span id="smol-heo"></span><br>
type: <span id="smol-type"></span>
<span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
type: <span id="smol-type"></span><br>
quirks: <span id="smol-quirks"></span>
</div>
<p id="smol-meaning"></p>
</div>