Wire mail action bar buttons

This commit is contained in:
DonVoo 2026-07-13 12:06:41 +02:00
parent 0e47f8c61f
commit e8029a177c
3 changed files with 113 additions and 25 deletions

View file

@ -8,26 +8,106 @@
bar.innerHTML = `
<label class="action-search" aria-label="Suchen">
<span aria-hidden="true">&#x2315;</span>
<input type="search" placeholder="Suchen">
<input type="search" placeholder="Suchen" data-action-search>
</label>
<button class="action-btn primary" type="button"><span aria-hidden="true">&#x2709;</span> Neu</button>
<button class="action-btn primary" type="button" data-action-new><span aria-hidden="true">&#x2709;</span> Neu</button>
<button class="action-btn" type="button" data-action-refresh><span aria-hidden="true">&#x21BB;</span> Aktualisieren</button>
<span class="action-separator"></span>
<button class="action-btn" type="button"><span aria-hidden="true">&#x21A9;</span> Antworten</button>
<button class="action-btn" type="button"><span aria-hidden="true">&#x21AA;</span> Weiterleiten</button>
<button class="action-btn" type="button" data-action-reply><span aria-hidden="true">&#x21A9;</span> Antworten</button>
<button class="action-btn" type="button" data-action-forward><span aria-hidden="true">&#x21AA;</span> Weiterleiten</button>
<span class="action-separator"></span>
<button class="action-btn muted" type="button"><span aria-hidden="true">&#x2691;</span> Markieren</button>
<button class="action-btn muted" type="button"><span aria-hidden="true">&#x25A3;</span> Archivieren</button>
<button class="action-btn muted" type="button"><span aria-hidden="true">&#x23F2;</span> Zurueckstellen</button>
<button class="action-btn muted" type="button"><span aria-hidden="true">&#x26A1;</span> Schnelle Aktionen</button>
<button class="action-btn muted" type="button"><span aria-hidden="true">&#x232B;</span> Loeschen</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x2691;</span> Markieren</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x25A3;</span> Archivieren</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x23F2;</span> Zurueckstellen</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x26A1;</span> Schnelle Aktionen</button>
<button class="action-btn muted" type="button" disabled><span aria-hidden="true">&#x232B;</span> Loeschen</button>
`;
ribbon.insertAdjacentElement("afterend", bar);
}
function selectedPreview() {
const read = document.querySelector("#read .read-body, #transfer-preview .read-body, .pane-read .read-body");
if (!read || read.querySelector(".ef-empty")) return null;
const subject = read.querySelector(".read-subject")?.textContent?.trim() || "";
const meta = read.querySelector(".read-meta")?.innerText || "";
const body = read.querySelector(".read-pre")?.innerText || "";
const from = (meta.match(/Von:\s*(.+)/i) || [])[1]?.trim() || document.querySelector(".msg-row.active .msg-from")?.textContent?.trim() || "";
const date = (meta.match(/Datum:\s*(.+)/i) || [])[1]?.trim() || document.querySelector(".msg-row.active .msg-date")?.textContent?.trim() || "";
return { subject, from, date, body };
}
function prefixedSubject(prefix, subject) {
const clean = subject || "";
if (new RegExp(`^${prefix}:`, "i").test(clean)) return clean;
return `${prefix}: ${clean || "(ohne Betreff)"}`;
}
function openMailto(mail) {
const params = new URLSearchParams();
if (mail.subject) params.set("subject", mail.subject);
if (mail.body) params.set("body", mail.body);
window.location.href = `mailto:${encodeURIComponent(mail.to || "")}?${params.toString()}`;
}
function quoteBody(message) {
const lines = (message.body || "").split(/\r?\n/).map((line) => `> ${line}`).join("\n");
return `\n\nAm ${message.date || "unbekanntes Datum"} schrieb ${message.from || "unbekannter Absender"}:\n${lines}`;
}
function forwardBody(message) {
return `\n\n---------- Weitergeleitete Nachricht ----------\nVon: ${message.from || ""}\nDatum: ${message.date || ""}\nBetreff: ${message.subject || ""}\n\n${message.body || ""}`;
}
function applyListSearch(term) {
const q = term.trim().toLowerCase();
document.querySelectorAll(".msg-row").forEach((row) => {
row.hidden = q !== "" && !row.textContent.toLowerCase().includes(q);
});
}
function runSearch(input) {
const existing = document.querySelector(".searchbar .search-input");
const form = existing?.closest("form");
if (existing && form && input.value.trim()) {
existing.value = input.value;
form.requestSubmit();
return;
}
applyListSearch(input.value);
}
document.addEventListener("DOMContentLoaded", ensureActionBar);
document.addEventListener("click", (event) => {
const row = event.target.closest(".msg-row");
if (!row) return;
row.closest(".pane")?.querySelectorAll(".msg-row.active").forEach((item) => item.classList.remove("active"));
row.classList.add("active");
});
document.addEventListener("click", (event) => {
if (event.target.closest("[data-action-new]")) {
openMailto({ to: "", subject: "", body: "" });
}
if (event.target.closest("[data-action-refresh]")) window.location.reload();
if (event.target.closest("[data-action-reply]")) {
const message = selectedPreview();
if (!message) {
window.alert("Bitte zuerst eine Nachricht waehlen.");
return;
}
openMailto({ to: message.from, subject: prefixedSubject("Re", message.subject), body: quoteBody(message) });
}
if (event.target.closest("[data-action-forward]")) {
const message = selectedPreview();
if (!message) {
window.alert("Bitte zuerst eine Nachricht waehlen.");
return;
}
openMailto({ to: "", subject: prefixedSubject("Fw", message.subject), body: forwardBody(message) });
}
});
document.addEventListener("input", (event) => {
const input = event.target.closest("[data-action-search]");
if (input) runSearch(input);
});
})();