101 lines
No EOL
2.8 KiB
JavaScript
101 lines
No EOL
2.8 KiB
JavaScript
// Modal management script
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Initialize all modals
|
|
initializeModals();
|
|
});
|
|
|
|
function initializeModals() {
|
|
// Get all modals
|
|
const modals = document.querySelectorAll('.modal');
|
|
|
|
// Initialize each modal
|
|
modals.forEach(modal => {
|
|
// Get close button
|
|
const closeBtn = modal.querySelector('.modal-close');
|
|
const cancelBtn = modal.querySelector('.modal-cancel');
|
|
|
|
// Close modal when close button is clicked
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener('click', function () {
|
|
modal.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
// Close modal when cancel button is clicked
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener('click', function () {
|
|
modal.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
modal.addEventListener('click', function (e) {
|
|
if (e.target === modal) {
|
|
modal.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Open modal when trigger is clicked
|
|
document.querySelectorAll('[data-modal]').forEach(trigger => {
|
|
trigger.addEventListener('click', function () {
|
|
const modalId = this.dataset.modal;
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// New folder button
|
|
const newFolderBtn = document.getElementById('new-folder-btn');
|
|
if (newFolderBtn) {
|
|
newFolderBtn.addEventListener('click', function () {
|
|
const modal = document.getElementById('new-folder-modal');
|
|
if (modal) {
|
|
modal.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Close on background click
|
|
document.querySelectorAll('.modal').forEach(modal => {
|
|
modal.addEventListener('click', function (e) {
|
|
if (e.target === this) {
|
|
closeModal('#' + this.id);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close on escape key
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
const activeModal = document.querySelector('.modal.active');
|
|
if (activeModal) {
|
|
closeModal('#' + activeModal.id);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Open a modal by ID
|
|
function openModal(modalId) {
|
|
const modal = typeof modalId === 'string' ?
|
|
document.querySelector(modalId) :
|
|
modalId;
|
|
|
|
if (modal) {
|
|
modal.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// Close a modal by ID
|
|
function closeModal(modalId) {
|
|
const modal = typeof modalId === 'string' ?
|
|
document.querySelector(modalId) :
|
|
modalId;
|
|
|
|
if (modal) {
|
|
modal.classList.remove('active');
|
|
}
|
|
}
|