/**
|
* Shortcut class to centralize all modal functionality, utilized by the JS ecosystem
|
*/
|
class ModalController {
|
constructor(modal, options){
|
this.modal = modal;
|
this.a11y = window.jvbA11y;
|
this.options = {
|
openMessage: 'Opened modal',
|
closeMessage: 'Closed modal',
|
open: null,
|
close: 'button.cancel',
|
save: 'button[type="submit"]',
|
...options
|
}
|
|
this.subscribers = new Set();
|
|
if (!ModalController.modalStack) {
|
ModalController.modalStack = [];
|
}
|
|
this.boundEscapeListener = this.handleEscapeListener.bind(this);
|
this.boundBackdropListener = this.handleBackdropListener.bind(this);
|
|
this.init();
|
}
|
|
init(){
|
this.isOpen = false;
|
this.hasChanges = false;
|
this.initElements();
|
this.initEvents();
|
}
|
|
initElements() {
|
this.elements = {
|
open: this.options.open,
|
close: this.options.close,
|
save: this.options.save,
|
};
|
}
|
|
handleClose(){
|
// Only close if this is the topmost modal
|
if (ModalController.modalStack[ModalController.modalStack.length - 1] !== this) {
|
return;
|
}
|
|
this.notify('modal-close', this.modal);
|
|
this.a11y.announce(this.options.closeMessage);
|
this.modal.close();
|
this.isOpen = false;
|
|
|
// Remove this modal from the stack
|
const index = ModalController.modalStack.indexOf(this);
|
if (index !== -1) {
|
ModalController.modalStack.splice(index, 1);
|
}
|
|
this.showBody();
|
// Clean up event listeners
|
this.removeCloseListeners();
|
}
|
|
handleOpen(e){
|
this.addCloseListeners();
|
this.hideBody();
|
this.isOpen = true;
|
this.modal.showModal();
|
|
if (!this.a11y) {
|
this.a11y = window.jvbA11y;
|
}
|
this.a11y.trapFocus(this.modal);
|
this.a11y.announce(this.options.openMessage);
|
|
// Add this modal to the stack
|
ModalController.modalStack.push(this);
|
|
this.notify('modal-open', {modal: this.modal, event: e});
|
}
|
|
addCloseListeners() {
|
document.addEventListener('keydown', this.boundEscapeListener);
|
document.addEventListener('click', this.boundBackdropListener);
|
}
|
removeCloseListeners() {
|
document.removeEventListener('keydown', this.boundEscapeListener);
|
document.removeEventListener('click', this.boundBackdropListener);
|
}
|
|
handleEscapeListener(e) {
|
if (e.key === 'Escape' && ModalController.modalStack[ModalController.modalStack.length - 1] === this) {
|
e.preventDefault(); // Prevent default browser behavior
|
this.handleClose();
|
}
|
}
|
handleBackdropListener(e) {
|
if (e.target === this.modal && ModalController.modalStack[ModalController.modalStack.length - 1] === this) {
|
this.handleClose();
|
}
|
}
|
|
hideBody(){
|
// Only hide body if this is the first modal
|
if (ModalController.modalStack.length === 0) {
|
document.body.style.overflow = 'hidden';
|
}
|
}
|
showBody(){
|
if (ModalController.modalStack.length === 0) {
|
document.body.style.overflow = '';
|
}
|
}
|
|
initEvents(){
|
document.addEventListener('click', this.handleClick.bind(this));
|
// document.addEventListener('beforeUnload', () => this.destroy());
|
}
|
|
handleClick(e) {
|
// Handle open triggers from anywhere
|
if (this.elements.open && window.targetCheck(e, this.elements.open)) {
|
this.handleOpen(e);
|
return;
|
}
|
|
// Only handle close/save if the click is within this modal
|
if (!this.modal.contains(e.target)) {
|
return;
|
}
|
|
// if (this.elements.save && window.targetCheck(e, this.elements.save)) {
|
// this.handleClose();
|
// } else
|
if (this.elements.close && window.targetCheck(e, this.elements.close)) {
|
// Additional check: only close if we're the top modal
|
if (ModalController.modalStack[ModalController.modalStack.length - 1] === this) {
|
this.handleClose();
|
}
|
}
|
}
|
|
// Static methods for managing modal stack
|
static getTopModal() {
|
return ModalController.modalStack[ModalController.modalStack.length - 1] || null;
|
}
|
|
static getAllModals() {
|
return [...ModalController.modalStack];
|
}
|
|
static closeTopModal() {
|
const topModal = ModalController.getTopModal();
|
if (topModal) {
|
topModal.handleClose();
|
}
|
}
|
|
static closeAllModals() {
|
// Close from top to bottom to maintain proper stack behavior
|
while (ModalController.modalStack.length > 0) {
|
ModalController.closeTopModal();
|
}
|
}
|
/**
|
* Event system
|
*/
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data) {
|
this.subscribers.forEach(cb => cb(event, data));
|
}
|
|
destroy() {
|
this.subscribers.clear();
|
ModalController.closeAllModals();
|
this.showBody();
|
this.removeCloseListeners();
|
}
|
}
|
document.addEventListener('DOMContentLoaded', ()=> {
|
window.jvbModal = ModalController;
|
});
|
