source: Klonkt/src/views/partials/search-surface.ejs@ 31680c3

main
Last change on this file since 31680c3 was 19e28ce, checked in by Robin <roboburr@…>, 8 hours ago

Lezen scrolt gewoon, en Lenis is uit Klonkt

Robin, 30-9: "Reader view normaal scrollen, Lenis mag helemaal uit klonkt."

Lenis stond alleen in de leesweergave: op desktop voor zacht scrollen en
snappen naar de bovenkant van een bericht, op mobiel nam hij de vinger over en
bootste mod/read.js het snappen na. Dat is er allemaal uit, en de browser
scrolt nu zoals op elke andere pagina.

ER SNAPT OOK NIETS MEER, en dat is een keuze. Er lag nog een native route
klaar (scroll-snap-type, alleen bij naar beneden scrollen aangezet), maar die
had precies de problemen waarom Lenis er ooit kwam: bij het laden sprong hij
naar het eerste bericht zodat de header wegviel, en bij een harde veeg vloog hij
over een grens. "Normaal scrollen" is zonder snappen; de vault-notitie "Klonkt
Reader Scroll" zegt hoe het native terug kan als dat toch gewild is.

Wat met het snappen meeging:

  • de richtingsdetectie in read.js (wiel, vinger, toetsen, rust-timer): die bestond alleen om het snappen aan en uit te zetten;
  • de volle schermhoogte op het laatste bericht: die maakte zijn bovenkant bereikbaar als snappunt, en is zonder snappen een leeg scherm aan het eind;
  • de afgedwongen schermhoogte per bericht op mobiel: die hoorde bij vegen van bericht naar bericht, en gaf onder een kort bericht dezelfde leegte waar Robin op 20-8 op desktop over viel. De site-instelling "elk bericht een eigen scherm" geldt nu overal voor wie dat wil.

De bewaarde paginamodus (staat uit) leunde op lenis.stop() om de stroom vast te
zetten; dat doet nu een regel CSS op het document, en de balken gaan met native
scrollIntoView. Niet uitgeprobeerd sinds die omzetting, want de modus staat uit;
dat staat er ook bij.

Weg: src/assets/vendor/lenis.mjs en lenis-snap.mjs (57 KB samen, en twee
netwerkrondes voordat er iets werkte), en data-lenis-prevent op het zoekvak.
Scroll anchoring blijft uit: ook zonder snappen hoort wat je leest niet te
verspringen als Load more er berichten bij zet. init() zet een inline
scroll-snap-type van de vorige versie terug, voor een tabblad dat na een
htmx-wissel met de oude module was begonnen.

MOD_V 67 en style.css v111: anders draait een browser die er al was nog een jaar
de oude read.js met Lenis.

Volledige suite 1292 groen; er leunde geen toets op Lenis of het snappen.

Co-Authored-By: Claude Opus 5.5 <noreply@…>
  • Property mode set to 100644
File size: 2.9 KB
RevLine 
[fd8faf5]1<%#
2 Het zoeken, in twee vormen en verder niets: de zoekbalk bovenaan, en
3 daaronder het vak met resultaten dat alle ruimte krijgt (Robins ontwerp,
4 30-9). Er is geen aparte resultatenpagina meer die er anders uitziet.
5
6 EEN PARTIAL, TWEE INGANGEN:
7 mode 'overlay' in de topnav, op elke pagina; verborgen tot je op zoeken
8 tikt. Draagt de id's waar chrome.js hem aan herkent.
9 mode 'page' /search?q=...: dezelfde vorm, open, met de resultaten al
10 op de server gerenderd. Een gedeelde link en Enter zonder
11 JavaScript komen zo op precies hetzelfde beeld uit.
12
13 Verwacht: mode, t, siteUrlBase. Voor 'page' ook query en de resultaten
14 (zie search-results.ejs).
15%>
16<%
17 const _page = locals.mode === 'page';
18 const _base = locals.siteUrlBase || '';
19 const _q = _page ? (locals.query || '') : '';
20%>
21<div class="search-surface<%= _page ? ' is-page' : '' %>"<% if (!_page) { %> id="search-overlay" hidden<% } %>
22 role="search"
23 data-results="<%= _base %>/search/results" data-action="<%= _base %>/search"
24 data-i18n="<%= JSON.stringify({ looking: t('search.fedi_looking') }) %>">
25 <div class="search-bar">
26 <form class="search-bar-form" method="get" action="<%= _base %>/search">
27 <input type="search" name="q" value="<%= _q %>" placeholder="<%= t('search.placeholder') %>"
28 autocomplete="off" aria-label="<%= t('nav.search') %>"<%= (_page && !_q) ? ' autofocus' : '' %>>
29 <button type="submit" class="search-bar-btn" aria-label="<%= t('search.button') %>">
30 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
31 </button>
32 <% if (_page) { %>
33 <%# Op de pagina is "sluiten" teruggaan waar je vandaan kwam. Zonder JS
34 brengt de link je naar het begin van de site. %>
35 <a class="search-bar-btn" href="<%= _base || '/' %>" data-search-leave aria-label="<%= t('imed.cancel') %>">
36 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
37 </a>
38 <% } else { %>
39 <button type="button" class="search-bar-btn" id="search-close" aria-label="<%= t('imed.cancel') %>">
40 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
41 </button>
42 <% } %>
43 </form>
44 </div>
[19e28ce]45 <div class="search-box">
[fd8faf5]46 <div class="search-box-inner"<% if (!_page) { %> id="search-suggest"<% } %> aria-live="polite">
47 <% if (_page) { %><%- include('./search-results', locals) %><% } %>
48 </div>
49 </div>
50</div>
Note: See TracBrowser for help on using the repository browser.