112 lines
3.3 KiB
Plaintext
112 lines
3.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;
|
|
var closeBound;
|
|
var self = this;
|
|
var lastOverlayTouch = 0;
|
|
|
|
this.open = function openFn(event) {
|
|
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');
|
|
toggleScroll(false);
|
|
|
|
if (modal.dataset.closeable === 'true') {
|
|
closer.classList.add('modal__closer');
|
|
modal.insertBefore(closer, null);
|
|
closer.addEventListener('click', closeBound, false);
|
|
overlay.addEventListener('click', closeBound, false);
|
|
}
|
|
};
|
|
|
|
this.openOnEvent = function openOnEventFn(event) {
|
|
if (event.detail.for === modal.getAttribute('id')) {
|
|
self.open();
|
|
}
|
|
};
|
|
this.close = function closeFn(event) {
|
|
if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
|
|
overlay.remove();
|
|
origParent.insertBefore(modal, null);
|
|
modal.classList.remove('modal--open');
|
|
toggleScroll(true);
|
|
closer.removeEventListener('click', closeBound, false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('modal-open', self.openOnEvent, false);
|
|
closeBound = self.close;
|
|
if (trigger) {
|
|
trigger.classList.add('modal__trigger');
|
|
trigger.addEventListener('click', self.open, false);
|
|
}
|
|
modal.classList.add('js-modal-initialized');
|
|
};
|
|
|
|
function toggleScroll(scrollable) {
|
|
if (!scrollable) {
|
|
// document.addEventListener('scroll', catchScroll, false);
|
|
disableScroll();
|
|
} else {
|
|
enableScroll();
|
|
}
|
|
}
|
|
|
|
|
|
// following from here: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
|
|
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
|
|
|
|
function preventDefault(e) {
|
|
e = e || window.event;
|
|
if (e.preventDefault)
|
|
e.preventDefault();
|
|
e.returnValue = false;
|
|
}
|
|
|
|
function preventDefaultForScrollKeys(e) {
|
|
if (keys[e.keyCode]) {
|
|
preventDefault(e);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function disableScroll() {
|
|
if (window.addEventListener) // older FF
|
|
window.addEventListener('DOMMouseScroll', preventDefault, false);
|
|
window.onwheel = preventDefault; // modern standard
|
|
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
|
|
window.ontouchmove = preventDefault; // mobile
|
|
document.onkeydown = preventDefaultForScrollKeys;
|
|
}
|
|
|
|
function enableScroll() {
|
|
if (window.removeEventListener)
|
|
window.removeEventListener('DOMMouseScroll', preventDefault, false);
|
|
window.onmousewheel = document.onmousewheel = null;
|
|
window.onwheel = null;
|
|
window.ontouchmove = null;
|
|
document.onkeydown = null;
|
|
}
|
|
// till here
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
|
|
new utils.modal(modal);
|
|
});
|
|
|
|
}, false);
|