58 lines
1.9 KiB
Plaintext
58 lines
1.9 KiB
Plaintext
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
if (!window.utils.modal) {
|
|
window.utils.modal = function(modal) {
|
|
var overlay = document.createElement('div');
|
|
var closer = document.createElement('div');
|
|
var trigger = document.querySelector(modal.dataset.trigger);
|
|
var closeBound;
|
|
|
|
this.open = function openFn() {
|
|
modal.classList.add('modal--open');
|
|
overlay.classList.add('modal__overlay');
|
|
modal.parentNode.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')) {
|
|
this.open();
|
|
}
|
|
};
|
|
this.close = function closeFn(event) {
|
|
if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
|
|
modal.classList.remove('modal--open');
|
|
overlay.classList.remove('modal__overlay--open');
|
|
toggleScroll(true);
|
|
closer.removeEventListener('click', closeBound, false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
|
|
closeBound = this.close.bind(this);
|
|
if (trigger) {
|
|
trigger.classList.add('modal__trigger');
|
|
trigger.addEventListener('click', this.open.bind(this), false);
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleScroll(scrollable) {
|
|
document.body.classList.toggle('no-scroll', !scrollable);
|
|
}
|
|
|
|
new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable
|
|
|
|
}, false);
|