Changeset a505f31 in Klonkt

Timestamp:

08/20/2026 02:27:56 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

88838bc

Parents:

d8f8f07

Message:

Lezen: Lenis voor het snappen op desktop, plus twee kleine dingen

WAAROM LENIS, en dat is niet het vloeiende scrollen: de DUUR van een snap is
met native scroll-snap niet in te stellen -- die zit in de browser. Robin
vroeg om een snellere snap, en dat was declaratief onmogelijk. Lenis' snap-
pakket geeft ons duration, easing, distanceThreshold en debounce.

distanceThreshold 12% de vangzone (native: browsereigen, ~200-300px)
duration 0.4s in totaal onder de halve seconde
easing easeOutQuart -- op de helft van de tijd is 94% van de

weg af, daarna zacht uitdempen. Bewust niet
Lenis' standaard easeOutExpo: die schiet weg
en kruipt zo lang na dat het lijkt of hij niet
afmaakt.

debounce 60ms niet de standaard 500; dat voelt als te laat

ALLEEN OP DESKTOP (hover: hover en pointer: fine). Op touch doet Lenis van
zichzelf niets -- syncTouch staat uit -- en is het systeem-scrollen al
soepel. Daar blijft de native CSS-snap staan die er nu is, inclusief het
anker van nul hoog en de richtingsschakelaar. Robins keuze: "enkel voor
desktop, dat is prima, logisch dat het niet op mobiel kan".

Omhoog niet snappen gaat met Lenis via snap.stop()/start(), een stuk
schoner dan de CSS-eigenschap omzetten. Beide wegen delen dezelfde
richtingsdetectie uit wiel, vinger en toets.

NOG NIET UIT: smoothWheel. Dat kwam er na het snappen bij, en het is de kant
die oppassen vraagt -- een Mac-trackpad heeft zijn EIGEN momentum en Lenis'
demping komt daar bovenop. Vandaar lerp 0.2 in plaats van de standaard 0.1.
Robin vond dat op 20-8 nog steeds te zweverig, dus dat getal moet nog omhoog
of smoothWheel moet terug naar false. Die tweede stand werkte ook; dan doet
Lenis alleen de snap. Dat staat zo in het commentaar bij de instellingen,
zodat de volgende sessie niet hoeft te raden waar de knop zit.

Gevendored in src/assets/js/vendor (Lenis 1.3.26, MIT, 43KB samen), want de
CSP staat geen CDN toe. Dynamisch geimporteerd, dus mobiel haalt het niet
op. VENDOR_V ophogen als die bestanden wijzigen. De CSP hoefde niet aan:
strict-dynamic staat een import vanuit een vertrouwde module toe.

TWEE KLEINE DINGEN uit dezelfde ronde:

• De terug-naar-boven-knop wijkt voor de mini-speler. Die kwam er anders bovenop te liggen (schermafbeelding). body.has-audio-player bestond al en wordt door audio-player.js gezet, dus dit volgt vanzelf.
• Vastgepind is nu zichtbaar in de leestitel, met hetzelfde pin-icoon als in de tijdlijn. In de leesstroom staat een gepind bericht bovenaan zonder dat je ziet waarom. Nagekeken met een echte pin op dev.

style.css naar v82, MOD_V naar 19.

Suite 1169/1169.

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

Location:

src

Files:

• assets/css/style.css (modified) (2 diffs)
• assets/js/mod/read.js (modified) (2 diffs)
• assets/js/vendor/lenis-LICENSE.txt (added)
• assets/js/vendor/lenis-snap.mjs (added)
• assets/js/vendor/lenis.mjs (added)
• services/i18n.js (modified) (3 diffs)
• views/partials/read-article.ejs (modified) (1 diff)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2587 +2587 @@
 .feed-reader .read-head { padding-bottom: .5rem; }
 .feed-reader .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }
+/* Het pin-icoon voor de titel: meeschalend met de kop, maar duidelijk kleiner --
+   het is een markering en geen deel van de titel. */
+.feed-reader .read-pin {
+    display: inline-block;
+    vertical-align: baseline;
+    width: .62em; height: .62em;
+    margin-right: .35em;
+    color: var(--ink-muted);
+}
+.feed-reader .read-pin svg { width: 100%; height: 100%; display: block; }
 /* De titel is een link, maar mag er niet als een link uitzien: dit is een
    leesscherm, geen index. */
