source: Klonkt/src/views/partials/read-article.ejs@ b67edbd

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

Leesweergave: /read, en fragmenten in de richting van de scroll

De vorige opzet sprong naar het andere uiteinde van de scroll en schoof het
bericht daarna "vloeiend" in beeld -- de truc van PrutCMS, en een die je voelt.
Nu groeit de stroom gewoon: een schildwacht boven en onder het laatste bericht
haalt het volgende of vorige fragment op en zet het erbij. Bij invoegen BOVEN
wordt de ingevoegde hoogte gemeten en met scrollBy gecompenseerd, anders
verspringt de tekst onder je duim.

De grens tussen berichten is CSS, geen JavaScript: scroll-snap-type: y proximity
op de stroom, scroll-snap-align: start per bericht. Proximity en niet mandatory,
want binnen een lang bericht moet je vrij kunnen scrollen.

En het heet read, niet lees: een pad is geen plek voor een Nederlandse
werkwoordsvorm.

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

  • Property mode set to 100644
File size: 1.4 KB
Line 
1<%
2// Eén bericht in de leesstroom.
3//
4// Dit is het stuk dat de client AANVULT: bij de onderrand komt de oudere buur
5// eronder, bij de bovenrand de nieuwere erboven. Geen sprongen, geen
6// scrollpositie die stiekem verzet wordt -- de stroom groeit gewoon in de
7// richting waarin je leest, en de browser snapt naar de grenzen.
8//
9// Elk artikel draagt zijn eigen buren, dus de client hoeft niets te onthouden:
10// wat er nog te halen valt staat op het stuk dat er al is.
11var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
12var _newer = (typeof newerPost !== 'undefined' && newerPost) ? newerPost : null;
13var _older = (typeof olderPost !== 'undefined' && olderPost) ? olderPost : null;
14%>
15<article class="read-post"
16 data-slug="<%= post.slug %>"
17 data-newer="<%= _newer ? _newer.slug : '' %>"
18 data-older="<%= _older ? _older.slug : '' %>"
19 data-base="<%= _b %>"
20 data-title="<%= post.title || '' %>"
21 aria-label="<%= post.title || '' %>">
22 <header class="read-head">
23 <h1 class="read-title"><%= post.title || '' %></h1>
24 <% if (post.published_at) { %><p class="read-when"><%= formatDateTime(post.published_at) %></p><% } %>
25 </header>
26
27 <%- include('post-body', {
28 post: post, access: entry.access, teaser: entry.teaser,
29 content_html: entry.content_html, _base: _b,
30 }) %>
31</article>
Note: See TracBrowser for help on using the repository browser.