karma/crab-webapp
1
0
Fork 0
mirror of https://github.com/karma-riuk/crab-webapp.git synced 2025-07-05 06:08:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

moved the modal logic to it's own file to

Browse Source 
declutter index.js
This commit is contained in:
Karma Riuk
2025-05-18 18:05:56 +02:00
parent 81f4f334d1
commit cafd73dafe
3 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -11,6 +11,7 @@
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script defer src="js/index.js"></script> <script defer src="js/index.js"></script>
<script defer src="js/sorttable.js"></script> <script defer src="js/sorttable.js"></script>
<script defer src="js/modal.js"></script>
</head> </head>
<body> <body>

43
public/js/index.js
View File

@ -152,49 +152,6 @@ socket.on("successful-upload", () => {
uploadStatusEl.textContent = "Upload succeeded!"; uploadStatusEl.textContent = "Upload succeeded!";
}); });
// INFO-MODAL LOGIC
const aboutButton = document.getElementById("about-button");
const modalOverlay = document.getElementById("modal-overlay");
const modalContent = document.getElementById("modal-content");
const modalClose = document.getElementById("modal-close");
function show_modal_with(content) {
modalOverlay.classList.remove("hidden");
modalContent.innerHTML = "";
modalContent.appendChild(content);
modalOverlay.focus();
}
// open modal
aboutButton.addEventListener("click", () => {
show_modal_with(about.content.cloneNode(true));
});
// close modal via “×” button
modalClose.addEventListener("click", () => {
modalOverlay.classList.add("hidden");
});
// also close if you click outside the white box
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) {
modalOverlay.classList.add("hidden");
}
});
modalOverlay.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
modalOverlay.classList.add("hidden");
console.log("hiding");
}
});
["download", "upload", "results"].forEach((section) => {
window[`info-${section}-btn`].addEventListener("click", () => {
show_modal_with(window[`info-${section}`].content.cloneNode(true));
});
});
document.getElementById("request-status").onclick = async () => { document.getElementById("request-status").onclick = async () => {
if (!uuid.reportValidity()) return; if (!uuid.reportValidity()) return;
const res = await fetch(`/answers/status/${uuid.value}`, { const res = await fetch(`/answers/status/${uuid.value}`, {

42
public/js/modal.js Normal file
View File

@ -0,0 +1,42 @@
// INFO-MODAL LOGIC
const aboutButton = document.getElementById("about-button");
const modalOverlay = document.getElementById("modal-overlay");
const modalContent = document.getElementById("modal-content");
const modalClose = document.getElementById("modal-close");
function show_modal_with(content) {
modalOverlay.classList.remove("hidden");
modalContent.innerHTML = "";
modalContent.appendChild(content);
modalOverlay.focus();
}
// open modal
aboutButton.addEventListener("click", () => {
show_modal_with(about.content.cloneNode(true));
});
// close modal via “×” button
modalClose.addEventListener("click", () => {
modalOverlay.classList.add("hidden");
});
// also close if you click outside the white box
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) {
modalOverlay.classList.add("hidden");
}
});
modalOverlay.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
modalOverlay.classList.add("hidden");
console.log("hiding");
}
});
["download", "upload", "results"].forEach((section) => {
window[`info-${section}-btn`].addEventListener("click", () => {
show_modal_with(window[`info-${section}`].content.cloneNode(true));
});
});