Add confirmation modal for deleting a workout

1 files changed, 42 insertions, 0 deletions

diff --git a/app/static/js/bulma.js b/app/static/js/bulma.js
new file mode 100644
index 0000000..49b9b93
--- /dev/null
+++ b/app/static/js/bulma.js
@@ -0,0 +1,42 @@
+// Functions to open and close a modal
+function openModal($el) {
+	$el.classList.add('is-active');
+}
+
+function closeModal($el) {
+	$el.classList.remove('is-active');
+}
+
+function closeAllModals() {
+	(document.querySelectorAll('.modal') || []).forEach(($modal) => {
+		closeModal($modal);
+	});
+}
+
+// Add a click event on buttons to open a specific modal
+(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+	const modal = $trigger.dataset.target;
+	const $target = document.getElementById(modal);
+
+	$trigger.addEventListener('click', () => {
+		openModal($target);
+	});
+});
+
+// Add a click event on various child elements to close the parent modal
+(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+	const $target = $close.closest('.modal');
+
+	$close.addEventListener('click', () => {
+		closeModal($target);
+	});
+});
+
+// Add a keyboard event to close all modals
+document.addEventListener('keydown', (event) => {
+	const e = event || window.event;
+
+	if (e.keyCode === 27) { // Escape key
+		closeAllModals();
+	}
+});