Transformer les raccourcis clavier « sujet précédent/suivant » en un composant de thème

Dev
1

J’aimerais transformer ces raccourcis clavier pour les boutons de sujet précédent/suivant en un composant de thème qui fournit des boutons « Sujet Précédent >> » et « Sujet Suivant << » dans l’en-tête.

Quelqu’un peut-il suggérer un composant de thème existant avec un extrait de code qui fournit un bouton qui active simplement un raccourci clavier existant ?

Je commence avec :

1 « J'aime »
2

Cela existe déjà (mais se concentre sur Next).

Cela utilise l’API Core, donc cela devrait continuer à fonctionner…

PR accepté si vous souhaitez ajouter une option de bouton retour avec un réglage.

4 « J'aime »
3

Merci, @merefield ! Je suis bloqué (du moins je pense que c’est là que se trouve :nerd_face: ) au niveau de l’extrait de code javascript pour le bouton précédent…

discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub où j’ai actuellement ceci…

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

Je pense que le problème se situe vers la fin, à

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

Des idées ?

J’ai essayé

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

Vous ne voudrez probablement pas créer un composant distinct pour le bouton retour et gérer toute la logique dans le même composant. Étendez simplement le modèle et le fichier js existants au besoin. Sinon, vous finirez probablement par avoir trois modèles au lieu d’un, ce qui semblerait excessif pour un « composant » aussi petit ?

5

Hmm… pas sûr de ce que vous voyez dans mon code, mais j’ajoute juste du code à votre composant existant :grinning:

6

Oui, nous utilisons une définition différente de Composant ici dans Dev :slight_smile:

Ceci est un Composant Glimmer différent.

Donc un Composant Thème contenant un Composant Glimmer. Vous étiez sur le point d’en créer un supplémentaire ?

Je suggère que vous modifiiez le même fichier, ce qui nécessitera deux actions et non une. Et peut-être que l’étiquette ne peut apparaître que si le bouton retour n’est pas activé dans le nouveau paramètre ?

7

Merci Robert – je pense que je comprends. Je vais essayer.

1 « J'aime »