Changeset e46ebaa in Klonkt for src/views

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@…>

Location:

src/views

Files:

• pages/admin-site-edit.ejs (modified) (1 diff)
• pages/home.ejs (modified) (1 diff)
• partials/view-switcher.ejs (modified) (2 diffs)
• shell.ejs (modified) (6 diffs)

src/views/pages/admin-site-edit.ejs

@@ -196 +196 @@
     <fieldset>
       <legend><%= t('asite.feed_view') %></legend>
+      <%# Twee vragen, en ze zijn niet hetzelfde: WELKE tweede weergave je site
+          aanbiedt naast Grid, en waarin hij opent. %>
+      <label>
+        <span><%= t('asite.feed_alt') %></span>
+        <select name="feed_alt_view">
+          <% var _a = ['timeline','auto'].indexOf(site.feed_alt_view) >= 0 ? site.feed_alt_view : 'reader'; %>
+          <option value="reader"   <%= _a === 'reader'   ? 'selected' : '' %>><%= t('asite.feed_alt_reader') %></option>
+          <option value="timeline" <%= _a === 'timeline' ? 'selected' : '' %>><%= t('asite.feed_alt_timeline') %></option>
+          <option value="auto"     <%= _a === 'auto'     ? 'selected' : '' %>><%= t('asite.feed_alt_auto') %></option>
+        </select>
+      </label>
       <label>
         <span><%= t('asite.feed_default') %></span>
         <select name="feed_view_default">
-          <option value="reader" <%= site.feed_view_default !== 'grid' ? 'selected' : '' %>><%= t('asite.feed_reader') %></option>
+          <option value="reader" <%= site.feed_view_default !== 'grid' ? 'selected' : '' %>><%= t('asite.feed_alt_' + _a) %></option>
           <option value="grid"     <%= site.feed_view_default === 'grid' ? 'selected' : '' %>><%= t('asite.feed_grid') %></option>
         </select>

src/views/pages/home.ejs

