Modal de pré-visualização de tópico

Personalização Componente de tema
4

Para quem usa o tema Reddit-ish, aqui está uma correção que funcionou para mim.

Compatibilidade com o tema Reddit-ish

Apenas um aviso para quem usa o tema Reddit-ish: o botão do modal funciona, mas o gatilho de linha padrão não.

O problema é que o Reddit-ish substitui o comportamento padrão da linha da lista de tópicos e trata cliques em todo o cartão do tópico. Por isso, o tratamento normal de clique na linha do modal não funciona como esperado.

Alterar a configuração do Modal de Pré-visualização do Tópico para:

Estilo de gatilho: botão
Saída do plugin: topic-list-after-title

funciona corretamente, porque o Reddit-ish já inclui a saída topic-list-after-title.

Para manter o comportamento de clique em todo o cartão, deixei o Modal de Pré-visualização do Tópico no modo botão e alterei a ação openTopic() existente do Reddit-ish para que ela acione o botão funcional do modal.

A ação original do Reddit-ish é:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

Eu a alterei para:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

O gatilho do botão do modal é renderizado como:

<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

Portanto, isso não recria nenhuma lógica do modal. Ele simplesmente faz com que o clique no cartão do Reddit-ish acione o botão de pré-visualização existente e funcional.

O resultado é:

  • O clique no cartão do tópico abre o modal de pré-visualização.

  • O clique no título do tópico abre o modal de pré-visualização.

  • O botão de pré-visualização continua funcionando.

  • O clique com Cmd/Ctrl ainda abre o tópico normal em uma nova aba.

  • A categoria e outros links normais continuam se comportando normalmente.

  • Se o botão de pré-visualização não estiver presente, o Reddit-ish volta à navegação de tópicos normal.

Portanto, o modal subjacente funciona bem com o Reddit-ish; a incompatibilidade é especificamente com o gatilho de linha padrão.

Eu também escondi o botão usando

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3 curtidas