feat: added html modal

2024-04-17 12:08:24 +02:00 · 2024-04-17 12:08:24 +02:00 · 01f0fc9672
commit 01f0fc9672
parent 306fb0e322
1 changed files with 171 additions and 0 deletions
--- a/browser/modal.html
+++ b/browser/modal.html
@ -0,0 +1,171 @@
+<!--
+    This is an example implementation of a modal.
+
+    The boilerplate html has to be structured like this:
+    <div class="modal-background closed">
+		<div class="modal">
+			<div class="modal-close"></div>
+
+			<div class="modal-content">
+			</div>
+		</div>
+	</div>
+
+    Then you can create a new modal object like this:
+    var modal = new Modal({selector: '.modal-background', ajaxUrl: '/examples/ajax.html'});
+    and open it with modal.open() and close it with modal.close()
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>modal example</title>
+
+	<style>
+		body {
+			min-height: 100vh;
+			min-width: 100vw;
+		}
+
+		/*
+		 * the elements with the modal class should look like a popup
+		 * use before or after to make the whole screen behind the modal dark
+		 */
+		.modal-background {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background-color: rgba(0, 0, 0, 0.5);
+		}
+
+		.closed {
+			display: none;
+		}
+
+		.modal {
+			position: absolute;
+			top: 200px;
+			bottom: 200px;
+			left: 100px;
+			right: 100px;
+			background-color: white;
+			padding: 20px;
+			border-radius: 5px;
+			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		}
+
+		.modal-close {
+			position: absolute;
+			top: 10px;
+			right: 10px;
+			width: 30px;
+			height: 30px;
+
+			background-color: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.modal-close:hover {
+			background-color: rgba(0, 0, 0, 0.7);
+		}
+
+		.modal-close:after {
+
+			content: 'X';
+			color: white;
+			font-size: 20px;
+			line-height: 20px;
+			text-align: center;
+		}
+
+		/* style the modal test open button and making it pretty and centering it and making it bigger */
+		#modal-test-open {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			padding: 10px 20px;
+			font-size: 20px;
+			border-radius: 5px;
+			background-color: #007bff;
+			color: white;
+			border: none;
+			cursor: pointer;
+		}
+	</style>
+</head>
+<body>
+	<button id="modal-test-open" onclick="modal.open()">open modal</button>
+
+	<div class="modal-background closed">
+		<div class="modal">
+			<div class="modal-close"></div>
+
+			<div class="modal-content">
+			</div>
+		</div>
+	</div>
+
+
+	<script>
+		class Modal {
+			#opened = false;
+
+			constructor({
+				selector = '.modal-background',
+				ajaxUrl = undefined
+			} = {}) {
+				this.modal = document.querySelector(selector);
+				this.ajaxUrl = ajaxUrl;
+
+				this.modal.addEventListener('click', this.close.bind(this));
+				this.modal.querySelector('.modal').addEventListener('click', (e) => e.stopPropagation());
+				this.closeElement.addEventListener('click', this.close.bind(this));
+			}
+
+			get contentElement() {
+				return this.modal.querySelector('.modal .modal-content');
+			}
+
+			get closeElement() {
+				return this.modal.querySelector('.modal .modal-close');
+			}
+
+			open() {
+				console.log('open');
+				this.modal.classList.remove('closed');
+
+				this.contentElement.innerHTML = 'loading...';
+
+				if (this.ajaxUrl) {
+					fetch(this.ajaxUrl)
+						.then(response => response.text())
+						.then(html => this.contentElement.innerHTML = html)
+						.then(() => this.#opened = true);
+				} else {
+					this.#opened = true;
+				}
+			}
+
+			close() {
+				console.log('close');
+				this.contentElement.innerHTML = '';
+				this.modal.classList.add('closed');
+				this.#opened = false;
+			}
+		}
+	</script>
+
+	<script>
+		var modal = new Modal({ajaxUrl: '/examples/ajax.html'});
+	</script>
+</body>
+</html>