Workspace: Suche ueber alle Bereiche (Phase 4)
Auf JEDER Seite, nicht auf einer eigenen. kopf.js baut sie selbst in die Kopfleiste ein -- eine Suche, die man nur auf einer Extraseite findet, benutzt niemand. Mit "/" oeffnen, mit Esc schliessen. Durchsucht: Aufgaben, Termine, Calls, Gespraechsprotokolle, Dateien, die fuenf Betreuungsbereiche, die Scout-Pipeline und die offenen Felder der Creator-Profile. Zwei Dinge machen den Unterschied zwischen einer Suche und einer brauchbaren Suche: 1. SIE DARF NICHTS FINDEN, WAS DIE SEITE VERBERGEN WUERDE. Eine Suche ist die verlockendste Stelle fuer ein Datenleck: Man tippt einen Namen und bekommt Treffer aus Bereichen, die man nie oeffnen duerfte. Jede Quelle wird deshalb mit der Sichtbarkeitsregel ihres eigenen Moduls abgefragt -- importiert, nicht abgeschrieben. Die management-internen Profilfelder (admin_notiz, plan_start, naechster_review) werden GAR NICHT durchsucht, auch nicht fuer das Management: Ein Treffer daraus taucht sonst spaeter in einer Ansicht auf, die diese Felder nicht zeigen darf. Wer die Notiz lesen will, oeffnet das Profil. Geprueft mit einem eigenen Leck-Test: "GEHEIM" (Inhalt einer internen Notiz) findet niemand, auch der Chef nicht. Die Lead-Notiz eines Scouts findet nur er selbst und das Management, nicht der andere Scout. 2. SIE MUSS SAGEN, WO ETWAS STEHT. Jeder Treffer traegt einen Ausschnitt RUND UM die Fundstelle, nicht die ersten Zeichen des Feldes -- man sieht sofort, warum etwas gefunden wurde. Bei Profiltreffern steht dabei, welches Feld getroffen hat, bei Protokollen ob es unter "Besprochen" oder "Entscheidung" stand. Und jeder Treffer fuehrt an die Stelle, an der man weiterarbeiten kann. LIKE-Sonderzeichen werden maskiert. Ohne das waere die Suche nach "100%" eine Suche nach "100 gefolgt von irgendwas" und "a_b" faende auch "axb" -- beides falsch und beides faellt erst spaet auf. Geprueft: "100%" und "a_b" finden genau ihren Eintrag, "axb" findet nichts. Bewusst kein Volltextindex (FTS5): Die Datenmengen sind klein, und LIKE braucht keinen zweiten Datenstand, der irgendwann auseinanderlaeuft. Kleinigkeiten aus dem Test: - Das Overlay stand auf voller Hoehe, auch bei zwei Treffern -- der Schleier ist flex und stand auf dem voreingestellten stretch. Jetzt flex-start, das Fenster waechst mit dem Inhalt (417 statt 780 px bei drei Treffern). - Das eingebaute Kreuz von type="search" sass direkt neben dem Esc-Knopf: zwei Wege fuer dasselbe, dicht nebeneinander. Entfernt. - Das CSS liegt in gate.css, nicht in einer Seiten-Datei -- genau der Fehler, der bei .knopf-still schon einmal passiert ist.
This commit is contained in:
@@ -379,3 +379,114 @@ body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filt
|
||||
}
|
||||
.buehne__bild { transform: none; transition: none; }
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Suche über alle Bereiche.
|
||||
|
||||
Liegt bewusst hier und nicht in einer Seiten-Datei: kopf.js baut die
|
||||
Suche auf JEDER Workspace-Seite ein, also muss auch das Aussehen
|
||||
überall geladen sein. gate.css ist die einzige Datei, die das
|
||||
erfüllt. (Genau der Fehler, der bei .knopf-still schon einmal
|
||||
passiert ist -- Baustein in einer Seiten-Datei, prompt fehlte er
|
||||
woanders.)
|
||||
=================================================================== */
|
||||
|
||||
.suche-knopf {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 7px 13px; cursor: pointer;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border: 1px solid var(--rand); border-radius: 999px;
|
||||
color: var(--text-still); font: inherit; font-size: .82rem;
|
||||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||||
}
|
||||
.suche-knopf:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(63, 189, 245, .4);
|
||||
background: rgba(63, 189, 245, .08);
|
||||
}
|
||||
.suche-knopf__lupe {
|
||||
width: 15px; height: 15px; flex: none;
|
||||
fill: none; stroke: currentColor; stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
@media (max-width: 620px) { .suche-knopf__text { display: none; } }
|
||||
|
||||
.suche-schleier {
|
||||
position: fixed; inset: 0; z-index: 80;
|
||||
/* flex-start, nicht das voreingestellte stretch -- sonst zieht sich
|
||||
das Fenster auf volle Hoehe, auch bei zwei Treffern. */
|
||||
display: flex; justify-content: center; align-items: flex-start;
|
||||
padding: 9vh 18px 18px;
|
||||
background: rgba(3, 5, 10, .74);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
body.suche-offen { overflow: hidden; }
|
||||
|
||||
.suche-fenster {
|
||||
width: min(680px, 100%); max-height: 78vh;
|
||||
display: flex; flex-direction: column;
|
||||
background: #0b111b;
|
||||
border: 1px solid rgba(63, 189, 245, .26);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .85);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.suche-zeile {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--rand);
|
||||
}
|
||||
.suche-feld {
|
||||
flex: 1; min-width: 0; padding: 6px 2px;
|
||||
background: transparent; border: 0;
|
||||
color: var(--text); font: inherit; font-size: 1.02rem;
|
||||
}
|
||||
.suche-feld:focus { outline: none; }
|
||||
.suche-feld::placeholder { color: var(--text-still); }
|
||||
/* Das eingebaute Kreuz von type="search" steht sonst direkt neben dem
|
||||
Esc-Knopf -- zwei Wege, dasselbe zu tun, dicht nebeneinander. */
|
||||
.suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
||||
.suche-zu {
|
||||
flex: none; padding: 4px 9px; cursor: pointer;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text-still); font: inherit; font-size: .74rem; letter-spacing: .04em;
|
||||
}
|
||||
.suche-zu:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
|
||||
|
||||
.suche-ergebnis { overflow-y: auto; padding: 6px 10px 12px; }
|
||||
.suche-hinweis {
|
||||
margin: 0; padding: 26px 8px; text-align: center;
|
||||
color: var(--text-still); font-size: .88rem;
|
||||
}
|
||||
|
||||
.suche-gruppe { margin-top: 10px; }
|
||||
.suche-gruppe__titel {
|
||||
margin: 0 0 5px; padding: 0 8px;
|
||||
font-size: .71rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||||
}
|
||||
|
||||
.suche-treffer {
|
||||
display: block; padding: 9px 11px; margin-bottom: 3px;
|
||||
border-radius: var(--radius-klein);
|
||||
color: var(--text); text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.suche-treffer:hover, .suche-treffer:focus-visible {
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border-color: var(--rand);
|
||||
outline: none;
|
||||
}
|
||||
.suche-treffer__titel { display: block; font-size: .92rem; font-weight: 600; }
|
||||
.suche-treffer__zusatz {
|
||||
display: block; margin-top: 1px;
|
||||
font-size: .74rem; color: var(--text-still);
|
||||
}
|
||||
.suche-treffer__text {
|
||||
display: block; margin-top: 3px;
|
||||
font-size: .81rem; color: var(--text-leise); line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) { .suche-knopf { transition: none; } }
|
||||
|
||||
+140
-1
@@ -1,5 +1,5 @@
|
||||
/* ===================================================================
|
||||
Gemeinsames Verhalten der Kopfleiste: Zurück-Knopf und Abmelden.
|
||||
Gemeinsames Verhalten der Kopfleiste: Zurück-Knopf, Abmelden, Suche.
|
||||
|
||||
Liegt bewusst in einer eigenen Datei. Vorher stand das Abmelden in
|
||||
jeder Seitendatei noch einmal -- fünfmal derselbe Block, fünfmal eine
|
||||
@@ -65,4 +65,143 @@
|
||||
location.assign('/workspace/');
|
||||
});
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
Suche über alle Bereiche (Konzept, Phase 4).
|
||||
|
||||
Baut sich selbst in die Kopfleiste ein, statt in neun HTML-Dateien
|
||||
zu stehen. Eine Suche, die man nur auf einer Extraseite findet,
|
||||
benutzt niemand -- sie muss überall sein, wo man gerade ist.
|
||||
|
||||
Mit "/" zu öffnen, mit Esc zu schließen. Das Ergebnis wird erst
|
||||
nach einer kurzen Pause geholt, damit nicht jeder Tastendruck eine
|
||||
Abfrage auslöst.
|
||||
================================================================ */
|
||||
|
||||
const kopfRechts = document.querySelector('.kopfleiste__rechts');
|
||||
if (kopfRechts) aufbauSuche(kopfRechts);
|
||||
|
||||
function aufbauSuche(wohin) {
|
||||
const el = (tag, klasse, text) => {
|
||||
const k = document.createElement(tag);
|
||||
if (klasse) k.className = klasse;
|
||||
if (text !== undefined) k.textContent = text;
|
||||
return k;
|
||||
};
|
||||
|
||||
/* Auslöser in der Kopfleiste */
|
||||
const knopf = el('button', 'suche-knopf');
|
||||
knopf.type = 'button';
|
||||
knopf.title = 'Suchen (Taste /)';
|
||||
knopf.setAttribute('aria-label', 'Suchen');
|
||||
const lupe = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
lupe.setAttribute('viewBox', '0 0 24 24');
|
||||
lupe.setAttribute('class', 'suche-knopf__lupe');
|
||||
lupe.setAttribute('aria-hidden', 'true');
|
||||
lupe.innerHTML = '<circle cx="11" cy="11" r="6.5"/><path d="M15.8 15.8 20 20"/>';
|
||||
knopf.append(lupe, el('span', 'suche-knopf__text', 'Suchen'));
|
||||
wohin.prepend(knopf);
|
||||
|
||||
/* Overlay */
|
||||
const schleier = el('div', 'suche-schleier');
|
||||
schleier.hidden = true;
|
||||
const fenster = el('div', 'suche-fenster');
|
||||
fenster.setAttribute('role', 'dialog');
|
||||
fenster.setAttribute('aria-modal', 'true');
|
||||
fenster.setAttribute('aria-label', 'Suche über alle Bereiche');
|
||||
|
||||
const zeile = el('div', 'suche-zeile');
|
||||
const feld = el('input', 'suche-feld');
|
||||
feld.type = 'search';
|
||||
feld.placeholder = 'Suchen – Aufgaben, Gespräche, Dateien, Profile …';
|
||||
feld.setAttribute('aria-label', 'Suchbegriff');
|
||||
feld.maxLength = 100;
|
||||
const zu = el('button', 'suche-zu', 'Esc');
|
||||
zu.type = 'button';
|
||||
zeile.append(feld, zu);
|
||||
|
||||
const ergebnis = el('div', 'suche-ergebnis');
|
||||
ergebnis.setAttribute('aria-live', 'polite');
|
||||
fenster.append(zeile, ergebnis);
|
||||
schleier.append(fenster);
|
||||
document.body.append(schleier);
|
||||
|
||||
const zeigeHinweis = (text) => {
|
||||
ergebnis.textContent = '';
|
||||
ergebnis.append(el('p', 'suche-hinweis', text));
|
||||
};
|
||||
|
||||
let letzte = 0;
|
||||
async function suche() {
|
||||
const q = feld.value.trim();
|
||||
if (q.length < 2) { zeigeHinweis('Mindestens zwei Zeichen.'); return; }
|
||||
const meine = ++letzte;
|
||||
try {
|
||||
const a = await fetch('/workspace/api/suche?q=' + encodeURIComponent(q),
|
||||
{ credentials: 'same-origin' });
|
||||
if (meine !== letzte) return; // eine neuere Abfrage ist schon unterwegs
|
||||
if (a.status === 401) { location.assign('/workspace/'); return; }
|
||||
if (!a.ok) { zeigeHinweis('Die Suche ist gerade nicht erreichbar.'); return; }
|
||||
zeichne(await a.json());
|
||||
} catch {
|
||||
if (meine === letzte) zeigeHinweis('Die Suche ist gerade nicht erreichbar.');
|
||||
}
|
||||
}
|
||||
|
||||
function zeichne(d) {
|
||||
ergebnis.textContent = '';
|
||||
if (!d.gesamt) {
|
||||
zeigeHinweis(`Nichts gefunden zu „${d.frage}".`);
|
||||
return;
|
||||
}
|
||||
for (const g of d.gruppen) {
|
||||
const s = el('section', 'suche-gruppe');
|
||||
s.append(el('h3', 'suche-gruppe__titel', g.titel));
|
||||
for (const tr of g.treffer) {
|
||||
const a = el('a', 'suche-treffer');
|
||||
a.href = tr.ziel;
|
||||
a.append(el('span', 'suche-treffer__titel', tr.titel));
|
||||
if (tr.zusatz) a.append(el('span', 'suche-treffer__zusatz', tr.zusatz));
|
||||
if (tr.text) a.append(el('span', 'suche-treffer__text', tr.text));
|
||||
s.append(a);
|
||||
}
|
||||
ergebnis.append(s);
|
||||
}
|
||||
}
|
||||
|
||||
let warte = null;
|
||||
feld.addEventListener('input', () => {
|
||||
clearTimeout(warte);
|
||||
warte = setTimeout(suche, 220);
|
||||
});
|
||||
|
||||
function auf() {
|
||||
schleier.hidden = false;
|
||||
document.body.classList.add('suche-offen');
|
||||
feld.focus();
|
||||
feld.select();
|
||||
if (!feld.value.trim()) zeigeHinweis('Tippen, um alle Bereiche zu durchsuchen.');
|
||||
}
|
||||
function zuMachen() {
|
||||
schleier.hidden = true;
|
||||
document.body.classList.remove('suche-offen');
|
||||
knopf.focus();
|
||||
}
|
||||
|
||||
knopf.addEventListener('click', auf);
|
||||
zu.addEventListener('click', zuMachen);
|
||||
schleier.addEventListener('mousedown', (e) => { if (e.target === schleier) zuMachen(); });
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !schleier.hidden) { zuMachen(); return; }
|
||||
/* "/" oeffnet die Suche -- aber nur, wenn man nicht ohnehin
|
||||
gerade in ein Feld schreibt. */
|
||||
if (e.key !== '/' || schleier.hidden === false) return;
|
||||
const z = document.activeElement;
|
||||
if (z && (z.tagName === 'INPUT' || z.tagName === 'TEXTAREA' || z.tagName === 'SELECT'
|
||||
|| z.isContentEditable)) return;
|
||||
e.preventDefault();
|
||||
auf();
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user