Finanzmanager/public/static/app.js

/* Finanzmanager – Frontend-Hilfen.
 *
 * Bewusst schlank und ohne Framework.
 *
 * Bestätigungen hängen an <form data-bestaetigen="…"> und nicht als onsubmit
 * im HTML: Die Content-Security-Policy erlaubt keine Inline-Skripte, ein
 * onsubmit-Attribut würde stillschweigend verworfen – und dann löschte der
 * Knopf ohne Rückfrage.
 */

(function () {
    'use strict';

    // Formulare mit data-bestaetigen fragen vor dem Absenden nach.
    // In der Capture-Phase, damit die Rückfrage auch dann greift, wenn ein
    // anderer Handler das Ereignis unterwegs stoppt.
    document.addEventListener('submit', function (ereignis) {
        const formular = ereignis.target;
        if (!(formular instanceof HTMLFormElement)) {
            return;
        }

        const frage = formular.dataset.bestaetigen;
        if (frage && !window.confirm(frage)) {
            ereignis.preventDefault();
            ereignis.stopPropagation();
        }
    }, true);

    // Kategoriebaum im Budgetplaner auf- und zuklappen. Die Zeilen kennen ihre
    // Elternkategorie über data-eltern; von dort aus lässt sich der Teilbaum
    // einsammeln, ohne ihn im HTML zu verschachteln (in einer Tabelle ginge das
    // ohnehin nicht).
    document.querySelectorAll('.klappknopf').forEach(function (knopf) {
        knopf.setAttribute('aria-expanded', 'true');

        knopf.addEventListener('click', function () {
            const wurzel = knopf.dataset.klappt;
            const offen = knopf.getAttribute('aria-expanded') !== 'false';
            knopf.setAttribute('aria-expanded', offen ? 'false' : 'true');

            const zeilen = Array.from(document.querySelectorAll('tr.kategoriezeile'));
            const betroffen = new Set([wurzel]);

            zeilen.forEach(function (zeile) {
                const eltern = zeile.dataset.eltern;
                if (eltern && betroffen.has(eltern)) {
                    betroffen.add(zeile.dataset.kategorie);
                    zeile.classList.toggle('zugeklappt', offen);
                }
            });
        });
    });

    // Meldungen nach kurzer Zeit ausblenden – Fehler bleiben stehen.
    // Über eine Klasse, nicht über element.style: Die Content-Security-Policy
    // (style-src 'self') verwirft auch per JavaScript gesetzte Inline-Styles,
    // die Meldung bliebe sonst einfach stehen.
    document.querySelectorAll('.meldung-erfolg').forEach(function (element) {
        window.setTimeout(function () {
            element.classList.add('verblasst');
            window.setTimeout(function () { element.remove(); }, 400);
        }, 5000);
    });
})();