1 files changed, 120 insertions, 0 deletions
diff --git a/static/js/modal.js b/static/js/modal.js
new file mode 100644
index 0000000..af4763b
--- /dev/null
+++ b/static/js/modal.js
@@ -0,0 +1,120 @@
+/* 
+ * 	 Copyright (C) 2026 Private Island Networks Inc.
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ * 
+ * 	 file: modal.js
+ *	
+ */
+
+"use strict";
+
+/*
+ * Modal TODO: stop using ids
+ * Only add and remove classes programmatically
+ * 
+ */
+
+function Modal(size) {
+	var modal = this;
+	this.modalContainer = $('#mc-modal');
+	this.modalBody = $('#mc-modal-body', this.modalContainer);
+	this.modalBackdrop = $('#mc-modal-backdrop', this.modalContainer);
+	this.modalClose = $('#mc-modal-close', this.modalContainer);
+	
+	this.modalBody.classList="";
+
+	if (size !== undefined) {
+		this.modalBody.classList.add('mc-' + size);
+	}
+
+	this.modalClose.addEventListener('click', function(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		modal.modalContainer.style.display = 'none';
+		if ($('#mc-modal-content')) {
+			el = $('#mc-modal-content');
+			el.remove(); // IE supports removeNode
+		}
+	});
+	this.modalBackdrop.addEventListener('click', function(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	});
+}
+
+Modal.prototype = {
+	constructor : Modal,
+	display : modal_display,
+	hide : modal_hide,
+	clean : modal_clean,
+};
+
+function modal(size) {
+	return new Modal(size);
+}
+
+function modal_display(content) {
+	var img, body, ratio, oldWidth, oldHeight;
+	this.clean();
+
+	if (content instanceof HTMLImageElement) {
+		img = content;
+		body = $('#mc-modal-body');
+
+		ratio = img.width / img.height;
+
+		/* todo use the bigger img dimension */
+		if (window.innerWidth - img.width < 20) {
+			img.width = window.innerWidth - 80;
+			img.height = img.width / ratio;
+		}
+
+		if (window.innerHeight - img.height < 20) {
+			img.height = window.innerHeight - 80;
+		}
+
+		body.style.top = String((window.innerHeight - img.height - 64) / 2) + 'px';
+		body.style.bottom = String((window.innerHeight - img.height - 64) / 2) + 'px';
+		body.style.left = String((window.innerWidth - img.width - 64) / 2) + 'px';
+		body.style.right = String((window.innerWidth - img.width - 64) / 2) + 'px';
+
+		el = document.createElement("div");
+		el.id = "mc-modal-content";
+		el.innerHTML = '<img src="' + img.src + '">';
+		this.modalBody.appendChild(el);
+
+	} else {
+		el = document.createElement("div");
+		el.id = "mc-modal-content";
+		el.innerHTML = content;
+		this.modalBody.appendChild(el);
+		var dateInputs = $$('.mc-date', this.modalBody);
+		dateInputs.forEach(function(val) {
+			val.addEventListener('click', setDate);
+		});
+	}
+
+	this.modalContainer.style.display = 'block';
+}
+
+function modal_hide() {
+	this.modalContainer.style.display = 'none';
+}
+
+function modal_clean() {
+	var el;
+	if ((el = $('#mc-modal-content', this.modalContainer))) {
+		el.remove();
+	}
+}
+\ No newline at end of file