Changeset 2d2fd8c in Klonkt for src/views/partials/view-switcher.ejs

Timestamp:

08/18/2026 06:47:58 PM (3 weeks ago)

Author:

Bart <bart@…>

Branches:

main

Children:

7cf8144

Parents:

03ff677

git-author:

Bart <bart@…> (08/18/2026 05:13:14 AM)

git-committer:

Bart <bart@…> (08/18/2026 06:47:58 PM)

Message:

Tijdlijn | Grid | Lezen: de leesweergave krijgt een ingang

De leesweergave bestond wel maar was alleen te bereiken door /read in te tikken.
Nu staat ze als derde optie in dezelfde pil.

Een <a>, geen <button>, en met opzet NIET de klasse view-switch-btn: de
gedelegeerde klik in shell.ejs pakt alles met die klasse op, zet
body[data-feed-view] erop en springt op niet-feedpagina's terug naar home. Die
had deze link opgegeten.

Door er een link naartoe te leggen kwamen twee fouten boven die er al zaten:

1. De route gaf ELKE htmx-aanvraag één kaal artikel terug, want de leesmodule had ?partial=1 geleend -- en dat betekent op deze site al iets anders: "de pagina zonder de schil". Een gebooste link naar /read schoof dus één artikel in #pcms-main: geen stroom, geen script. De module vraagt nu ?fragment=1, en al het andere gaat naar pages/read waar renderPage zelf over de schil beslist.

2. PAGE_CLASSES in shell.ejs is een witte lijst, en 'on-read' stond er niet in. Bij een htmx-navigatie werd de class dus weggefilterd en sloeg ELKE regel van de leesweergave (.on-read ...) niet aan: geen schermhoge berichten, geen snappen, geen wegschuivende balken. Bij intikken ging het goed, want dan zet de shell de class zelf -- vandaar dat het onzichtbaar bleef.

Beide nagelopen in de browser: de pil navigeert, on-read staat er, min-height is
de schermhoogte, snappen staat aan, en de opgeslagen feed-view blijft ongemoeid.

MOD_V naar 3 (read.js) en style.css naar v68 (nieuwe selector).

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

File:

• src/views/partials/view-switcher.ejs (modified) (2 diffs)

src/views/partials/view-switcher.ejs

@@ -8 +8 @@
   // Pagina's zonder actieve feed-weergave → niets in de pill is 'actief' (Solo/Cirkel
   // + Tijdlijn/Grid grijs). Alleen Agenda krijgt z'n eigen is-active op de agenda.
-  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive']
+  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive','on-read']
                    .some(function(c){ return _bc.indexOf(c) >= 0; });
+  var _onRead = _bc.indexOf('on-read') >= 0;
+  var _sbR = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
 %>
 <div class="view-switcher-wrap">
@@ -45 +47 @@
         <span><%= t('switch.grid') %></span>
       </button>
+      <%# Lezen is GEEN in-place omschakeling maar een andere route (/read), dus
+          een <a> en niet een <button>. En bewust NIET de klasse view-switch-btn:
+          de gedelegeerde klik in shell.ejs pakt alles met die klasse op, zet
+          body[data-feed-view] erop en springt op niet-feedpagina's terug naar
+          home -- dat zou deze link opeten. Andere klasse, zelfde uiterlijk.
+          aria-selected staat hier vast: syncAria() raakt alleen .view-switch-btn
+          aan, dus de actieve staat op /read blijft staan na een htmx-navigatie. %>
+      <a class="view-switch-link" href="<%= _sbR %>/read" role="tab"
+         aria-selected="<%= _onRead ? '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>
+      </a>
     </div>
     <% if (!_neutral) { %>