dogfather-universe/workspace/assets/js/nachfrage.js

/* =====================================================================
   NACHFRAGEN, BEVOR ETWAS WEG IST — window.frageNach()

   Filipe, 19.09.2026: „Es darf vor allem keine Stellen geben, an denen
   ein Benutzer etwas falsch machen kann, nur weil die Seite es nicht
   verstaendlich genug erklaert." Und: „Fehler moeglichst verhindern,
   bevor sie entstehen."

   ---------------------------------------------------------------------
   WARUM ES DIESE DATEI GIBT

   Das Haus hatte die richtige Bauweise laengst -- in `aufgaben.html`
   steht sie sogar begruendet: ein <dialog>, kein confirm(), weil
   confirm die ganze Seite anhaelt, kein Textfeld aufnimmt und auf
   jedem Rechner anders aussieht.

   Nur stand diese Bauweise IN EINER SEITE. Wer auf einer anderen Seite
   etwas loeschen liess, hatte sie nicht -- und griff zu confirm().
   Gemessen am 19.09.2026: 30 Stellen im Workspace, in 16 Dateien.
   Also wandert sie hierher, wo jede Seite sie hat.

   Das ist dieselbe Lehre wie bei den Fehlermeldungen (`meldung.js`)
   und bei den Kachelfarben: Was an 30 Stellen gepflegt werden muss,
   wird an 30 Stellen unterschiedlich. Eine Stelle, die alle benutzen,
   kann nicht auseinanderlaufen.

   ---------------------------------------------------------------------
   WAS EIN GUTER NACHFRAGE-DIALOG SAGT

   confirm('Wirklich loeschen?') stellt die falsche Frage. Es fragt, ob
   man sicher ist -- und wer soll das wissen, wenn nicht dasteht, was
   danach passiert? Der Dialog hier beantwortet drei Dinge:

     1. WAS passiert          -- "Die Datei wird geloescht."
     2. Was NICHT passiert    -- "Der Chat-Verlauf bleibt."
     3. Ob es ZURUECK geht    -- "Das laesst sich nicht rueckgaengig machen."

   Punkt 3 ist der wichtigste und in confirm() gar nicht ausdrueckbar.
   Deshalb traegt der Bestaetigungsknopf bei `endgueltig: true` eine
   sichtbare Warnfarbe UND der Text sagt es noch einmal in Worten --
   Farbe allein traegt keine Aussage (Rot-Gruen-Schwaeche, Kontrastmodus).

   ---------------------------------------------------------------------
   DREI AUSGAENGE, wie ueberall im Haus

     <dialog> vorhanden        -> der richtige Dialog
     <dialog> fehlt (alt)      -> confirm() als Notnagel, mit DEMSELBEN
                                  Text, damit der Nutzer dieselbe
                                  Auskunft bekommt -- nur haesslicher
     Nutzer bricht ab          -> false, und zwar immer: bei Esc, beim
                                  Klick daneben und beim "Doch nicht"

   Der mittlere Ausgang ist nicht theoretisch: showModal gibt es erst ab
   Safari 15.4. Ein iPhone, das nicht aktualisiert wurde, wuerde ohne
   Notnagel gar nichts anzeigen -- und der Knopf taete stillschweigend
   nichts. Das waere schlimmer als ein haesslicher Dialog.

   ---------------------------------------------------------------------
   AUFRUF

     if (!await frageNach({
       titel: 'Datei loeschen?',
       was:   'Die Datei wird vom Server entfernt.',
       bleibt:'Die Nachricht im Chat bleibt stehen.',
       endgueltig: true,
       ja: 'Loeschen',
     })) return;

   Mit Grund (gibt dann { grund } statt true zurueck):

     const a = await frageNach({ titel: '...', grund: 'Warum?',
                                 grundPflicht: true });
     if (!a) return;          // abgebrochen
     ... a.grund ...
   ===================================================================== */

