「前/次トピック」キーボードショートカットをテーマコンポーネントにする

開発
1

これらの前後のトピックボタンのキーボードショートカットを、ヘッダーに「<< Prev Topic」と「Next Topic >>」ボタンを提供するテーマコンポーネントにしたいと考えています。

既存のキーボードショートカットを単純にアクティブ化するボタンを提供する既存のテーマコンポーネントで、コードスニペットがあるものを誰か提案してもらえませんか？

以下から始めます。

「いいね！」 1
2

これはすでに存在します（ただし、Nextに焦点を当てています）。

これはCore APIを使用しているため、引き続き機能するはずです…

設定で戻るボタンのオプションを追加したい場合は、PRを受け付けます。

「いいね！」 4
3

ありがとうございます、@merefield さん！バックボタンのJavaScriptスニペットで（少なくとも :nerd_face: だと思いますが）行き詰まっています。

discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub で、現在は以下のようになっています。

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import {
  nextTopicUrl,
  previousTopicUrl,
} from "discourse/lib/topic-list-tracker";
import DiscourseURL from "discourse/lib/url";
import { inject as service } from "@ember/service";

export default class TopicPreviousButton extends Component {
  @service site;
  @tracked label = "";
  @tracked showButton = false;
  @tracked lastURL = "";

  constructor(owner, args) {
    super(owner, args);
    previousTopicUrl().then((url) => {
      if (url) {
        this.showButton = true;
        this.lastURL = url;
      } else {
        this.showButton = false;
        this.lastURL = "";
      }
    })
  };

  get goFirst() {
    return settings.topic_next_always_go_to_first_post
  }

  @action
  goToPreviousTopic() {
    let url;
    if (this.lastURL) {
      url = this.goFirst
        ? this.lastURL.substring(0, this.lastURL.nextIndexOf("/"))
        : this.lastURL;
      DiscourseURL.routeTo(url);
    }
  };
}

問題は下の方の

? this.lastURL.substring(0, this.lastURL.nextIndexOf("/"))

あたりだと思います。何か考えはありますか？

試したのは

? this.lastURL.substring(0, this.lastURL.indexOf("/"))
4

バックボタン用のコンポーネントを別に作成し、すべてのロジックを同じコンポーネントで処理することは、おそらく望ましくないでしょう。必要に応じて、既存のテンプレートとJSファイルを拡張するだけで十分です。そうでなければ、このような小さな「コンポーネント」に対して、1つではなく3つのテンプレートを持つことになり、過剰に思えるでしょう。

5

コードのどこを見てるのか分からないけど、既存のコンポーネントにコードを追加してるだけだよ :grinning:

6

Dev では、ここではコンポーネントの定義が異なります :slight_smile:

これは別の Glimmer コンポーネントです。

つまり、1 つのテーマコンポーネントに 1 つの Glimmer コンポーネントが含まれています。あなたはさらに 1 つ作成しようとしていましたか？

同じファイルを編集することをお勧めします。これには 1 つではなく 2 つのアクションが必要になります。そして、新しい設定で戻るボタンがアクティブ化されていない場合にのみ、ラベルが表示されるのではないでしょうか？

7

ロバートさん、ありがとうございます。理解できたと思います。試してみます。

「いいね！」 1