feat(diagram): das Knoten-Fenster löst den nativen Tooltip überall ab
Das Fenster aus D52 war für Touch gebaut — damit standen zwei Darstellungen desselben Inhalts nebeneinander, und ausgerechnet die schlechtere bekam der Zeiger. Jetzt zeigt es überall: am Zeiger nach 350 ms beim Überfahren, bei Tastaturfokus sofort, auf Touch unverändert beim Tipp. Was ein `title` prinzipiell nicht kann: - keine Absätze (die Beschreibungen im Plan brechen bei ~76 Zeichen, das sah ausgefranst aus), - keine Linie (der Trennstrich war aus 24 `─` GEMALT, D40-Nachtrag), - nichts bei Tastaturfokus — wer mit Tab durch das Diagramm geht, sah bisher keine Beschreibung. Nachgemessen mit ECHTEM Tastendruck: Fokus von #not.line auf #not.status, Fenster folgt, 10 px unter dem Knoten, Ring am fokussierten Knoten. - Inhalt zieht von `title` nach `data-tip` (sonst zeigte der Browser seinen eigenen zusätzlich) — dasselbe Attribut unter anderem Namen, keine Verdopplung der 20 kB DOM-Text. - Die letzten drei nativen Tooltips IN Knoten mussten weichen: Das Warndreieck war redundant (Statusname steht in den Fakten), die Annahme „Größe fehlt, gilt als M" wandert in die Faktenzeile. Nachgemessen: 0 von 161 Knoten und 0 Kinder tragen noch einen `title`. - Absicht-Erkennung: 350 ms Verzögerung, beim Wechsel zwischen Knoten ohne Warten, 120 ms Nachfrist beim Verlassen (der Weg ins Fenster führt über einen Zwischenraum). - `aria-hidden` am Fenster: Der Inhalt steht schon im aria-label, sonst würde er doppelt vorgelesen; × und ↗ deshalb `tabindex="-1"`. Werkzeuggrenze notiert: `element.focus()` feuert ohne Fensterfokus keine Fokus-Ereignisse (`document.hasFocus()` false) — der erste Prüflauf zeigte fälschlich „öffnet nichts". SPEC §9 + D57; Plan: #ed.tipwindow [x] (161 Knoten, 0 Warnungen). 293 Tests grün, 5 Snapshots/Zusicherungen auf `data-tip` nachgezogen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mhoennig
co-authored by
Claude Opus 5
Claude Opus 5
parent
f0fe877d45
commit
3fbc772d81
+59
-6
@@ -1246,15 +1246,21 @@ function closeNodeTip(){
|
||||
|
||||
function toggleNodeTip(el){
|
||||
if(tipNode === el){ closeNodeTip(); return; } /* zweiter Tipp schließt */
|
||||
showNodeTip(el, true);
|
||||
}
|
||||
|
||||
/* `touch` unterscheidet die beiden Anlässe: Am Zeiger ist der ganze Knoten der
|
||||
Link (§6), ein ↗-Knopf wäre dort ein zweiter Weg zum selben Ziel; und der
|
||||
Sprung-Hinweis nennt Alt+Klick, den es auf dem Telefon nicht gibt. */
|
||||
function showNodeTip(el, touch){
|
||||
closeNodeTip();
|
||||
const title = el.getAttribute('title') || '';
|
||||
const title = el.getAttribute('data-tip') || '';
|
||||
const sep = '\n\n' + TIP_RULE + '\n';
|
||||
const i = title.indexOf(sep);
|
||||
const desc = i >= 0 ? title.slice(0, i) : '';
|
||||
/* Der Sprung-Hinweis nennt im Tooltip Alt+Klick; hier gibt es kein Alt. */
|
||||
const facts = (i >= 0 ? title.slice(i + sep.length) : title)
|
||||
.replace(t('jumpHint'), t('jumpHintTouch'));
|
||||
const href = el.tagName === 'A' ? el.getAttribute('href') : null;
|
||||
const roh = i >= 0 ? title.slice(i + sep.length) : title;
|
||||
const facts = touch ? roh.replace(t('jumpHint'), t('jumpHintTouch')) : roh;
|
||||
const href = touch && el.tagName === 'A' ? el.getAttribute('href') : null;
|
||||
/* Absätze: Leerzeilen trennen (SPEC §1), einzelne Zeilenumbrüche sind bloß
|
||||
der Umbruch der Quelldatei und werden zu Leerzeichen. Der `title` kann das
|
||||
nicht — er zeigt die harten Umbrüche und sah im schmalen Fenster
|
||||
@@ -1265,7 +1271,7 @@ function toggleNodeTip(el){
|
||||
nodeTipBody.innerHTML =
|
||||
(paras.length ? `<div class="nodetip-desc">${paras.map(p => `<p>${esc(p)}</p>`).join('')}</div>` : '') +
|
||||
(facts ? `<div class="nodetip-facts">${esc(facts)}</div>` : '') +
|
||||
(href ? `<a class="nodetip-link" href="${esc(href)}" target="_blank" rel="noopener">↗ ${esc(t('tipOpenLink'))}</a>` : '');
|
||||
(href ? `<a class="nodetip-link" tabindex="-1" href="${esc(href)}" target="_blank" rel="noopener">↗ ${esc(t('tipOpenLink'))}</a>` : '');
|
||||
tipNode = el;
|
||||
el.classList.add('tipped');
|
||||
nodeTip.hidden = false;
|
||||
@@ -1293,6 +1299,53 @@ function placeNodeTip(el){
|
||||
Math.max(12, Math.min(anchorX - left, w - 12)).toFixed(1) + 'px');
|
||||
}
|
||||
|
||||
/* ---------- Dasselbe Fenster am Zeiger und an der Tastatur (D57) ----------
|
||||
Es löst den nativen `title` ab: Der konnte weder Absätze noch eine Linie
|
||||
(der Trennstrich war aus 24 `─` gemalt, D40-Nachtrag) und erschien nie beim
|
||||
Tastaturfokus. Beides kann das Fenster ohnehin schon — es wurde nur für
|
||||
Touch gebaut (D52).
|
||||
|
||||
Die Verzögerung ist Absicht-Erkennung: Über einen dichten Baum fährt man
|
||||
hinweg, ohne etwas wissen zu wollen. Beim Wechsel von Knoten zu Knoten
|
||||
zeigt es sofort weiter — wer schon liest, wartet nicht noch einmal. */
|
||||
const TIP_DELAY = 350;
|
||||
let tipTimer = null, tipLeave = null;
|
||||
const finePointer = () => window.matchMedia('(hover:hover) and (pointer:fine)').matches;
|
||||
function cancelTipTimers(){
|
||||
clearTimeout(tipTimer); clearTimeout(tipLeave);
|
||||
tipTimer = tipLeave = null;
|
||||
}
|
||||
out.addEventListener('pointerover', e => {
|
||||
if(e.pointerType === 'touch' || !finePointer()) return;
|
||||
const el = e.target.closest && e.target.closest('.node');
|
||||
if(!el || el === tipNode) return;
|
||||
cancelTipTimers();
|
||||
/* Steht schon eines offen, ist die Absicht erwiesen — dann ohne Warten. */
|
||||
tipTimer = setTimeout(() => showNodeTip(el, false), tipNode ? 0 : TIP_DELAY);
|
||||
});
|
||||
out.addEventListener('pointerout', e => {
|
||||
if(e.pointerType === 'touch' || !finePointer()) return;
|
||||
clearTimeout(tipTimer);
|
||||
/* Nicht sofort zumachen: Der Weg ins Fenster führt über den Zwischenraum,
|
||||
und dort ist der Zeiger kurz über keinem von beiden. */
|
||||
clearTimeout(tipLeave);
|
||||
tipLeave = setTimeout(() => {
|
||||
if(!nodeTip.matches(':hover')) closeNodeTip();
|
||||
}, 120);
|
||||
});
|
||||
nodeTip.addEventListener('pointerenter', cancelTipTimers);
|
||||
nodeTip.addEventListener('pointerleave', () => { closeNodeTip(); });
|
||||
/* Tastaturfokus: ohne Verzögerung — er ist bereits die ausdrückliche Absicht,
|
||||
und ein `title` hat hier noch nie etwas gezeigt. */
|
||||
out.addEventListener('focusin', e => {
|
||||
const el = e.target.closest && e.target.closest('.node');
|
||||
if(el && el !== tipNode) showNodeTip(el, false);
|
||||
});
|
||||
out.addEventListener('focusout', e => {
|
||||
const el = e.target.closest && e.target.closest('.node');
|
||||
if(el && el === tipNode) closeNodeTip();
|
||||
});
|
||||
|
||||
document.getElementById('nodeTipClose').addEventListener('click', closeNodeTip);
|
||||
/* Tipp/Klick daneben schließt — der Link-Knopf im Fenster aber nicht. */
|
||||
document.addEventListener('pointerdown', e => {
|
||||
|
||||
+16
-5
@@ -131,25 +131,36 @@ function nodeHtml(n, extra, opts, fold){
|
||||
effKey
|
||||
? t('heldTooltip', {eff: t('st_' + effKey), own: t('st_' + n.status.key)})
|
||||
: (n.status ? t('st_' + n.status.key) : ''),
|
||||
n.optional ? t('a11yOptional') : '', t('jumpHint')]
|
||||
n.optional ? t('a11yOptional') : '',
|
||||
/* Die Kostenannahme „Größe fehlt, gilt als M" (D18) hatte einen
|
||||
eigenen `title` am Badge — der erschiene neben dem Fenster
|
||||
ein zweites Mal. Sie gehört ohnehin zu den Kurz-Fakten. */
|
||||
(!n.size && cheapPath && !isDone(n)) ? t('implicitSizeTooltip') : '',
|
||||
t('jumpHint')]
|
||||
.filter(Boolean).join(' · ');
|
||||
const tip = n.desc && facts ? n.desc + '\n\n' + TIP_RULE + '\n' + facts
|
||||
: (n.desc || facts);
|
||||
const title = ` title="${attr(tip)}"`;
|
||||
/* `data-tip` statt `title`: Der Inhalt wird vom eigenen Knoten-Fenster
|
||||
dargestellt (D57), und ein `title` daneben zeigte der Browser zusätzlich
|
||||
als zweiten, dürftigeren Tooltip. Kein zweites Attribut mit demselben Text
|
||||
— es ist dasselbe, nur unter anderem Namen. */
|
||||
const title = ` data-tip="${attr(tip)}"`;
|
||||
const tagsHtml = n.tags && n.tags.length
|
||||
? `<span class="tags" aria-hidden="true">${n.tags.map(tag => `<span class="tag">${esc(tag)}</span>`).join('')}</span>`
|
||||
: '';
|
||||
/* Das implizite M-Badge macht eine KOSTENANNAHME sichtbar (D18). An einem
|
||||
erledigten Knoten wird keine getroffen — er kostet nichts mehr (D46) —,
|
||||
dort bleibt es deshalb weg. */
|
||||
const implicitTip = attr(t('implicitSizeTooltip'));
|
||||
const implicitSize = !n.size && cheapPath && !isDone(n);
|
||||
const sizeBadge = n.size
|
||||
? `<span class="size" aria-hidden="true">${n.size}</span>`
|
||||
: (cheapPath && !isDone(n) ? `<span class="size implicit" aria-hidden="true" title="${implicitTip}">M</span>` : '');
|
||||
: (implicitSize ? `<span class="size implicit" aria-hidden="true">M</span>` : '');
|
||||
/* High-Risk: Warndreieck (⚠, Textpräsentation via VS15) an der oberen linken
|
||||
Ecke. aria-hidden — die Information steckt bereits im Status des aria-label. */
|
||||
/* Kein eigener `title` mehr: Er zeigte sonst zusätzlich zum Knoten-Fenster
|
||||
(D57), und seine Aussage — „High Risk" — steht dort ohnehin als Status. */
|
||||
const riskMark = n.status && n.status.key === 'highrisk'
|
||||
? `<span class="risk" aria-hidden="true" title="${attr(t('riskTooltip'))}">⚠︎</span>`
|
||||
? `<span class="risk" aria-hidden="true">⚠︎</span>`
|
||||
: '';
|
||||
/* Falt-Zeichen (SPEC §9/D38): ▾ offen, „▸ n" eingeklappt — das Klickziel
|
||||
fürs Umklappen (der einfache Klick auf den Knoten bleibt der Link, §6).
|
||||
|
||||
Reference in New Issue
Block a user