Por el momento, los Oneboxes para eventos son un poco sosos. Básicamente, no son diferentes a los Oneboxes de temas normales y no incluyen la fecha, hora, descripción, etc. (a menos que se incluyan en el Título del Tema como solución alternativa).
Aquí tienes un ejemplo de evento de nuestro sitio:
¿Sería posible conectarse a las nuevas (y brillantes) tarjetas que aparecen al hacer clic en el calendario para los eventos y servirlas como oneboxes? Por ejemplo:
Puede que eso no sea factible en absoluto, pero me pregunto si los metadatos podrían modificarse para las publicaciones de eventos de modo que se muestren en Onebox de una manera que resalte la información crítica del evento (especialmente internamente).
Mientras jugaba con ese menú contextual, me pregunto si “Añadir al calendario” estaría mejor ubicado directamente en la tarjeta. Las otras opciones son bastante administrativas, pero esa es una función para todos los usuarios que quedaría bien destacada en la interfaz de usuario.
En las publicaciones de eventos, coloco la opción “agregar al calendario” en un lugar obvio; puedes agregar esto al encabezado de JavaScript del tema accesible desde el menú de apariencia del administrador:
<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";
// Añadir CSS en línea para mantener el texto y el icono en negro al pasar el ratón
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);
// Ayudante para esperar un elemento en el 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>
`;
// Estilos en línea para alineación a la izquierda
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";
// Lógica de clic: abrir menú y activar el botón original "Agregar al calendario"
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // abrir menú
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// Insertar en event-info
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// Observar cambios en el DOM (seguro para Ember)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Intento inicial
createAddToCalendarButton();
})();
</script>
, esto haría que la promoción del evento brillara más.
