Doku nachgezogen: Navigation mit Projekte/Suche/Fokus und TOP_TABS (Panels) vs. nav.js (Navigation); app.js-Verweise auf static/js/app/
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
c8fd139b44
commit
fd69ec3472
3 changed files with 33 additions and 12 deletions
|
|
@ -6,14 +6,20 @@ diora's areas are sorted by what one does, not where things come from:
|
|||
|-------|----------|
|
||||
| — | Home |
|
||||
| Lesen | Bücher · Zeitschriften · Nachrichten · Blogs |
|
||||
| Hören | Hörbücher · Podcasts · Radio · Ambient |
|
||||
| — | Abos & Quellen (managing all subscriptions; phase 2) |
|
||||
| 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):** 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.
|
||||
- **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:** `side` sections (Projekte) and then the `footer` ones (Suche,
|
||||
Abos & Quellen) stand at its foot. A `transient` section (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 two groups. Managing (subscribing, settings,
|
||||
|
|
@ -23,12 +29,21 @@ folders) moves out of the everyday views into "Abos & Quellen" (phase 2).
|
|||
|
||||
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.
|
||||
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', label, icon, sections: [id…]}]
|
||||
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
|
||||
|
|
@ -46,6 +61,10 @@ window.DioraNav = {
|
|||
| `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:
|
||||
|
|
@ -71,8 +90,9 @@ restyle it.
|
|||
|
||||
| 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()` |
|
||||
| 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
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Since 2026-10-12 the place to continue a book is **where it was last read, on any device**, not the
|
||||
furthest place ever reached. The furthest place is still kept, as a hint ("Weiteste Stelle").
|
||||
This file is the contract between the server (books/views.py `save_progress`), the web reader
|
||||
(static/js/app.js), diora-android (Ops.kt / SyncEngine.kt / native-*.js) and diora-desktop
|
||||
(static/js/app/46-readpos.js, with the reader in 62-reader.js), diora-android (Ops.kt / SyncEngine.kt / native-*.js) and diora-desktop
|
||||
(src/main/ops.js / sync.js). They must apply the same rules.
|
||||
|
||||
## The state per book
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ This is the plan for tidying it up without breaking anything.
|
|||
* Whoever owns a file does its refactoring (web-native/* → the Android session;
|
||||
app.js, home.js, templates, desktop → the desktop session); shared contracts live in docs/.
|
||||
|
||||
## The numbers (2026-10-14)
|
||||
## The numbers (2026-10-14, before step 2; app.js is now `static/js/app/`)
|
||||
|
||||
| file | lines |
|
||||
|---|---|
|
||||
|
|
@ -37,7 +37,8 @@ Android Ops.kt), each tested separately or not at all.
|
|||
* Shared test vectors for the reading-position rules (`docs/progress-cases.json`), run by
|
||||
the Django tests, desktop's node tests and Android's OpsTest — one contract, checked
|
||||
in all four places.
|
||||
2. **Split app.js** by its sections into plain scripts loaded in order (radio, focus,
|
||||
2. **Split app.js** (done: 656520f, sw v106 — `static/js/app/NN-*.js`, 33 files; the
|
||||
template lists them in order) by its sections into plain scripts loaded in order (radio, focus,
|
||||
ambient, crypto, epub, books, reading position, reader, tts, highlights, margin, …). They
|
||||
stay classic scripts sharing globals, so the native layers that wrap `window.*` keep
|
||||
working unchanged; template, sw.js SHELL and Android's build_web list them. No code
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue