Javascripts que visam o rodapé não funcionam após transições de página

Dev
1

Escrevi um CSS para tornar o menu do rodapé responsivo. Ao acessar dispositivos móveis, os menus do rodapé são projetados de forma semelhante ao menu hambúrguer. Portanto, criei uma função de clique na seção Editar CSS/HTML >> /head para alternar os menus na visualização móvel.

ScriptIssue
ScriptIssue820×283 5.72 KB

Aqui, a função de clique funcionava perfeitamente na página inicial do Discourse. No entanto, em outras páginas, como Resumo, Conta do Fórum, etc., o script foi bloqueado. Assim, não consigo visualizar os submenus. Além disso, consigo ver o script na fonte do navegador.

Por que a execução de scripts personalizados foi bloqueada em algumas páginas do Discourse? Qual é a solução definitiva para esse problema?

2

O Discourse é uma aplicação de página única. Portanto, os scripts que você adiciona na tag <head> são executados apenas uma vez no carregamento inicial da página, a menos que você utilize os ganchos adequados. Provavelmente, você precisará ajustar seu código para adicionar um ouvinte de eventos em vez disso.

Você pode compartilhar seu código?

3

Aqui está meu script,

ScriptTagHead
ScriptTagHead1117×450 20.8 KB

4

Provavelmente existem algumas maneiras de resolver isso, mas vamos tentar a maneira “correta”, usando os hooks de personalização adequados.

Quando você adiciona HTML à seção de rodapé de um tema, o Discourse faz algum processamento para evitar que ele se mova entre transições de página ou quando mais elementos são adicionados com rolagem infinita.

Ele é adicionado como um componente custom-html aqui.

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

Se você examinar o código do componente, verá que ele dispara um evento do aplicativo quando é renderizado.

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

Esse é o hook que você precisa usar.

Como usá-lo?
Existe um método no plugin-api que permite executar código quando um evento específico do aplicativo é disparado.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

Como já sabemos o nome do evento, podemos usá-lo da seguinte forma:

api.onAppEvent("inserted-custom-html:footer", () => {
  // faça seu trabalho aqui
});

Como este é um método da API de plugins, você precisa alterar o tipo da sua tag script para text/discourse-plugin, assim:

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // faça seu trabalho aqui
});
</script>

O trecho acima será executado sempre que o rodapé for renderizado. Assim, você agora pode fazer algo como isso:

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("evento de clique capturado");
    // faça seu trabalho aqui para o evento de clique
  });
});
</script>

Você pode ler mais sobre a API de plugins aqui

5

Incrível, obrigado :slight_smile: