Al momento, i Onebox per gli eventi sono un po’ meh. In sostanza, non sono diversi dai normali Onebox degli argomenti e non includono data, ora, descrizione, ecc. ecc. (a meno che non vengano inseriti nel titolo dell’argomento come soluzione alternativa).
Ecco un esempio di evento dal nostro sito:
Sarebbe possibile agganciarsi alle nuove (e brillanti) schede che appaiono al clic nel calendario per gli eventi e servirle come onebox? Ad esempio:
Ciò potrebbe non essere fattibile, ma mi chiedo se i metadati possano essere modificati per i post di eventi in modo che vengano visualizzati come Onebox in un modo che evidenzi le informazioni critiche dell’evento (soprattutto internamente).
@chapoi / @j.jaffeux Ci ho pensato.\n\nPenso che un cambiamento fondamentale che dobbiamo apportare qui sia introdurre URL di eventi appropriati in modo da poterli utilizzare per il onebox e invece di fare il onebox di:\n\nhttps://SITE/t/slug/123\n\nFaremo il onebox di:\n\nhttps://SITE/event/slug/1234\n\n\nApre un po’ una scatola di Pandora (in senso buono però)\n\n1. Come fanno le persone a trovare il link all’evento? (Immagino che lo aggiungeremo al menu contestuale)\n2. Cosa succede se visitano l’evento direttamente dall’URL? (Immagino che per ora reindirizzeremo al post dell’evento)
Mentre armeggiavo con quel menu contestuale, mi chiedo se “Aggiungi al calendario” sarebbe meglio posizionato direttamente sulla scheda. Tutte le altre cose sono piuttosto amministrative, ma quella è una cosa per tutti gli utenti che farebbe bene a essere prominente nell’interfaccia utente.
Nei post degli eventi, inserisco l’opzione “aggiungi al calendario” in un punto evidente; puoi aggiungerla all’intestazione JavaScript del tema, raggiungibile dal menu Aspetto dell’amministratore:
<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";
// Aggiungi CSS inline per mantenere testo e icona neri al passaggio del mouse
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);
// Helper per attendere un elemento nel DOM
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 = "Add to calendar";
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">Add to calendar</span>
`;
// Stili inline per l'allineamento a sinistra
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";
// Logica del click: apri il menu e attiva l'originale Aggiungi al calendario
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // apri il menu
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// Inserisci in event-info
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// Osserva le modifiche al DOM (sicuro per Ember)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Tentativo iniziale
createAddToCalendarButton();
})();
</script>
, questo farebbe davvero risplendere la promozione dell’evento.
