Alterar destino do link do logotipo

Suporte
1

Tenho um site onde vários grupos possuem suas próprias categorias, e há o desejo de que essas categorias sejam personalizadas com o logotipo do proprietário do grupo.

Para cada categoria, há um código como este:

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

O problema é que, ao clicar no logotipo, você é redirecionado para a página inicial do site, em vez da categoria. Isso é (em grande parte) resolvido pelo seguinte:

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // não navegar para a URL base
    event.preventDefault();
    
    // obter a categoria ativa pelo ID do div
    div = $("body[class*='category-']")[0];

    // extrair o slug da classe que começa com category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // definir o href como a URL do slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

Se você clicar no logotipo em uma página de categoria ou de tópico, será levado à página da categoria. Uau!

MAS se você clicar no pequeno espaço entre o logotipo e a parte inferior desse cabeçalho, será levado à página inicial em vez da página da categoria. É praticamente impossível distinguir qual ação será executada. Ao passar o mouse sobre a URL na parte inferior do Chrome, ela mostra a página inicial do site em vez da URL da categoria, independentemente de para onde você será redirecionado.

(Eu usei Custom Header Links para adicionar um link para a página inicial. Não acredito que isso tenha algo a ver com o comportamento descrito acima.)

E não posso compartilhar o site porque as categorias por unidade são visíveis apenas para membros do grupo.

2

Acho que o que está acontecendo é que você está clicando em uma pequena parte do link que contém #site-text-logo?

A estrutura é: div.title a #site-text-logo e você está capturando os cliques especificamente em #site-text-logo, mas não no a que o envolve.

Você provavelmente pode usar event.preventDefault(); no link .title a dentro do seu JS, ou talvez tentar .title a {pointer-events: none;} no CSS?

3

Você é incrível. Agradeço muito. Me ajude a resolver uma chave duplicada no PostgreSQL, claro, mas só o CSS mais simples faz sentido para mim e eu mal entendo a sintaxe do JavaScript.

MAS ESPERE.

Num assunto totalmente desconexo, acabei de fazer com que, no site Kanban da minha esposa, clicar no logotipo do site leve à categoria TODO. Criei um componente de tema que permite definir a página inicial para uma URL arbitrária. Fiz assim:

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

Talvez eu devesse fazer algo assim em vez disso? Embora eu não tenha certeza de como saber quais categorias querem que sua página inicial seja remapeada. Talvez uma configuração do site com um array de IDs de categoria? Acredito que consigo descobrir no Google como obter a categoria atual e verificar se esse ID está num array numa configuração do site.

EDIT: Hmm, mas não consigo saber, dentro de um <script type="text/javascript">, como identificar qual é a categoria da página atual . . . para alterar seletivamente o setDefaultHomepage.

Isso parece mais fácil?

Mas voltando à solução original

Acho que faz sentido para mim, mas isso não significa muito.

Acho que é que, de algum modo, o <h1> faz a coisa certa, mas o <a> está indo para a página inicial do site?

Sou só um cavernícola. Não faço ideia do que isso significa. Já existe no JavaScript algumas coisas que parecem bastante com isso. Deveria criar outro $(document).ready(function() { desses? Ou apenas adicionar mais um $(".title #site-text-logo").click(function(event){ ali de alguma forma?

O que eu tentei não pareceu fazer nenhuma diferença.

Entendi esse um pouco melhor e fiz o seguinte:

/* manter o pequeno pedaço perto do logotipo sem linkar para a página inicial */
.title a {pointer-events: none;}

Isso mudou alguma coisa! E vi que funcionou porque agora nenhuma parte do logotipo faz nada.