Erstellung von 'vorheriges/nächstes Thema'-Tastenkombinationen als Themenkomponente

Entwickler
1

Ich möchte diese Tastenkombinationen für vorherige/nächste Themen zu einer Theme-Komponente machen, die im Header die Schaltflächen „<< Prev Topic“ und „Next Topic >>“ bereitstellt.

Kann mir jemand eine bestehende Theme-Komponente mit einem Code-Snippet vorschlagen, die eine Schaltfläche bereitstellt, die einfach eine bestehende Tastenkombination aktiviert?

Ich beginne mit

1 „Gefällt mir“
2

Das existiert bereits (konzentriert sich aber auf Next).

Dies verwendet die Core API und sollte daher weiterhin funktionieren …

PR akzeptiert, wenn Sie eine Option für eine Zurück-Schaltfläche mit einer Einstellung hinzufügen möchten.

4 „Gefällt mir“
3

Vielen Dank, @merefield! Ich stecke (zumindest glaube ich, dass ich dort bin :nerd_face: ) beim Javascript-Snippet für den Zurück-Button fest…

discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub wo ich im Moment das hier habe…

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

Ich denke, das Problem liegt irgendwo unten bei

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

Irgendwelche Gedanken?

Ich habe versucht

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

Sie möchten wahrscheinlich keine separate Komponente für die Zurück-Schaltfläche erstellen und die gesamte Logik in derselben Komponente verarbeiten. Erweitern Sie einfach die vorhandene Vorlage und die JS-Datei nach Bedarf. Andernfalls haben Sie wahrscheinlich drei Vorlagen anstelle von einer, was für eine so kleine „Komponente“ übertrieben erscheint?

5

Hmm… bin mir nicht sicher, was Sie in meinem Code sehen, aber ich füge nur Code zu Ihrer vorhandenen Komponente hinzu :grinning:

6

Ja, wir verwenden hier in Dev eine andere Definition von Component :slight_smile:

Dies ist eine andere Glimmer Component.

Also eine Theme Component, die eine Glimmer Component enthält. Wollten Sie gerade eine zusätzliche erstellen?

Ich schlage vor, Sie bearbeiten dieselbe Datei, was zwei statt einer Aktion erfordert. Und vielleicht kann das Label nur erscheinen, wenn die Zurück-Schaltfläche in der neuen Einstellung nicht aktiviert ist?

7

Danke Robert – ich glaube, ich verstehe. Ich werde das mal ausprobieren.

1 „Gefällt mir“