dev: Prepare groundwork for custom dialog boxes

(These will be used as replacements for native prompt and alert popups)
lscambo13 · Dec 26, 2023 · f04342c · f04342c
1 parent fa1d443
commit f04342c
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 0 deletions.
diff --git a/js_modules/utils/modal.js b/js_modules/utils/modal.js
@@ -0,0 +1,49 @@
+export const createModal = (title = 'Modal Title', inputFields = ['Input A', 'Input B']) => {
+	document.body
+		.insertAdjacentHTML("afterbegin", `
+		<div id="modalContainer" class="modalContainer">
+			<form action="" class="modal">
+				<h3 id="modalTitle" class="modalTitle">${title}</h3>
+				<div id="modalButtonsBar" class="modalButtonsBar">
+					<button id="modalSubmitButton" class="mainButton" onclick="" type="button">Submit</button>
+					<button id="modalCancelButton" class="" onclick="" type="button">Cancel</button>
+				</div>
+				<form>
+		</div>
+	`)
+	inputFields.forEach((e) => {
+		let id = e.replaceAll(' ', '-')
+		document.getElementById('modalButtonsBar').insertAdjacentHTML("beforebegin", `
+					<label class="label" for="${id}">${e}</label>
+					<input class="inputField" autocomplete="off" type="text" id="${id}">
+		`)
+	})
+
+	let promise = new Promise((resolve, reject) => {
+		let modalContainer = document.getElementById('modalContainer')
+		let modalSubmitButton = document.getElementById('modalSubmitButton')
+		let modalCancelButton = document.getElementById('modalCancelButton')
+		let inputFields = document.getElementsByClassName('inputField')
+		inputFields[0].focus()
+
+		const rejectModal = () => {
+			modalCancelButton.removeEventListener('click', rejectModal)
+			modalContainer.remove()
+			reject('Dialog was closed by the user')
+		}
+
+		const resolveModal = () => {
+			modalSubmitButton.removeEventListener('click', resolveModal)
+			let result = []
+			for (const e of inputFields) {
+				result.push(e.value)
+			}
+			modalContainer.remove()
+			resolve(result)
+		}
+		modalCancelButton.addEventListener('click', rejectModal)
+		modalSubmitButton.addEventListener('click', resolveModal)
+	})
+
+	return promise
+}
diff --git a/style.css b/style.css
@@ -919,6 +919,77 @@ body::-webkit-scrollbar {
 	display: none !important
 }
 
+.modalContainer {
+	color: white;
+	font-family: 'Ubuntu';
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #06060425;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.modal {
+	min-width: 10em;
+	width: 90%;
+	max-width: 30em;
+	display: flex;
+	flex-direction: column;
+	backdrop-filter: blur(3em);
+	-webkit-backdrop-filter: blur(3em);
+	padding: 1em;
+	border-radius: 1em;
+	box-shadow: rgba(0, 0, 0, 0.541) 0 0 1em 0;
+}
+
+.modalTitle {
+	padding-bottom: 1em;
+}
+
+.modalButtonsBar {
+	vertical-align: middle;
+	display: inline-flex;
+	align-items: center;
+	gap: 1em;
+	justify-content: center;
+}
+
+.label {
+	/* padding-top: 1em; */
+	padding-bottom: 0.25em;
+	/* color: white; */
+}
+
+.inputField {
+	width: 100%;
+	border-radius: 1em;
+	border: 0 solid black;
+	background-color: #ffffffe8;
+	padding: 0.5em;
+	margin-bottom: 1em;
+}
+
+.inputField:focus {
+	background-color: #ffffffea;
+}
+
+button {
+	width: 5em;
+	height: 2em;
+	border-radius: 1em;
+	background-color: #e9e9e9;
+	border: 1px solid rgba(206, 206, 206, 0.5);
+}
+
+.mainButton {
+	background-color: #8cffc9;
+	border: 1px solid rgba(206, 206, 206, 0.5);
+}
+
 @keyframes spin-rev {
 	0% {
 		transform: rotate(360deg)