Derzeit sind die Oneboxes für Veranstaltungen eher mittelmäßig. Im Grunde unterscheiden sie sich nicht von regulären Oneboxes für Themen und enthalten nicht Datum, Uhrzeit, Beschreibung usw. (es sei denn, sie werden als Workaround in den Thema-Titel eingefügt).
Hier ist ein Beispiel für eine Veranstaltung von unserer Website:
Wäre es möglich, sich in die neuen (und brillanten) Karten einzuklinken, die beim Klicken im Kalender für Veranstaltungen erscheinen, und diese als Oneboxes auszugeben? Zum Beispiel:
Das ist vielleicht gar nicht machbar, aber ich frage mich, ob die Metadaten für Veranstaltungsbeiträge so modifiziert werden könnten, dass sie auf eine Weise Oneboxen, die die kritischen Veranstaltungsinformationen (insbesondere intern) hervorhebt.
Ich denke, eine grundlegende Änderung, die wir hier brauchen, ist die Einführung von richtigen Event-URLs, damit Sie sie zum Oneboxing verwenden können, und anstatt zu oneboxen:
https://SITE/t/slug/123
Wir würden oneboxen:
https://SITE/event/slug/1234
Es öffnet sich zwar eine Büchse der Pandora (aber im guten Sinne)
Wie finden die Leute den Link zur Veranstaltung? (Ich schätze, wir fügen ihn zum Kontextmenü hinzu)
Was passiert, wenn sie die Veranstaltung direkt über die URL besuchen? (Ich schätze, wir leiten sie vorerst zur Veranstaltung weiter)
Während ich mit diesem Kontextmenü herumspiele, frage ich mich, ob „Zum Kalender hinzufügen“ direkt auf der Karte besser platziert wäre. Alle anderen Dinge sind ziemlich administrativ, aber diese ist eine Sache für alle Benutzer, die in der Benutzeroberfläche gut sichtbar sein sollte.
In Veranstaltungsbeiträgen platziere ich die Option „Zum Kalender hinzufügen“ an einer offensichtlichen Stelle. Sie können dies zum JavaScript-Header des Themes hinzufügen, der über das Menü „Darstellung“ im Adminbereich erreichbar ist:
<script>
(() => {
const eventInfoSelector = ".event-header .event-info";
const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
const menuContentSelector = ".fk-d-menu__inner-content";
const addToCalendarSelector = "li.add-to-calendar > button";
// Inline-CSS hinzufügen, um Text und Icon beim Hovern schwarz zu halten
const style = document.createElement("style");
style.innerHTML = `
.btn.btn-icon-text.custom-add-to-calendar-btn,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover {
color: black !important;
}
.btn.btn-icon-text.custom-add-to-calendar-btn svg,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
fill: black !important;
}
`;
document.head.appendChild(style);
// Hilfsfunktion, um auf ein Element im DOM zu warten
const waitForElement = (selector, timeout = 3000) => {
return new Promise((resolve, reject) => {
const el = document.querySelector(selector);
if (el) return resolve(el);
const observer = new MutationObserver(() => {
const found = document.querySelector(selector);
if (found) {
observer.disconnect();
resolve(found);
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
};
const createAddToCalendarButton = async () => {
const eventInfo = document.querySelector(eventInfoSelector);
if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;
const button = document.createElement("button");
button.className = "btn btn-icon-text custom-add-to-calendar-btn";
button.title = "Zum Kalender hinzufügen";
button.innerHTML = `
<svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="#file"></use>
</svg>
<span class="d-button-label">Zum Kalender hinzufügen</span>
`;
// Inline-Styles für Linksbündigkeit
button.style.display = "inline-flex";
button.style.justifyContent = "flex-start";
button.style.marginLeft = "0";
button.style.marginBottom = "4px";
button.style.backgroundColor = "#f0f0f0";
button.style.borderRadius = "6px";
button.style.transition = "transform 0.2s";
button.style.cursor = "pointer";
// Klick-Logik: Menü öffnen und ursprünglichen "Zum Kalender hinzufügen"-Button auslösen
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // Menü öffnen
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// In event-info einfügen
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// DOM-Änderungen beobachten (Ember-sicher)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Erster Versuch
createAddToCalendarButton();
})();
</script>
, das würde die Veranstaltungsförderung in der Tat noch mehr glänzen lassen.
