kantarciandClaude Opus 5
d6d476177a
Vier Wuensche und ein Fund beim Nachmessen. - Farbwaehler im Designbereich. Das Textfeld bleibt massgeblich, damit "@akzent" ein Verweis auf die Palette bleibt und nicht beim ersten Klick zu einem festen Hexwert erstarrt (ADR 066). - Die Verwaltung auf dem Telefon: das Menue klappt unter 760 px zu und nennt den Bereich, in dem man steht; Ziele 44 px, kein Skript. - Eigene SVG-Symbole statt Unicode-Zeichen - ein Telefon ersetzt die sonst durch Emoji in fremdem Stil. Zwei Eintraege trugen dabei denselben Pfad; ein Test findet beides (ADR 067). - Update aus dem Releasearchiv: der Weg fuer Installationen ohne Git. Zwei Schritte, weil ein Prozess, der sich selbst ausgetauscht hat, mit dem alten Code weiterarbeitet. var/, .env, hochgeladene Schriften und das erzeugte Buendel bleiben unberuehrt; public/ wird dazu Datei fuer Datei zusammengefuehrt. Geprueft ohne Netz gegen eine Releaseseite im Speicher (ADR 068). Beim Nachmessen der echten Startseite statt einer Testseite: das groesste Element ueber der Falz ist dort kein <img>, sondern der Hintergrund des ersten Abschnitts - und der steht nur im Stylesheet. Drei Vorabverweise mit denselben Geraetegrenzen wie der Compiler holen genau die Variante, die die Regel auch nimmt. LCP 1,3 s -> 1,1 s. Dabei gefunden: dasselbe Bild wurde je Geraeteregel neu abgefragt - Startseite 19 -> 15 Abfragen (ADR 069). Geprueft: 428 Tests auf PHP 8.2 und 8.4, Editor-, Browser- und Linkpruefung, Lighthouse auf drei echten Seiten (alles ausser der Leistung der Startseite 100). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
75 lines
3.2 KiB
JavaScript
75 lines
3.2 KiB
JavaScript
/*
|
|
* Farbfelder in den Verwaltungsformularen.
|
|
*
|
|
* Eine Farbe tippt man nicht, man wählt sie. Im Editor gibt es dafür längst ein Bedienelement aus
|
|
* Farbwähler, Textfeld und Palettenliste - in den Formularen unter „Design" und „Einstellungen"
|
|
* stand bisher nur ein nacktes Textfeld.
|
|
*
|
|
* Das Textfeld bleibt die Wahrheit: Es nimmt einen Wert wie `#1a2b3c` **oder** einen Schlüssel aus
|
|
* der Palette (`@accent`), und das kann ein Farbwähler nicht. Deshalb wird es nicht ersetzt,
|
|
* sondern ergänzt. Ohne JavaScript bleibt das Feld genau das, was es vorher war.
|
|
*/
|
|
(() => {
|
|
const felder = [...document.querySelectorAll('input[data-color]')];
|
|
if (0 === felder.length) {
|
|
return;
|
|
}
|
|
|
|
for (const feld of felder) {
|
|
const palette = JSON.parse(feld.dataset.palette || '[]');
|
|
const reihe = document.createElement('div');
|
|
reihe.className = 'color-field';
|
|
feld.parentNode.insertBefore(reihe, feld);
|
|
|
|
const waehler = document.createElement('input');
|
|
waehler.type = 'color';
|
|
waehler.className = 'color-field-swatch';
|
|
waehler.setAttribute('aria-label', 'Farbwähler für ' + (feld.labels?.[0]?.textContent.trim() || 'diese Farbe'));
|
|
// Der Wähler kennt nur Hexwerte. Steht im Feld ein Palettenschlüssel, zeigt er die Farbe,
|
|
// für die der Schlüssel steht - sonst bliebe er auf Schwarz stehen und sähe falsch aus.
|
|
const alsHex = wert => {
|
|
if (/^#[0-9a-f]{6}$/i.test(wert)) {
|
|
return wert;
|
|
}
|
|
const treffer = palette.find(eintrag => '@' + eintrag.key === wert);
|
|
|
|
return treffer ? treffer.value : '#000000';
|
|
};
|
|
waehler.value = alsHex(feld.value || feld.placeholder || '#000000');
|
|
waehler.addEventListener('input', () => {
|
|
feld.value = waehler.value;
|
|
feld.dispatchEvent(new Event('input', { bubbles: true }));
|
|
});
|
|
|
|
reihe.append(waehler, feld);
|
|
|
|
if (palette.length > 0) {
|
|
const auswahl = document.createElement('select');
|
|
auswahl.className = 'color-field-palette';
|
|
auswahl.setAttribute('aria-label', 'Farbe aus der Palette');
|
|
auswahl.append(new Option('Aus der Palette …', ''));
|
|
for (const eintrag of palette) {
|
|
auswahl.append(new Option(`${eintrag.name} (${eintrag.value})`, '@' + eintrag.key));
|
|
}
|
|
auswahl.value = palette.some(eintrag => '@' + eintrag.key === feld.value) ? feld.value : '';
|
|
auswahl.addEventListener('change', () => {
|
|
if ('' === auswahl.value) {
|
|
return;
|
|
}
|
|
feld.value = auswahl.value;
|
|
waehler.value = alsHex(auswahl.value);
|
|
feld.dispatchEvent(new Event('input', { bubbles: true }));
|
|
});
|
|
reihe.append(auswahl);
|
|
}
|
|
|
|
// Tippt jemand von Hand, folgt der Wähler mit - solange der Wert einer ist, den er kennt.
|
|
feld.addEventListener('input', () => {
|
|
const hex = alsHex(feld.value);
|
|
if (waehler.value !== hex) {
|
|
waehler.value = hex;
|
|
}
|
|
});
|
|
}
|
|
})();
|