}
*/
export function confirmModal(message, { confirmLabel, danger = false } = {}) {
return new Promise((resolve) => {
let resolved = false;
function finish(value) {
if (resolved) return;
resolved = true;
closeModal();
resolve(value);
}
openModal({
title: message,
size: 'sm',
content: `
`,
onSave(panel) {
panel.querySelector('#confirm-modal-ok')?.addEventListener('click', () => finish(true));
panel.querySelector('#confirm-modal-cancel')?.addEventListener('click', () => finish(false));
const escHandler = (e) => {
if (e.key === 'Escape') {
document.removeEventListener('keydown', escHandler);
finish(false);
}
};
document.addEventListener('keydown', escHandler);
const overlay = panel.closest('.modal-overlay');
if (overlay) {
overlay.addEventListener('click', (e) => {
if (e.target === overlay) finish(false);
});
}
},
});
});
}
// --------------------------------------------------------
// Inline Blur-Validierung
// --------------------------------------------------------
function _validateField(input) {
const group = input.closest('.form-field') ?? input.parentElement;
const hasValue = input.value.trim().length > 0;
group?.classList.toggle('form-field--error', !hasValue);
group?.classList.toggle('form-field--valid', hasValue);
input.setAttribute('aria-invalid', String(!hasValue));
if (!hasValue && group) {
const count = parseInt(group.dataset.errorCount ?? '0', 10) + 1;
group.dataset.errorCount = String(count);
if (count >= 2) {
group.classList.remove('form-field--error-repeat');
void group.offsetWidth;
group.classList.add('form-field--error-repeat');
group.addEventListener('animationend', () => group.classList.remove('form-field--error-repeat'), { once: true });
}
} else if (hasValue && group) {
group.dataset.errorCount = '0';
}
return hasValue;
}
/**
* Aktiviert Blur-Validierung für alle required-Inputs in einem Container.
* @param {HTMLElement} formContainer
*/
export function wireBlurValidation(formContainer) {
formContainer.querySelectorAll('input[required], select[required], textarea[required]').forEach((input) => {
input.addEventListener('blur', () => _validateField(input));
});
}
/**
* Validiert alle required-Inputs sofort (z.B. beim Submit ohne vorangehendes Blur).
* Markiert Fehler inline und fokussiert das erste ungültige Feld.
*
* @param {HTMLElement} formContainer
* @returns {boolean} true wenn alle Felder valide sind
*/
export function validateAll(formContainer) {
let firstInvalid = null;
let allValid = true;
formContainer.querySelectorAll('input[required], select[required], textarea[required]').forEach((input) => {
const valid = _validateField(input);
if (!valid && !firstInvalid) firstInvalid = input;
if (!valid) allValid = false;
});
if (firstInvalid) firstInvalid.focus();
return allValid;
}
// --------------------------------------------------------
// Submit-Feedback (Checkmark + Shake)
// --------------------------------------------------------
/**
* Zeigt Erfolgs-Feedback auf einem Button (Checkmark für 700ms).
* Respektiert prefers-reduced-motion: zeigt nur Farb-Feedback ohne Icon-Wechsel.
* @param {HTMLButtonElement} btn
* @param {string} [originalLabel]
*/
export function btnSuccess(btn, originalLabel) {
btn.classList.remove('btn--loading');
const label = originalLabel ?? btn.textContent;
btn.classList.add('btn--success');
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reducedMotion) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '16');
svg.setAttribute('height', '16');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
svg.setAttribute('stroke-width', '2.5');
svg.setAttribute('aria-hidden', 'true');
const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
poly.setAttribute('points', '20 6 9 17 4 12');
svg.appendChild(poly);
btn.replaceChildren(svg);
}
setTimeout(() => {
btn.classList.remove('btn--success');
btn.textContent = label;
}, 700);
}
/**
* Versetzt einen Button in den Lade-Zustand (Spinner, nicht klickbar).
* Gibt eine Cleanup-Funktion zurück, die den Originalzustand wiederherstellt.
*
* @param {HTMLButtonElement} btn
* @returns {() => void} cleanup
*/
export function btnLoading(btn) {
btn.classList.add('btn--loading');
btn.disabled = true;
return () => {
btn.classList.remove('btn--loading');
btn.disabled = false;
};
}
/**
* Zeigt Fehler-Feedback auf einem Button (Shake-Animation).
* Respektiert prefers-reduced-motion: kein visuelles Schütteln, nur Farb-Feedback.
* @param {HTMLButtonElement} btn
*/
export function btnError(btn) {
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
btn.classList.add('btn--error-static');
setTimeout(() => btn.classList.remove('btn--error-static'), 700);
return;
}
btn.classList.remove('btn--shaking');
void btn.offsetWidth; // Reflow für Animation-Restart
btn.classList.add('btn--shaking');
btn.addEventListener('animationend', () => btn.classList.remove('btn--shaking'), { once: true });
}