Vista previa del tema

Personalización Componente temático
4

Para cualquiera que use el tema estilo Reddit, aquí hay una solución que me funcionó.

Compatibilidad con el tema estilo Reddit

Solo una nota para quienes usan el tema estilo Reddit: el botón del modal funciona, pero el disparador de fila predeterminado no.

El problema es que el tema estilo Reddit reemplaza el comportamiento estándar de la fila de la lista de temas y maneja los clics en toda la tarjeta del tema. Debido a eso, el manejo normal de clics en filas del modal no funciona como se espera.

Cambiar la configuración de Vista Previa del Tema a:

Estilo de disparador: botón
Salida del plugin: topic-list-after-title

funciona correctamente, porque el tema estilo Reddit ya incluye la salida topic-list-after-title.

Para mantener el comportamiento de clic en toda la tarjeta, dejé la Vista Previa del Tema en modo botón y cambié la acción openTopic() existente del tema estilo Reddit para que active el botón funcional del modal.

La acción original del tema estilo Reddit es:

@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);
  }
}

La cambié a:

@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);
}

El disparador del botón del modal se renderiza como:

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

Así que esto no recrea ninguna de la lógica del modal. Simplemente hace que el clic en la tarjeta del tema estilo Reddit active el botón de vista previa existente y funcional.

El resultado es:

  • El clic en la tarjeta del tema abre el modal de vista previa.

  • El clic en el título del tema abre el modal de vista previa.

  • El botón de vista previa sigue funcionando.

  • El clic con Cmd/Ctrl sigue abriendo el tema normal en una nueva pestaña.

  • La categoría y otros enlaces normales continúan comportándose normalmente.

  • Si el botón de vista previa no está presente, el tema estilo Reddit vuelve a su navegación de temas normal.

Así que el modal subyacente funciona bien con el tema estilo Reddit; la incompatibilidad es específicamente con el disparador de fila predeterminado.

También oculté el botón usando

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