Changeset e46ebaa in Klonkt for src/assets/js/mod/read.js

Timestamp:

08/20/2026 12:54:30 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

48481cd

Parents:

598f090

Message:

Lezen: snappen dat je laat lezen, en geen lege schermen meer

Barts meldingen van 20 augustus, in een stuk of zes rondes bijgesteld. De
uitkomst is korter dan de weg ernaartoe, en die weg is het waard om vast te
leggen omdat ik er twee keer overheen ben geschoten.

SNAPPEN. De regel is nu in drie zinnen te zeggen:

omhoog scrollen nooit snappen -- je zoekt iets terug en bepaalt zelf

waar je stopt

omlaag, ver weg vrij scrollen
omlaag, laatste
150px van een
bericht vangt, en je landt op de bovenkant van het volgende

Er is geen top-zone: de bovenkant van het bericht waar je IN zit is geen
doelwit meer. Dat was de oorspronkelijke klacht -- je las een paar regels
verder en proximity trok je terug naar de bovenrand, waardoor het leek of
het scrollen vastliep. De grens die wel vangt is de onderkant van je huidige
bericht, en dat is hetzelfde punt als de bovenkant van het volgende.

Onderweg twee doodlopende wegen, allebei door Robin gecorrigeerd:

• Eerst zette ik de snap UIT voor berichten langer dan het scherm. Op een telefoon is bijna elk bericht net iets langer dan de viewport, dus daar verdween het snappen overal: op 812px hoog kregen berichten van 1009 en zelfs 839 al geen snap meer.
• Toen probeerde ik de vangzone aan de VOET van het bericht te hangen ("ben je de reacties voorbij"). Bij een kort bericht staat die voet middenin de lege ruimte die min-height maakte, dus de zone begon op een willekeurige plek. Gelukkig ving Robin dat voordat het uitgerold stond.

Het moest dus een getal in pixels zijn, en 150 is dat getal.

GEEN LEGE SCHERMEN MEER. min-height:100svh rekte elk bericht op tot een vol
scherm. Bij een kort bericht gaf dat een halve pagina leegte onder "Replies
and reactions" -- je keek naar niets en moest doorscrollen om te ontdekken
dat er nog iets kwam. Weg dus: berichten hebben hun eigen hoogte (gemeten:
360/1009/839/250 waar het eerst 888/888/888/888 was) en de stroom is gewoon
bericht na bericht. Het snappen hangt aan scroll-snap-align en niet aan die
hoogte, dus dat werkt onveranderd.

VLOEIEND: scroll-behavior:smooth, want zonder dat springt een snap er in een
frame naartoe en voelt het als een hik. Uit bij prefers-reduced-motion.

TERUG NAAR BOVEN, rechtsonder, in twee stappen: eerst naar het begin van DIT
bericht, daarna pas naar de kop van de pagina. Die knop is de enige die naar
een bovenkant mag springen, en hij heeft het snappen daar niet voor nodig --
scrollIntoView stuurt zelf. Nagemeten, juist omdat omhoog-snappen uit staat:
1706 -> 1206, exact de bovenkant.

COVERS nemen de volle kolombreedte met de verhouding intact. De ronde ervoor
haalde het opblazen eruit maar liet kleine afbeeldingen op ware grootte
staan, en dat was als postzegel in een brede kolom te klein.

DE CIRKEL. Lezen blijft daar dood (berichten van anderen), maar een tijdlijn
werkt er juist bij uitstek. Die dwong ik eerst af zodra de site geen
Lezen-site was, en dan kon je in de cirkel geen Grid meer kiezen. Nu is Grid
de landing en staat Tijdlijn ernaast: bij feed_alt_view=timeline altijd, bij
auto op desktop. De cirkel krijgt zijn eigen geheugen terug, met een eigen
sleutel zodat een keuze daar je thuisweergave niet aanraakt.

style.css naar v77 en MOD_V naar 13.

Suite 1165/1165.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• src/assets/js/mod/read.js (modified) (3 diffs)

src/assets/js/mod/read.js