(function () {
  'use strict';

  /* Ein einziger Dialog fuer die ganze Seite. Er wird beim ersten
     Gebrauch gebaut und danach wiederverwendet -- zwei offene Dialoge
     gleichzeitig kann der Browser ohnehin nicht, und ein neuer je
     Aufruf wuerde den Fokus verlieren. */
  var dlg = null, feld = null, tippfeld = null, zahlfeld = null, fehlerZeile = null;

  function bauen() {
    if (dlg) return dlg;
    dlg = document.createElement('dialog');
    dlg.className = 'dialog nachfrage';
    dlg.innerHTML =
      '<form method="dialog" class="nachfrage__form">'
      + '<h2 class="dialog__titel" data-teil="titel"></h2>'
      + '<p class="dialog__unter" data-teil="was"></p>'
      + '<p class="dialog__unter dialog__unter--still" data-teil="bleibt"></p>'
      + '<p class="nachfrage__endgueltig" data-teil="endgueltig" hidden>'
      + 'Das lässt sich danach nicht mehr rückgängig machen.</p>'
      + '<div class="nachfrage__zeile" data-teil="tippzeile" hidden>'
      + '<label class="feld-schild" data-teil="tippschild" for="nachfrage-tipp"></label>'
      + '<input id="nachfrage-tipp" type="text" autocomplete="off"'
      + ' autocapitalize="off" spellcheck="false" />'
      + '</div>'
      + '<div class="nachfrage__zeile" data-teil="grundzeile" hidden>'
      + '<label class="feld-schild" data-teil="grundschild" for="nachfrage-grund"></label>'
      + '<textarea id="nachfrage-grund" rows="3" maxlength="500"></textarea>'
      + '</div>'
      + '<div class="nachfrage__zeile" data-teil="zahlzeile" hidden>'
      + '<label class="feld-schild" data-teil="zahlschild" for="nachfrage-zahl"></label>'
      + '<input id="nachfrage-zahl" type="number" min="1" inputmode="numeric" />'
      + '<p class="nachfrage__hinweis" data-teil="zahlhinweis"></p>'
      + '</div>'
      + '<p class="nachfrage__fehler" data-teil="fehler" role="alert"></p>'
      + '<div class="dialog__knoepfe">'
      + '<button type="submit" class="knopf knopf--klein" data-teil="ja"></button>'
      + '<button type="button" class="abmelden" data-teil="nein">Doch nicht</button>'
      + '</div></form>';
    document.body.appendChild(dlg);
    feld = dlg.querySelector('#nachfrage-grund');
    tippfeld = dlg.querySelector('#nachfrage-tipp');
    zahlfeld = dlg.querySelector('#nachfrage-zahl');
    fehlerZeile = dlg.querySelector('[data-teil="fehler"]');
    return dlg;
  }

  function teil(name) { return dlg.querySelector('[data-teil="' + name + '"]'); }

  /** Setzt Text und blendet die Zeile aus, wenn es keinen gibt.
   *  Eine leere Zeile, die Platz einnimmt, sieht aus wie ein Fehler. */
  function zeile(name, text) {
    var e = teil(name);
    e.textContent = text || '';
    e.hidden = !text;
  }

  window.frageNach = function frageNach(o) {
    o = o || {};
    var titel = o.titel || 'Sicher?';
    var was = o.was || '';
    var bleibt = o.bleibt || '';
    var ja = o.ja || 'Ja, machen';
    var nein = o.nein || 'Doch nicht';
    var endgueltig = !!o.endgueltig;
    var grund = o.grund || '';
    var grundPflicht = !!o.grundPflicht;
    var platzhalter = o.platzhalter || '';
    /* ABTIPPEN STATT ANKLICKEN. Fuer die Handgriffe, bei denen ein
       Fehlklick nicht zu reparieren ist (eine Person loeschen). Wer den
       Namen abtippt, hat ihn gelesen -- das ist der eigentliche Zweck,
       nicht die Huerde. */
    var tippen = o.tippen || '';
    /* EIN EINZEILIGES FELD, wenn nach einem Namen gefragt wird und
       nicht nach einem Grund. Ein Textfeld ueber drei Zeilen fuer einen
       Vornamen sieht aus, als erwarte jemand einen Aufsatz. Benutzt
       dasselbe Feld wie `tippen` -- beides gleichzeitig kommt nicht vor
       und waere auch nicht sinnvoll. */
    var eingabe = o.eingabe || '';
    var eingabeWert = o.eingabeWert || '';
    var eingabeMin = o.eingabeMin === undefined ? 2 : o.eingabeMin;
    /* EINE ZAHL IM SELBEN DIALOG. Vorher fragte die Moderation zweimal
       hintereinander (Grund, dann Dauer) -- zwei Kaesten nacheinander,
       und wer beim zweiten abbrach, hatte den ersten umsonst getippt.
       Reihenfolge bleibt: erst WARUM, dann WIE LANGE. Wer zuerst nach
       der Dauer gefragt wird, hat die Strafe festgelegt, bevor er sie
       begruendet hat. */
    var zahl = o.zahl || '';
    var zahlWert = o.zahlWert === undefined ? '' : String(o.zahlWert);
    var zahlMax = o.zahlMax || 0;
    var zahlLeer = !!o.zahlLeer;
    var zahlHinweis = o.zahlHinweis || '';
    var NIE_ZURUECK = 'Das lässt sich danach nicht mehr rückgängig machen.';

    /* ---- Ausgang 2: kein <dialog> -> confirm() mit DEMSELBEN Text ----
       Nicht "Sicher?" -- wer den Notnagel bekommt, soll dieselbe
       Auskunft haben wie alle anderen. */
    if (typeof HTMLDialogElement === 'undefined'
        || !HTMLDialogElement.prototype.showModal) {
      var text = [titel, was, bleibt, endgueltig ? NIE_ZURUECK : '']
        .filter(Boolean).join('\n\n');
      if (!window.confirm(text)) return Promise.resolve(false);
      if (tippen) {
        var t0 = window.prompt('Zum Bestätigen genau eingeben: ' + tippen, '');
        if (t0 === null || t0.trim() !== tippen) return Promise.resolve(false);
      }
      var erg = {};
      if (eingabe) {
        var e0 = window.prompt(eingabe, eingabeWert);
        if (e0 === null || e0.trim().length < eingabeMin) return Promise.resolve(false);
        erg.eingabe = e0.trim();
      }
      if (grund) {
        var g0 = window.prompt(grund, '');
        if (g0 === null) return Promise.resolve(false);
        if (grundPflicht && g0.trim().length < 3) return Promise.resolve(false);
        erg.grund = g0.trim();
      }
      if (zahl) {
        var z0 = window.prompt(zahl + (zahlHinweis ? ' (' + zahlHinweis + ')' : ''),
          zahlWert);
        if (z0 === null) return Promise.resolve(false);
        erg.zahl = z0.trim() === '' ? null : Number(z0);
      }
      return Promise.resolve((grund || zahl || eingabe) ? erg : true);
    }

    bauen();
    teil('titel').textContent = titel;
    zeile('was', was);
    zeile('bleibt', bleibt);
    teil('endgueltig').hidden = !endgueltig;
    teil('ja').textContent = ja;
    teil('nein').textContent = nein;
    /* Warnfarbe NUR zusaetzlich zum Satz oben, nie statt seiner. */
    teil('ja').classList.toggle('knopf--warn', endgueltig);
    teil('tippzeile').hidden = !(tippen || eingabe);
    if (eingabe) {
      teil('tippschild').textContent = eingabe;
      tippfeld.value = eingabeWert;
      tippfeld.placeholder = '';
    } else if (tippen) {
      teil('tippschild').textContent = 'Zum Bestätigen genau eingeben: ' + tippen;
      tippfeld.value = '';
      /* KEIN Platzhalter mit dem erwarteten Wort. Er sieht in einem
         leeren Feld aus wie ein bereits eingetragener Text -- und wer
         glaubt, es stehe schon da, drueckt auf "Loeschen" und wundert
         sich ueber die Fehlermeldung. Der Name steht ohnehin in der
         Beschriftung direkt darueber. */
      tippfeld.placeholder = '';
    }
    teil('grundzeile').hidden = !grund;
    if (grund) {
      teil('grundschild').textContent = grund;
      feld.value = '';
      feld.placeholder = platzhalter;
    }
    teil('zahlzeile').hidden = !zahl;
    if (zahl) {
      teil('zahlschild').textContent = zahl;
      teil('zahlhinweis').textContent = zahlHinweis;
      zahlfeld.value = zahlWert;
      if (zahlMax) zahlfeld.max = String(zahlMax); else zahlfeld.removeAttribute('max');
      zahlfeld.required = !zahlLeer;
    }
    fehlerZeile.textContent = '';

    return new Promise(function (fertig) {
      var antwort = false;
      var form = dlg.querySelector('form');

      function aufraeumen() {
        dlg.removeEventListener('close', beiSchliessen);
        form.removeEventListener('submit', beiJa);
        teil('nein').removeEventListener('click', beiNein);
        dlg.removeEventListener('click', beiDaneben);
      }
      function beiSchliessen() { aufraeumen(); fertig(antwort); }
      function beiNein() { antwort = false; dlg.close(); }
      function beiDaneben(e) {
        /* Klick auf den abgedunkelten Rand = abbrechen. Das erwartet
           jeder, und ohne es bleibt der Dialog am Handy gefuehlt
           haengen, weil dort kein Esc zur Verfuegung steht. */
        if (e.target === dlg) { antwort = false; dlg.close(); }
      }
      function beiJa(e) {
        e.preventDefault();
        if (eingabe && tippfeld.value.trim().length < eingabeMin) {
          fehlerZeile.textContent = eingabeMin > 1
            ? 'Bitte mindestens ' + eingabeMin + ' Zeichen eintragen.'
            : 'Bitte etwas eintragen.';
          tippfeld.focus(); return;
        }
        if (tippen && tippfeld.value.trim() !== tippen) {
          /* Sagt, WAS nicht stimmt -- "falsch" allein hilft niemandem,
             der sich vertippt hat. */
          fehlerZeile.textContent = 'Das stimmt noch nicht. Erwartet wird genau: '
            + tippen;
          tippfeld.focus();
          tippfeld.select();
          return;
        }
        var erg2 = {};
        if (eingabe) erg2.eingabe = tippfeld.value.trim();
        if (grund) {
          var g = feld.value.trim();
          if (grundPflicht && g.length < 3) {
            fehlerZeile.textContent = 'Bitte kurz sagen, warum.';
            feld.focus();
            return;   /* NICHT schliessen -- sonst waere die Eingabe weg */
          }
          erg2.grund = g;
        }
        if (zahl) {
          var roh = zahlfeld.value.trim();
          if (roh === '' && !zahlLeer) {
            fehlerZeile.textContent = 'Bitte eine Anzahl eintragen.';
            zahlfeld.focus(); return;
          }
          var n = roh === '' ? null : Number(roh);
          if (n !== null && !(n > 0)) {
            fehlerZeile.textContent = 'Das ist keine gültige Anzahl.';
            zahlfeld.focus(); return;
          }
          if (n !== null && zahlMax && n > zahlMax) {
            fehlerZeile.textContent = 'Mehr als ' + zahlMax + ' geht hier nicht.';
            zahlfeld.focus(); return;
          }
          erg2.zahl = n;
        }
        antwort = (grund || zahl || eingabe) ? erg2 : true;
        dlg.close();
      }

      dlg.addEventListener('close', beiSchliessen);
      form.addEventListener('submit', beiJa);
      teil('nein').addEventListener('click', beiNein);
      dlg.addEventListener('click', beiDaneben);

      dlg.showModal();
      /* Der Fokus liegt auf dem harmlosen Knopf, nicht auf "Loeschen".
         Wer aus Gewohnheit Enter drueckt, bricht damit ab -- das ist
         die richtige Richtung fuer einen Fehlgriff. Ausser es gibt ein
         Textfeld, dann gehoert der Fokus dorthin. */
      if (tippen || eingabe) tippfeld.focus();
      else if (grund) feld.focus();
      else teil('nein').focus();
    });
  };
})();

