116 lines
3.4 KiB
JavaScript
116 lines
3.4 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_CONTENT_CLASS = 'modal__content';
|
|
var MAIN_CONTENT_CLASS = 'main__content-body'
|
|
var MODAL_CLOSABLE_FLAG = 'closeable';
|
|
var MODAL_DYNAMIC_FLAG = 'dynamic';
|
|
var MODAL_HEADERS = {
|
|
'Is-Modal': 'True',
|
|
};
|
|
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 setup() {
|
|
document.body.insertBefore(modalElement, null);
|
|
|
|
setupForm();
|
|
setupCloser();
|
|
|
|
triggerElement.classList.add(MODAL_TRIGGER_CLASS);
|
|
triggerElement.addEventListener('click', open, false);
|
|
|
|
modalElement.classList.add(JS_INITIALIZED_CLASS);
|
|
}
|
|
|
|
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);
|
|
|
|
var modalUrl = triggerElement.getAttribute('href');
|
|
if (modalUrl && MODAL_DYNAMIC_FLAG in modalElement.dataset) {
|
|
fillModal(modalUrl);
|
|
}
|
|
}
|
|
|
|
function close(event) {
|
|
event.preventDefault();
|
|
overlayElement.classList.remove(OVERLAY_OPEN_CLASS);
|
|
modalElement.classList.remove(MODAL_OPEN_CLASS);
|
|
};
|
|
|
|
function setupForm() {
|
|
var form = modalElement.querySelector('form');
|
|
if (form) {
|
|
window.utils.setup('form', form);
|
|
|
|
if (AJAX_SUBMIT_FLAG in form.dataset) {
|
|
window.utils.setup('asyncForm', form, { headers: MODAL_HEADERS });
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupCloser() {
|
|
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);
|
|
}
|
|
}
|
|
|
|
function fillModal(url) {
|
|
if (!window.utils.httpClient) {
|
|
throw new Error('httpClient not found! Can\' fetch modal content from ' + url);
|
|
}
|
|
|
|
window.utils.httpClient.get(url, MODAL_HEADERS)
|
|
.then(function(response) {
|
|
response.text().then(processResponse);
|
|
});
|
|
}
|
|
|
|
function processResponse(reponseBody) {
|
|
var modalContent = document.createElement('div');
|
|
modalContent.classList.add(MODAL_CONTENT_CLASS);
|
|
modalContent.innerHTML = reponseBody;
|
|
|
|
var contentBody = modalContent.querySelector('.' + MAIN_CONTENT_CLASS);
|
|
|
|
if (contentBody) {
|
|
modalContent.innerHTML = contentBody.innerHTML;
|
|
}
|
|
|
|
var previousModalContent = modalElement.querySelector('.' + MODAL_CONTENT_CLASS);
|
|
if (previousModalContent) {
|
|
previousModalContent.remove();
|
|
}
|
|
modalElement.insertBefore(modalContent, null);
|
|
setupForm();
|
|
}
|
|
|
|
setup();
|
|
};
|
|
})();
|