Ci sono probabilmente diversi modi per risolvere questo problema, ma proviamo il metodo ‘corretto’ utilizzando gli appositi hook di personalizzazione.
Quando aggiungi HTML alla sezione footer di un tema, Discourse esegue alcune operazioni di gestione per evitare che l’elemento si sposti durante le transizioni tra le pagine o quando vengono aggiunti altri elementi tramite lo scroll infinito.
Viene aggiunto come componente custom-html qui:
discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub
Se esamini il codice del componente, vedrai che viene generato un evento dell’applicazione quando viene renderizzato.
discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub
Questo è l’hook che devi utilizzare.
Come si usa?
Esiste un metodo in plugin-api che ti permette di eseguire codice quando viene generato un specifico evento dell’applicazione.
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519
Poiché conosciamo già il nome dell’evento, possiamo utilizzarlo nel seguente modo:
api.onAppEvent("inserted-custom-html:footer", () => {
// esegui qui il tuo lavoro
});
Poiché si tratta di un metodo della plugin-API, devi cambiare il tipo del tag script in text/discourse-plugin come mostrato qui:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
// esegui qui il tuo lavoro
});
</script>
Il frammento sopra verrà eseguito ogni volta che il footer viene renderizzato. Quindi, ora puoi fare qualcosa del genere:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
$(".footer-div #footerNavDiv").click(function () {
console.log("evento click catturato");
// esegui qui il tuo lavoro per l'evento click
});
});
</script>
Puoi leggere ulteriori informazioni sulla plugin-API qui
