source: Klonkt/src/views/pages/read.ejs@ 100aad8

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

Leesweergave: Engelse namen, en het snappen werkte niet

De namen in mod/read.js waren Nederlands (stroom, vulAan, waarnemer); de rest
van assets/js/mod is Engels. Nu ook. Commentaar blijft Nederlands. chrome
heet toggleChrome, want window.chrome bestaat ook.

Door de module los te draaien kwamen er twee echte fouten boven:

  1. Wie op het OUDSTE bericht binnenkwam, zag "einde archief" en kon niet meer omhoog. Bij het laden staat er één artikel in de stroom, en dat is tegelijk het eerste én het laatste; met een else-if won de eerste tak altijd en draaide prependNewer() nooit. Twee losse ifs.
  1. Snappen deed helemaal niets. scroll-snap-type stond op .read-stream, en dat is geen scrollcontainer (overflow: visible) -- het document scrollt. De regel staat nu op <html>, en daar werkt hij.

En toen dat eenmaal werkte, vocht het met de correctie: na het invoegen trok de
proximity-snap de tekst naar de grens van het nieuwe bericht, gemeten -600 tot
-872px, precies de ruk die deze opzet moet vermijden. Snappen gaat nu even uit
tijdens invoegen+corrigeren en twee frames later weer aan: afwijking daalt naar
-35..-62px. Ook overflow-anchor: none, anders compenseren Chrome en Firefox er
nog eens overheen -- onze eigen correctie moet blijven, want Safari kent scroll
anchoring niet.

Co-Authored-By: Claude Opus 5 <claude@…>
  • Property mode set to 100644
File size: 5.0 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<%# De weg terug. Blijft staan als de balken weg zijn -- een scherm zonder
27 uitgang is geen scherm maar een val. %>
28<nav class="read-exit" aria-label="<%= t('read.exit_label') %>">
29 <a class="read-hand" href="<%= _b %>/" title="<%= t('read.exit') %>" aria-label="<%= t('read.exit') %>">👋</a>
30</nav>
31
32<noscript>
33 <nav class="read-fallback">
34 <% if (newerPost) { %><a href="<%= _b %>/read/<%= newerPost.slug %>">← <%= newerPost.title %></a><% } %>
35 <% if (olderPost) { %><a href="<%= _b %>/read/<%= olderPost.slug %>"><%= olderPost.title %> →</a><% } %>
36 </nav>
37</noscript>
38
39<style>
40/* Alles onder .on-read: dit is een nieuw scherm op een LIVE site, dus niets
41 hiervan mag daarbuiten iets aanraken. */
42
43/* De balken schuiven weg zodra je leest. Transform en niet display: een
44 schuivende balk laat zien dat hij terugkomt, een verdwijnende niet. */
45.on-read #pcms-chrome,
46.on-read .bottom-tab {
47 transition: transform .28s ease, opacity .28s ease;
48 will-change: transform;
49}
50.on-read.read-chrome-hidden #pcms-chrome { transform: translateY(-100%); opacity: 0; }
51.on-read.read-chrome-hidden .bottom-tab { transform: translateY(100%); opacity: 0; }
52
53/* De vrije ruimte onder de laatste post moet weg: anders eindigt het document
54 ver onder het laatste bericht en klopt "bij de rand" niet meer. */
55.on-read #pcms-main { padding-bottom: 0; }
56
57/* PROXIMITY, geen mandatory. Een bericht dat langer is dan het scherm moet je
58 rustig kunnen doorlezen; mandatory zou je bij elke pauze terugtrekken naar
59 een grens. Zo snapt hij alleen als je in de buurt van een grens bent.
60
61 OP <html>, en dat is geen smaakkwestie: snappen doet de SCROLLCONTAINER, en
62 dat is hier het document -- .read-stream heeft overflow: visible en scrollt
63 zelf niet. Op .read-stream stond de regel er wel, maar deed hij niets. */
64html:has(body.on-read) { scroll-snap-type: y proximity; }
65
66/* De browser NIET ook laten compenseren. Chrome en Firefox schuiven bij
67 invoegen bóven het beeld de scrollpositie zelf mee (scroll anchoring); samen
68 met onze eigen correctie in mod/read.js is dat twee keer, en dan springt de
69 tekst precies één bericht weg. Onze eigen correctie moet blijven, want Safari
70 (en dus iOS) kent scroll anchoring helemaal niet. */
71html:has(body.on-read), .on-read .read-stream, .on-read .read-post { overflow-anchor: none; }
72.on-read .read-post {
73 scroll-snap-align: start;
74 scroll-snap-stop: normal;
75 min-height: 100svh;
76 max-width: 46rem;
77 margin: 0 auto;
78 padding: 2rem 1.2rem 4rem;
79 box-sizing: border-box;
80}
81/* Een lijn tussen twee berichten: zonder grens is een stroom een lange brij. */
82.on-read .read-post + .read-post { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
83
84.on-read .read-head { padding-bottom: .5rem; }
85.on-read .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }
86.on-read .read-when { font-size: .85rem; opacity: .6; margin: 0; }
87
88/* Bezig / mislukt: de lezer hoort te merken dat er iets gebeurt, en vooral dat
89 er NIETS gebeurde als het misging. */
90.on-read .read-loading { text-align: center; padding: 1.2rem; opacity: .6; font-size: .9rem; }
91.on-read .read-end { text-align: center; padding: 2rem 1rem 3rem; opacity: .5; font-size: .9rem; }
92
93.on-read .read-exit { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
94.on-read .read-hand {
95 display: grid; place-items: center; width: 3rem; height: 3rem;
96 font-size: 1.5rem; text-decoration: none; border-radius: 50%;
97 background: var(--paper, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.18);
98}
99.on-read .read-fallback { display: flex; gap: 1rem; padding: 1rem 1.2rem; }
100
101@media (prefers-reduced-motion: reduce) {
102 .on-read #pcms-chrome, .on-read .bottom-tab { transition: none; }
103 .on-read .read-stream { scroll-snap-type: none; }
104}
105</style>
Note: See TracBrowser for help on using the repository browser.