|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
window.ModalSystem = {
|
|
|
overlay: null,
|
|
|
content: null,
|
|
|
container: null,
|
|
|
closeBtn: null,
|
|
|
isOpen: false,
|
|
|
currentModal: null,
|
|
|
|
|
|
init: function() {
|
|
|
this.overlay = document.getElementById('modal-overlay');
|
|
|
if (!this.overlay) return;
|
|
|
|
|
|
this.content = document.getElementById('modal-content');
|
|
|
this.container = this.overlay.querySelector('.bg-white');
|
|
|
this.closeBtn = document.getElementById('modal-close');
|
|
|
|
|
|
this.bindEvents();
|
|
|
},
|
|
|
bindEvents: function() {
|
|
|
if (this.closeBtn) {
|
|
|
this.closeBtn.addEventListener('click', () => this.close());
|
|
|
}
|
|
|
this.overlay.addEventListener('click', (e) => {
|
|
|
if (e.target === this.overlay) {
|
|
|
this.close();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
if (e.key === 'Escape' && this.isOpen) {
|
|
|
this.close();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.addEventListener('click', (e) => {
|
|
|
const modalTrigger = e.target.closest('[data-modal]');
|
|
|
if (modalTrigger) {
|
|
|
e.preventDefault();
|
|
|
const modalName = modalTrigger.getAttribute('data-modal');
|
|
|
this.open(modalName);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.addEventListener('click', (e) => {
|
|
|
if (e.target.closest('[data-modal-close]')) {
|
|
|
e.preventDefault();
|
|
|
this.close();
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
|
|
|
open: function(modalName) {
|
|
|
if (this.isOpen) {
|
|
|
this.close();
|
|
|
}
|
|
|
|
|
|
const template = document.getElementById(`modal-template-${modalName}`);
|
|
|
if (!template) {
|
|
|
console.error(`модальное окно ${modalName} не найдено`);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.currentModal = modalName;
|
|
|
this.content.innerHTML = template.innerHTML;
|
|
|
this.show();
|
|
|
},
|
|
|
|
|
|
show: function() {
|
|
|
|
|
|
this.overlay.classList.remove('opacity-0', 'invisible');
|
|
|
this.overlay.classList.add('opacity-100', 'visible');
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
this.container.classList.remove('scale-90');
|
|
|
this.container.classList.add('scale-100');
|
|
|
}, 10);
|
|
|
|
|
|
this.isOpen = true;
|
|
|
|
|
|
setTimeout(() => {
|
|
|
this.closeBtn.focus();
|
|
|
}, 350);
|
|
|
},
|
|
|
|
|
|
close: function() {
|
|
|
if (!this.isOpen) return;
|
|
|
|
|
|
this.container.classList.remove('scale-100');
|
|
|
this.container.classList.add('scale-90');
|
|
|
|
|
|
this.overlay.classList.remove('opacity-100', 'visible');
|
|
|
this.overlay.classList.add('opacity-0', 'invisible');
|
|
|
|
|
|
this.isOpen = false;
|
|
|
this.currentModal = null;
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
getState: function() {
|
|
|
return {
|
|
|
isOpen: this.isOpen,
|
|
|
currentModal: this.currentModal
|
|
|
};
|
|
|
}
|
|
|
};
|
|
|
|
|
|
ModalSystem.init();
|
|
|
|
|
|
window.openModal = function(modalName) {
|
|
|
ModalSystem.open(modalName);
|
|
|
};
|
|
|
|
|
|
window.closeModal = function() {
|
|
|
ModalSystem.close();
|
|
|
};
|
|
|
}); |