@@ -67 +67 @@
 <% if (typeof readerItems !== 'undefined' && readerItems && readerItems.length) { %>
 <section class="feed-reader" aria-label="<%= t('switch.reader') %>">
+  <%# Terug naar boven. Staat IN de HTML en niet in JavaScript, zodat hij er ook
+      is als de module niet laadt -- dan doet hij niets, maar hij springt ook niet
+      opeens in beeld. Verschijnt pas als je ver genoeg bent (mod/read.js). %>
+  <button type="button" id="read-top" class="read-top" aria-label="<%= t('read.to_top') %>" title="<%= t('read.to_top') %>">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+  </button>
   <div class="read-stream" id="read-stream" data-base="<%= _base %>">
     <% readerItems.forEach(function(it) { %>

src/views/partials/view-switcher.ejs

@@ -23 +23 @@
   var _leesUit = _bc.indexOf('on-cirkel') >= 0;
   var _gridStandaard = (typeof site !== 'undefined' && site && site.feed_view_default === 'grid');
+  // Welke tweede weergave biedt deze site aan? Bij 'auto' tekenen we ZE ALLEBEI
+  // en laat de CSS er per viewport een zien -- Lezen op mobiel, Tijdlijn op
+  // desktop. Dat scheelt een resize-afhandeling en een knop die van naam
+  // verspringt terwijl je kijkt.
+  var _alt = (typeof site !== 'undefined' && site && site.feed_alt_view) || 'reader';
+  if (['reader', 'timeline', 'auto'].indexOf(_alt) < 0) _alt = 'reader';
+  var _tweede = _alt === 'auto' ? ['reader', 'timeline'] : [_alt];
+  // De tijdlijn WERKT wel in de cirkel -- dat is er zelfs de natuurlijke vorm.
+  // Alleen Lezen kan daar niet, want dat zijn berichten van anderen.
+  var _dood = function (v) { return v === 'reader' && _leesUit; };
+  // Staat er GEEN levende tweede knop, dan is Grid het enige dat overblijft en
+  // hoort die aan te staan. Bij een tijdlijn-site is dat in de cirkel niet zo:
+  // daar werkt de tijdlijn gewoon.
+  var _alleenGrid = _tweede.every(_dood);
+  var _icoon = {
+    reader: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
+    timeline: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
+  };
 %>
 <div class="view-switcher-wrap">
@@ -49 +67 @@
     <div class="view-switcher" role="tablist" aria-label="Weergave">
 
-      <%# Lezen is de standaardweergave sinds Tijdlijn weg is: hele berichten,
-          één per scherm. De chronologische lijst bestaat nog wel als opmaak
-          (.feed-timeline, ook op de cirkel en het archief), maar is geen KEUZE
-          meer -- daar was Lezen de betere vorm van. %>
-      <button type="button" class="view-switch-btn" data-view="reader" role="tab"
-              <%- _leesUit ? 'disabled aria-disabled="true" tabindex="-1" title="' + t('switch.reader_solo_only') + '"' : '' %>
-              aria-selected="<%= (!_leesUit && !_neutral && !_gridStandaard) ? 'true' : 'false' %>">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-        <span><%= t('switch.reader') %></span>
+      <%# De tweede weergave naast Grid. Welke dat is, staat in de instellingen
+          van de site (feed_alt_view). Bij 'auto' staan ze er allebei en kiest
+          een mediaquery; vandaar de klasse vs-alleen-*. %>
+      <% _tweede.forEach(function (v) { %>
+      <button type="button" class="view-switch-btn<%= _alt === 'auto' ? ' vs-alleen-' + (v === 'reader' ? 'mobiel' : 'desktop') : '' %>"
+              data-view="<%= v %>" role="tab"
+              <%- _dood(v) ? 'disabled aria-disabled="true" tabindex="-1" title="' + t('switch.reader_solo_only') + '"' : '' %>
+              aria-selected="<%= (!_dood(v) && !_neutral && !_gridStandaard) ? 'true' : 'false' %>">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><%- _icoon[v] %></svg>
+        <span><%= t('switch.' + v) %></span>
       </button>
+      <% }); %>
       <button type="button" class="view-switch-btn" data-view="grid" role="tab"
-              aria-selected="<%= (!_neutral && (_leesUit || _gridStandaard)) ? 'true' : 'false' %>">
+              aria-selected="<%= (!_neutral && (_alleenGrid || _gridStandaard)) ? 'true' : 'false' %>">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
         <span><%= t('switch.grid') %></span>

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=72">
+<link rel="stylesheet" href="/assets/css/style.css?v=77">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -345 +345 @@
 </head>
 
-<body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-js="chrome<%= (typeof pageJs !== 'undefined' && pageJs) ? ' ' + pageJs : '' %>" data-feed-view="<%- _e(safeSite.feed_view_default === 'grid' ? 'grid' : 'reader') %>" data-grid-cols="3" data-site-base="<%- _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
+<body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-js="chrome<%= (typeof pageJs !== 'undefined' && pageJs) ? ' ' + pageJs : '' %>" data-feed-view="<%- _e(safeSite.feed_view_default === 'grid' ? 'grid' : (["timeline","auto"].indexOf(safeSite.feed_alt_view) >= 0 ? safeSite.feed_alt_view : "reader")) %>" data-feed-alt="<%- _e(["timeline","auto"].indexOf(safeSite.feed_alt_view) >= 0 ? safeSite.feed_alt_view : "reader") %>" data-grid-cols="3" data-site-base="<%- _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
 
 <% if (typeof isViewer !== 'undefined' && isViewer) { %>
@@ -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 = 4;
+  var MOD_V = 13;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module
@@ -559 +559 @@
   // 'pcms-feed-view' en wordt hier nergens geschreven, zodat je thuiskomt in de
   // weergave die je achterliet.
+  var CIRKEL_SLEUTEL = 'pcms-cirkel-view';
   function opCirkel() { return body.classList.contains('on-cirkel'); }
 
@@ -565 +566 @@
     try {
       if (opCirkel()) {
-        body.dataset.feedView = 'grid';   // de enige mogelijkheid daar
+        // Lezen kan hier niet -- dat zijn berichten van ANDEREN, van hun servers,
+        // en "het hele stuk" hebben wij niet in handen. De knop staat er wel maar
+        // dood. Een TIJDLIJN kan hier juist bij uitstek: dat is de natuurlijke
+        // vorm van een cirkel.
+        //
+        // Beschikbaar, niet verplicht. Dit dwong eerst 'timeline' 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 is Tijdlijn een keuze ernaast.
+        var altC = body.dataset.feedAlt || 'reader';
+        var tijdlijnHier = altC === 'timeline'
+          || (altC === 'auto' && window.matchMedia('(min-width: 768px)').matches);
+        var magC = tijdlijnHier ? ['grid', 'timeline'] : ['grid'];
+        // Een EIGEN geheugen, en niet dat van solo. Twee redenen: hier kun je
+        // alleen uit Grid en Tijdlijn kiezen, dus een solo-keuze 'reader' zegt
+        // hier niets; en andersom mag een tuimeling hier je thuisweergave niet
+        // veranderen -- dan kom je thuis in iets anders dan je achterliet.
+        // (Dit geheugen stond er eerder al, verdween toen de cirkel nog maar een
+        // mogelijkheid had, en is nu weer nodig omdat Tijdlijn een echte keuze is.)
+        var vC = null;
+        try { vC = localStorage.getItem(CIRKEL_SLEUTEL); } catch (e) { /* geen opslag */ }
+        body.dataset.feedView = magC.indexOf(vC) >= 0 ? vC : 'grid';
         return;
       }
       var v = localStorage.getItem('pcms-feed-view');
-      // 'timeline' bestaat niet meer als keuze, maar staat nog in de localStorage
-      // van iedereen die hier eerder was. Zonder deze vertaling zou zo iemand een
-      // weergave houden die nergens meer een knop heeft: de pil helemaal grijs, en
-      // een feed die niet is wat hij koos. Lezen is waar Tijdlijn in opging.
-      if (v === 'timeline') v = 'reader';
-      if (v === 'grid' || v === 'reader') body.dataset.feedView = v;
+      // 'timeline' is sinds 20-8 weer een geldige keuze, maar alleen op een site
+      // die hem AANBIEDT. Wie de tijdlijn koos op de ene site en daarna een
+      // Lezen-site bezoekt, moet daar niet op een weergave landen die er geen
+      // knop heeft: dan staat de pil grijs en is de feed niet wat hij koos.
+      // Vandaar de toets tegen wat deze site biedt, in plaats van een vaste
+      // vertaling naar 'reader'.
+      var alt = body.dataset.feedAlt || 'reader';
+      var mag = alt === 'auto' ? ['grid', 'reader', 'timeline'] : ['grid', alt];
+      if (mag.indexOf(v) >= 0) body.dataset.feedView = v;
     } catch (e) { /* geen opslag: de server-standaard blijft staan */ }
   }
@@ -647 +671 @@
       // veranderen: die moet je terugvinden zoals je hem achterliet.
       try {
-        if (!opCirkel()) localStorage.setItem('pcms-feed-view', view);
+        // De cirkel heeft zijn eigen geheugen, zodat een keuze daar je
+        // thuisweergave niet aanraakt en andersom.
+        if (opCirkel()) localStorage.setItem(CIRKEL_SLEUTEL, view);
+        else localStorage.setItem('pcms-feed-view', view);
       } catch(_) {}
       syncAria();