Fenêtre modale d'aperçu du sujet

Personnalisation Composant de thème
4

Pour toute personne utilisant le thème Reddit-ish, voici une solution qui a fonctionné pour moi.

Compatibilité avec le thème Reddit-ish

Juste une note pour ceux qui utilisent le thème Reddit-ish : le bouton modal fonctionne, mais le déclencheur par ligne par défaut ne fonctionne pas.

Le problème vient du fait que Reddit-ish remplace le comportement standard des lignes de la liste des sujets et gère les clics sur toute la carte du sujet. En conséquence, la gestion normale des clics sur les lignes par le modal ne fonctionne pas comme prévu.

Modifier le paramètre du modal de prévisualisation des sujets en :

Style de déclenchement : button
Emplacement de plugin : topic-list-after-title

fonctionne correctement, car Reddit-ish inclut déjà l’emplacement topic-list-after-title.

Pour conserver le comportement de clic sur toute la carte, j’ai laissé le modal de prévisualisation des sujets en mode bouton et j’ai modifié l’action openTopic() existante de Reddit-ish afin qu’elle déclenche le bouton fonctionnel du modal.

L’action originale de Reddit-ish est :

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

Je l’ai modifiée comme suit :

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

Le déclencheur par bouton du modal est rendu comme suit :

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

Ainsi, cela ne recrée aucune de la logique du modal. Il se contente de faire en sorte que le clic sur la carte Reddit-ish déclenche le bouton de prévisualisation existant et fonctionnel.

Le résultat est le suivant :

  • Un clic sur la carte du sujet ouvre le modal de prévisualisation.

  • Un clic sur le titre du sujet ouvre le modal de prévisualisation.

  • Le bouton de prévisualisation fonctionne toujours.

  • Cmd/Ctrl+clic ouvre toujours le sujet normal dans un nouvel onglet.

  • Les catégories et autres liens normaux continuent de se comporter normalement.

  • Si le bouton de prévisualisation n’est pas présent, Reddit-ish revient à sa navigation normale vers les sujets.

Le modal sous-jacent fonctionne donc correctement avec Reddit-ish ; l’incompatibilité concerne spécifiquement le déclencheur par ligne par défaut.

J’ai également masqué le bouton en utilisant :

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