Telefonieren ging nur ueber UDP -- und die Seite sprang immer hoch
=== 1. WARUM TELEFONIEREN NICHT GING ===
Filipe: "es klingelt erscheint auch alles bei jedem aber telefonieren
klappt immer noch nicht."
GEMESSEN, BEVOR ETWAS GEAENDERT WURDE -- und alles war gruen:
coturn laeuft aktiv
STUN von aussen antwortet, nennt meine oeffentliche Adresse
echte Zuteilung von aussen 7/7, Testpaket kam an (Port 49183)
Dreier-Anruf im Prueflauf verbindet, alle hoeren alle
Vier Messungen, vier Mal in Ordnung -- und das Telefon ging trotzdem
nicht. Der Grund: Der Prueflauf faehrt BEIDE Seiten auf demselben
Rechner. Dort finden sie sich ueber die direkte Adresse, und die
Vermittlung wird nie gebraucht. Draussen sitzen sie in verschiedenen
Netzen.
DER FUND: Eingetragen war eine einzige Adresse --
turn:159.195.212.167:3478
Ein `turn:` OHNE `?transport=` heisst UDP, und nur UDP. Nachgemessen
hoert coturn aber auf beidem: 3478/UDP offen, 3478/TCP offen (5349/TLS
ist zu). Angeboten wurde nur der halbe Server.
Wer in einem Netz sitzt, das UDP nach draussen sperrt -- Mobilfunk mit
strengem Profil, Gast-WLAN, Firmennetz --, bekam damit KEINEN
Vermittlungsweg. Es klingelt (das laeuft ueber die Website, also ueber
443), und danach passiert nichts. Genau das gemeldete Bild.
Aus einem Eintrag werden jetzt drei Wege:
stun:host:port die eigene Adresse finden, ohne Vermittlung
turn:host:port?transport=udp der schnelle Weg
turn:host:port?transport=tcp der Weg durch fast jede Sperre
ABGELEITET, NICHT EINGETRAGEN: Drei Zeilen von Hand waeren drei
Stellen, an die beim naechsten Serverumzug jemand denken muesste --
die abgeschriebene Liste, die hier schon zweimal teuer war. Ein
Eintrag MIT `?transport=` bleibt unangetastet, ein fremder Dienst mit
eigenem Passwort sowieso.
pruef-turn-wege (neu, 15/0) sichert beides: dass jeder Weg herauskommt
UND dass jeder turn:-Weg Zugangsdaten traegt. Das Zweite ist das
wichtigere -- auffaechern ohne anmelden haette den Fehler nur
verschoben.
=== 2. DIE SEITE SPRANG BEIM ZURUECKGEHEN IMMER HOCH ===
Filipe: "das nervt man muss dan immer wieder runter scrollen bis man
da ist wo man vorher war."
Der Browser versucht es sogar -- scrollRestoration steht ab Werk auf
"auto". Nur: Jede Seite hier kommt fast leer an und holt ihren Inhalt
danach per Abruf. In dem Moment, in dem der Browser die alte Position
wiederherstellen will, ist das Dokument ein paar hundert Pixel hoch.
Er kann nicht auf Zeile 900 springen, die es noch nicht gibt -- und er
versucht es kein zweites Mal.
Jetzt macht es kopf.js selbst (gilt damit auf allen 21 Seiten): Stelle
merken beim Verlassen, beim Oeffnen zurueckholen und jeden Bildaufbau
lang versuchen, bis das Dokument hoch genug ist. Nach drei Sekunden
wird aufgegeben.
Drei Dinge sind Absicht:
- NUR beim Zurueckgehen, nicht bei jedem Oeffnen. Wer eine Kachel
anklickt, will oben anfangen.
- WER SELBST SCROLLT, GEWINNT. Rad, Wisch oder Taste beenden das
Nachspringen sofort.
- Nach einer Stunde vergessen -- auf Zeile 900 zu landen, weil man
gestern dort war, ist keine Hilfe.
=== 3. DIE LISTE IST NACH ROLLE GETRENNT ===
Filipe: "die rechte hand rolle immer zuerst und dan die modis. die
sollen auch schoen getrennt sein und verschieden aussehen also die
rechte hand viel spezieller."
Die Reihenfolge macht der Server ueber ROLLEN_SORTIERUNG -- dieselbe
Konstante wie ueberall sonst im Haus, nicht eine zweite. Eine
Sortierung nach ROLLE ist ausdruecklich keine Rangliste: Sie sagt
nichts darueber, wie gut jemand ist, nur welche Aufgabe er hat.
Deshalb steht ueber jeder Gruppe ein Satz und keine Zahl.
"Spezieller" heisst hier Material, nicht Groesse: eigener Farbton als
Kante und Schimmer, hellere Flaeche, kraeftigerer Name. Beide Karten
sind GLEICH GROSS und tragen dieselben Zeilen -- zwei Sorten Aufgabe,
keine Rangfolge. Im Kontrastmodus traegt eine doppelte Kante die
Unterscheidung, weil dort keine Farbe mehr wirkt.
=== 4. DER ANRUFKASTEN ===
Vorher: vier gleich aussehende Pillen nebeneinander, darunter eine
Geraeteauswahl, die das breiteste Element war. Kein Name, keine
Ordnung, und der einzige Knopf mit Folgen sah aus wie die anderen.
- MAN SAH NICHT, MIT WEM. Der wichtigste Satz eines Telefonats fehlte.
Der Chat kennt den Namen und gibt ihn jetzt mit; wer rangeht, sieht
den Anrufer.
- "MIKRO AN" WAR ZWEIDEUTIG -- "ist an" oder "schalt an"? Wer falsch
raet, sitzt stumm da. Jetzt traegt ein durchgestrichenes Zeichen
den Zustand, das Wort nur die Sache. aria-pressed bleibt die
Wahrheit, auch fuer Vorleseprogramme.
- DIE GERAETEAUSWAHL liegt hinter einem kleinen Knopf, der nur
erscheint, wenn es ueberhaupt etwas zu waehlen gibt.
- AUFLEGEN ist als einziger Knopf farbig und steht immer rechts.
- Ein ruhiger Puls atmet, solange die Verbindung aufbaut, und haelt
an, sobald sie steht. Bei prefers-reduced-motion steht er still.
=== NEBENBEFUND, DEN DIE PRUEFUNG GEFUNDEN HAT ===
pruef-anruf wurde durch die Auffaecherung an vier Stellen rot: Sie
griff `adressen[0]` und erwartete dort Zugangsdaten. Das ist jetzt der
STUN-Weg, und der hat richtigerweise keine. Gesucht wird nicht mehr
nach PLATZ, sondern nach ART -- ein Index ist eine Annahme darueber,
wie die Liste aussieht, und die hat sich gerade geaendert.
Dazu angepasst: Die Pruefung "die Uhr laeuft" verlangte, dass die Uhr
schon beim Klingeln zaehlt. Seit heute frueh beginnt sie beim
Rangehen (sonst standen im Kasten und im Chat zwei verschiedene
Zahlen). Sie prueft jetzt das Gegenteil -- statt sie zu streichen,
denn eine Zeile weniger haette den Fehler beim naechsten Umbau wieder
durchgelassen.
GEMESSEN: pruef-anruf 114/0 (vorher 111 -- drei MEHR, weil die
Auffaecherung mitgeprueft wird), pruef-turn-wege 15/0,
pruef-meldungen 8/0, pruef-css-klassen ALLES IN ORDNUNG,
pruef-rechtetafel 19/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1692,3 +1692,174 @@
|
||||
if (e.persisted) location.reload();
|
||||
});
|
||||
})();
|
||||
|
||||
/* =====================================================================
|
||||
DIE SEITE MERKT SICH, WO DU WARST — 19.09.2026
|
||||
|
||||
Filipe: „wenn ich von einer seite auf die andere zurück gehe, swipt
|
||||
die seite immer wieder komplett hoch. das nervt man muss dan immer
|
||||
wieder runter scrollen bis man da ist wo man vorher war."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WARUM DER BROWSER ES NICHT VON SELBST HINBEKOMMT
|
||||
|
||||
Er versucht es sogar — `history.scrollRestoration` steht ab Werk auf
|
||||
„auto", und bei einer gewöhnlichen Seite klappt das.
|
||||
|
||||
Hier nicht, und der Grund ist die Bauweise des ganzen Hauses: Jede
|
||||
Seite kommt fast leer an und holt ihren Inhalt danach per Abruf
|
||||
(Aufgaben, Termine, Einträge, Karten). In dem Moment, in dem der
|
||||
Browser die alte Position wiederherstellen will, ist das Dokument
|
||||
ein paar hundert Pixel hoch. Er kann nicht auf Zeile 900 springen,
|
||||
die es noch nicht gibt — also bleibt er oben. Eine halbe Sekunde
|
||||
später ist der Inhalt da, aber der Browser versucht es kein zweites
|
||||
Mal.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WIE ES HIER GELÖST IST
|
||||
|
||||
Wir übernehmen die Aufgabe selbst (`manual`) und warten, bis die
|
||||
Seite WIRKLICH hoch genug ist:
|
||||
|
||||
1. Beim Verlassen wird die Position gemerkt — je Adresse einzeln,
|
||||
inklusive Frageteil (`bereich.html?b=treff` ist eine andere
|
||||
Seite als `bereich.html?b=wunsch`).
|
||||
2. Beim Öffnen wird sie zurückgelesen und dann jeden Bildaufbau
|
||||
lang versucht, bis das Dokument die nötige Höhe hat.
|
||||
3. Nach längstens drei Sekunden wird aufgegeben — eine Seite, die
|
||||
ewig nachspringt, ist schlimmer als eine, die oben steht.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DREI DINGE, DIE ABSICHT SIND
|
||||
|
||||
NUR BEIM ZURÜCKGEHEN, NICHT BEI JEDEM ÖFFNEN. Wer eine Kachel
|
||||
anklickt, will oben anfangen. Wer zurückgeht, will dorthin, wo er
|
||||
war. Unterschieden wird über `performance.navigation`: Nur bei
|
||||
`back_forward` wird wiederhergestellt. Ein eigener Merker fängt den
|
||||
Fall ab, dass der Zurück-Knopf der Kopfleiste benutzt wurde.
|
||||
|
||||
WER SELBST SCROLLT, GEWINNT. Sobald der Mensch das Rad dreht oder
|
||||
wischt, hört das Nachspringen sofort auf. Nichts ist ärgerlicher
|
||||
als eine Seite, die einen zurückzieht.
|
||||
|
||||
UND SIE VERGISST NACH EINER STUNDE. `sessionStorage` überlebt den
|
||||
Reiter ohnehin nicht; der Zeitstempel fängt den Fall ab, dass
|
||||
jemand denselben Reiter am nächsten Morgen weiterbenutzt. Auf
|
||||
Zeile 900 zu landen, weil man gestern dort war, ist keine Hilfe.
|
||||
===================================================================== */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* Nach so vielen Millisekunden wird nicht mehr versucht. Drei
|
||||
Sekunden sind großzügig für einen Abruf und kurz genug, dass es
|
||||
nie nach „die Seite hängt" aussieht. */
|
||||
var FRIST_MS = 3000;
|
||||
/* Nach einer Stunde gilt die gemerkte Stelle nicht mehr. */
|
||||
var ALTER_MS = 3600000;
|
||||
/* Unter dieser Höhe lohnt das Merken nicht -- wer zehn Pixel
|
||||
gescrollt hat, merkt vom Wiederherstellen nichts. */
|
||||
var MINDEST_PX = 80;
|
||||
|
||||
var SCHLUESSEL = 'ws-stelle:' + location.pathname + location.search;
|
||||
|
||||
function merken() {
|
||||
try {
|
||||
var y = window.scrollY || document.documentElement.scrollTop || 0;
|
||||
if (y < MINDEST_PX) { sessionStorage.removeItem(SCHLUESSEL); return; }
|
||||
sessionStorage.setItem(SCHLUESSEL, JSON.stringify({ y: Math.round(y), am: Date.now() }));
|
||||
} catch (e) { /* Kein Speicher -> dann eben ohne. */ }
|
||||
}
|
||||
|
||||
/* MEHRERE ANLÄSSE, NICHT NUR EINER.
|
||||
|
||||
`beforeunload` feuert auf iOS oft gar nicht, `pagehide` dafür
|
||||
zuverlässig; `visibilitychange` fängt den Fall ab, dass jemand die
|
||||
App in den Hintergrund schiebt und das Gerät sie später beendet.
|
||||
Dreimal dasselbe zu schreiben ist hier billiger als ein Fall, in
|
||||
dem nichts gemerkt wird. */
|
||||
window.addEventListener('pagehide', merken);
|
||||
window.addEventListener('beforeunload', merken);
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
if (document.visibilityState === 'hidden') merken();
|
||||
});
|
||||
/* Und der Zurück-Knopf der Kopfleiste: Er ruft `history.back()`, und
|
||||
dabei ist `pagehide` je nach Browser zu spät dran. */
|
||||
document.addEventListener('click', function (e) {
|
||||
var a = e.target && e.target.closest
|
||||
&& e.target.closest('a[href], .zurueck-knopf, .zurueck');
|
||||
if (a) merken();
|
||||
}, true);
|
||||
|
||||
/* ---- Und zurück ------------------------------------------------- */
|
||||
|
||||
function kamVonZurueck() {
|
||||
try {
|
||||
var e = performance.getEntriesByType('navigation')[0];
|
||||
if (e && e.type) return e.type === 'back_forward';
|
||||
/* Ältere Browser: die alte Zählweise (2 = TYPE_BACK_FORWARD). */
|
||||
return performance.navigation && performance.navigation.type === 2;
|
||||
} catch (f) { return false; }
|
||||
}
|
||||
|
||||
function wiederherstellen() {
|
||||
var roh;
|
||||
try { roh = sessionStorage.getItem(SCHLUESSEL); } catch (e) { return; }
|
||||
if (!roh) return;
|
||||
var stand;
|
||||
try { stand = JSON.parse(roh); } catch (e) { return; }
|
||||
if (!stand || typeof stand.y !== 'number') return;
|
||||
if (Date.now() - (stand.am || 0) > ALTER_MS) {
|
||||
try { sessionStorage.removeItem(SCHLUESSEL); } catch (f) { /* egal */ }
|
||||
return;
|
||||
}
|
||||
|
||||
var bis = Date.now() + FRIST_MS;
|
||||
var abgebrochen = false;
|
||||
/* WER SELBST SCROLLT, GEWINNT. `wheel`, `touchstart` und die
|
||||
Tastatur -- alle drei, weil es alle drei Arten gibt, eine Seite
|
||||
zu bewegen. */
|
||||
var aufhoeren = function () { abgebrochen = true; };
|
||||
window.addEventListener('wheel', aufhoeren, { passive: true, once: true });
|
||||
window.addEventListener('touchstart', aufhoeren, { passive: true, once: true });
|
||||
window.addEventListener('keydown', aufhoeren, { once: true });
|
||||
|
||||
(function versuchen() {
|
||||
if (abgebrochen) return;
|
||||
var hoch = Math.max(
|
||||
document.body ? document.body.scrollHeight : 0,
|
||||
document.documentElement ? document.documentElement.scrollHeight : 0);
|
||||
/* Reicht die Höhe schon? Dann hin und fertig. */
|
||||
if (hoch >= stand.y + window.innerHeight * 0.5) {
|
||||
window.scrollTo(0, stand.y);
|
||||
/* NOCH EINMAL IM NÄCHSTEN BILD. Manche Listen wachsen beim
|
||||
Zeichnen noch ein Stück (Bilder, Schriften), und dann sitzt
|
||||
der erste Sprung ein paar Pixel daneben. */
|
||||
requestAnimationFrame(function () {
|
||||
if (!abgebrochen) window.scrollTo(0, stand.y);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (Date.now() > bis) return; /* Aufgeben ist auch eine Antwort. */
|
||||
requestAnimationFrame(versuchen);
|
||||
})();
|
||||
}
|
||||
|
||||
if ('scrollRestoration' in history) {
|
||||
/* Wir machen es selbst -- sonst springt der Browser erst nach oben
|
||||
und wir gleich danach wieder hinunter, und das sieht man. */
|
||||
history.scrollRestoration = 'manual';
|
||||
}
|
||||
|
||||
if (kamVonZurueck()) {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', wiederherstellen);
|
||||
} else {
|
||||
wiederherstellen();
|
||||
}
|
||||
} else {
|
||||
/* Ein frisch geöffneter Bereich fängt oben an -- und die alte
|
||||
Stelle wird vergessen, damit sie nicht in einer halben Stunde
|
||||
überraschend zuschlägt. */
|
||||
try { sessionStorage.removeItem(SCHLUESSEL); } catch (e) { /* egal */ }
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user