トピックプレビューモーダル

カスタマイズ テーマコンポーネント
4

Reddit-ish テーマを使用している方のために、動作確認が取れた修正方法を共有します。

Reddit-ish テーマとの互換性

Reddit-ish テーマを使用している方への注意点です：モーダルのボタン自体は正常に動作しますが、デフォルトの行トリガーは機能しません。

問題の原因は、Reddit-ish が標準のトピック一覧の行の動作を置き換え、トピックカード全体でのクリックを処理している点にあります。そのため、モーダルの通常の行クリック処理が意図した通りに動作しません。

Topic Preview Modal の設定を以下に変更すると、

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

正しく動作します。これは、Reddit-ish が既に topic-list-after-title アウトレットを含んでいるためです。

カード全体のクリック動作を維持するために、Topic Preview Modal をボタンモードのままにし、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 と正常に動作しますが、互換性の問題はデフォルトの行トリガーに特化しています。

また、以下の CSS を使用してボタンを非表示にしました：

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