@@ -17 +17 @@
  * cmd/ctrl-klik hoort de browser zelf af te handelen.
  */
+
+/**
+ * Snappen alleen waar het HELPT.
+ *
+ * Elk bericht heeft scroll-snap-align:start en min-height:100svh. Voor een kort
+ * bericht is dat precies goed: het vult het scherm en de volgende klikt netjes
+ * op zijn plek. Voor een LANG bericht is het een val -- je leest naar beneden en
+ * de browser trekt je terug naar de bovenrand, waardoor het scrollen lijkt te
+ * stoppen terwijl je gewoon doorscrollt. Barts melding (20-8).
+ *
+ * "Past dit bericht op het scherm?" is een vraag over gemeten hoogte, en die kan
+ * CSS niet stellen -- vandaar hier. Past het niet, dan gaat de snap eraf en lees
+ * je ononderbroken door tot het volgende bericht wel weer een snappunt is.
+ *
+ * De marge van 4px vangt afrondingsverschillen tussen svh en de echte hoogte;
+ * zonder die speling wipt een bericht dat toevallig exact past heen en weer.
+ */
+/**
+ * Wanneer is de bovenkant van een bericht een snappunt?
+ *
+ * Alleen zolang je er nog NIET voorbij bent. Zit de bovenrand op of onder de
+ * bovenkant van het scherm, dan kom je er nog aan en mag hij vangen. Is hij
+ * eenmaal voorbij -- je leest in het bericht -- dan gaat de snap eraf.
+ *
+ * Robins formulering (20-8), en die is preciezer dan wat ik er eerst van maakte:
+ * "in de post zelf mag er nooit gesnapt worden, ook niet bovenin; enkel de
+ * onderkant mag snappen naar de volgende post, dus daar de bovenkant van".
+ * Precies dat: de onderkant van bericht N is de bovenkant van N+1, en die is een
+ * doelwit omdat je hem nadert. De bovenkant van het bericht waar je IN zit is
+ * dat niet meer, want daar ben je voorbij.
+ *
+ * Zonder deze regel trok proximity je terug naar de bovenrand zodra je een paar
+ * regels verder scrolde, en leek het of het scrollen vastliep.
+ *
+ * De 4px is speling voor afronding: tijdens het snappen zelf loopt top naar 0 en
+ * mag hij niet halverwege afhaken.
+ */
+const SPELING = 4;
+
+/**
+ * En snappen doet alleen mee op de weg NAAR BENEDEN (Robin, 20-8).
+ *
+ * Omhoog scroll je om iets terug te zoeken, en dan is elke vangst een hindernis:
+ * je wilt zelf bepalen waar je stopt. Omlaag lees je door, en dan helpt de
+ * grens juist. Dus bij omhoog gaat de snap er overal af.
+ *
+ * De drempel van 2px is er tegen richtingsruis: tijdens een vloeiende snap
+ * schommelt scrollY een fractie, en zonder speling zou de richting dan heen en
+ * weer klappen -- precies midden in de beweging die net soepel moest zijn.
+ */
+let laatsteY = 0;
+let omlaag = true;
+
+/**
+ * Hoe DICHT bij de grens hij vangt: de onderste VANGZONE pixels van een bericht.
+ *
+ * In pixels, en bewust niet inhoudelijk. Ik probeerde het aan de voet van het
+ * bericht te hangen ("ben je de reacties voorbij"), maar bij een KORT bericht
+ * gaat dat mis: min-height rekt zo'n bericht tot een vol scherm, dus de voet
+ * staat middenin met lege ruimte eronder en de zone begint op een willekeurige
+ * plek. Robin ving dat (20-8) voordat het uitgerold stond.
+ *
+ * Eerst stond dit op 20px en dat was te krap om ooit te vangen. Honderdvijftig
+ * is ruwweg het laatste stukje van een bericht: kom je daarbinnen tot stilstand,
+ * dan trekt hij de streep recht naar de bovenkant van het volgende. Stop je
+ * eerder, dan blijf je gewoon staan.
+ *
+ * Eén getal, dus makkelijk bij te stellen als het onder een duim anders voelt.
+ */
+const VANGZONE = 150;
+
+function ijkEen(art) {
+  const top = art.getBoundingClientRect().top;
+  // Omhoog: nooit. Omlaag: alleen een grens die je NADERT en die binnen de zone
+  // ligt. De ondergrens blijft krap (SPELING): eenmaal voorbij wordt er niet
+  // teruggetrokken, ook niet over een paar pixels.
+  const wil = (!omlaag || top < -SPELING || top > VANGZONE) ? 'none' : '';
+  // Alleen aanraken als het echt verandert: elke stijlwijziging tijdens een
+  // vloeiende scroll is een kans op een hik, zeker op iOS.
+  if (art.style.scrollSnapAlign !== wil) art.style.scrollSnapAlign = wil;
+}
+
+function ijkSnappen() {
+  const y = window.scrollY;
+  if (Math.abs(y - laatsteY) > 2) omlaag = y > laatsteY;
+  laatsteY = y;
+  document.querySelectorAll('.feed-reader .read-post').forEach(ijkEen);
+}
+
+/**
+ * Terug naar boven, en bewust NIET window.scrollTo(0).
+ *
+ * In een stroom wil je terug naar het BEGIN VAN DIT BERICHT als je halverwege een
+ * lang stuk zit, en pas daarna naar de kop van de pagina. Twee keer drukken doet
+ * dus twee verschillende dingen -- dat scheelt op mobiel een halve minuut vegen.
+ */
+function naarBoven() {
+  const zacht = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const gedrag = zacht ? 'smooth' : 'auto';
+  const posts = [...document.querySelectorAll('.feed-reader .read-post')];
+  const huidig = posts.find((a) => {
+    const r = a.getBoundingClientRect();
+    return r.top <= 8 && r.bottom > 8;
+  });
+  // Sta je al bovenaan dit bericht (of bij het eerste), dan naar de paginakop.
+  if (huidig && huidig.getBoundingClientRect().top < -8) {
+    huidig.scrollIntoView({ behavior: gedrag, block: 'start' });
+    return;
+  }
+  window.scrollTo({ top: 0, behavior: gedrag });
+}
+
+/** De knop verschijnt pas als er iets ONDER je ligt om naar terug te keren. */
+function toonKnop(knop) {
+  knop.classList.toggle('is-zichtbaar', window.scrollY > window.innerHeight * 0.6);
+}
 
 let tapX = 0, tapY = 0;
