Changes in src/assets/js/mod/read.js [88838bc:77019fa] in Klonkt

File:

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

src/assets/js/mod/read.js

@@ -30 +30 @@
  * scrollen, en cmd/ctrl-klik hoort de browser zelf af te handelen.
  */
+
+// ── Paginamodus ─────────────────────────────────────────────────────────────
+/**
+ * Elk bericht een paneel dat zelf scrollt; tussen berichten ga je met knoppen.
+ *
+ * Robins voorstel (20-8) nadat het namaken van iOS-momentum niet lukte, en dat
+ * is de winst: in dit model DOET het scrollgevoel er niet toe. Er is geen
+ * momentum om na te bouwen en geen snap die vangt.
+ *
+ * Hoe het werkt:
+ *  - lenis.stop() zet het scrollen van de STROOM stil. Lenis vangt dan wiel en
+ *    vinger af (hij preventDefault't in onVirtualScroll), dus je kunt niet meer
+ *    tussen berichten door scrollen.
+ *  - data-lenis-prevent op elk paneel houdt de scroll BINNEN een bericht
+ *    ongemoeid. Dat werkt ook terwijl Lenis gestopt is, want die controle staat
+ *    in zijn bron vóór de gestopt-controle. Nagekeken in de dist, niet gehoopt.
+ *  - Bewegen tussen panelen gaat met lenis.scrollTo(..., { force: true }), want
+ *    force is precies de uitzondering die een gestopte Lenis toch laat scrollen.
+ *
+ * Geldt waar een bericht een eigen scherm heeft: op mobiel altijd, op desktop
+ * als de site dat instelt (reader_full_page). Buiten die modus verandert er
+ * niets -- dan is Lenis gewoon aan en scrol je vrij.
+ */
+/**
+ * PAGINAMODUS STAAT UIT -- maar de code blijft staan (Robin, 20-8: "weghalen
+ * maar bewaren, voor als ik het later weer wil").
+ *
+ * Wat het is: elk bericht een paneel van een scherm dat zelf scrolt, met twee
+ * balken om ertussen te navigeren en de stroomscroll vastgezet. Gebouwd omdat
+ * het namaken van iOS-momentum niet lukte; in dit model doet het scrollgevoel er
+ * namelijk niet toe. Mobiel is nu terug op systeemscroll met snap, en dat is wat
+ * er ook stond voordat we dit probeerden.
+ *
+ * Aanzetten: deze constante op true. Dan komen de balken terug (CSS hangt aan
+ * body.is-paged), stopt Lenis de stroomscroll en scrollen de panelen zelf.
+ */
+const PAGINAMODUS = false;
+
+function paginaModus() {
+  return PAGINAMODUS && OP_TOUCH.matches && document.body.dataset.feedView === 'reader';
+}
+
+function panelen() {
+  return [...document.querySelectorAll('.feed-reader .read-post')];
+}
+
+/** Welk paneel vult nu het scherm? Het eerste waarvan de bovenkant niet voorbij is. */
+function huidigIndex() {
+  const P = panelen();
+  for (let i = 0; i < P.length; i++) {
+    if (P[i].getBoundingClientRect().top > 8) return Math.max(0, i - 1);
+  }
+  return Math.max(0, P.length - 1);
+}
+
+function gaNaar(i) {
+  const P = panelen();
+  const doel = P[Math.max(0, Math.min(P.length - 1, i))];
+  if (!doel) return;
+  if (lenis) lenis.scrollTo(doel, { force: true });
+  else doel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  setTimeout(zetBalken, 80);
+}
+
+/**
+ * Omhoog vanaf het EERSTE bericht brengt je naar de header.
+ *
+ * In paginamodus staat Lenis stil, dus de pagina scrolt niet meer met je vinger
+ * -- en dan is alles boven het eerste bericht onbereikbaar. Robin liep daar
+ * tegenaan (20-8): "ik kan niet meer terug scrollen naar de header". De
+ * omhoog-knop is daar de enige weg naartoe, dus die krijgt er een trede bij.
+ */
+function gaOmhoog() {
+  const i = huidigIndex();
+  if (i > 0) { gaNaar(i - 1); return; }
+  if (lenis) lenis.scrollTo(0, { force: true });
+  else window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+/**
+ * Welke balk hoort er te staan? Bovenaan de pagina is er niets boven je, dus dan
+ * geen bovenbalk. Buiten paginamodus staan ze allebei niet -- de CSS verbergt ze
+ * daar al, maar hidden houdt ze ook uit de toetsenbordvolgorde.
+ */
+function zetBalken() {
+  const boven = document.getElementById('read-prev');
+  const onder = document.getElementById('read-next-nav');
+  const aan = paginaModus();
+  // De bovenbalk hoort NOOIT over de header te liggen. Hij verscheen al zodra je
+  // een paar pixels scrolde, en dekte dan de avatar, de omschrijving en de
+  // weergaveknoppen af (Robins schermafbeelding, 20-8). Nu komt hij pas als het
+  // eerste bericht de bovenrand van het scherm heeft bereikt -- dan is de header
+  // voorbij en is er ook echt iets om naar terug te gaan.
+  const eerste = panelen()[0];
+  const headerNogInBeeld = eerste ? eerste.getBoundingClientRect().top > 4 : true;
+  if (boven) boven.hidden = !aan || headerNogInBeeld;
+  if (onder) onder.hidden = !aan;
+  if (onder && aan) onder.style.bottom = onderChroom() + 'px';
+}
+
+/**
+ * Hoe hoog staat de onderrand van het scherm werkelijk vol?
+ *
+ * De onderbalk stond op een geraden 4.75rem boven de onderkant, en dan zweeft
+ * hij: soms een kier boven de speler, soms er half achter. De tabbalk en de
+ * mini-speler hebben allebei een eigen hoogte, ze stapelen op mobiel, en de
+ * speler komt en gaat. Dus meten in plaats van gokken: hoe ver ligt de BOVENKANT
+ * van het hoogste vaste element boven de onderrand van het venster?
+ */
+function onderChroom() {
+  // .bottom-tab-fab staat erbij omdat de Write-knop BOVEN de tabbalk uitsteekt:
+  // meet je alleen de balk, dan legt onze balk zich over die knop heen (Robins
+  // schermafbeelding, 20-8).
+  const kandidaten = ['.bottom-tab', '.bottom-tab-fab', '#pcms-audio-player'];
+  let hoogste = 0;
+  kandidaten.forEach((sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return;
+    const st = getComputedStyle(el);
+    if (st.display === 'none' || st.visibility === 'hidden') return;
+    const r = el.getBoundingClientRect();
+    if (r.height <= 0) return;
+    hoogste = Math.max(hoogste, window.innerHeight - r.top);
+  });
+  return Math.round(hoogste);
+}
+
+function pasPaginaModusToe() {
+  const aan = paginaModus();
+  document.body.classList.toggle('is-paged', aan);
+  panelen().forEach((a) => {
+    if (aan) a.setAttribute('data-lenis-prevent', '');
+    else a.removeAttribute('data-lenis-prevent');
+  });
+  if (lenis) { if (aan) lenis.stop(); else lenis.start(); }
+  zetBalken();
+}
 
 /**
@@ -73 +210 @@
   const sel = window.getSelection && window.getSelection();
   if (sel && String(sel).trim()) return;
+
   const slug = art.dataset.slug;
   if (!slug) return;
@@ -115 +253 @@
 
 let bezig = false;          // loopt er een gebaar of een uitloop?
+let ooitGescrold = false;   // snappen begint UIT, zie zetSnappen()
 let rustTimer = null;
 
@@ -143 +282 @@
  */
 const OP_DESKTOP = window.matchMedia('(hover: hover) and (pointer: fine)');
+// PROEF (20-8): Lenis ook op touch. Robin meldde op mobiel drie dingen -- de
+// header niet zichtbaar bij laden, snappen dat soms te ver gaat, en horizontaal
+// kunnen scrollen. De eerste twee komen van de NATIVE snap: die vangt al bij het
+// laden, en zijn uitloop vliegt bij een flick over een grens heen. Lenis zet de
+// native snap uit en doet het zelf, dus die twee kunnen ermee verdwijnen.
+//
+// De prijs is echt: syncTouch betekent dat Lenis het VINGERSCROLLEN overneemt
+// van iOS -- momentum, rubber-band en het wegschuiven van de adresbalk worden
+// dan een benadering in JavaScript. De makers waarschuwen daar zelf voor op
+// iOS < 16. Dit staat er dus als proef, niet als besluit: voelt het niet goed,
+// dan is OP_TOUCH weer false zetten de hele terugweg.
+const OP_TOUCH = window.matchMedia('(hover: none) and (pointer: coarse)');
 const VENDOR_V = 1;   // ophogen als de bestanden in /assets/js/vendor wijzigen
 
@@ -149 +300 @@
 
 async function startLenis() {
-  if (lenis || !OP_DESKTOP.matches) return;
+  // DESKTOP EN TOUCH ALLEBEI. Er heeft hier een tijd gestaan dat mobiel terug was
+  // op de systeemscroll; dat klopte niet meer met de regel hieronder, die
+  // syncTouch juist AANzet op touch. Reden dat Lenis ook op de telefoon meedraait:
+  // zijn snap heeft zijn scroll-gebeurtenissen nodig om te kunnen timen.
+  if (lenis || !(OP_DESKTOP.matches || OP_TOUCH.matches)) return;
   const [L, S] = await Promise.all([
     import(`/assets/vendor/lenis.mjs?v=${VENDOR_V}`),
@@ -155 +310 @@
   ]);
   lenis = new L.default({
+    /**
+     * Wat Lenis MET RUST LAAT.
+     *
+     * In paginamodus staat Lenis stil en scrolt alleen het paneel van het
+     * bericht zelf. Dat regelde ik eerst met een data-lenis-prevent-attribuut
+     * dat de module op elk paneel zette -- maar dan hangt het scrollen af van of
+     * dat attribuut op tijd en op elk (ook later bijgeladen) paneel staat, en
+     * Robin kon binnen een lang bericht niet scrollen.
+     *
+     * Deze functie stelt dezelfde vraag zonder die afhankelijkheid: is dit een
+     * bericht-paneel? Dan bemoeit Lenis zich er niet mee en scrolt de browser
+     * het zelf -- wat op een telefoon precies is wat je wilt, want dat is de
+     * systeemscroll.
+     */
+    prevent: (node) => !!(node && node.classList
+      && node.classList.contains('read-post')
+      && document.body.classList.contains('is-paged')),
     // Lenis tekent de scrollbeweging zelf, maar STEVIG GEDEMPT (lerp 0.2 in
     // plaats van de standaard 0.1). Reden: een muiswiel scrollt in schokken en
@@ -165 +337 @@
     smoothWheel: true,
     lerp: 0.2,
-    syncTouch: false,   // op touch blijft alles van het systeem
+    // Alleen op touch overneemt hij het vingerscrollen; op desktop hoeft dat niet.
+    syncTouch: OP_TOUCH.matches,
+    // Twee touch-knoppen, en ze doen echt iets anders. Lenis rekent bij het
+    // LOSLATEN eenmalig een doel uit -- afstand = snelheid^touchInertiaExponent
+    // -- en kruipt daar dan naartoe met syncTouchLerp.
+    //
+    //   touchInertiaExponent  hoe VER de flick draagt   (standaard 1.7)
+    //   syncTouchLerp         hoe hard hij REMT         (standaard 0.075)
+    //
+    // Let op: `touchInertiaMultiplier` bestaat NIET in 1.3.26. Lenis slikt
+    // onbekende opties zonder fout, dus zo'n regel lijkt te werken en doet niets.
+    // Controleer een optienaam in src/assets/vendor/lenis.mjs voor je hem zet.
+    //
+    // Robin wilde langer en sneller uitrollen zonder remgevoel, dus de exponent
+    // gaat omhoog (een stevige flick draagt daarmee ruim vier tot zes keer zo
+    // ver) en de lerp gaat juist boven de standaard: hij legt die afstand vlot
+    // af in plaats van er stroperig naartoe te kruipen.
+    ...(OP_TOUCH.matches ? { syncTouchLerp: 0.09, touchInertiaExponent: 2.2 } : {}),
     autoRaf: true,
   });
   snap = new S.default(lenis, {
     type: 'proximity',
-    distanceThreshold: '12%',   // de vangzone, hier WEL instelbaar
-    debounce: 60,               // niet de standaard 500: dat voelt als te laat
-    duration: 0.4,              // in totaal onder de halve seconde
+    // DE VANGZONE. Gemeten op dev: de voet van een bericht (de link naar de
+    // reacties) staat 138 tot 472 pixels boven de bovenkant van het volgende.
+    // Met de oude 12% was de zone 86 pixels op een venster van 720, dus hij hapte
+    // pas ruim onder die voet toe. 55% is ~400 pixels: de zone begint nu rond de
+    // voet, wat Robin vroeg (20-8) -- eerder al snappen, boven de reacties.
+    // Wil je het nog eerder, dan is dit het enige getal dat je hoeft te draaien.
+    distanceThreshold: '55%',
+    // Hoe lang na de laatste scrollbeweging hij mag vangen. De standaard is 500
+    // en dat voelt als te laat. Op touch nog korter dan op desktop, want daar
+    // eindigt een veeg in een lange, trage staart -- en juist dan wil je dat de
+    // snap er snel bij is in plaats van te wachten tot de laatste pixel stil ligt.
+    //
+    // LET OP DE SPANNING: een vloeiendere uitloop (lagere syncTouchLerp) maakt
+    // die staart langer, en stelt de snap dus uit. Deze twee getallen houden
+    // elkaar in evenwicht; draai je aan de een, kijk dan ook naar de ander.
+    // OP TOUCH JUIST LANG, en dat is het omgekeerde van wat ik vorige ronde deed.
+    // Tussen je vinger loslaten en het op gang komen van de uitloop zit een korte
+    // stilte in de scrollbeweging. Met 25ms viel de snap precies in dat gat: hij
+    // greep op het moment van loslaten en knipte de veeg af -- wat aanvoelt als
+    // "stroef bij het loslaten", en het werd er dan ook erger van. 200ms laat de
+    // uitloop eerst zijn werk doen.
+    // Met een iOS-achtige uitloop duurt de staart lang; te kort wachten laat de
+    // snap midden in de vlucht ingrijpen. 150ms laat hem uitrollen en vangt dan.
+    debounce: OP_TOUCH.matches ? 150 : 60,
+    // Op touch korter: een telefoon vraagt om directer antwoord dan een muis, en
+    // de snap komt daar aan het eind van een lange uitloop -- dan mag hij kort.
+    duration: OP_TOUCH.matches ? 0.18 : 0.4,
     // Vlot weg, dan steeds langzamer aankomen (Robin, 20-8). easeOutQuart: op de
     // helft van de tijd is 94% van de weg af, en de rest dempt zacht uit.
@@ -179 +392 @@
     easing: (t) => 1 - Math.pow(1 - t, 4),
   });
-  // Het snappunt is de bovenkant van elk bericht. Het laatste doet niet mee:
-  // zijn bovenkant is niet te bereiken, er zit te weinig pagina onder.
+  // Het snappunt is de bovenkant van elk bericht -- ook van het laatste. Dat
+  // deed eerder niet mee omdat zijn bovenkant onbereikbaar was; sinds het
+  // laatste bericht in CSS een volle schermhoogte krijgt, kan hij wel.
   const berichten = [...document.querySelectorAll('.feed-reader .read-post')];
-  berichten.slice(0, -1).forEach((a) => snap.addElement(a, { align: 'start' }));
+  berichten.forEach((a) => snap.addElement(a, { align: 'start' }));
+
+  // ALLEEN VOORUIT VANGEN. Dit hoort bij de ruime zone hierboven en is niet
+  // optioneel: lenis/snap kiest het DICHTSTBIJZIJNDE punt en zijn drempel geldt
+  // naar twee kanten. Scroll je een lang bericht in en stop je 300 pixels onder
+  // de bovenkant, dan is die bovenkant het dichtstbij -- en met een zone van 400
+  // wordt je teruggetrokken. Dat is precies de klacht "ik kan niet scrollen
+  // binnen een lang bericht", en met de oude zone van 86 pixels viel het alleen
+  // niet op.
+  //
+  // Dus: een doel ACHTER je slaan we over. Ligt er een punt voor je binnen de
+  // zone, dan gaan we daarheen; anders gebeurt er niets en scrol je vrij door.
+  // Zo verruimt de zone alleen de kant waar hij bedoeld is.
+  //
+  // Waarom niet gewoon de drempel? Omdat lenis/snap alleen de dichtstbijzijnde
+  // kandidaat beoordeelt: zonder deze omleiding houdt de zone vooruit op bij de
+  // helft van de afstand tussen twee berichten, hoe groot je de drempel ook zet.
+  const echtGaNaar = snap.goTo.bind(snap);
+  snap.goTo = (index) => {
+    const punten = snap.computeSnaps();   // zelfde volgorde als goTo intern gebruikt
+    const nu = lenis.scroll;
+    const doel = punten[index];
+    if (doel && doel.value > nu + 2) { echtGaNaar(index); return; }
+    let vooruit = -1;
+    punten.forEach((punt, i) => {
+      if (punt.value > nu + 2 && (vooruit < 0 || punt.value < punten[vooruit].value)) vooruit = i;
+    });
+    if (vooruit < 0) return;
+    if (punten[vooruit].value - nu <= snap.distanceThreshold) echtGaNaar(vooruit);
+  };
   // Native snappen uit: twee mechanismen op dezelfde scroller vechten.
   document.documentElement.style.scrollSnapType = 'none';
@@ -199 +442 @@
 function zetSnappen(aan) {
   if (snap) { if (aan) snap.start(); else snap.stop(); return; }
+  // Zonder Lenis (mobiel) zetten we de CSS-eigenschap om. Hij staat bij het
+  // laden UIT -- dat is de standaardstand van deze variabele -- zodat de browser
+  // niet meteen naar het eerste bericht springt en de header wegvalt. Pas je
+  // eerste gebaar naar beneden zet hem aan.
   const el = document.documentElement;
   const wil = aan ? '' : 'none';
@@ -241 +488 @@
 
 export function init() {
+  // EERST OPRUIMEN, en pas daarna terugvallen als er geen leesstroom is.
+  //
+  // Dit stond andersom, en dat brak het scrollen op de HELE site: navigeerde je
+  // van Lezen naar het beheer, dan viel init() bij de ontbrekende leesstroom
+  // meteen terug -- en bleef Lenis leven EN gestopt (lenis.stop() vangt wiel en
+  // vinger af). Daarna scrolde niets meer, ook niet op pagina's die met Lezen
+  // niets te maken hebben. Robins melding (20-8): "scrollen werkt nu nergens ook
+  // niet in admin panels".
+  //
+  // Opruimen hoort dus bij het VERLATEN van de weergave, niet bij het opzetten
+  // ervan. init() draait bij elke paginawissel, dus dit is de plek.
+  stopLenis();
+  document.body.classList.remove('is-paged');
+  document.querySelectorAll('[data-lenis-prevent].read-post')
+    .forEach((a) => a.removeAttribute('data-lenis-prevent'));
+
   const s = document.getElementById('read-stream');
   if (!s) return;
@@ -253 +516 @@
   // De knop staat in de HTML, 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);
-  }
+  // De terug-naar-boven-knop staat er tijdelijk uit (Robin, 20-8) -- in
+  // paginamodus doet de bovenbalk dat werk al. De code blijft staan zodat hij
+  // met een regel terug is.
+  knop = null;
+  const oudeKnop = document.getElementById('read-top');
+  if (oudeKnop) oudeKnop.hidden = true;
 
   if (opScroll) {
@@ -270 +534 @@
   // Elke scroll -- van een vinger of van de browser zelf -- houdt het gebaar
   // levend; pas als het stil blijft mag een nieuwe richting gelden.
-  opScroll = () => { if (knop) toonKnop(knop); planRust(); };
+  opScroll = () => {
+    if (knop) toonKnop(knop);
+    planRust();
+    if (document.body.classList.contains('is-paged')) zetBalken();
+  };
   window.addEventListener('scroll', opScroll, { passive: true });
   window.addEventListener('scrollend', rustNu);
@@ -279 +547 @@
   window.addEventListener('keydown', opToets);
 
+  const balkBoven = document.getElementById('read-prev');
+  const balkOnder = document.getElementById('read-next-nav');
+  if (balkBoven) balkBoven.onclick = gaOmhoog;
+  if (balkOnder) balkOnder.onclick = () => gaNaar(huidigIndex() + 1);
+
   // Alleen in de leesweergave, en alleen op desktop. Bij elke init() opnieuw
   // beoordelen: van Grid naar Lezen schakelen hoort hem aan te zetten, en
   // wegnavigeren hoort hem op te ruimen.
-  stopLenis();
-  if (document.body.dataset.feedView === 'reader') startLenis();
+  if (document.body.dataset.feedView === 'reader') startLenis().then(pasPaginaModusToe);
+  else pasPaginaModusToe();
+
+
 }