6 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 (· Fokus, web page only) |
| Projekte | Projekte (docs/projects.md; side) |
| — (foot) | Suche (docs/search.md; footer, transient) · Abos & Quellen (docs/sources.md; footer) |
- 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): four tabs, Home · Lesen · Hören · Projekte (since 2026-10-19). Lesen and Hören show a row of their sections at the top (segments); each group remembers the section last used. The search is a magnifier in the bar on top (the apps' section bars, the page's narrow bar), never a tab; Abos & Quellen is in the app menu. The mini player stays below as it is.
- Sidebar / wide bar:
sidesections (Projekte) and then thefooterones (Suche, Abos & Quellen) stand at its foot. Atransientsection (Suche) is never remembered as the one to open next. - diora Reader (tolino, e-readers): only Lesen, without Home. TV: Hören.
Anything new goes into one of the groups. Managing (subscribing, settings, folders) is in "Abos & Quellen" (docs/sources.md; done).
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. It is the one source for the navigation.
Underneath, static/js/app/20-tabs.js keeps TOP_TABS: the list of panels
(#tab-<name>) that showTab(name) can show — home, radio, focus, podcasts, books, feeds,
ambient, audiobooks, sources, suche, projekte. That is not a second navigation: nav.js
maps each section to one of these panels (several sections share one: Bücher/Zeitschriften
→ books, Nachrichten/Blogs → feeds) and calls showTab. A new area needs both: its panel in
TOP_TABS (and the template) and its section in nav.js.
window.DioraNav = {
sections(), // [{id, group, label, icon, available}] in order (only those the page has)
groups(), // [{id: 'home'|'lesen'|'hoeren'|'projekte', label, icon, sections: [id…]}]
icon(name), // a section's or group's icon as SVG (also 'menu')
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 |
|
focus |
hoeren | Fokus | #tab-focus |
web page only (webOnly) |
projekte |
projekte | Projekte | #tab-projekte |
(projects.js) |
suche |
(foot) | Suche | #tab-suche |
(search.js); never remembered |
sources |
(foot) | Abos & Quellen | #tab-sources |
(sources.js) |
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: the books marked as magazines (encrypted meta magazine), or, unmarked,
those in a library folder called "Zeitschriften" (or "Magazine"); issues and articles:
docs/library.md.
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 · Projekte |
native-radio.js, from DioraNav.groups() |
Android tablet, desktop (html.nui-sidebar) |
rail: Home, headings Lesen/Hören with their sections, at the foot Projekte · Suche · Abos & Quellen, Menü | native-radio.js, from DioraNav.sections() |
| Apps, every section | a bar on top (.nui-tab-bar; .nui-section-bar for the generic ones) with the section's name, its actions and the search magnifier |
native-ui.js SECTION_BARS, native-radio.js, native-podcast.js |
| 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.folders, a list;folderis its first, for older clients); 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.