/* =====================================================================
   EINE EINGABE GEHT NICHT WORTLOS VERLOREN — window.verwurfWache()

   Filipe, 19.09.2026: „Was passiert, wenn jemand eine Funktion
   abbricht?"

   ---------------------------------------------------------------------
   WAS GEMESSEN WURDE

   Acht Dialoge im Workspace enthalten Eingabefelder -- „Aufgabe
   bearbeiten" (10 Felder), der Tageseintrag in der Leistung (8), Ziele,
   Netzwerk, Import, ein neuer Chat-Raum, ein Creator.

   Bei allen gilt bis heute dasselbe: Esc drücken, daneben klicken oder
   auf „Abbrechen" tippen wirft ALLES weg, wortlos. Wer zehn Felder
   ausgefüllt hat und mit dem Daumen den Rand trifft, fängt von vorn an.

   ---------------------------------------------------------------------
   WARUM BEIDE WEGE ABGEFANGEN WERDEN MÜSSEN

   Ein <dialog> geht auf ZWEI Arten zu, und sie laufen verschieden:

     Esc / Klick daneben  ->  löst `cancel` aus, DANN schliesst der
                              Browser selbst. Die Methode `close()`
                              wird dabei NICHT aufgerufen.
     „Abbrechen"-Knopf    ->  ruft `close()` auf, ohne `cancel`.

   Wer nur `cancel` abfängt, lässt den Knopf durch. Wer nur `close`
   ersetzt, lässt Esc durch. Beides einzeln wäre eine halbe Sicherung
   -- und eine halbe Sicherung ist schlimmer als keine, weil man ihr
   vertraut.

   ---------------------------------------------------------------------
   UND SIE DARF NICHT IMMER FRAGEN

   „Eine Warnung, die immer kommt, ist keine Warnung mehr." Gefragt
   wird nur, wenn sich WIRKLICH etwas geändert hat: Beim Öffnen wird
   ein Abbild der Felder genommen, beim Schliessen verglichen. Wer
   einen Dialog aufmacht und gleich wieder zu, merkt nichts davon.

   AUFRUF (einmal je Dialog, beim Aufbau der Seite):
     verwurfWache(document.getElementById('bearbeiten-dialog'));
   ===================================================================== */
