Topic Preview Modal

Customization Theme component
4

For anyone using the Reddit-ish theme here is a fix i got to work.

Reddit-ish theme compatibility

Just a note for anyone using the Reddit-ish theme: the modal button itself works, but the default row trigger does not.

The issue is that Reddit-ish replaces the standard topic-list row behaviour and handles clicks on the whole topic card itself. Because of that, the modal’s normal row-click handling does not work as intended.

Changing the Topic Preview Modal setting to:

Trigger style: button
Plugin outlet: topic-list-after-title

works correctly, because Reddit-ish already includes the topic-list-after-title outlet.

To retain whole-card click behaviour, I left Topic Preview Modal in button mode and changed Reddit-ish’s existing openTopic() action so it triggers the modal’s working button.

The original Reddit-ish action is:

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

I changed it to:

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

The modal’s button trigger is rendered as:

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

So this does not recreate any of the modal logic. It simply makes the Reddit-ish card click trigger the existing working preview button.

The result is:

  • Topic card click opens the preview modal.

  • Topic title click opens the preview modal.

  • The preview button still works.

  • Cmd/Ctrl-click still opens the normal topic in a new tab.

  • Category and other normal links continue to behave normally.

  • If the preview button is not present, Reddit-ish falls back to its normal topic navigation.

So the underlying modal works fine with Reddit-ish; the incompatibility is specifically with the default row trigger.

I also hid the button using

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