Probablemente haya varias formas de abordar esto, pero intentemos hacerlo de la “manera correcta” utilizando los hooks de personalización adecuados.
Cuando agregas HTML a la sección del pie de página de un tema, Discourse realiza cierto procesamiento para evitar que se desplace entre transiciones de página o cuando se agregan más elementos con desplazamiento infinito.
Se agrega como un componente custom-html aquí.
discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub
Si revisas el código del componente, verás que dispara un evento de la aplicación cuando se renderiza.
discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub
Este es el hook que necesitas usar.
¿Cómo se usa?
Hay un método en plugin-api que te permite ejecutar código cuando se dispara un evento específico de la aplicación.
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519
Como ya conocemos el nombre del evento, podemos usarlo de la siguiente manera:
api.onAppEvent("inserted-custom-html:footer", () => {
// realiza tu trabajo aquí
});
Dado que este es un método de plugin-API, debes cambiar el tipo de tu etiqueta script a text/discourse-plugin de la siguiente manera:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
// realiza tu trabajo aquí
});
</script>
El fragmento anterior se ejecutará cada vez que se renderice el pie de página. Por lo tanto, ahora puedes hacer algo como esto:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
$(".footer-div #footerNavDiv").click(function () {
console.log("evento de clic capturado");
// realiza tu trabajo aquí para el evento de clic
});
});
</script>
Puedes leer más sobre plugin-API aquí
!