(function () {
  'use strict';

  /** Der Inhalt aller Felder als eine Zeichenkette. Reicht zum
   *  Vergleichen -- es geht nur um „gleich oder nicht". */
  function abbild(dlg) {
    return [...dlg.querySelectorAll('input, textarea, select')]
      .map((f) => (f.type === 'checkbox' || f.type === 'radio')
        ? (f.checked ? '1' : '0')
        : String(f.value ?? ''))
      .join('\u0000');
  }

  window.verwurfWache = function verwurfWache(dlg, o) {
    if (!dlg || dlg.dataset.wache === 'ja') return;
    o = o || {};
    dlg.dataset.wache = 'ja';

    let beimOeffnen = null;

    /* WANN GEHT ER AUF? Das weiss nur der Browser -- die Seite ruft
       `showModal()` an zwanzig Stellen. Ein Beobachter auf dem
       `open`-Merkmal braucht dafuer keine einzige Zeile in der Seite. */
    if (window.MutationObserver) {
      new MutationObserver(() => {
        if (dlg.open) beimOeffnen = abbild(dlg);
      }).observe(dlg, { attributes: true, attributeFilter: ['open'] });
    }
    if (dlg.open) beimOeffnen = abbild(dlg);

    /* NOCH EINMAL IM NAECHSTEN BILD.
       ----------------------------------------------------------------
       Nachgemessen am 20.09.2026: Alle acht Dialoge fuellen ihre
       Felder VOR `showModal()`. Der Schnappschuss oben stimmt also.

       Er stimmt aber nur, solange das so bleibt. Fuellt jemand morgen
       ein Feld erst NACH dem Oeffnen, waere der Schnappschuss leer,
       und die Wache fragte bei JEDEM Schliessen. „Eine Warnung, die
       immer kommt, ist keine Warnung mehr."

       ERSTER ANLAUF WAR EIN NEUER SCHNAPPSCHUSS BEIM HINEINKLICKEN
       (`focusin`) -- und der hat die Wache still ausgeschaltet.
       Gemessen: Der Schnappschuss entstand NACH dem Tippen, weil
       Fokus und Werteingabe im selben Atemzug passieren koennen.
       `beimOeffnen` war danach gleich dem getippten Text, `geaendert()`
       falsch, und der Dialog ging wortlos zu -- die Sicherung sah
       eingebaut aus und tat nichts.

       Jetzt wird im NAECHSTEN BILD noch einmal abgebildet. Was das
       Skript beim Oeffnen nachtraegt, ist dann drin; getippt haben
       kann in derselben Sechzehntelsekunde niemand. */
    const nachtragen = () => {
      if (!dlg.open) return;
      requestAnimationFrame(() => { if (dlg.open) beimOeffnen = abbild(dlg); });
    };
    nachtragen();
    if (window.MutationObserver) {
      new MutationObserver(nachtragen)
        .observe(dlg, { attributes: true, attributeFilter: ['open'] });
    }

    const geaendert = () => beimOeffnen !== null && abbild(dlg) !== beimOeffnen;

    function fragen(dann) {
      frageNach({
        titel: o.titel || 'Eingaben verwerfen?',
        was: o.was || 'Was du hier eingetragen hast, geht verloren.',
        bleibt: o.bleibt || 'Der Eintrag selbst bleibt unverändert – '
          + 'es wird nur nichts übernommen.',
        ja: o.ja || 'Verwerfen',
        nein: 'Weiter bearbeiten',
      }).then((ja) => { if (ja) { beimOeffnen = null; dann(); } });
    }

    /* Weg 1: Esc und der Klick daneben. `cancel` ist abbrechbar --
       das ist der einzige Griff, den der Browser dafuer anbietet. */
    dlg.addEventListener('cancel', (e) => {
      if (!geaendert()) return;
      e.preventDefault();
      fragen(() => dlg.close());
    });

    /* Weg 2: jeder Aufruf von close() -- also die „Abbrechen"-Knoepfe
       und alles, was die Seite sonst tut. Ersetzt wird NUR an diesem
       einen Dialog, nicht am Prototyp: Ein globaler Eingriff traefe
       auch den Nachfrage-Dialog selbst, und der schlösse sich dann nie.

       Bei unveraendertem Inhalt bleibt es synchron wie vorher -- wer
       nichts getippt hat, merkt von der Wache nichts. */
    const echtesSchliessen = dlg.close.bind(dlg);
    dlg.close = function (...rest) {
      if (!geaendert()) { beimOeffnen = null; return echtesSchliessen(...rest); }
      fragen(() => echtesSchliessen(...rest));
      return undefined;
    };

    /* Nach dem Speichern ist nichts mehr zu retten -- dann darf der
       Dialog ohne Nachfrage zugehen. Die Seite meldet das, indem sie
       `vergessen()` aufruft; ohne Meldung fragt die Wache weiter. */
    dlg.vergessen = () => { beimOeffnen = abbild(dlg); };
  };

  /* =====================================================================
     UND SIE WIRD NICHT VON HAND VERTEILT

     Jeder Dialog mit Eingabefeldern bekommt die Wache -- abgeleitet,
     nicht aufgezaehlt. Wer morgen einen neunten baut, hat sie, ohne
     daran zu denken; und genau daran scheitern gepflegte Listen.

     AUSGENOMMEN IST DER NACHFRAGE-DIALOG SELBST. Er hat ein Textfeld
     (den Grund), und wuerde er sich selbst bewachen, fragte er beim
     Schliessen nach sich selbst -- und zwar in sich selbst. Der
     zweite Dialog kann nicht aufgehen, solange der erste offen ist:
     Er haenge fuer immer.
     ===================================================================== */
  function alleBewachen() {
    for (const dlg of document.querySelectorAll('dialog:not(.nachfrage)')) {
      if (!dlg.querySelector('input, textarea, select')) continue;
      window.verwurfWache(dlg);
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', alleBewachen);
  } else {
    alleBewachen();
  }
})();