mrwnslz
838457f6f9
Die Bereiche nach dem, was man tut (docs/navigation.md): Home; Lesen mit Bücher, Zeitschriften, Nachrichten, Blogs; Hören mit Hörbücher, Podcasts, Radio, Ambient. static/js/nav.js ist die eine Definition für alle Plattformen (DioraNav: Abschnitte, Gruppen, go, Hash, zuletzt gewählter Abschnitt je Gruppe). Die Webseite zeichnet ihre Leiste daraus: breit alle Abschnitte unter ihrer Gruppe, schmal Home · Lesen · Hören mit einer Abschnittszeile oben. - Hörbücher haben ein eigenes Panel (#tab-audiobooks), nicht mehr über den E-Books. - Zeitschriften: die Bücher im Ordner „Zeitschriften“ (oder „Magazine“). - Nachrichten/Blogs wählt die Navigation; der eigene Umschalter verschwindet dann. - Ein Link auf einen Abschnitt (#news …) schlägt die Startseite. Die Apps zeichnen ihre Leiste (native-radio.js, diora-android) bald ebenfalls daraus; bis dahin bleibt das hier unveröffentlicht. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
87 lines
4 KiB
Markdown
87 lines
4 KiB
Markdown
# 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: audiobook series (e.g. Das Kapital, Band 1–3) and folders,
|
||
magazines marked per book.
|