@@ -2635 +2645 @@
 @media (min-width: 768px) {
     .read-top { bottom: 1.5rem; right: 1.5rem; }
+}
+/* Staat de mini-speler onderin, dan wijkt de knop daarvoor -- anders komt hij er
+   bovenop te liggen (Robins schermafbeelding, 20-8). body.has-audio-player wordt
+   door audio-player.js gezet zodra de speler zichtbaar is, en weer weggehaald
+   als hij verdwijnt, dus dit volgt vanzelf.
+   Op mobiel staat de speler BOVEN de tabbalk gestapeld, dus daar komt zijn
+   hoogte bovenop de ruimte die er al gereserveerd was. */
+body.has-audio-player .read-top { bottom: calc(env(safe-area-inset-bottom, 0) + 4.75rem + 4.25rem); }
+@media (min-width: 768px) {
+    body.has-audio-player .read-top { bottom: calc(1.5rem + 4.25rem); }
 }
 @media (prefers-reduced-motion: reduce) {

src/assets/js/mod/read.js

@@ -117 +117 @@
 let rustTimer = null;
 
+/**
+ * LENIS, en alleen op desktop.
+ *
+ * Op touch doet Lenis van zichzelf niets (syncTouch staat standaard uit) en is
+ * het systeem-scrollen al soepel -- daar blijft de native CSS-snap staan die
+ * hierboven beschreven is. Robins keuze (20-8): "enkel voor desktop, dat is
+ * prima, logisch dat het niet op mobiel kan".
+ *
+ * WAAROM LENIS HIER STAAT, en dat is niet het vloeiende scrollen: de DUUR van
+ * een snap is met native scroll-snap niet in te stellen -- die zit in de browser.
+ * Lenis' snap-pakket wel: duration, easing, distanceThreshold en debounce zijn
+ * allemaal van ons. Dat was de aanleiding.
+ *
+ * Het vloeiende scrollen (smoothWheel) kwam er daarna bij, en dat is de kant die
+ * OPPASSEN vraagt. Een Mac-trackpad heeft zijn EIGEN momentum, en Lenis'
+ * demping komt daar bovenop -- dubbel gedempt voelt drijverig. Vandaar lerp 0.2
+ * in plaats van de standaard 0.1. Robin vond dat op 20-8 nog steeds te zweverig,
+ * dus dat getal is nog niet uit; zie de opmerking bij de instellingen.
+ *
+ * De stand met `smoothWheel: false` werkte ook, en dan doet Lenis alleen de
+ * snap. Dat is de terugvalpositie als het vloeiende scrollen niet bevalt.
+ *
+ * lenis/snap haakt alleen in op lenis.on('scroll') en roept lenis.scrollTo aan
+ * (nagekeken in de dist), dus die opzet werkt.
+ */
+const OP_DESKTOP = window.matchMedia('(hover: hover) and (pointer: fine)');
+const VENDOR_V = 1;   // ophogen als de bestanden in /assets/js/vendor wijzigen
+
+let lenis = null;
+let snap = null;
+
+async function startLenis() {
+  if (lenis || !OP_DESKTOP.matches) return;
+  const [L, S] = await Promise.all([
+    import(`/assets/js/vendor/lenis.mjs?v=${VENDOR_V}`),
+    import(`/assets/js/vendor/lenis-snap.mjs?v=${VENDOR_V}`),
+  ]);
+  lenis = new L.default({
+    // 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
+    // heeft die demping nodig; een Mac-trackpad heeft zijn EIGEN momentum en
+    // krijgt er dan een tweede overheen -- dat is precies het drijverige gevoel
+    // waar Robin voor waarschuwde. Hoger betekent korter naijlen, dus dit is de
+    // middenweg: de schokjes weg, de nasleep kort.
+    // Staat het toch te zweven, dan is lerp omhoog (richting 1) of terug naar
+    // smoothWheel:false de knop -- die stand werkte ook, met alleen de snap.
+    smoothWheel: true,
+    lerp: 0.2,
+    syncTouch: false,   // op touch blijft alles van het systeem
+    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
+    // 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.
+    // Bewust NIET Lenis' standaard easeOutExpo -- die schiet weg en kruipt dan
+    // zo lang na dat het lijkt of hij niet afmaakt.
+    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.
+  const berichten = [...document.querySelectorAll('.feed-reader .read-post')];
+  berichten.slice(0, -1).forEach((a) => snap.addElement(a, { align: 'start' }));
+  // Native snappen uit: twee mechanismen op dezelfde scroller vechten.
+  document.documentElement.style.scrollSnapType = 'none';
+}
+
+function stopLenis() {
+  if (snap) { snap.destroy(); snap = null; }
+  if (lenis) { lenis.destroy(); lenis = null; }
+  document.documentElement.style.scrollSnapType = '';
+}
+
+/**
+ * Omhoog niet snappen. Met Lenis is dat snap.stop()/start(); zonder Lenis (dus
+ * op touch) zetten we de CSS-eigenschap om, precies zoals hiervoor.
+ */
 function zetSnappen(aan) {
+  if (snap) { if (aan) snap.start(); else snap.stop(); return; }
   const el = document.documentElement;
   const wil = aan ? '' : 'none';
@@ -197 +278 @@
   window.addEventListener('touchmove', opRaakBeweeg, { passive: true });
   window.addEventListener('keydown', opToets);
+
+  // 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();
 }
 

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',
+    'switch.grid': 'Grid', 'switch.reader': 'Lezen', 'switch.timeline': 'Tijdlijn', 'read.to_top': 'Terug naar boven', 'read.pinned': 'Vastgepind',
     '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',
+    'switch.grid': 'Grid', 'switch.reader': 'Reader', 'switch.timeline': 'Timeline', 'read.to_top': 'Back to top', 'read.pinned': 'Pinned',
     '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',
+    'switch.grid': 'Raster', 'switch.reader': 'Lesen', 'switch.timeline': 'Zeitleiste', 'read.to_top': 'Nach oben', 'read.pinned': 'Angeheftet',
     '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/partials/read-article.ejs

@@ -68 +68 @@
 
   <header class="read-head">
-    <h1 class="read-title"><a href="<%= _b %>/<%= post.slug %>"><%= post.title || '' %></a></h1>
+    <%# Vastgepind hoort zichtbaar te zijn in de titel: in de leesstroom staat een
+        gepind bericht bovenaan zonder dat je ziet WAAROM het daar staat. Zelfde
+        icoon als in de tijdlijn (post-card.ejs), zodat het hetzelfde ding is. %>
+    <h1 class="read-title">
+      <% if (post.pinned > 0) { %><span class="read-pin" title="<%= t('read.pinned') %>" aria-label="<%= t('read.pinned') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z"/></svg></span><% } %><a href="<%= _b %>/<%= post.slug %>"><%= post.title || '' %></a>
+    </h1>
     <% if (post.published_at) { %><p class="read-when"><%= formatDateTime(post.published_at) %></p><% } %>
   </header>

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=81">
+<link rel="stylesheet" href="/assets/css/style.css?v=82">
 <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 = 16;
+  var MOD_V = 19;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module