‘이전/다음 주제’ 키보드 단축키를 테마 컴포넌트로 만들기

개발
1

이전-다음 주제 버튼의 키보드 단축키를 헤더에 << 이전 주제와 다음 주제 >> 버튼을 제공하는 테마 컴포넌트로 만들고 싶습니다.

기존 키보드 단축키를 단순히 활성화하는 버튼을 제공하는 코드 스니펫이 포함된 기존 테마 컴포넌트를 추천해 주실 수 있나요?

다음 링크에서 시작하려고 합니다:

2

이러한 기능은 이미 존재합니다(다만 Next에 초점을 맞추고 있습니다).

이것은 Core API를 사용하므로 계속 작동할 것으로 보입니다 …

설정과 함께 뒤로 가기 버튼 옵션을 추가하고 싶다면 PR을 환영합니다.

3

감사합니다, @merefield! (적어도 저는 그렇게 생각하는 것 같습니다 :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 파일을 필요에 따라 확장하기만 하면 됩니다. 그렇지 않으면 하나의 템플릿 대신 세 개의 템플릿을 가지게 될 가능성이 높으며, 이렇게 작은 "컴포넌트"에는 과도해 보일 것입니다.

5

흠… 내 코드에서 뭘 보고 있는지 모르겠지만, 그냥 기존 컴포넌트에 코드를 추가하는 거예요 :grinning:

6

네, 여기 #dev에서는 Component에 대해 다른 정의를 사용하고 있어요 :slight_smile:

이것은 다른 Glimmer Component입니다.

즉, 하나의 Glimmer Component를 포함하는 하나의 Theme Component가 되는 거죠. 혹시 하나를 더 만들려던 건가요?

같은 파일을 수정하는 것을 제안합니다. 이 경우 한 개가 아니라 두 개의 액션이 필요합니다. 그리고 새 설정에서 뒤로가기 버튼이 활성화되지 않은 경우에만 라벨이 표시되도록 하는 것도 좋을 것 같습니다.

7

로버트, 감사합니다. 이제 이해가 가는 것 같아요. 한번 시도해 볼게요.