https://displaychallenge.com/js/site-modal.js

1(function () {
2	'use strict';
3
4	var alertModalInstance = null;
5	var confirmModalInstance = null;
6
7	function getBootstrapModal(element) {
8		if (typeof bootstrap === 'undefined' || !bootstrap.Modal) {
9			return null;
10		}
11
12		return bootstrap.Modal.getOrCreateInstance(element, {
13			backdrop: true,
14			keyboard: true,
15			focus: true,
16		});
17	}
18
19	function getAlertModal() {
20		var element = document.getElementById('siteAlertModal');
21
22		if (!element) {
23			return null;
24		}
25
26		if (!alertModalInstance) {
27			alertModalInstance = getBootstrapModal(element);
28		}
29
30		return alertModalInstance;
31	}
32
33	function getConfirmModal() {
34		var element = document.getElementById('siteConfirmModal');
35
36		if (!element) {
37			return null;
38		}
39
40		if (!confirmModalInstance) {
41			confirmModalInstance = getBootstrapModal(element);
42		}
43
44		return confirmModalInstance;
45	}
46
47	function setModalMessage(element, message) {
48		if (!element) {
49			return;
50		}
51
52		element.innerHTML = String(message);
53	}
54
55	function focusOnShown(modalElement, target) {
56		if (!modalElement || !target) {
57			return;
58		}
59
60		modalElement.addEventListener('shown.bs.modal', function handleShown() {
61			modalElement.removeEventListener('shown.bs.modal', handleShown);
62			target.focus();
63		});
64	}
65
66	window.showModal = function showModal(message, callback) {
67		var modalElement = document.getElementById('siteAlertModal');
68		var messageElement = document.getElementById('siteAlertModalMessage');
69		var okButton = document.getElementById('siteAlertModalOkBtn');
70		var modal = getAlertModal();
71
72		if (!modal || !messageElement || !okButton) {
73			return;
74		}
75
76		setModalMessage(messageElement, message);
77
78		okButton.onclick = function () {
79			modal.hide();
80
81			if (typeof callback === 'function') {
82				callback();
83			}
84		};
85
86		focusOnShown(modalElement, okButton);
87		modal.show();
88	};
89
90	window.showModalConfirm = function showModalConfirm(message) {
91		return new Promise(function (resolve) {
92			var modalElement = document.getElementById('siteConfirmModal');
93			var messageElement = document.getElementById('siteConfirmModalMessage');
94			var okButton = document.getElementById('siteConfirmModalOkBtn');
95			var cancelButton = document.getElementById('siteConfirmModalCancelBtn');
96			var modal = getConfirmModal();
97			var settled = false;
98
99			if (!modal || !messageElement || !okButton || !cancelButton) {
100				resolve(false);
101				return;
102			}
103
104			setModalMessage(messageElement, message);
105
106			function cleanup() {
107				okButton.removeEventListener('click', handleOk);
108				cancelButton.removeEventListener('click', handleCancel);
109				modalElement.removeEventListener('hidden.bs.modal', handleHidden);
110			}
111
112			function finish(result) {
113				if (settled) {
114					return;
115				}
116
117				settled = true;
118				cleanup();
119				modal.hide();
120				resolve(result);
121			}
122
123			function handleOk() {
124				finish(true);
125			}
126
127			function handleCancel() {
128				finish(false);
129			}
130
131			function handleHidden() {
132				finish(false);
133			}
134
135			okButton.addEventListener('click', handleOk);
136			cancelButton.addEventListener('click', handleCancel);
137			modalElement.addEventListener('hidden.bs.modal', handleHidden);
138
139			focusOnShown(modalElement, okButton);
140			modal.show();
141		});
142	};
143
144	window.alert = function alertModal(message) {
145		window.showModal(String(message).replace(/\n/g, '<br>'));
146	};
147
148	function submitConfirmedForm(form) {
149		form.dataset.confirmSubmitting = '1';
150
151		if (typeof form.requestSubmit === 'function') {
152			form.requestSubmit();
153			return;
154		}
155
156		form.submit();
157	}
158
159	function bindConfirmForms() {
160		document.addEventListener('submit', function (event) {
161			var form = event.target;
162
163			if (!form || form.tagName !== 'FORM') {
164				return;
165			}
166
167			var message = form.getAttribute('data-confirm');
168
169			if (!message) {
170				return;
171			}
172
173			if (form.dataset.confirmSubmitting === '1') {
174				delete form.dataset.confirmSubmitting;
175				return;
176			}
177
178			event.preventDefault();
179			event.stopPropagation();
180
181			window.showModalConfirm(message).then(function (confirmed) {
182				if (confirmed) {
183					submitConfirmedForm(form);
184				}
185			});
186		}, true);
187	}
188
189	function bindConfirmTriggers() {
190		document.addEventListener('click', function (event) {
191			var trigger = event.target.closest('[data-confirm]');
192
193			if (!trigger || trigger.tagName === 'FORM') {
194				return;
195			}
196
197			var message = trigger.getAttribute('data-confirm');
198
199			if (!message) {
200				return;
201			}
202
203			event.preventDefault();
204			event.stopPropagation();
205
206			window.showModalConfirm(message).then(function (confirmed) {
207				if (!confirmed) {
208					return;
209				}
210
211				if (trigger.tagName === 'A' && trigger.href) {
212					window.location.href = trigger.href;
213					return;
214				}
215
216				if (typeof trigger.click === 'function' && trigger.dataset.confirmProceed === '1') {
217					trigger.click();
218				}
219			});
220		}, true);
221	}
222
223	if (document.readyState === 'loading') {
224		document.addEventListener('DOMContentLoaded', function () {
225			bindConfirmForms();
226			bindConfirmTriggers();
227		});
228	} else {
229		bindConfirmForms();
230		bindConfirmTriggers();
231	}
232})();