Zwei Widgets: Zettel mit kleinem Markdown, Bild je Nutzer
Zettel: ein Textfeld, mehr nicht — InkNote gibt es schon. Gelesen wird gesetzt (Ueberschriften, Haken, Aufzaehlungen, fett/kursiv/code, Strich), geschrieben wird roh. Haken lassen sich ohne Bearbeiten setzen und aendern die Quelle. Gespeichert wird 800 ms nach dem letzten Anschlag, sofort beim Verlassen und beim Schliessen des Tabs (keepalive statt sendBeacon: der kann nur POST und traegt keine Kopfzeilen). Grenze 4000 Zeichen, vom Server durchgesetzt. Bild: genau eines je Nutzer, hochgeladen oder verlinkt. Die erste Datei, die HoneyOS ablegt — in bilder/ neben honeyos.json, benannt nach einem Fingerabdruck der Nutzerkennung. Ein neues Bild ersetzt das alte samt Datei, die Adresse traegt einen Versionsanteil gegen den Zwischen- speicher. SVG kommt nicht herein (Text, kann Skripte tragen), und der Typ wird an den Bytes erkannt, nicht an der Angabe des Browsers. Der Rahmen kann jetzt Widgets mit eigenem DOM: 'stabil' haelt den Inhalt, 'montiert' verdrahtet ihn. Ohne das haette das Anklopfen bei den Apps alle zwei Minuten den Text unter den Fingern ausgetauscht. Nebenbei: Der Aufrufhelfer setzte bei jedem Schreibzugriff Content-Type: application/json — auch fuer Bildbytes.
This commit is contained in:
marc committed
1 parent
b7cc06b7c1
commit
c0abfbb491
9 files changed
+857
-20
No files matched your search
+3
-1
@@ -53,7 +53,9 @@ export async function api(path, opts = {}) {
|
||||
const headers = { ...(opts.headers || {}) };
|
||||
if (APPS_KEY) headers["X-HoneyOS-Key"] = APPS_KEY;
|
||||
if (opts.method && opts.method !== "GET") {
|
||||
headers["Content-Type"] = "application/json";
|
||||
// Nur voreinstellen, nicht überschreiben: Das Bild-Widget schickt Bytes und
|
||||
// nennt deren Typ selbst. Vorher log der Aufrufhelfer den Server an.
|
||||
if (!headers["Content-Type"]) headers["Content-Type"] = "application/json";
|
||||
const tok = cookie("honeyos_csrf");
|
||||
if (tok) headers["X-CSRF-Token"] = tok;
|
||||
}
|
||||
|
||||
+3
-1
@@ -8,12 +8,14 @@ import { widgetsLaden, widgetsOrdnen, widgetsStarten, widgetsZeichnen } from "./
|
||||
import "./widgets/user.js";
|
||||
import { statsHtml } from "./widgets/system.js";
|
||||
import { loadWeather, renderWeatherBar } from "./widgets/weather.js";
|
||||
import "./widgets/notiz.js";
|
||||
import "./widgets/bild.js";
|
||||
|
||||
// Die Reihenfolge steht hier und nicht in den Importzeilen darüber: Module
|
||||
// werden nicht in deren Reihenfolge ausgewertet, sobald eines auf oberster
|
||||
// Ebene wartet (glyphs.js holt seine Raster mit await). Bis die Reihenfolge
|
||||
// aus dem Server kommt, ist das ihre Stelle.
|
||||
widgetsOrdnen(["benutzer", "system", "wetter"]);
|
||||
widgetsOrdnen(["benutzer", "system", "wetter", "notiz", "bild"]);
|
||||
|
||||
/*
|
||||
* HoneyOS — Desktop-Logik.
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { api, escapeAttr, escapeHtml } from "../core.js";
|
||||
import { widgetAnmelden, widgetsLaden, widgetsZeichnen } from "./rahmen.js";
|
||||
|
||||
/* ── Das Bild ──────────────────────────────────────────────────────────────
|
||||
*
|
||||
* Genau **ein** Bild je Nutzer, hochgeladen oder verlinkt. Ein neues ersetzt
|
||||
* das alte, ohne Verwaltung und ohne Liste — das ist der ganze Reiz: Es ist
|
||||
* das erste Widget, das nichts abfragt, sondern etwas *ist*.
|
||||
*
|
||||
* Hochgeladen wird zum eigenen Server; verlinkt wird auf eine fremde Adresse.
|
||||
* Der Unterschied ist keiner der Bequemlichkeit: Ein Link holt bei jedem
|
||||
* Aufbau des Schreibtischs etwas von woanders, ein Upload nie.
|
||||
*/
|
||||
|
||||
const LEER = "Kein Bild — hochladen oder Adresse einfügen.";
|
||||
|
||||
let art = ""; // "datei" | "link" | ""
|
||||
let quelle = "";
|
||||
let stand = ""; // Meldung unter dem Bild
|
||||
let linkAuf = false;
|
||||
|
||||
widgetAnmelden({
|
||||
id: "bild",
|
||||
titel: "bild",
|
||||
// Hält ein Dateifeld und ein Eingabefeld: Der Rahmen darf den Inhalt nicht
|
||||
// unter den Fingern austauschen.
|
||||
stabil: true,
|
||||
|
||||
async laden() {
|
||||
const d = await api("/api/image/info");
|
||||
art = (d && d.art) || "";
|
||||
quelle = (d && d.url) || "";
|
||||
},
|
||||
|
||||
inhalt() {
|
||||
const bild = quelle
|
||||
? `<img class="bildw-bild" src="${escapeAttr(quelle)}" alt="" />`
|
||||
: `<p class="w-zustand">${LEER}</p>`;
|
||||
|
||||
return `
|
||||
<div class="bildw">${bild}</div>
|
||||
${
|
||||
linkAuf
|
||||
? `<div class="bildw-linkzeile">
|
||||
<input class="bildw-url" type="url" spellcheck="false"
|
||||
placeholder="https://…" value="${escapeAttr(art === "link" ? quelle : "")}" />
|
||||
<button class="btn bildw-uebernehmen">setzen</button>
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
<div class="zettel-fuss">
|
||||
<span class="zettel-stand">${escapeHtml(stand)}</span>
|
||||
<span class="bildw-knoepfe">
|
||||
<input class="bildw-datei" type="file" accept="image/png,image/jpeg,image/webp,image/gif" hidden />
|
||||
<button class="btn bildw-waehlen">${quelle ? "ersetzen" : "hochladen"}</button>
|
||||
<button class="btn bildw-link">link</button>
|
||||
${quelle ? `<button class="btn bildw-weg">entfernen</button>` : ""}
|
||||
</span>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
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");
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
async function hochladen(file) {
|
||||
melden("lädt hoch …");
|
||||
try {
|
||||
await api("/api/image", { method: "POST", body: file, headers: { "Content-Type": file.type || "application/octet-stream" } });
|
||||
linkAuf = false;
|
||||
await widgetsLaden("bild");
|
||||
melden("");
|
||||
} catch (e) {
|
||||
melden(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function linkSetzen(adresse) {
|
||||
melden(adresse ? "übernehme …" : "entferne …");
|
||||
try {
|
||||
await api("/api/image", { method: "PUT", body: JSON.stringify({ url: adresse }) });
|
||||
linkAuf = false;
|
||||
await widgetsLaden("bild");
|
||||
melden("");
|
||||
} catch (e) {
|
||||
melden(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function melden(s) {
|
||||
stand = s;
|
||||
document.querySelectorAll('[data-widget="bild"] .zettel-stand').forEach((el) => {
|
||||
el.textContent = s;
|
||||
});
|
||||
}
|
||||
|
||||
/** Neu zeichnen — stabile Widgets lässt der Rahmen sonst in Ruhe. */
|
||||
function neu() {
|
||||
document.querySelectorAll('[data-widget="bild"]').forEach((el) => delete el.dataset.zustand);
|
||||
widgetsZeichnen();
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
import { api, escapeHtml } from "../core.js";
|
||||
import { widgetAnmelden, widgetsZeichnen } from "./rahmen.js";
|
||||
|
||||
/* ── Der Zettel ────────────────────────────────────────────────────────────
|
||||
*
|
||||
* Ein Textfeld, mehr nicht. **InkNote gibt es schon** — der Zettel darf keine
|
||||
* zweite Notiz-App werden: kein Titel, keine Liste, keine Ordner, keine Suche.
|
||||
* Genau ein Text, den man im Vorbeigehen benutzt: Einkaufszettel, eine Nummer,
|
||||
* ein Gedanke. Alles, was länger als einen Tag lebt, gehört nach InkNote.
|
||||
*
|
||||
* Zwei Ansichten: gelesen wird gesetzt, geschrieben wird roh. Der Umweg über
|
||||
* einen Knopf ist Absicht — ein Feld, das immer im Bearbeitungsmodus steht,
|
||||
* frisst jeden Klick, den man eigentlich dem Häkchen zugedacht hatte.
|
||||
*
|
||||
* Häkchen lassen sich **ohne** Bearbeiten setzen. Das ist der häufigste Griff
|
||||
* an einer Liste, und dafür erst in den Text zu springen wäre albern.
|
||||
*/
|
||||
|
||||
const LEER = "Noch nichts notiert.";
|
||||
const VERZUG = 800; // ms bis zum Speichern beim Tippen
|
||||
|
||||
let text = "";
|
||||
let bearbeiten = false;
|
||||
let stand = ""; // "speichert …" | "gespeichert" | Fehlertext
|
||||
let uhr = null;
|
||||
|
||||
widgetAnmelden({
|
||||
id: "notiz",
|
||||
titel: "zettel",
|
||||
// Der Zettel hält ein Textfeld: Sein Inhalt darf nicht bei jedem Neuzeichnen
|
||||
// ersetzt werden, sonst verliert man beim Tippen Text und Schreibmarke.
|
||||
stabil: true,
|
||||
|
||||
async laden() {
|
||||
const d = await api("/api/note");
|
||||
text = (d && d.text) || "";
|
||||
},
|
||||
|
||||
inhalt() {
|
||||
if (bearbeiten) {
|
||||
return `
|
||||
<textarea class="zettel-feld" spellcheck="false"
|
||||
placeholder="# Einkauf - [ ] Milch - [x] Brot">${escapeHtml(text)}</textarea>
|
||||
<div class="zettel-fuss">
|
||||
<span class="zettel-stand">${escapeHtml(stand)}</span>
|
||||
<button class="btn zettel-fertig">fertig</button>
|
||||
</div>`;
|
||||
}
|
||||
return `
|
||||
<div class="zettel-text">${text.trim() ? markdown(text) : `<p class="w-zustand">${LEER}</p>`}</div>
|
||||
<div class="zettel-fuss">
|
||||
<span class="zettel-stand">${escapeHtml(stand)}</span>
|
||||
<button class="btn zettel-auf">${text.trim() ? "bearbeiten" : "schreiben"}</button>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
montiert(el) {
|
||||
const feld = el.querySelector(".zettel-feld");
|
||||
if (feld) {
|
||||
feld.focus();
|
||||
// Schreibmarke ans Ende, nicht an den Anfang: Man schreibt weiter, man
|
||||
// fängt selten neu an.
|
||||
feld.setSelectionRange(feld.value.length, feld.value.length);
|
||||
feld.addEventListener("input", () => {
|
||||
text = feld.value;
|
||||
spaeterSpeichern();
|
||||
});
|
||||
// Beim Verlassen sofort, nicht erst nach dem Verzug — sonst ginge der
|
||||
// letzte Satz verloren, wenn man den Tab zumacht.
|
||||
feld.addEventListener("blur", jetztSpeichern);
|
||||
el.querySelector(".zettel-fertig").addEventListener("click", () => {
|
||||
bearbeiten = false;
|
||||
jetztSpeichern();
|
||||
neu();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const auf = el.querySelector(".zettel-auf");
|
||||
if (auf) {
|
||||
auf.addEventListener("click", () => {
|
||||
bearbeiten = true;
|
||||
neu();
|
||||
});
|
||||
}
|
||||
// Häkchen im gesetzten Text — sie ändern die Quelle, nicht nur die Anzeige.
|
||||
el.querySelectorAll("[data-hak]").forEach((box) =>
|
||||
box.addEventListener("change", () => {
|
||||
text = hakenUmlegen(text, Number(box.dataset.hak));
|
||||
neu();
|
||||
jetztSpeichern();
|
||||
})
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
/** Neu zeichnen — der Rahmen lässt stabile Widgets sonst in Ruhe. */
|
||||
function neu() {
|
||||
const koerper = document.querySelectorAll('[data-widget="notiz"]');
|
||||
koerper.forEach((el) => delete el.dataset.zustand);
|
||||
widgetsZeichnen();
|
||||
}
|
||||
|
||||
function spaeterSpeichern() {
|
||||
stand = "";
|
||||
clearTimeout(uhr);
|
||||
uhr = setTimeout(jetztSpeichern, VERZUG);
|
||||
}
|
||||
|
||||
/**
|
||||
* Speichert, wenn sich etwas geändert hat.
|
||||
*
|
||||
* Zwei offene Geräte überschreiben einander; der letzte Stand gewinnt. Für
|
||||
* einen Zettel ist das vertretbar — man sollte es nur wissen und nicht später
|
||||
* „Datenverlust" nennen.
|
||||
*/
|
||||
let gespeichert = null;
|
||||
async function jetztSpeichern() {
|
||||
clearTimeout(uhr);
|
||||
if (text === gespeichert) return;
|
||||
const wollte = text;
|
||||
standSetzen("speichert …");
|
||||
try {
|
||||
await api("/api/note", { method: "PUT", body: JSON.stringify({ text: wollte }) });
|
||||
gespeichert = wollte;
|
||||
standSetzen("gespeichert");
|
||||
} catch (e) {
|
||||
standSetzen(e.message || "nicht gespeichert");
|
||||
}
|
||||
}
|
||||
|
||||
function standSetzen(s) {
|
||||
stand = s;
|
||||
document.querySelectorAll('[data-widget="notiz"] .zettel-stand').forEach((el) => {
|
||||
el.textContent = s;
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Das kleine Markdown ───────────────────────────────────────────────────
|
||||
*
|
||||
* Absichtlich von Hand und absichtlich klein: Überschriften, Häkchen, Striche,
|
||||
* Aufzählungen, fett, kursiv, Code. Keine Bibliothek — HoneyOS hat keinen
|
||||
* Bauschritt, und für sechs Regeln lohnt kein Nachladen.
|
||||
*
|
||||
* **Zuerst wird escapt, dann gesetzt.** Der Text ist zwar der eigene, aber ein
|
||||
* Zettel, der `<script>` ausführt, wäre eine Falle für den Tag, an dem man
|
||||
* etwas hineinkopiert.
|
||||
*/
|
||||
export function markdown(quelle) {
|
||||
const zeilen = quelle.split("\n");
|
||||
let html = "";
|
||||
let liste = null; // "ul" | "ol" | null
|
||||
let hakenNr = -1; // fortlaufend über den ganzen Text, für data-hak
|
||||
|
||||
const listeZu = () => {
|
||||
if (liste) html += `</${liste}>`;
|
||||
liste = null;
|
||||
};
|
||||
const listeAuf = (art) => {
|
||||
if (liste !== art) {
|
||||
listeZu();
|
||||
html += `<${art}>`;
|
||||
liste = art;
|
||||
}
|
||||
};
|
||||
|
||||
zeilen.forEach((roh) => {
|
||||
const z = roh.trimEnd();
|
||||
|
||||
if (!z.trim()) {
|
||||
listeZu();
|
||||
return;
|
||||
}
|
||||
|
||||
const ueber = /^(#{1,3})\s+(.*)$/.exec(z);
|
||||
if (ueber) {
|
||||
listeZu();
|
||||
const n = ueber[1].length + 2; // # → h3, ## → h4, ### → h5
|
||||
html += `<h${n}>${inline(ueber[2])}</h${n}>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (/^(-{3,}|\*{3,})$/.test(z.trim())) {
|
||||
listeZu();
|
||||
html += "<hr />";
|
||||
return;
|
||||
}
|
||||
|
||||
const hak = /^\s*[-*]\s+\[([ xX])\]\s+(.*)$/.exec(z);
|
||||
if (hak) {
|
||||
hakenNr++;
|
||||
listeAuf("ul");
|
||||
const an = hak[1].toLowerCase() === "x";
|
||||
html +=
|
||||
`<li class="zettel-hak${an ? " ab" : ""}">` +
|
||||
`<label><input type="checkbox" data-hak="${hakenNr}"${an ? " checked" : ""} />` +
|
||||
`<span>${inline(hak[2])}</span></label></li>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const punkt = /^\s*[-*]\s+(.*)$/.exec(z);
|
||||
if (punkt) {
|
||||
listeAuf("ul");
|
||||
html += `<li>${inline(punkt[1])}</li>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const zahl = /^\s*\d+[.)]\s+(.*)$/.exec(z);
|
||||
if (zahl) {
|
||||
listeAuf("ol");
|
||||
html += `<li>${inline(zahl[1])}</li>`;
|
||||
return;
|
||||
}
|
||||
|
||||
listeZu();
|
||||
html += `<p>${inline(z)}</p>`;
|
||||
});
|
||||
|
||||
listeZu();
|
||||
return html;
|
||||
}
|
||||
|
||||
function inline(s) {
|
||||
return escapeHtml(s)
|
||||
.replace(/`([^`]+)`/g, "<code>$1</code>")
|
||||
.replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
|
||||
.replace(/(^|\W)\*([^*\n]+)\*(?=\W|$)/g, "$1<i>$2</i>");
|
||||
}
|
||||
|
||||
/** Legt das n-te Häkchen im Quelltext um — gezählt wie beim Setzen. */
|
||||
export function hakenUmlegen(quelle, n) {
|
||||
let i = -1;
|
||||
return quelle
|
||||
.split("\n")
|
||||
.map((z) => {
|
||||
const hak = /^(\s*[-*]\s+\[)([ xX])(\]\s+.*)$/.exec(z);
|
||||
if (!hak) return z;
|
||||
i++;
|
||||
if (i !== n) return z;
|
||||
return hak[1] + (hak[2].toLowerCase() === "x" ? " " : "x") + hak[3];
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
// Beim Verlassen der Seite noch schnell sichern — der Verzug beim Tippen darf
|
||||
// keinen Satz kosten, nur weil der Tab zugeht.
|
||||
//
|
||||
// `keepalive` statt sendBeacon: Der Beacon kann nur POST und trägt keine
|
||||
// eigenen Kopfzeilen — unser Weg ist ein PUT mit Prüfwort. Ein Beacon wäre
|
||||
// hier also nicht schneller, sondern schlicht abgewiesen worden.
|
||||
window.addEventListener("pagehide", () => {
|
||||
if (text === gespeichert) return;
|
||||
api("/api/note", { method: "PUT", body: JSON.stringify({ text }), keepalive: true }).catch(() => {});
|
||||
});
|
||||
+55
-18
@@ -114,9 +114,59 @@ function zustandHtml(w) {
|
||||
/**
|
||||
* Zeichnet alle Widgets in die Ansicht, die gerade gilt.
|
||||
*
|
||||
* Beide Container werden bei jedem Durchgang neu gefüllt statt einzeln
|
||||
* nachgeführt: Bei einer Handvoll Widgets ist das billiger als Buchführung
|
||||
* darüber, was sich geändert hat — und es kann nicht auseinanderlaufen.
|
||||
* Jedes Widget bekommt seinen eigenen Knoten, der stehen bleibt, solange es
|
||||
* gebraucht wird. Der erste Entwurf hat beide Behälter bei jedem Durchgang neu
|
||||
* gefüllt — kürzer, aber falsch, sobald ein Widget etwas im DOM hält: Der
|
||||
* Zettel wird alle zwei Minuten mitgezeichnet (die Apps werden dann angeklopft),
|
||||
* und wer gerade tippte, verlor Text und Schreibmarke.
|
||||
*
|
||||
* Deshalb zwei Zusagen an die Widgets:
|
||||
* · `stabil: true` — dein Inhalt wird nicht neu gesetzt, solange sich dein
|
||||
* Zustand nicht ändert. Du führst ihn selbst nach.
|
||||
* · `montiert(el)` — wird nach jedem Neusetzen gerufen, zum Verdrahten.
|
||||
*/
|
||||
function baue(behaelter, dran, alsFenster) {
|
||||
const alt = new Map([...behaelter.children].map((el) => [el.dataset.widget, el]));
|
||||
|
||||
dran.forEach((w) => {
|
||||
let el = alt.get(w.id);
|
||||
alt.delete(w.id);
|
||||
|
||||
if (!el) {
|
||||
el = document.createElement(alsFenster ? "section" : "div");
|
||||
el.dataset.widget = w.id;
|
||||
el.className = alsFenster ? "win win-widget" : "deskwidget";
|
||||
if (alsFenster) {
|
||||
el.innerHTML =
|
||||
`<div class="win-bar"><span class="win-title">${w.titel}</span>` +
|
||||
`<span class="win-dots">●●●</span></div><div class="win-body"></div>`;
|
||||
}
|
||||
behaelter.appendChild(el);
|
||||
}
|
||||
|
||||
const koerper = alsFenster ? el.querySelector(".win-body") : el;
|
||||
const frisch = el.dataset.zustand !== zustand[w.id];
|
||||
if (frisch || !w.stabil) {
|
||||
koerper.innerHTML = zustandHtml(w);
|
||||
el.dataset.zustand = zustand[w.id];
|
||||
if (w.montiert && zustand[w.id] === "fertig") w.montiert(koerper);
|
||||
}
|
||||
});
|
||||
|
||||
alt.forEach((el) => el.remove());
|
||||
|
||||
// Reihenfolge nur anfassen, wenn sie nicht stimmt: Einen Knoten zu verschieben
|
||||
// heißt, ihn kurz aus dem Dokument zu nehmen — ein Textfeld verliert dabei
|
||||
// die Schreibmarke.
|
||||
const soll = dran.map((w) => w.id).join(",");
|
||||
const ist = [...behaelter.children].map((el) => el.dataset.widget).join(",");
|
||||
if (soll !== ist) {
|
||||
dran.forEach((w) => behaelter.appendChild(behaelter.querySelector(`[data-widget="${w.id}"]`)));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wählt aus, was gerade dran ist, und lässt es zeichnen.
|
||||
*/
|
||||
export function widgetsZeichnen() {
|
||||
const desktop = state.settings.mode === "desktop";
|
||||
@@ -133,19 +183,6 @@ export function widgetsZeichnen() {
|
||||
return !(zustand[w.id] === "leer" && w.leer === "verbergen");
|
||||
});
|
||||
|
||||
spalte.innerHTML = desktop
|
||||
? ""
|
||||
: dran
|
||||
.map(
|
||||
(w) => `
|
||||
<section class="win win-widget" data-widget="${w.id}">
|
||||
<div class="win-bar"><span class="win-title">${w.titel}</span><span class="win-dots">●●●</span></div>
|
||||
<div class="win-body">${zustandHtml(w)}</div>
|
||||
</section>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
schilder.innerHTML = desktop
|
||||
? dran.map((w) => `<div class="deskwidget" data-widget="${w.id}">${zustandHtml(w)}</div>`).join("")
|
||||
: "";
|
||||
baue(spalte, desktop ? [] : dran, true);
|
||||
baue(schilder, desktop ? dran : [], false);
|
||||
}
|
||||
Reference in new issue
Block a user