frontend: Pad einbetten — drei Ansichten mit Splitter, Spiegel bleibt
Das Einbetten ist möglich, ohne D25 zu opfern. Nachgemessen zuerst, ob der
Server es überhaupt zulässt: pad.hostsharing.net sendet kein
`X-Frame-Options` und keine CSP mit `frame-ancestors`, und im Versuch baute das
Pad in einem fremdstämmigen Rahmen seine inneren Editorframes auf
(`contentWindow.length === 2` = ace_outer/ace_inner), samt Werkzeugleiste,
heiler Einrückung und lebender Socket-Verbindung.
Einbetten heißt aber nicht Ersetzen: Ein cross-origin-iframe gibt keinen
DOM-Zugriff, ein ersetztes Textfeld kostete also beide Richtungen von D25
(Alt+Klick -> Zeile, Cursor-Zeile -> Knoten). Deshalb drei Ansichten, reihum
über einen Wähler in der Editor-Titelzeile:
- Pad und Text, geteilt durch einen eigenen Splitter (Mechanik und Idiom vom
Legenden-Splitter aus D26: von der Spiegelseite gezogen, Doppelklick setzt
zurück, `--pcol`/`--prow` getrennt gehalten und persistiert). Der Spiegel darf
schmal werden und trägt weiter die Sprünge — die arbeiten auf unserem
eigenen `<textarea>`.
- nur Pad — Spiegel ausgeblendet; `revealEditor()` schaltet bei einem Sprung
auf „beide", sonst zeigte der Sprung ins Nichts.
- nur Text — wie bisher, kein Rahmen.
Ein Wähler statt dreier Knöpfe, weil die Titelzeile schon Dokument, Pad, Neu
laden, Kopieren, Legende und Fensterknöpfe trägt (mobil dreifach eng, D17) —
derselbe Reihum-Griff wie beim Modus-Wähler dort. Der Zustand steckt im Symbol
(geteilt / links gefüllt / rechts gefüllt), der Tooltip nennt ihn im Klartext.
Der Rahmen bekommt nur sichtbar ein `src`, sonst `about:blank`. Das ist kein
Geiz um Bytes: Ein geladenes Pad verbindet sich per Socket und macht dich in
dessen Anwesenden-Liste sichtbar. „Nur Text" ist damit die Ansicht, die nichts
von dir verrät.
Zwei Dinge, die beim Prüfen auffielen und behoben sind:
- Eine überzählige `}` ließ das Modul gar nicht laden. Die Messung sah trotzdem
plausibel aus, weil die abgefragten Werte die statischen HTML-Vorgaben waren —
seither prüft jede Messung zuerst, ob überhaupt Knoten gerendert sind, und
`node --check` läuft vor dem Blick in den Browser.
- In „nur Pad" war der Spiegel weiterhin sichtbar (sogar breiter als das Pad):
die Regel `.src-area.pv-pad>textarea{display:none}` fehlte.
Bleibender Preis: `Set-Cookie: token=…; SameSite=Lax`. Das Cookie ist Etherpads
Autoren-Identität und wird im fremdstämmigen Rahmen nicht mitgesendet — man ist
bei jedem Laden ein neuer Autor. Nur serverseitig zu beheben
(`cookie.sameSite: "None"`), nicht in Werkbaum. Steht in D31.
Auf kleinem Bildschirm nachgemessen statt geschätzt: bei 375x812 bleiben Pad
317 px und Spiegel 180 px, per Splitter verschiebbar — brauchbar, also keine
Sonderregel für Mobil.
SPEC §9 und D31 nachgezogen; 5 neue i18n-Schlüssel in allen 9 Sprachen.
This commit is contained in:
mhoennig
+49
-26
@@ -1105,32 +1105,7 @@ Link baut — Werkbaum legt von sich aus kein Pad an.
|
||||
**Verworfene und aufgeschobene Alternativen:**
|
||||
- **`?sourceUrl=` um wiederholtes Abrufen erweitern** — hätte bestehenden Links
|
||||
ungefragt Requests verpasst und D23 seine klare Semantik gekostet.
|
||||
- **Das Pad als `<iframe>` einbetten** (aufgeschoben, nicht verworfen). Ob der
|
||||
Server das überhaupt zulässt, ist **nachgemessen**: `pad.hostsharing.net`
|
||||
sendet **kein** `X-Frame-Options` und keine CSP mit `frame-ancestors`, und im
|
||||
Versuch hat das Pad in einem fremdstämmigen Rahmen seine inneren Editorframes
|
||||
aufgebaut (`contentWindow.length === 2`, das sind `ace_outer`/`ace_inner`),
|
||||
samt Werkzeugleiste, heiler Einrückung und lebender Socket-Verbindung
|
||||
(Anwesenden-Zähler). Technisch geht es also.
|
||||
|
||||
Zwei Preise. Erstens **`Set-Cookie: token=…; SameSite=Lax`**: Dieses Cookie ist
|
||||
Etherpads Autoren-Identität und wird in einem fremdstämmigen Rahmen **nicht
|
||||
mitgesendet** (Safari blockt Dritt-Cookies grundsätzlich, Chrome je nach
|
||||
Einstellung). Bearbeiten geht, aber man ist bei jedem Laden ein neuer Autor —
|
||||
Name und Farbe halten nicht. Reparieren lässt sich das nur serverseitig
|
||||
(`cookie.sameSite: "None"` in Etherpads `settings.json`), nicht in Werkbaum.
|
||||
Zweitens: Einbetten heißt das **Textpanel ersetzen**, und damit fallen **beide**
|
||||
Richtungen von D25 weg — kein Alt+Klick → Zeile, keine Cursor-Zeile → Knoten,
|
||||
weil ein cross-origin-iframe keinen DOM-Zugriff erlaubt. Bei 75 Knoten ist das
|
||||
die Orientierung.
|
||||
|
||||
Der Ausweg, der sich beim Messen zeigte: das schreibgeschützte Textfeld
|
||||
**behalten** und das Pad daneben stellen. Dann bleibt der Spiegel die Fläche
|
||||
zum Hinschauen (Alt+Klick und Cursor-Synchronisierung arbeiten auf unserem
|
||||
eigenen `<textarea>`), das Pad ist die Fläche zum Schreiben. Preis ist
|
||||
Bildschirmfläche; auf kleinem Bildschirm (D17) sind es dann drei Bereiche.
|
||||
Der Knopf „im Pad bearbeiten" ist bis dahin die kleine Lösung desselben
|
||||
Bedürfnisses; das Einbetten bleibt möglich, weil die Pad-URL vorliegt.
|
||||
- **Das Pad einbetten** — nicht verworfen, sondern gebaut; siehe Nachtrag unten.
|
||||
- **Echter Etherpad-Client** (socket.io + Easysync-Changesets): Rettet D25 und
|
||||
erlaubt Schreiben aus Werkbaum heraus, kostet aber zwei **Laufzeit**-
|
||||
Abhängigkeiten und damit „eine self-contained Datei ohne
|
||||
@@ -1141,3 +1116,51 @@ Link baut — Werkbaum legt von sich aus kein Pad an.
|
||||
- **Etherpads HTTP-API** (`/api/1/getText?apikey=…`) — der API-Schlüssel ist ein
|
||||
Administrationsschlüssel für **alle** Pads der Instanz und hat in einer
|
||||
Client-Anwendung nichts zu suchen. Der Export-Endpunkt braucht ihn nicht.
|
||||
|
||||
**Nachtrag — das Pad wird eingebettet, der Textspiegel bleibt daneben.**
|
||||
Ob der Server das Einbetten zulässt, war die erste Frage. Nachgemessen:
|
||||
`pad.hostsharing.net` sendet **kein** `X-Frame-Options` und keine CSP mit
|
||||
`frame-ancestors`, und im Versuch hat das Pad in einem fremdstämmigen Rahmen
|
||||
seine inneren Editorframes aufgebaut (`contentWindow.length === 2`, das sind
|
||||
`ace_outer`/`ace_inner`) — samt Werkzeugleiste, heiler Einrückung und lebender
|
||||
Socket-Verbindung (der Anwesenden-Zähler sprang auf 2). Technisch geht es also.
|
||||
|
||||
**Aber Einbetten heißt nicht Ersetzen.** Der naheliegende Schritt wäre, das
|
||||
Textfeld durch den Rahmen zu ersetzen. Das kostete **beide** Richtungen von D25
|
||||
— kein Alt+Klick → Zeile, keine Cursor-Zeile → Knoten —, weil in einen
|
||||
cross-origin-iframe kein DOM-Zugriff führt. Bei 75 Knoten ist das die
|
||||
Orientierung. Deshalb **drei Ansichten** statt einer Entscheidung, reihum über
|
||||
einen Wähler in der Editor-Titelzeile:
|
||||
|
||||
- **Pad und Text**, geteilt durch einen eigenen Splitter (Idiom und Mechanik wie
|
||||
beim Legenden-Splitter aus D26: von der Spiegelseite gezogen, Doppelklick
|
||||
setzt zurück, `--pcol`/`--prow` getrennt gehalten und persistiert). Der Spiegel
|
||||
darf schmal werden — er trägt weiter die Sprünge, denn die arbeiten auf
|
||||
**unserem** `<textarea>`.
|
||||
- **nur Pad** — der Spiegel ist ausgeblendet. Ein Sprung aus dem Diagramm holt
|
||||
ihn selbst zurück, so wie `revealEditor()` ein zugeklapptes Panel aufklappt
|
||||
(D25). Ohne das zeigte der Sprung ins Nichts.
|
||||
- **nur Text** — wie bisher, kein Rahmen.
|
||||
|
||||
**Ein Wähler statt dreier Knöpfe:** Die Editor-Titelzeile trägt schon Dokument,
|
||||
Pad, Neu laden, Kopieren, Legende und die Fensterknöpfe; auf kleinem Bildschirm
|
||||
(D17) ist sie dreifach eng. Derselbe Reihum-Griff wie beim Modus-Wähler dort. Der
|
||||
Zustand steckt im Symbol (geteilter Rahmen / links gefüllt / rechts gefüllt), der
|
||||
Tooltip nennt ihn im Klartext.
|
||||
|
||||
**Der Rahmen wird nur geladen, wenn er sichtbar ist** (`about:blank` sonst). Das
|
||||
ist kein Geiz um Bytes: Ein geladenes Pad verbindet sich per Socket und macht
|
||||
dich in dessen Anwesenden-Liste sichtbar. „Nur Text" ist damit die Ansicht, die
|
||||
nichts von dir verrät — und die Voreinstellung „beide" ist eine bewusste
|
||||
Entscheidung, weil wer `?etherpad=` aufruft, das Pad auch will.
|
||||
|
||||
**Der Preis, der bleibt: `Set-Cookie: token=…; SameSite=Lax`.** Dieses Cookie ist
|
||||
Etherpads Autoren-Identität und wird in einem fremdstämmigen Rahmen **nicht
|
||||
mitgesendet** (Safari blockt Dritt-Cookies grundsätzlich, Chrome je nach
|
||||
Einstellung). Bearbeiten geht, aber man ist bei jedem Laden ein neuer Autor —
|
||||
Name und Farbe halten nicht. Reparieren lässt sich das nur **serverseitig**
|
||||
(`cookie.sameSite: "None"` in Etherpads `settings.json`), nicht in Werkbaum.
|
||||
|
||||
Auf kleinem Bildschirm wurde „beide" nachgemessen statt geschätzt: bei 375 × 812
|
||||
bleiben Pad 317 px und Spiegel 180 px, per Splitter verschiebbar — knapp, aber
|
||||
brauchbar. Eine Sonderregel für Mobil braucht es deshalb nicht.
|
||||
|
||||
@@ -290,6 +290,18 @@ Export- oder `/timeslider`-Pfad wird abgeschnitten.
|
||||
- Deshalb ist das Textfeld für ein solches Dokument **schreibgeschützt** — ein
|
||||
Knopf in der Editor-Titelzeile öffnet das Pad im neuen Tab. Ohne den Schutz
|
||||
verschwände getippter Text beim nächsten Abruf.
|
||||
- Das Pad kann **im Editor-Panel eingebettet** werden. Ein Wähler in der
|
||||
Titelzeile schaltet reihum zwischen drei Ansichten: **Pad und Text** (beide,
|
||||
durch einen eigenen **Splitter** frei geteilt — Doppelklick setzt zurück),
|
||||
**nur Pad** und **nur Text**. Die Aufteilung wird für nebeneinander und
|
||||
gestapelt getrennt gehalten und bleibt erhalten.
|
||||
- Der schmal gezogene Textspiegel behält seinen Zweck: Der Sprung zwischen
|
||||
Diagramm und Text (§9) arbeitet auf ihm. In „nur Pad" ist er ausgeblendet —
|
||||
ein Sprung holt ihn dann selbst zurück, so wie er ein zugeklapptes
|
||||
Editor-Panel aufklappt.
|
||||
- Der Rahmen wird **nur geladen, wenn er sichtbar ist**. Ein geladenes Pad
|
||||
verbindet sich und zeigt dich in dessen Anwesenden-Liste; „nur Text" ist
|
||||
damit die Ansicht, die nichts von dir verrät.
|
||||
- Geholt wird **auf Knopfdruck**, nicht selbsttätig: Ein Neu-laden-Knopf neben
|
||||
dem Pad-Knopf holt den aktuellen Stand. Etherpad **drosselt** den Export
|
||||
(serienmäßig 10 Abrufe je 90 s und IP); ein Hintergrund-Takt läuft dagegen an
|
||||
|
||||
@@ -65,7 +65,9 @@
|
||||
- [x] Watch a shared Etherpad — it merges, we render (S)
|
||||
- [x] Load the pad's plain-text export (XS)
|
||||
- [x] Reload on demand (XS) %% a timer only trips Etherpad's rate limit
|
||||
+ [?] Embed the pad beside the diagram (M) %% costs the jump to the line
|
||||
- [x] Embed the pad, keep the text mirror beside it (M)
|
||||
- [x] Three views: pad and text, pad only, text only (S)
|
||||
- [x] Splitter between pad and mirror (XS)
|
||||
- [ ] Git as the shared store (L)
|
||||
| [ ] A file in a repository, changed by pull request (S) %% works today, no code
|
||||
| [?] The backend commits every change (L)
|
||||
|
||||
Reference in New Issue
Block a user