87 lines
2.6 KiB
JavaScript
87 lines
2.6 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
var JS_INITIALIZED_CLASS = 'js-modal-initialized';
|
|
var MODAL_OPEN_CLASS = 'modal--open';
|
|
var MODAL_TRIGGER_CLASS = 'modal__trigger';
|
|
var MODAL_CLOSABLE_FLAG = 'closeable';
|
|
var OVERLAY_CLASS = 'modal__overlay';
|
|
var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
|
|
var CLOSER_CLASS = 'modal__closer';
|
|
var AJAX_SUBMIT_FLAG = 'ajaxSubmit'
|
|
|
|
window.utils.modal = function(modalElement, options) {
|
|
|
|
if (!modalElement || modalElement.classList.contains(JS_INITIALIZED_CLASS)) {
|
|
return;
|
|
}
|
|
|
|
var overlayElement = document.createElement('div');
|
|
var closerElement = document.createElement('div');
|
|
var triggerElement = document.querySelector('#' + modalElement.dataset.trigger);
|
|
|
|
function open(event) {
|
|
event.preventDefault();
|
|
|
|
modalElement.classList.add(MODAL_OPEN_CLASS);
|
|
overlayElement.classList.add(OVERLAY_CLASS);
|
|
document.body.insertBefore(overlayElement, modalElement);
|
|
overlayElement.classList.add(OVERLAY_OPEN_CLASS);
|
|
}
|
|
|
|
function close(event) {
|
|
event.preventDefault();
|
|
overlayElement.classList.remove(OVERLAY_OPEN_CLASS);
|
|
modalElement.classList.remove(MODAL_OPEN_CLASS);
|
|
};
|
|
|
|
function setup() {
|
|
document.body.insertBefore(modalElement, null);
|
|
|
|
var form = modalElement.querySelector('form');
|
|
if (form && AJAX_SUBMIT_FLAG in form.dataset) {
|
|
setupForm(form);
|
|
}
|
|
|
|
if (MODAL_CLOSABLE_FLAG in modalElement.dataset) {
|
|
modalElement.insertBefore(closerElement, null);
|
|
closerElement.classList.add(CLOSER_CLASS);
|
|
closerElement.addEventListener('click', close, false);
|
|
overlayElement.addEventListener('click', close, false);
|
|
}
|
|
|
|
triggerElement.classList.add(MODAL_TRIGGER_CLASS);
|
|
triggerElement.addEventListener('click', open, false);
|
|
modalElement.classList.add(JS_INITIALIZED_CLASS);
|
|
}
|
|
|
|
function setupForm(form) {
|
|
form.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
var url = form.getAttribute('action');
|
|
var httpRequestOptions = {
|
|
method: form.method,
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
'Is-Modal': 'True'
|
|
},
|
|
body: new FormData(form),
|
|
};
|
|
|
|
return fetch(url, httpRequestOptions).then(function(response) {
|
|
return response.json();
|
|
}).then(function(response) {
|
|
// TODO: process json response once backend returns json
|
|
}).catch(function(error) {
|
|
console.error('could not fetch or process response from ' + url, { error });
|
|
});
|
|
});
|
|
}
|
|
|
|
setup();
|
|
};
|
|
})();
|