${LEER}
`; - - return ` -${bild}
- ${
- linkAuf
- ? `
-
-
-
`
- : ""
- }
-
- ${escapeHtml(stand)}
-
-
-
-
- ${quelle ? `` : ""}
-
-
`;
+ if (kaputt) {
+ return `${ + art === "link" ? "Adresse liefert kein Bild" : "Bild nicht lesbar" + }
${
+ quelle
+ ? `})
`
+ : `
`;
},
montiert(el) {
- const datei = el.querySelector(".bildw-datei");
- el.querySelector(".bildw-waehlen").addEventListener("click", () => datei.click());
- datei.addEventListener("change", () => datei.files[0] && hochladen(datei.files[0]));
-
- el.querySelector(".bildw-link").addEventListener("click", () => {
- linkAuf = !linkAuf;
- neu();
- });
-
- const url = el.querySelector(".bildw-url");
- if (url) {
- url.focus();
- const setzen = () => linkSetzen(url.value.trim());
- el.querySelector(".bildw-uebernehmen").addEventListener("click", setzen);
- url.addEventListener("keydown", (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- setzen();
- }
- });
- }
-
- const weg = el.querySelector(".bildw-weg");
- if (weg) weg.addEventListener("click", () => linkSetzen(""));
-
// Ein Bild, das nicht kommt, soll es sagen — bei einem Link ist das der
// Normalfall des Tages, an dem die fremde Seite umzieht.
- const img = el.querySelector(".bildw-bild");
- if (img) {
- img.addEventListener("error", () => {
- melden(art === "link" ? "Adresse liefert kein Bild" : "Bild nicht lesbar");
- });
- }
+ el.querySelector(".bildw-bild")?.addEventListener("error", () => {
+ kaputt = true;
+ melden(art === "link" ? "Adresse liefert kein Bild" : "Bild nicht lesbar");
+ neu();
+ });
},
});
+/* ── Der Ausgang in die Einstellungen ──────────────────────────────────── */
+
+/** Das Feld für *Einstellungen → Bild*. os.js hängt es ein, kennt es aber nicht. */
+export function bildFormularHtml() {
+ return `${LEER}
` + }${formInhalt()}
`;
+}
+
+/** Nach dem Einhängen verdrahten. */
+export function bildFormularMontieren(root) {
+ const el = root.querySelector(`#${FORM_ID}`);
+ if (el) verdrahte(el);
+}
+
+function formInhalt() {
+ const vorschau = quelle
+ ? `
+ ${vorschau}
+
+ ${
+ linkAuf
+ ? `
+
+
+
+
+
+ ${quelle ? `` : ""}
+
+ ${escapeHtml(stand)}
+
+
+
+
`
+ : ""
+ }`;
+}
+
+function verdrahte(el) {
+ const datei = el.querySelector(".bildw-datei");
+ el.querySelector(".bildw-waehlen").addEventListener("click", () => datei.click());
+ datei.addEventListener("change", () => datei.files[0] && hochladen(datei.files[0]));
+
+ el.querySelector(".bildw-link").addEventListener("click", () => {
+ linkAuf = !linkAuf;
+ formNeu();
+ });
+
+ const url = el.querySelector(".bildw-url");
+ if (url) {
+ url.focus();
+ const setzen = () => linkSetzen(url.value.trim());
+ el.querySelector(".bildw-uebernehmen").addEventListener("click", setzen);
+ url.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ setzen();
+ }
+ });
+ }
+
+ el.querySelector(".bildw-weg")?.addEventListener("click", () => linkSetzen(""));
+}
+
+/** Das Einstellungsfeld neu zeichnen — es steht nicht unter dem Widget-Rahmen. */
+function formNeu() {
+ const el = document.getElementById(FORM_ID);
+ if (!el) return;
+ el.innerHTML = formInhalt();
+ verdrahte(el);
+}
+
async function hochladen(file) {
melden("lädt hoch …");
try {
@@ -106,6 +156,7 @@ async function hochladen(file) {
} catch (e) {
melden(e.message);
}
+ formNeu();
}
async function linkSetzen(adresse) {
@@ -118,13 +169,13 @@ async function linkSetzen(adresse) {
} catch (e) {
melden(e.message);
}
+ formNeu();
}
function melden(s) {
stand = s;
- document.querySelectorAll('[data-widget="bild"] .w-stand').forEach((el) => {
- el.textContent = s;
- });
+ const el = document.querySelector(`#${FORM_ID} .w-stand`);
+ if (el) el.textContent = s;
}
/** Neu zeichnen — stabile Widgets lässt der Rahmen sonst in Ruhe. */