主题预览弹窗

自定义 主题组件
4

对于使用 Reddit-ish 主题的用户，这里有一个我测试有效的修复方案。

Reddit-ish 主题兼容性

仅提醒使用 Reddit-ish 主题的用户：模态框按钮本身可以正常工作，但默认的 行触发器 无法使用。

问题在于 Reddit-ish 替换了标准的话题列表行行为，并处理对整个话题卡片的点击。因此，模态框正常的行点击处理无法按预期工作。

将“话题预览模态框”设置更改为：

触发样式：按钮
插件出口：topic-list-after-title

即可正常工作，因为 Reddit-ish 已经包含了 topic-list-after-title 出口。

为了保留整张卡片的点击行为，我将“话题预览模态框”保留在按钮模式，并修改了 Reddit-ish 现有的 openTopic() 动作，使其触发模态框中可正常工作的按钮。

原始的 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);
  }
}

我将其修改为：

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

模态框的按钮触发器渲染为：

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

因此，这并没有重新创建任何模态框逻辑。它只是让 Reddit-ish 卡片的点击触发现有的可正常工作的预览按钮。

结果是：

  • 点击话题卡片会打开预览模态框。

  • 点击话题标题会打开预览模态框。

  • 预览按钮仍然有效。

  • Cmd/Ctrl+点击仍会在新的标签页中打开普通话题。

  • 分类和其他普通链接继续正常运作。

  • 如果不存在预览按钮，Reddit-ish 会回退到其正常的话题导航。

因此，底层模态框与 Reddit-ish 兼容良好；不兼容之处具体在于默认的行触发器。

我还使用以下代码隐藏了按钮：

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