96 lines
2.5 KiB
JavaScript
96 lines
2.5 KiB
JavaScript
/**
|
|
* Modal-Management für View und Edit Modals.
|
|
*/
|
|
|
|
var _lastFocusedElement = null;
|
|
|
|
function _getFocusableElements(container) {
|
|
var selectors = 'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
return Array.from(container.querySelectorAll(selectors)).filter(function(el) {
|
|
return !el.closest('.hidden');
|
|
});
|
|
}
|
|
|
|
function _trapFocus(e, container) {
|
|
if (e.key !== 'Tab') return;
|
|
var focusable = _getFocusableElements(container);
|
|
if (focusable.length === 0) return;
|
|
var first = focusable[0];
|
|
var last = focusable[focusable.length - 1];
|
|
if (e.shiftKey) {
|
|
if (document.activeElement === first) {
|
|
e.preventDefault();
|
|
last.focus();
|
|
}
|
|
} else {
|
|
if (document.activeElement === last) {
|
|
e.preventDefault();
|
|
first.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
function _setAriaHidden(id, hidden) {
|
|
var el = document.getElementById(id);
|
|
if (el) {
|
|
if (hidden) {
|
|
el.setAttribute('aria-hidden', 'true');
|
|
} else {
|
|
el.removeAttribute('aria-hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Zeige View-Modal mit Titel und Inhalt
|
|
* @param {string} title - Titel des Modals
|
|
* @param {string} content - Inhalt als Text
|
|
*/
|
|
function showModal(title, content) {
|
|
_lastFocusedElement = document.activeElement;
|
|
document.getElementById('modal-title').textContent = title;
|
|
document.getElementById('modal-content').textContent = content;
|
|
var modal = document.getElementById('modal');
|
|
modal.classList.add('active');
|
|
_setAriaHidden('modal', false);
|
|
var focusable = _getFocusableElements(modal);
|
|
if (focusable.length > 0) {
|
|
focusable[0].focus();
|
|
}
|
|
modal.addEventListener('keydown', function(e) { _trapFocus(e, modal); });
|
|
}
|
|
|
|
/**
|
|
* Schließe View-Modal
|
|
*/
|
|
function closeModal() {
|
|
var modal = document.getElementById('modal');
|
|
modal.classList.remove('active');
|
|
_setAriaHidden('modal', true);
|
|
if (_lastFocusedElement && _lastFocusedElement.focus) {
|
|
_lastFocusedElement.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Schließe Edit-Modal
|
|
*/
|
|
function closeEditModal() {
|
|
_lastFocusedElement = document.activeElement;
|
|
var modal = document.getElementById('edit-modal');
|
|
modal.classList.remove('active');
|
|
_setAriaHidden('edit-modal', true);
|
|
if (_lastFocusedElement && _lastFocusedElement.focus) {
|
|
_lastFocusedElement.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Prüfe ob View-Modal offen war (für Copy-After-View-Logic)
|
|
* @returns {boolean}
|
|
*/
|
|
function wasViewModalOpen() {
|
|
return window._wasViewModalOpen || false;
|
|
}
|
|
|
|
// exported functions are global (loaded as <script> tags)
|