@@ -37 +153 @@
 }
 
+let knop = null;
+let opScroll = null;
+
 export function init() {
   const s = document.getElementById('read-stream');
@@ -47 +166 @@
   s.addEventListener('pointerdown', onPointerDown, { passive: true });
   s.addEventListener('click', onTap);
+
+  // De knop staat in de HTML (read-top.ejs), zodat hij er ook is zonder deze
+  // module -- dan doet hij niets, maar hij springt niet in beeld bij het laden.
+  knop = document.getElementById('read-top');
+  if (knop) {
+    knop.onclick = naarBoven;
+    toonKnop(knop);
+  }
+
+  // Eén luisteraar, en losmaken bij een volgende init(): deze module draait bij
+  // ELKE paginawissel en anders stapelen ze op.
+  if (opScroll) {
+    window.removeEventListener('scroll', opScroll);
+    window.removeEventListener('resize', opScroll);
+  }
+  // Eén keer per frame, niet per scroll-event: scroll vuurt tientallen keren per
+  // seconde en we raken hier de stijl van elk bericht aan.
+  let gepland = false;
+  opScroll = () => {
+    if (knop) toonKnop(knop);
+    if (gepland) return;
+    gepland = true;
+    requestAnimationFrame(() => { gepland = false; ijkSnappen(); });
+  };
+  window.addEventListener('scroll', opScroll, { passive: true });
+  window.addEventListener('resize', opScroll, { passive: true });
+  ijkSnappen();   // ook meteen bij binnenkomst, niet pas bij de eerste scroll
 }