Isso pode ser útil se o Ver x tópico novo ou atualizado fosse fixado no topo, abaixo do cabeçalho, para que você o visse imediatamente ao rolar a lista de tópicos. Ao clicar na barra, a página saltaria para o topo para carregar os tópicos novos ou atualizados.
A outra parte (JS) seria uma função de clique para saltar ou rolar até o topo, mas não sei como fazer isso ou qual seria a melhor maneira.
Encontrei essa seção nos templates discovery/topics.hbs e discovery/categories.hbs. Se eu modificar o <a href para <a href="/", pode funcionar (não tenho certeza, não testei), mas com isso a página recarregaria toda vez, como ao clicar no logotipo.
Sim, adicionar uma URL causará navegação, já que não há lógica para interceptar o evento.
O link está chamando uma ação do Ember. Todas as ações no Discourse são extensíveis. Portanto, elas atuam como ganchos de personalização, de certa forma. Então, como você modifica uma ação? Bem, vamos verificar primeiro o que ela faz.
Pesquise no GitHub ou localmente pelo nome da ação. As ações são sempre definidas em arquivos JS e referenciadas no Handlebars. Queremos ver a definição, então restringimos a pesquisa aos arquivos JS.
Você obterá quatro arquivos. Qual deles você deve analisar? Você quer personalizar o
discovery/topics.hbs
template. Então
discovery/topics.js
é o que você deve analisar.
Algum desses códigos é útil? Não, mas agora sabemos onde a ação está definida. Então, vamos modificá-la.
discovery/topics.js é uma classe Ember. Você pode modificar classes Ember com um método na plugin-api chamado… modifyClass
Já sabemos a Classe que queremos modificar. É discovery/topics. Precisamos saber que tipo de Classe é. Então, vamos verificar o diretório do arquivo.
discourse/app/controllers/discovery/topics.js
É um controlador.
Também sabemos que queremos modificar a ação showInserted nessa Classe. Então, começamos com isso.
api.modifyClass("controller:discovery/topics", {
pluginId: 'sticky-new-topics-banner',
actions: {
showInserted() {
// vamos fazer algum trabalho
}
}
});
Depois, você pode adicionar qualquer código que desejar para rolar a janela quando o usuário clicar no banner de “novos tópicos”. Eu optei por algo assim.
Então, já terminamos? Não. Isso quebra o Discourse porque você está substituindo completamente a ação. Ao clicar no link, agora ele rolará até o elemento list-controls, mas não carregará os novos tópicos. Por quê? Porque o código principal não está mais sendo aplicado. Quero dizer, essas coisas
Então, como você corrige isso? Com esta linha simples
this._super(...arguments);
Você não precisa copiar nenhum código do núcleo se quiser apenas adicioná-lo. Faça seu trabalho e depois adicione essa linha. Tudo o que ela faz é garantir que o código do núcleo seja aplicado.
Se você testar isso, verá que quase tudo funciona muito bem, exceto… o cabeçalho está sobrepondo o list-controls. Por quê? Porque o cabeçalho está definido como fixo (sticky).
Você pode corrigir isso de várias formas em JS — calcular a altura, obter o deslocamento, importar um auxiliar do Discourse… etc. Não entrarei nesses detalhes.
A maneira mais fácil é com CSS usando scroll-margin-top, sobre o qual você pode ler aqui.
Em português: Quando o link for clicado, role até o topo do list-controls - 2 * a altura do cabeçalho, para que não haja sobreposição e haja um pouco de espaço abaixo dele.
#list-area {
// mobile tem um layout diferente
.alert-info,
.show-more.has-topics {
position: sticky;
// safari às vezes é exigente sem o prefixo
position: -webkit-sticky;
top: var(--header-offset);
// banner deve estar acima do conteúdo
z-index: z("header");
}
}
.list-controls {
scroll-margin-top: calc(var(--header-offset) * 2);
}
Obrigado, @Johani! Isso foi muito útil para mim e acho que finalmente entendi muitas coisas. Gosto muito das suas respostas detalhadas, porque podemos aprender muito com elas: como as coisas funcionam e, claro, que tudo funciona perfeitamente. Obrigado novamente!
