Changeset c581e5e in Klonkt for src

Timestamp:

08/20/2026 07:25:24 AM (3 weeks ago)

Author:

Claude (agent) <aiclaude@…>

Branches:

main

Children:

22d2dba5

Parents:

520c993

git-author:

Robin <roboburr@…> (08/20/2026 02:56:12 AM)

git-committer:

Claude (agent) <aiclaude@…> (08/20/2026 07:25:24 AM)

Message:

proef: lenis ook op touch

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• assets/js/mod/read.js (modified) (4 diffs)
• services/i18n.js (modified) (3 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2556 +2556 @@
    -- want welke van de twee prettiger leest hangt af van wat je schrijft. */
 body[data-reader-pages="1"] .feed-reader .read-post { min-height: 100svh; }
+/* OP MOBIEL ALTIJD, wat de instelling ook zegt (Robin, 20-8). Op een telefoon is
+   een bericht per scherm de vorm die werkt -- je veegt van bericht naar bericht.
+   Op desktop blijft het een keuze, want daar lees je in een kolom naast veel
+   witruimte en is een doorlopende stroom vaak prettiger. */
+@media (hover: none) and (pointer: coarse) {
+    .feed-reader .read-post { min-height: 100svh; }
+}
 
 /* Een lijn tussen twee berichten: zonder grens is een stroom een lange brij. */

src/assets/js/mod/read.js

@@ -143 +143 @@
  */
 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 +161 @@
 
 async function startLenis() {
-  if (lenis || !OP_DESKTOP.matches) return;
+  if (lenis || !(OP_DESKTOP.matches || OP_TOUCH.matches)) return;
   const [L, S] = await Promise.all([
     import(`/assets/vendor/lenis.mjs?v=${VENDOR_V}`),
@@ -165 +177 @@
     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,
+    // TOUCH-SPECIFIEK, want de standaardwaarden voelen op een telefoon traag.
+    //
+    // Waar dat zit is precies aan te wijzen. In Lenis staat
+    // `lerp: d ? syncTouchLerp : 1`, waarbij d "de vinger is net losgelaten"
+    // betekent. Tijdens het SLEPEN is de lerp dus 1 -- de inhoud volgt je vinger
+    // exact, net als iOS, en daar is niets mis mee. De traagheid zit in de glijder
+    // NA het loslaten: die gebruikt syncTouchLerp, en dat staat standaard op
+    // 0.075. Dat dempt zo langzaam uit dat de pagina nog seconden naijlt.
+    //
+    // TWEE KNOPPEN, en ze doen iets anders -- dat verwarde ik eerst:
+    //
+    //   touchInertiaMultiplier   hoe VER een veeg je brengt
+    //   syncTouchLerp            hoe snel de glijder UITDEMPT
+    //
+    // Eerste ronde zette ik de multiplier op 25 (korter dan de standaard 35),
+    // omdat ik "te traag" las als "hij ijlt te lang na". Robin bedoelde het
+    // omgekeerde: een veeg moet je VERDER brengen, zoals op iOS -- daar draagt
+    // een flick een heel eind. Dus juist omhoog, ruim boven de standaard.
+    //
+    // De lerp gaat mee terug naar 0.1: tussen de trage standaard (0.075, dat
+    // seconden naijlt) en de kordate 0.15 in. Met een langere weg af te leggen
+    // mag de demping wat zachter, anders komt hij te abrupt tot stilstand.
+    // Waar we na een paar rondes proberen op uitkwamen, met de betekenis erbij
+    // omdat de tweede knop contra-intuitief is:
+    //
+    //   touchInertiaMultiplier 70   hoe VER een veeg draagt (standaard 35).
+    //                               25 en 45 waren allebei te kort.
+    //   syncTouchLerp 0.05          hoe snel hij zijn doel BENADERT. Hoger = eerder
+    //                               aankomen en dus abrupt stoppen; LAGER = langer
+    //                               onderweg blijven. Robin: "te stroef bij het
+    //                               loslaten, mag echt een tijdje doorscrollen".
+    //                               Dus omlaag, niet omhoog -- 0.15 en 0.1 kapten
+    //                               de uitloop af.
+    // syncTouchLerp 0.25: VIER KEER de vorige waarde, en ruim boven de standaard
+    // van 0.075. Ik heb hem vier rondes lang de verkeerde kant op gedraaid omdat
+    // ik "stroef" las als "hij stopt te vroeg" -- maar het betekende STROPERIG.
+    // Een lage lerp benadert het doel langzaam en geeft dus een kruipende
+    // uitloop; hoog betekent er vlot naartoe. Met de multiplier op 70 blijft de
+    // AFSTAND groot, dus je gaat ver EN snel: dat is hoe een flick op iOS voelt.
+    //
+    // Kort samengevat, want dit is twee keer misgegaan:
+    //   syncTouchLerp hoger  = sneller weg, korter narollen
+    //   multiplier hoger     = verder komen
+    ...(OP_TOUCH.matches ? { syncTouchLerp: 0.25, touchInertiaMultiplier: 70 } : {}),
     autoRaf: true,
   });
@@ -171 +228 @@
     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
+    // 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.
+    debounce: OP_TOUCH.matches ? 200 : 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.

src/services/i18n.js

@@ -33 +33 @@
     'switch.solo': 'Solo',
     'switch.circle': 'Cirkels',
-    'switch.grid': 'Grid', 'switch.reader': 'Lezen', 'switch.timeline': 'Tijdlijn', 'read.to_top': 'Terug naar boven', 'read.pinned': 'Vastgepind', 'asite.reader_full_page': 'Lezen: elk bericht een eigen scherm',
+    'switch.grid': 'Grid', 'switch.reader': 'Lezen', 'switch.timeline': 'Tijdlijn', 'read.to_top': 'Terug naar boven', 'read.pinned': 'Vastgepind', 'asite.reader_full_page': 'Lezen op desktop: elk bericht een eigen scherm (op mobiel altijd)',
     'asite.feed_alt': 'Tweede weergave', 'asite.feed_alt_reader': 'Lezen', 'asite.feed_alt_timeline': 'Tijdlijn', 'asite.feed_alt_auto': 'Lezen op mobiel, Tijdlijn op desktop',
     'switch.reader_solo_only': 'Lezen kan alleen in Solo — in de cirkel staan berichten van anderen',
@@ -1049 +1049 @@
     'switch.solo': 'Solo',
     'switch.circle': 'Circles',
-    'switch.grid': 'Grid', 'switch.reader': 'Reader', 'switch.timeline': 'Timeline', 'read.to_top': 'Back to top', 'read.pinned': 'Pinned', 'asite.reader_full_page': 'Reader: one screen per post',
+    'switch.grid': 'Grid', 'switch.reader': 'Reader', 'switch.timeline': 'Timeline', 'read.to_top': 'Back to top', 'read.pinned': 'Pinned', 'asite.reader_full_page': 'Reader on desktop: one screen per post (always on mobile)',
     'asite.feed_alt': 'Second view', 'asite.feed_alt_reader': 'Reader', 'asite.feed_alt_timeline': 'Timeline', 'asite.feed_alt_auto': 'Reader on mobile, Timeline on desktop',
     'switch.reader_solo_only': 'Reader is Solo only — a circle shows other people\u2019s posts',
@@ -2056 +2056 @@
     'switch.solo': 'Solo',
     'switch.circle': 'Zirkel',
-    'switch.grid': 'Raster', 'switch.reader': 'Lesen', 'switch.timeline': 'Zeitleiste', 'read.to_top': 'Nach oben', 'read.pinned': 'Angeheftet', 'asite.reader_full_page': 'Lesen: ein Bildschirm pro Beitrag',
+    'switch.grid': 'Raster', 'switch.reader': 'Lesen', 'switch.timeline': 'Zeitleiste', 'read.to_top': 'Nach oben', 'read.pinned': 'Angeheftet', 'asite.reader_full_page': 'Lesen am Desktop: ein Bildschirm pro Beitrag (mobil immer)',
     'asite.feed_alt': 'Zweite Ansicht', 'asite.feed_alt_reader': 'Lesen', 'asite.feed_alt_timeline': 'Zeitleiste', 'asite.feed_alt_auto': 'Lesen mobil, Zeitleiste am Desktop',
     'switch.reader_solo_only': 'Lesen gibt es nur in Solo — im Zirkel stehen Beitr\u00e4ge anderer',

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=83">
+<link rel="stylesheet" href="/assets/css/style.css?v=84">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -505 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 21;
+  var MOD_V = 29;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module