- 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>
4.2 KiB
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
- Navigation (this document), Hörbücher as their own panel, Zeitschriften by folder.
- "Abos & Quellen": podcasts, YouTube channels, news sources, blogs and the audiobook mark in one place; the everyday views without managing.
- 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.