Changeset 847775c in Klonkt for src/assets/js


Ignore:
Timestamp:
08/18/2026 06:47:58 PM (3 weeks ago)
Author:
Bart <bart@…>
Branches:
main
Children:
03ff677
Parents:
87696ce
git-author:
Bart <bart@…> (08/18/2026 04:42:55 AM)
git-committer:
Bart <bart@…> (08/18/2026 06:47:58 PM)
Message:

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@…>

File:
1 edited

Legend:

Unmodified
Added
Removed
  • src/assets/js/mod/read.js

    r87696ce r847775c  
    166166}
    167167
     168/**
     169 * Tikken op een bericht opent dat bericht.
     170 *
     171 * De stroom toont de tekst; het gesprek -- reacties, waarderingen, boosts --
     172 * staat op de berichtpagina. De titel en de voetlink zijn echte <a>'s en doen
     173 * het werk voor toetsenbord en schermlezer; dit hier is het gemak voor een duim.
     174 *
     175 * Daarom vier uitzonderingen, want een tik die je niet bedoelde is erger dan
     176 * geen tik: iets dat zelf al een doel heeft (link, knop, veld) houdt zijn eigen
     177 * werking, een geselecteerde tekst is geen tik, een verschoven vinger is
     178 * scrollen, en cmd/ctrl-klik hoort de browser zelf af te handelen.
     179 */
     180let tapX = 0, tapY = 0;
     181function onPointerDown(e) { tapX = e.clientX; tapY = e.clientY; }
     182
     183function onTap(e) {
     184  if (e.defaultPrevented || e.button !== 0) return;
     185  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
     186  const t = e.target;
     187  if (!t || typeof t.closest !== 'function') return;
     188  const art = t.closest('.read-post');
     189  if (!art) return;
     190  if (t.closest('a, button, input, textarea, select, label, summary, [role="button"]')) return;
     191  if (Math.abs(e.clientX - tapX) > 10 || Math.abs(e.clientY - tapY) > 10) return;
     192  const sel = window.getSelection && window.getSelection();
     193  if (sel && String(sel).trim()) return;
     194  const slug = art.dataset.slug;
     195  if (!slug) return;
     196  location.href = (art.dataset.base || '') + '/' + encodeURIComponent(slug);
     197}
     198
    168199function onScroll() {
    169200  const y = window.scrollY || 0;
     
    183214  window.addEventListener('scroll', onScroll, { passive: true });
    184215  window.addEventListener('resize', watch, { passive: true });
     216  // Op de stroom, niet per artikel: aangevulde berichten doen zo vanzelf mee.
     217  s.addEventListener('pointerdown', onPointerDown, { passive: true });
     218  s.addEventListener('click', onTap);
    185219  watch();
    186220}
Note: See TracChangeset for help on using the changeset viewer.