Tornando atalhos de teclado ‘tópico anterior/seguinte’ em um componente de tema

Dev
1

Gostaria de transformar esses atalhos de teclado para os botões de tópico anterior/próximo em um componente de tema que forneça botões << Tópico Anterior e Próximo Tópico >> no cabeçalho.

Alguém pode sugerir um componente de tema existente com um trecho de código que forneça um botão que simplesmente ative um atalho de teclado existente?

Estou começando com

1 curtida
2

Isso já existe (mas foca no Next).

Isso usa a Core API, então deve continuar funcionando…

PR aceito se você quiser adicionar uma opção de botão “voltar” com configuração.

4 curtidas
3

Obrigado, @merefield! Estou preso (pelo menos acho que é onde está :nerd_face: ) no trecho de javascript para o botão anterior…

discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub onde no momento tenho isto…

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

Acho que o problema está perto do final em

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

Alguma ideia?

Eu tentei

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

Você provavelmente não vai querer criar um componente separado para o botão de voltar e lidar com toda a lógica no mesmo componente. Apenas estenda o template e o arquivo js existentes conforme necessário. Caso contrário, você provavelmente acabará com três templates em vez de um, o que pareceria excessivo para um “componente” tão pequeno?

5

Hmm… não tenho certeza do que você está vendo no meu código, mas estou apenas adicionando código ao seu componente existente :grinning:

6

Sim, estamos usando uma definição diferente de Componente aqui em Dev :slight_smile:

Este é um Glimmer Component diferente.

Então, um Theme Component contendo um Glimmer Component. Você estava prestes a criar um extra?

Sugiro que você edite o mesmo arquivo, o que exigirá duas ações, não uma. E talvez o rótulo só possa aparecer se o botão voltar não estiver ativado na nova configuração?

7

Obrigado, Robert – Acho que entendi. Vou tentar.

1 curtida