No momento, os Oneboxes para eventos são um pouco fracos. Basicamente, eles não são diferentes dos Oneboxes de tópicos regulares e não incluem data, hora, descrição, etc. (a menos que sejam colocados no Título do Tópico como uma solução alternativa).
Aqui está um exemplo de evento do nosso site:
Seria possível integrar os novos (e brilhantes) cartões que aparecem ao clicar no calendário para eventos e servi-los como oneboxes? Por exemplo:
Isso pode não ser viável, mas me pergunto se os metadados poderiam ser modificados para posts de eventos para que eles façam Onebox de uma forma que destaque as informações críticas do evento (especialmente internamente).
Acho que uma mudança fundamental que precisamos aqui é introduzir URLs de eventos adequados para que você possa usá-los para onebox e, em vez de fazer onebox:
https://SITE/t/slug/123
Faremos onebox:
https://SITE/event/slug/1234
Isso abre um pouco a caixa de Pandora (de uma forma boa, no entanto)
Como as pessoas encontram o link para o evento? (Acho que adicionamos ao menu de contexto)
O que acontece se elas visitarem o evento diretamente do URL? (Acho que redirecionamos para o post do evento por enquanto)
Enquanto mexia nesse menu de contexto, me pergunto se o Adicionar ao calendário ficaria melhor posicionado diretamente no card. Todas as outras coisas são bem administrativas, mas essa é uma coisa para todos os usuários que se beneficiaria de ser proeminente na interface.
Nas postagens de eventos, coloco a opção “adicionar ao calendário” em um local óbvio; você pode adicionar isso ao cabeçalho JavaScript do tema, acessível no menu de aparência do 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";
// Adiciona CSS inline para manter o texto e o ícone pretos ao passar o 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);
// Auxiliar para esperar por um elemento no 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 inline para alinhamento à esquerda
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 clique: abre o menu e aciona o "Adicionar ao calendário" original
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // abre o menu
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// Insere no event-info
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// Observa mudanças no DOM (seguro para Ember)
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// Primeira tentativa
createAddToCalendarButton();
})();
</script>
, isso faria a promoção do evento brilhar ainda mais.
