Wird geladen…
@@ -2245,6 +2445,232 @@
postfach: { titel: "Postfach", kasten: "vw-postfach-bereich" },
};
+ /* =====================================================================
+ SUCHE ÜBER ALLES ("Befehlspalette")
+
+ Bisher gab es ein Suchfeld, und es durchsuchte nur die Anfragen. Wer
+ einen Namen im Kopf hatte, musste raten, in welchem Reiter er
+ nachsehen muss. Jetzt: Strg+K von überall, auf dem Handy der
+ Lupenknopf oben.
+
+ VIER DINGE, DIE MAN LEICHT FALSCH MACHT
+
+ 1. BEI JEDEM TASTENDRUCK SUCHEN. Wer "Musterbau" tippt, löst neun
+ Abfragen aus, von denen acht schon veraltet sind, bevor sie
+ ankommen. Deshalb eine kurze Wartezeit -- lang genug, um Tippen
+ zu erkennen, kurz genug, um nicht zu bremsen.
+
+ 2. DAS WETTRENNEN DER ANTWORTEN. Auch mit Wartezeit können zwei
+ Abfragen unterwegs sein. Kommt die ältere später an, überschreibt
+ sie die neuere -- man tippt weiter und sieht plötzlich wieder die
+ Treffer von vorhin. Deshalb bekommt jede Abfrage eine laufende
+ Nummer, und nur die jeweils neueste darf zeichnen.
+
+ 3. DEN FOKUS IN DIE LISTE VERSCHIEBEN. Naheliegend, aber falsch: Dann
+ kann man nicht mehr weitertippen. Der Fokus bleibt im Eingabefeld,
+ die Auswahl wandert über aria-activedescendant -- so schreibt es
+ das ARIA-Muster vor, und so verhält es sich auch richtig.
+
+ 4. NUR DEN GUTEN FALL BAUEN. Leer, lädt und Fehler sind eigene
+ Zustände. Ein Kasten, der bei einem Serverfehler einfach leer
+ bleibt, sieht aus wie "nichts gefunden" -- und man sucht dann an
+ der falschen Stelle nach dem Problem.
+ ===================================================================== */
+ var palette = document.getElementById("vw-palette");
+ var palFeld = document.getElementById("vw-pal-feld");
+ var palListe = document.getElementById("vw-pal-liste");
+ var palZahl = document.getElementById("vw-pal-zahl");
+
+ var palTreffer = [];
+ var palAuswahl = -1;
+ var palLauf = 0; // laufende Nummer gegen das Wettrennen
+ var palZeitgeber = null;
+ var palVorherFokus = null; // wohin der Fokus zurückkehrt
+
+ var ART_TEXT = {
+ anfrage: "Anfrage", kunde: "Kunde", projekt: "Projekt", zahlung: "Zahlung",
+ };
+
+ function paletteAuf() {
+ if (!palette.hidden) return;
+ /* Merken, wo der Fokus war. Beim Schliessen muss er dorthin zurueck --
+ sonst steht man nach Esc am Seitenanfang und muss sich neu
+ orientieren. */
+ palVorherFokus = document.activeElement;
+ palette.hidden = false;
+ palFeld.value = "";
+ palListeLeeren();
+ palZahl.textContent = "";
+ palFeld.focus();
+ document.body.style.overflow = "hidden"; // Hintergrund nicht mitscrollen
+ }
+
+ function paletteZu() {
+ if (palette.hidden) return;
+ palette.hidden = true;
+ document.body.style.overflow = "";
+ palFeld.setAttribute("aria-expanded", "false");
+ palFeld.removeAttribute("aria-activedescendant");
+ if (palVorherFokus && palVorherFokus.focus) {
+ try { palVorherFokus.focus(); } catch (e) { /* Element ist weg, egal */ }
+ }
+ }
+
+ function palListeLeeren() {
+ palListe.innerHTML = "";
+ palTreffer = [];
+ palAuswahl = -1;
+ palFeld.setAttribute("aria-expanded", "false");
+ palFeld.removeAttribute("aria-activedescendant");
+ }
+
+ function palHinweis(text, art) {
+ palListe.innerHTML = '
' + s(text) + "";
+ palTreffer = [];
+ palAuswahl = -1;
+ palFeld.setAttribute("aria-expanded", "false");
+ palFeld.removeAttribute("aria-activedescendant");
+ }
+
+ function palZeichnen(d) {
+ palTreffer = d.treffer || [];
+ palAuswahl = -1;
+
+ if (d.zuKurz) {
+ palHinweis("Mindestens zwei Zeichen eingeben.");
+ palZahl.textContent = "";
+ return;
+ }
+ if (!palTreffer.length) {
+ palHinweis("Nichts gefunden zu „" + d.begriff + "“.");
+ palZahl.textContent = "Keine Treffer";
+ return;
+ }
+
+ palListe.innerHTML = palTreffer.map(function (t, i) {
+ return '' +
+ '' +
+ s(ART_TEXT[t.art] || t.art) + "" +
+ '' +
+ '' + s(t.titel || "—") + "" +
+ '' + s(t.unten || "") + "" +
+ "" +
+ (t.marke ? '' + s(t.marke) + "" : "") +
+ "";
+ }).join("");
+
+ palFeld.setAttribute("aria-expanded", "true");
+ palZahl.textContent = palTreffer.length + (palTreffer.length === 1 ? " Treffer" : " Treffer")
+ + (d.begrenzt ? " (je Bereich höchstens " + d.grenzeJeBereich + ")" : "");
+ palWaehlen(0);
+ }
+
+ function palWaehlen(nr) {
+ var knoten = palListe.querySelectorAll('[role="option"]');
+ if (!knoten.length) return;
+ if (nr < 0) nr = knoten.length - 1;
+ if (nr >= knoten.length) nr = 0;
+ palAuswahl = nr;
+ knoten.forEach(function (k, i) {
+ k.setAttribute("aria-selected", i === nr ? "true" : "false");
+ k.classList.toggle("vw-pal-an", i === nr);
+ });
+ /* aria-activedescendant statt echtem Fokus: Der Fokus bleibt im
+ Eingabefeld, damit man weitertippen kann -- angesagt wird
+ trotzdem die ausgewaehlte Zeile. */
+ palFeld.setAttribute("aria-activedescendant", knoten[nr].id);
+ knoten[nr].scrollIntoView({ block: "nearest" });
+ }
+
+ function palOeffnen(nr) {
+ var t = palTreffer[nr];
+ if (!t) return;
+ paletteZu();
+ var knopf = document.querySelector('[data-tab="' + t.ziel + '"]');
+ if (knopf) knopf.click();
+ /* Bei einer Anfrage direkt die Detailansicht oeffnen. Nur in den
+ Reiter zu springen waere die halbe Strecke -- man muesste den
+ Treffer in der Liste noch einmal suchen, den man gerade
+ ausgewaehlt hat. */
+ if (t.art === "anfrage" && typeof zeigeDetail === "function") {
+ setTimeout(function () { zeigeDetail(t.id); }, 260);
+ }
+ }
+
+ async function palSuchen(begriff) {
+ var meine = ++palLauf;
+ if (!begriff || begriff.trim().length < 2) {
+ palHinweis("Mindestens zwei Zeichen eingeben.");
+ palZahl.textContent = "";
+ return;
+ }
+ palHinweis("Wird gesucht…", "laedt");
+ try {
+ var d = await api("/webdesign/admin/suche?q=" + encodeURIComponent(begriff));
+ if (meine !== palLauf) return; // eine neuere Abfrage ist schon unterwegs
+ palZeichnen(d);
+ } catch (fehler) {
+ if (meine !== palLauf) return;
+ /* Ein Fehler darf NICHT wie "nichts gefunden" aussehen. */
+ palHinweis("Die Suche ist fehlgeschlagen: " + (fehler.message || "unbekannt"), "fehler");
+ palZahl.textContent = "";
+ }
+ }
+
+ if (palette) {
+ palFeld.addEventListener("input", function () {
+ clearTimeout(palZeitgeber);
+ var wert = palFeld.value;
+ /* 180 ms: kurz genug, dass es sofort wirkt, lang genug, dass beim
+ Durchtippen eines Namens nicht jede Taste eine Abfrage ausloest. */
+ palZeitgeber = setTimeout(function () { palSuchen(wert); }, 180);
+ });
+
+ palFeld.addEventListener("keydown", function (e) {
+ if (e.key === "ArrowDown") { e.preventDefault(); palWaehlen(palAuswahl + 1); }
+ else if (e.key === "ArrowUp") { e.preventDefault(); palWaehlen(palAuswahl - 1); }
+ else if (e.key === "Enter") { e.preventDefault(); palOeffnen(palAuswahl); }
+ else if (e.key === "Escape") { e.preventDefault(); paletteZu(); }
+ else if (e.key === "Home" && palTreffer.length) { e.preventDefault(); palWaehlen(0); }
+ else if (e.key === "End" && palTreffer.length) { e.preventDefault(); palWaehlen(palTreffer.length - 1); }
+ });
+
+ palListe.addEventListener("click", function (e) {
+ var zeile = e.target.closest ? e.target.closest("[data-nr]") : null;
+ if (zeile) palOeffnen(Number(zeile.dataset.nr));
+ });
+ /* Mit der Maus darueberfahren waehlt mit aus -- sonst zeigt die
+ Tastaturauswahl auf eine andere Zeile als die, die man anklickt. */
+ palListe.addEventListener("mousemove", function (e) {
+ var zeile = e.target.closest ? e.target.closest("[data-nr]") : null;
+ if (zeile && Number(zeile.dataset.nr) !== palAuswahl) palWaehlen(Number(zeile.dataset.nr));
+ });
+
+ document.querySelectorAll("[data-palette-zu]").forEach(function (k) {
+ k.addEventListener("click", paletteZu);
+ });
+
+ /* Strg+K bzw. Cmd+K von ueberall.
+
+ Nicht abfangen, waehrend in einem anderen Feld getippt wird? Doch --
+ gerade dann ist es nuetzlich. Die Tastenkombination ist in Browsern
+ mit der Adressleiste belegt, deshalb preventDefault; das ist bei
+ dieser Kombination die uebliche Erwartung in Verwaltungsoberflaechen. */
+ document.addEventListener("keydown", function (e) {
+ if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) {
+ e.preventDefault();
+ palette.hidden ? paletteAuf() : paletteZu();
+ }
+ /* Esc schliesst auch, wenn der Fokus schon woanders liegt. */
+ if (e.key === "Escape" && !palette.hidden) paletteZu();
+ });
+
+ var lupe = document.getElementById("vw-suche-auf");
+ if (lupe) lupe.addEventListener("click", paletteAuf);
+ }
+
var aktiverTab = "uebersicht";
document.getElementById("vw-titel").textContent = ANSICHTEN[aktiverTab].titel;