source: Klonkt/src/views/pages/read.ejs@ 847775c

main
Last change on this file since 847775c was 847775c, checked in by Bart <bart@…>, 3 weeks ago

Leesweergave: tikken op een bericht opent het bericht

De stroom toont de tekst, maar het gesprek staat op de berichtpagina: ⭐,
🔁, reacties, en het antwoordveld voor bezoekers van elders. Een leesweergave
waar je niet uit kunt naar dat gesprek is een doodlopende weg.

Drie ingangen, met opzet:

  • de titel is een echte <a>, dus toetsenbord, schermlezer en cmd-klik werken;
  • een voetlink zegt waar je heen gaat ("Reacties en waarderingen"), want een tik die je niet ziet, bestaat niet;
  • en een tik ergens op het bericht, voor een duim.

Die tik kent vier uitzonderingen, want een tik die je niet bedoelde is erger dan
geen tik: links, knoppen en velden houden hun eigen werking, een geselecteerde
tekst is geen tik, een verschoven vinger is scrollen, en cmd/ctrl-klik laat je
aan de browser. Alle vier nagemeten in de browser, plus dat een link ín een
bericht wint van de tik.

MOD_V naar 2: mod/read.js is gewijzigd.

Co-Authored-By: Claude Opus 5 <claude@…>
  • Property mode set to 100644
File size: 5.3 KB
Line 
1<%
2// De leesweergave: berichten achter elkaar, één per beeld, en de balken gaan weg.
3//
4// Barts idee, naar bartoverkamp.nl -- maar NIET met de truc die daar staat.
5// Daar wordt bij de rand naar de andere kant gesprongen en het artikel
6// "vloeiend" in beeld gezet; dat is een naad die je verbergt. Hier groeit de
7// stroom gewoon: bij de onderrand hangt de client de oudere buur eronder, bij de
8// bovenrand de nieuwere erboven, en de browser snapt naar de berichtgrenzen.
9// Dan is er geen naad om te verbergen.
10//
11// Zonder JavaScript blijft dit één leesbaar bericht met twee gewone links. Een
12// leesweergave die alleen met script bestaat, bestaat niet voor wie het uitzet.
13var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
14%>
15
16<%# De teksten die het script zelf plaatst, komen van hier -- zoals de
17 zoekteksten van de topnav (zie mod/chrome.js). Een zin die in het
18 script staat, staat in één taal, en dat is nooit de taal van de lezer. %>
19<div class="read-stream" id="read-stream" data-base="<%= _b %>"
20 data-i18n="<%= JSON.stringify({ end: t('read.end'), load_error: t('read.load_error') }) %>">
21 <%- include('../partials/read-article', {
22 post: post, entry: entry, newerPost: newerPost, olderPost: olderPost,
23 }) %>
24</div>
25
26<%# Geen eigen uitgangsknop. De balken schuiven terug zodra je omhoog scrolt
27 (en staan er sowieso bovenaan), dus de weg terug is altijd één veeg weg. Een
28 zwevende knop erbij zou een tweede uitgang zijn die hetzelfde doet. %>
29
30<noscript>
31 <nav class="read-fallback">
32 <% if (newerPost) { %><a href="<%= _b %>/read/<%= newerPost.slug %>">← <%= newerPost.title %></a><% } %>
33 <% if (olderPost) { %><a href="<%= _b %>/read/<%= olderPost.slug %>"><%= olderPost.title %> →</a><% } %>
34 </nav>
35</noscript>
36
37<style>
38/* Alles onder .on-read: dit is een nieuw scherm op een LIVE site, dus niets
39 hiervan mag daarbuiten iets aanraken. */
40
41/* De balken schuiven weg zodra je leest. Transform en niet display: een
42 schuivende balk laat zien dat hij terugkomt, een verdwijnende niet. */
43.on-read #pcms-chrome,
44.on-read .bottom-tab {
45 transition: transform .28s ease, opacity .28s ease;
46 will-change: transform;
47}
48.on-read.read-chrome-hidden #pcms-chrome { transform: translateY(-100%); opacity: 0; }
49.on-read.read-chrome-hidden .bottom-tab { transform: translateY(100%); opacity: 0; }
50
51/* De vrije ruimte onder de laatste post moet weg: anders eindigt het document
52 ver onder het laatste bericht en klopt "bij de rand" niet meer. */
53.on-read #pcms-main { padding-bottom: 0; }
54
55/* PROXIMITY, geen mandatory. Een bericht dat langer is dan het scherm moet je
56 rustig kunnen doorlezen; mandatory zou je bij elke pauze terugtrekken naar
57 een grens. Zo snapt hij alleen als je in de buurt van een grens bent.
58
59 OP <html>, en dat is geen smaakkwestie: snappen doet de SCROLLCONTAINER, en
60 dat is hier het document -- .read-stream heeft overflow: visible en scrollt
61 zelf niet. Op .read-stream stond de regel er wel, maar deed hij niets. */
62html:has(body.on-read) { scroll-snap-type: y proximity; }
63
64/* De browser NIET ook laten compenseren. Chrome en Firefox schuiven bij
65 invoegen bóven het beeld de scrollpositie zelf mee (scroll anchoring); samen
66 met onze eigen correctie in mod/read.js is dat twee keer, en dan springt de
67 tekst precies één bericht weg. Onze eigen correctie moet blijven, want Safari
68 (en dus iOS) kent scroll anchoring helemaal niet. */
69html:has(body.on-read), .on-read .read-stream, .on-read .read-post { overflow-anchor: none; }
70.on-read .read-post {
71 scroll-snap-align: start;
72 scroll-snap-stop: normal;
73 min-height: 100svh;
74 max-width: 46rem;
75 margin: 0 auto;
76 padding: 2rem 1.2rem 4rem;
77 box-sizing: border-box;
78}
79/* Een lijn tussen twee berichten: zonder grens is een stroom een lange brij. */
80.on-read .read-post + .read-post { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
81
82/* De titel is een link, maar mag er niet als een link uitzien: dit is een
83 leesscherm, geen index. Onderstrepen pas als je hem aanwijst. */
84.on-read .read-title a { color: inherit; text-decoration: none; }
85.on-read .read-title a:hover,
86.on-read .read-title a:focus-visible { text-decoration: underline; }
87
88/* De aankondiging onderaan: waar de tik je heen brengt. */
89.on-read .read-foot { margin-top: 2rem; }
90.on-read .read-open {
91 display: inline-block; font-size: .9rem; opacity: .75;
92 text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
93}
94.on-read .read-open:hover, .on-read .read-open:focus-visible { opacity: 1; }
95
96.on-read .read-head { padding-bottom: .5rem; }
97.on-read .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }
98.on-read .read-when { font-size: .85rem; opacity: .6; margin: 0; }
99
100/* Bezig / mislukt: de lezer hoort te merken dat er iets gebeurt, en vooral dat
101 er NIETS gebeurde als het misging. */
102.on-read .read-loading { text-align: center; padding: 1.2rem; opacity: .6; font-size: .9rem; }
103.on-read .read-end { text-align: center; padding: 2rem 1rem 3rem; opacity: .5; font-size: .9rem; }
104
105.on-read .read-fallback { display: flex; gap: 1rem; padding: 1rem 1.2rem; }
106
107@media (prefers-reduced-motion: reduce) {
108 .on-read #pcms-chrome, .on-read .bottom-tab { transition: none; }
109 html:has(body.on-read) { scroll-snap-type: none; }
110}
111</style>
Note: See TracBrowser for help on using the repository browser.