125 lines
4.3 KiB
Plaintext
125 lines
4.3 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
window.utils.modal = function(modal) {
|
|
var overlay = document.createElement('div');
|
|
var closer = document.createElement('div');
|
|
var trigger = document.querySelector('#' + modal.dataset.trigger);
|
|
// var origParent = modal.parentNode;
|
|
|
|
function open(event) {
|
|
// disable modals for narrow screens
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
modal.classList.add('modal--open');
|
|
overlay.classList.add('modal__overlay');
|
|
// document.body.insertBefore(modal, null);
|
|
document.body.insertBefore(overlay, modal);
|
|
overlay.classList.add('modal__overlay--open');
|
|
|
|
if (modal.dataset.closeable === 'true') {
|
|
closer.classList.add('modal__closer');
|
|
modal.insertBefore(closer, null);
|
|
closer.addEventListener('click', close, false);
|
|
overlay.addEventListener('click', close, false);
|
|
}
|
|
}
|
|
|
|
// you can open this modal via event
|
|
// example: document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-[id]' }}))
|
|
function openOnEvent(event) {
|
|
if (event.detail.for === modal.getAttribute('id')) {
|
|
open();
|
|
}
|
|
}
|
|
|
|
function close(event) {
|
|
if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
|
|
overlay.remove();
|
|
// origParent.insertBefore(modal, null);
|
|
modal.classList.remove('modal--open');
|
|
closer.removeEventListener('click', close, false);
|
|
}
|
|
};
|
|
|
|
function setup() {
|
|
document.body.insertBefore(modal, null);
|
|
|
|
// every modal can be openend via document-wide event, see openOnEvent
|
|
document.addEventListener('modal-open', openOnEvent, false);
|
|
// if modal has trigger assigned to it open modal on click
|
|
if (trigger) {
|
|
trigger.classList.add('modal__trigger');
|
|
trigger.addEventListener('click', open, false);
|
|
}
|
|
|
|
if (modal.dataset.dynamic === 'True') {
|
|
// var dynamicContentURL = trigger.getAttribute('href');
|
|
// console.log(dynamicContentURL);
|
|
// if (dynamicContentURL.length > 0) {
|
|
// fetch(dynamicContentURL, {
|
|
// credentials: 'same-origin',
|
|
// }).then(function(response) {
|
|
// return response.text();
|
|
// }).then(function(body) {
|
|
// var modalContent = document.createElement('div');
|
|
// modalContent.innerHTML = body;
|
|
// var main = modalContent.querySelector('.main__content-body');
|
|
// if (main) {
|
|
// modal.appendChild(main);
|
|
// } else {
|
|
// replaceMe.innerHTML = body;
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
var dynamicContentURL = trigger.getAttribute('href');
|
|
console.log(dynamicContentURL);
|
|
var frame = document.createElement('iframe');
|
|
frame.setAttribute('id', "frame-" + modal.getAttribute('id'));
|
|
modal.insertBefore(frame, null);
|
|
|
|
frame.onload = function() {
|
|
frame.style.visibility = 'hidden';
|
|
frame.style.height = '0';
|
|
|
|
var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
|
|
var body = doc.body, html = doc.documentElement;
|
|
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
|
|
|
|
frame.style.height = "calc(" + (height + "px") + " + 1em)";
|
|
frame.style.visibility = 'visible';
|
|
|
|
doc.querySelectorAll("form").forEach(function(form) {
|
|
form.setAttribute("target", "_top");
|
|
});
|
|
}
|
|
|
|
var url = "";
|
|
var i = dynamicContentURL.indexOf('?');
|
|
if (i === -1) {
|
|
url = dynamicContentURL + "?" + #{String modalParameter};
|
|
} else {
|
|
url = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
|
|
}
|
|
|
|
frame.setAttribute('src', url);
|
|
}
|
|
// tell further modals, that this one already got initialized
|
|
modal.classList.add('js-modal-initialized');
|
|
}
|
|
setup();
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
|
|
new utils.modal(modal);
|
|
});
|
|
|
|
}, false);
|