Ein Kontextmenü auf jeder Kachel — mitsamt Bildauswahl
Gesehen, Favorit und Weglegen gab es ausschliesslich auf der Detailseite. In einer Übersicht mit zwanzig Titeln hiess "die hab ich alle gesehen" vierzig Seitenwechsel. Im ganzen Quelltext stand kein einziger contextmenu-Zuhörer. Drei Wege hinein, weil es drei Arten gibt zu bedienen: Rechtsklick für die Maus, Shift+F10 und die Kontextmenü-Taste für die Tastatur, langer Druck für den Finger. Nur den Rechtsklick anzubieten hiesse, das Menü auf dem Telefon zu verstecken. Der lange Druck bricht bei jeder Bewegung ab, sonst löst Scrollen ihn aus. Die Aktionen wirken auf der Kachel selbst. Die Liste neu zu laden verlöre Bildlauf und Filter — für einen Haken. Dazu die Bildauswahl. Es gab genau einen Bild-Endpunkt, und der lieferte nur aus: wählte TMDB ein schlechtes Plakat, blieb es. Jetzt stehen Plakat, Hintergrund und Schriftzug zur Wahl, dazu eigene Bilder bis 10 MB. Die Kandidaten kosten nichts — TMDB liefert sie beim Einzelabruf ohnehin mit, und bisher wurde alles ausser dem Schriftzug weggeworfen. Drei Merker je Titel, nicht einer: man kann ein eigenes Plakat wollen und trotzdem automatische Hintergründe. Ohne sie überschriebe das nächste Auffrischen jede Handauswahl, und wer einmal ein besseres Plakat gesucht hat, suchte es jedes Mal neu. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
e1399c808f
commit
eb63271e92
@@ -0,0 +1,163 @@
|
||||
import { bildAdresse, bildauswahl, bildSetzen, bildHochladen, type Bildkandidat } from './api';
|
||||
import { knopf, fehlerzeile } from './util';
|
||||
import { icons } from './icons';
|
||||
|
||||
type Bildart = 'poster' | 'backdrop' | 'logo';
|
||||
|
||||
const ARTEN: { art: Bildart; titel: string; verhaeltnis: string }[] = [
|
||||
{ art: 'poster', titel: 'Plakat', verhaeltnis: '2 / 3' },
|
||||
{ art: 'backdrop', titel: 'Hintergrund', verhaeltnis: '16 / 9' },
|
||||
{ art: 'logo', titel: 'Schriftzug', verhaeltnis: '16 / 9' },
|
||||
];
|
||||
|
||||
/** Plakat, Hintergrund und Schriftzug von Hand wählen.
|
||||
*
|
||||
* **Erreichbar aus der Übersicht, nicht erst von der Detailseite.** Bei
|
||||
* zwanzig Titeln mit schlechtem Plakat waren das vierzig Seitenwechsel.
|
||||
*
|
||||
* **Die Kandidaten kosten nichts.** TMDB liefert sie beim Einzelabruf ohnehin
|
||||
* mit; bisher wurde alles ausser dem Schriftzug weggeworfen.
|
||||
*/
|
||||
export function bilddialog(art: 'movies' | 'series', id: string, titel: string): void {
|
||||
const d = document.createElement('dialog');
|
||||
d.className = 'dlg dlg-breit';
|
||||
|
||||
const kopf = document.createElement('div');
|
||||
kopf.className = 'dlg-kopf';
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = `Bilder — ${titel}`;
|
||||
const zu = document.createElement('button');
|
||||
zu.className = 'dlg-zu';
|
||||
zu.innerHTML = icons.schliessen;
|
||||
zu.setAttribute('aria-label', 'Schliessen');
|
||||
zu.onclick = () => d.close();
|
||||
kopf.append(h, zu);
|
||||
|
||||
const koerper = document.createElement('div');
|
||||
koerper.className = 'dlg-koerper';
|
||||
koerper.innerHTML = '<div class="spinner"></div>';
|
||||
|
||||
d.append(kopf, koerper);
|
||||
d.addEventListener('close', () => d.remove());
|
||||
d.addEventListener('click', e => { if (e.target === d) d.close(); });
|
||||
document.body.appendChild(d);
|
||||
d.showModal();
|
||||
|
||||
void laden();
|
||||
|
||||
async function laden(): Promise<void> {
|
||||
let auswahl;
|
||||
try {
|
||||
auswahl = await bildauswahl(art, id);
|
||||
} catch (fehler) {
|
||||
koerper.innerHTML = '';
|
||||
koerper.appendChild(fehlerzeile((fehler as Error).message));
|
||||
return;
|
||||
}
|
||||
|
||||
koerper.innerHTML = '';
|
||||
|
||||
if (auswahl.candidates.length === 0) {
|
||||
const hinweis = document.createElement('p');
|
||||
hinweis.className = 'hinweis';
|
||||
// Ohne Zuordnung gibt es nichts zu wählen — dann ist die Zuordnung das
|
||||
// Problem, nicht das Bild, und das soll hier auch so dastehen.
|
||||
hinweis.textContent = 'Keine Bilder gefunden. Ist der Titel richtig zugeordnet?';
|
||||
koerper.appendChild(hinweis);
|
||||
}
|
||||
|
||||
ARTEN.forEach(({ art: bildart, titel: name, verhaeltnis }) => {
|
||||
const abschnitt = document.createElement('section');
|
||||
abschnitt.className = 'bildblock';
|
||||
|
||||
const kopfzeile = document.createElement('div');
|
||||
kopfzeile.className = 'knopfreihe';
|
||||
const u = document.createElement('h3');
|
||||
u.textContent = name;
|
||||
kopfzeile.appendChild(u);
|
||||
|
||||
// Eigenes Bild — ein verstecktes Dateifeld hinter einem Knopf, weil
|
||||
// das native Dateifeld in jedem Browser anders aussieht.
|
||||
const feld = document.createElement('input');
|
||||
feld.type = 'file';
|
||||
feld.accept = 'image/*';
|
||||
feld.className = 'hidden';
|
||||
const eigenes = knopf('Eigenes Bild…', 'btn');
|
||||
eigenes.type = 'button';
|
||||
eigenes.onclick = () => feld.click();
|
||||
feld.onchange = async () => {
|
||||
const datei = feld.files?.[0];
|
||||
if (!datei) return;
|
||||
eigenes.disabled = true;
|
||||
try { await bildHochladen(art, id, bildart, datei); await laden(); }
|
||||
catch (fehler) {
|
||||
abschnitt.appendChild(fehlerzeile((fehler as Error).message));
|
||||
eigenes.disabled = false;
|
||||
}
|
||||
};
|
||||
kopfzeile.append(eigenes, feld);
|
||||
abschnitt.appendChild(kopfzeile);
|
||||
|
||||
const gitter = document.createElement('div');
|
||||
gitter.className = 'bildgitter';
|
||||
gitter.style.setProperty('--verhaeltnis', verhaeltnis);
|
||||
|
||||
const aktuell = bildart === 'poster' ? auswahl.current.poster
|
||||
: bildart === 'backdrop' ? auswahl.current.backdrop
|
||||
: auswahl.current.logo;
|
||||
|
||||
const passende = auswahl.candidates.filter(k => k.kind === bildart);
|
||||
if (passende.length === 0 && !aktuell) {
|
||||
const leer = document.createElement('p');
|
||||
leer.className = 'winzig';
|
||||
leer.textContent = 'Nichts zur Auswahl.';
|
||||
abschnitt.append(leer);
|
||||
koerper.appendChild(abschnitt);
|
||||
return;
|
||||
}
|
||||
|
||||
// Das gesetzte Bild zuerst, damit sichtbar ist, wovon man weggeht.
|
||||
if (aktuell) gitter.appendChild(kachelFuer(null, bildAdresse(aktuell)!, true, bildart));
|
||||
passende.forEach(k => gitter.appendChild(kachelFuer(k, k.thumbUrl, false, bildart)));
|
||||
|
||||
abschnitt.appendChild(gitter);
|
||||
koerper.appendChild(abschnitt);
|
||||
});
|
||||
}
|
||||
|
||||
function kachelFuer(
|
||||
kandidat: Bildkandidat | null, adresse: string, gesetzt: boolean, bildart: Bildart,
|
||||
): HTMLElement {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = 'bildwahl' + (gesetzt ? ' an' : '');
|
||||
b.title = gesetzt ? 'Aktuell gesetzt'
|
||||
: [kandidat?.language?.toUpperCase(), kandidat?.vote ? `★ ${kandidat.vote.toFixed(1)}` : null]
|
||||
.filter(Boolean).join(' · ') || 'Auswählen';
|
||||
|
||||
const bild = document.createElement('img');
|
||||
bild.src = adresse;
|
||||
bild.alt = '';
|
||||
bild.loading = 'lazy';
|
||||
b.appendChild(bild);
|
||||
|
||||
if (gesetzt) {
|
||||
const marke = document.createElement('span');
|
||||
marke.className = 'bildwahl-marke';
|
||||
marke.innerHTML = icons.haken;
|
||||
b.appendChild(marke);
|
||||
b.disabled = true;
|
||||
return b;
|
||||
}
|
||||
|
||||
b.onclick = async () => {
|
||||
b.disabled = true;
|
||||
try { await bildSetzen(art, id, bildart, kandidat!.url); await laden(); }
|
||||
catch (fehler) {
|
||||
b.after(fehlerzeile((fehler as Error).message));
|
||||
b.disabled = false;
|
||||
}
|
||||
};
|
||||
return b;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user