Vorschau-Dialogfeld für Themen

Anpassung Themenkomponente
4

Für alle, die das Reddit-ähnliche Theme verwenden, hier eine Lösung, die bei mir funktioniert hat.

Kompatibilität mit dem Reddit-ähnlichen Theme

Nur eine kurze Anmerkung für alle, die das Reddit-ähnliche Theme verwenden: Der Modal-Button selbst funktioniert, aber der Standard-Zeilen-Trigger nicht.

Das Problem ist, dass das Reddit-ähnliche Theme das Standardverhalten der Themenlistenzeile ersetzt und Klicks auf die gesamte Themenkarte selbst verarbeitet. Deshalb funktioniert die normale Klickverarbeitung der Zeile für den Modal nicht wie beabsichtigt.

Wenn man die Einstellung für den Themen-Vorschau-Modal auf ändert:

Trigger-Stil: button
Plugin-Ausgang: topic-list-after-title

funktioniert es korrekt, da das Reddit-ähnliche Theme den Ausgang topic-list-after-title bereits enthält.

Um das Klickverhalten der gesamten Karte beizubehalten, habe ich den Themen-Vorschau-Modal im Button-Modus belassen und die bestehende openTopic()-Aktion des Reddit-ähnlichen Themas so geändert, dass sie den funktionierenden Button des Modals auslöst.

Die ursprüngliche Aktion des Reddit-ähnlichen Themas ist:

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

Ich habe sie geändert zu:

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

Der Trigger-Button des Modals wird gerendert als:

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

Somit wird keine der Modal-Logik neu erstellt. Es lässt einfach den Klick auf die Karte des Reddit-ähnlichen Themas den bestehenden funktionierenden Vorschau-Button auslösen.

Das Ergebnis ist:

  • Ein Klick auf die Themenkarte öffnet den Vorschau-Modal.

  • Ein Klick auf den Thementitel öffnet den Vorschau-Modal.

  • Der Vorschau-Button funktioniert weiterhin.

  • Cmd/Ctrl-Klick öffnet weiterhin das normale Thema in einem neuen Tab.

  • Kategorie- und andere normale Links verhalten sich weiterhin normal.

  • Wenn der Vorschau-Button nicht vorhanden ist, fällt das Reddit-ähnliche Theme auf seine normale Themen-Navigation zurück.

Der zugrunde liegende Modal funktioniert also einwandfrei mit dem Reddit-ähnlichen Theme; die Inkompatibilität betrifft spezifisch den Standard-Zeilen-Trigger.

Ich habe den Button außerdem versteckt, indem ich verwendet habe:

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3 „Gefällt mir“