rwd6gc/rural-water-workorder
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reconfiguring the dialog window

Browse Source
This commit is contained in:
Kaehlen Rog
2025-02-21 08:21:47 -06:00
parent 8c3d5ccadb
commit c806b4b31b
3 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.dev.html
View File

@@ -13,7 +13,7 @@
<body>
<h1>Workorder Form</h1>
<!-- Scanner Dialog -->
<div id="dialog">
<dialog id="dialog">
<button id="closeDialog">X</button>
<div id="reader"></div>
<div class="Scanner">
@@ -27,7 +27,7 @@
<!-- Scanner Buttons -->
<div class="buttons"></div>
</div>
</div>
</dialog>
<main>
<!-- Workorder Form -->

17
src/script.js
View File

@@ -203,7 +203,7 @@ function renderScanner() {
}
scanButton.onclick = () => {
dialog.style.display = "flex";
dialog.showModal();
renderScanner();
};
@@ -222,6 +222,7 @@ function sendScans() {
if (scans.length === 0) scanned_list.innerHTML = "No Codes Scanned";
for (let scan in scans) {
let li = document.createElement("li");
li.innerHTML = `${scans[scan][1]} * ${scans[scan][0]}`;
scanned_list.appendChild(li);
}
@@ -233,12 +234,18 @@ function sendScans() {
let closeDialog = document.getElementById("closeDialog");
closeDialog.addEventListener("click", (event) => {
scanner.clear();
dialog.style.display = "none";
dialog.close();
});
dialog.addEventListener("click", (e) => {
if (e.target.id == "dialog") {
dialog.addEventListener("click", (event) => {
var rect = dialog.getBoundingClientRect();
var isInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!isInDialog) {
scanner.clear();
dialog.style.display = "none";
dialog.close();
}
});

21
src/styles.scss
View File

@@ -23,6 +23,13 @@ main {
flex-direction: column;
}
dialog {
padding: 0;
&::backdrop {
background: rgba(0, 0, 0, 0.5);
}
}
button,
input[type="button"] {
min-width: 4rem;
@@ -209,20 +216,6 @@ ul {
align-items: center;
}
#dialog {
top: 0;
width: 100vw;
min-height: 101%;
height: fit-content;
display: none; // turns into a flex display in the javascript
flex-direction: column;
position: absolute;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
gap: 1rem;
font-size: 3rem;
}
#Scanner {
display: flex;