diora-web/docs/navigation.md
mrwnslz d7930fcdb9
All checks were successful
Build and push Docker image / build (push) Successful in 14s
Test / test (push) Successful in 8m58s
Test / e2e (push) Successful in 1m57s
Bibliothek ordnen (Navigation Phase 3): Hörbuch-Reihen und -Ordner, Zeitschriften je Heft
- Hörbücher: Reihen werden aus den Titeln erkannt („Das Kapital – Erster
  Band“, „…: Teil 3“, „… – Folge 12“, „Der Zauberberg. Erster Band“) und als
  Stapel gezeigt, darin die Bände in Reihenfolge. Ordner je Hörbuch
  (PodcastFeed.folder, Migration 0020), im Buch über ⋮ → Ordner zuweisen.
- Zeitschriften: ein Heft wird als Zeitschrift markiert (⋮ → Als Zeitschrift
  führen, im verschlüsselten Meta); unmarkiert entscheidet weiter der Ordner
  „Zeitschriften“. Die Hefte stehen nach Zeitschrift gruppiert, neueste zuerst.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-16 15:45:14 +02:00

4.2 KiB
Raw Blame History

Navigation: Lesen and Hören

diora's areas are sorted by what one does, not where things come from:

Group Sections
— Home
Lesen Bücher · Zeitschriften · Nachrichten · Blogs
Hören Hörbücher · Podcasts · Radio · Ambient
— Abos & Quellen (managing all subscriptions; phase 2)
  • Desktop / wide window (sidebar): every section is its own entry, under its group's heading. Nothing inside a section repeats the choice.
  • Phone (tab bar): three tabs, Home · Lesen · Hören. Lesen and Hören show a row of their sections at the top (segments); each group remembers the section last used. The mini player stays below as it is.
  • diora Reader (tolino, e-readers): only Lesen, without Home. TV: Hören.

Anything new goes into one of the two groups. Managing (subscribing, settings, folders) moves out of the everyday views into "Abos & Quellen" (phase 2).

One definition: static/js/nav.js (diora-web)

Loaded by the page on every platform, before the other area scripts. It owns the sections, which panel shows each, switching between them, the URL hash and the remembered choice. The bars are drawn from it.

window.DioraNav = {
  sections(),   // [{id, group, label, icon, available}] in order (only those the page has)
  groups(),     // [{id: 'home'|'lesen'|'hoeren', label, icon, sections: [id…]}]
  current(),    // the section id shown now
  go(id),       // show a section ('lesen'/'hoeren': that group's last section)
  onChange(fn), // fn(sectionId) after every change
}
Section id Group Label Panel View inside the panel
home — Home #tab-home
books lesen Bücher #tab-books e-books (not magazines)
magazines lesen Zeitschriften #tab-books magazines
news lesen Nachrichten #tab-feeds news
blogs lesen Blogs #tab-feeds blogs
audiobooks hoeren Hörbücher #tab-audiobooks (audiobooks.js)
podcasts hoeren Podcasts #tab-podcasts
radio hoeren Radio #tab-radio
ambient hoeren Ambient #tab-ambient

go() calls the page's showTab(panel) as before (so everything hooked onto showTab keeps working) and then the panel's view hook: window.__dioraBooksView('books'|'magazines'), window.__dioraFeedsView('news'|'blogs'). The panels' own switches for that choice (feeds.js News/Blogs) are hidden. _currentTopTab stays the panel name.

Hash: #books, #magazines, #news, #blogs, #audiobooks, … (old hashes #feeds, #radio/saved keep working). Remembered: localStorage diora_nav_section and diora_nav_last_<group>.

Zeitschriften (phase 1): the books in a library folder called "Zeitschriften" (or "Magazine"); a per-book mark follows with phase 3.

The segment row (phone)

nav.js draws #nav-segments above the panels: the current group's sections, when the layout is the tab bar (not html.nui-sidebar) and the group has more than one available section. Styled with the theme tokens; the native CSS may restyle it.

Who draws what

Where Bar Drawn by
Android (phone) #nui-tabbar: Home · Lesen · Hören native-radio.js, from DioraNav.groups()
Android tablet, desktop (html.nui-sidebar) rail: Home, headings Lesen/Hören with their sections, Menü native-radio.js, from DioraNav.sections()
Web page #tabs (narrow: groups + segments; wide: all sections under headings) nav.js

A tab/rail button calls DioraNav.go(id); the active state comes from DioraNav.onChange.

Phases

  1. Navigation (this document), Hörbücher as their own panel, Zeitschriften by folder.
  2. "Abos & Quellen": podcasts, YouTube channels, news sources, blogs and the audiobook mark in one place; the everyday views without managing.
  3. Library (done): audiobook series are found in the titles ("Das Kapital – Erster Band" …) and shown as one stack; audiobooks have folders (PodcastFeed.folder); a book is marked as a magazine in its encrypted meta (magazine: true/false; unset: the "Zeitschriften" folder decides), and Zeitschriften groups the issues by periodical.