Convertir los atajos de teclado 'tema anterior/siguiente' en un componente de tema

Desarrollador
1

Me gustaría convertir estos atajos de teclado para los botones de tema anterior/siguiente en un componente temático que proporcione botones de << Tema anterior y Tema siguiente >> en la cabecera.

¿Alguien puede sugerir un componente temático existente con un fragmento de código que proporcione un botón que simplemente active un atajo de teclado existente?

Estoy empezando con

1 me gusta
2

Esto ya existe (pero se centra en Next).

Esto utiliza la API principal, por lo que debería seguir funcionando…

PR aceptado si quieres añadir una opción de botón atrás con configuración.

4 Me gusta
3

Gracias, @merefield! Estoy atascado (al menos creo que ahí es donde está :nerd_face: ) en el fragmento de javascript para el botón anterior…

discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub donde en este momento tengo esto…

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

Creo que el problema está cerca del final en

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

¿Alguna idea?

Intenté

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

Probablemente no quieras crear un componente separado para el botón de retroceso y manejar toda la lógica en el mismo componente. Simplemente extiende la plantilla y el archivo js existentes según sea necesario. De lo contrario, probablemente terminarás con tres plantillas en lugar de una, lo que parecería excesivo para un “componente” tan pequeño.

5

Hmm… no estoy seguro de lo que estás viendo en mi código, pero solo estoy agregando código a tu componente existente :grinning:

6

Sí, estamos usando una definición diferente de Componente aquí en Dev :slight_smile:

Este es un Glimmer Component diferente.

Entonces, un Theme Component que contiene un Glimmer Component. ¿Estabas a punto de crear uno extra?

Sugiero que edites el mismo archivo, lo que requerirá dos acciones, no una. ¿Y quizás la etiqueta solo pueda aparecer si el botón de retroceso no está activado en la nueva configuración?

7

Gracias Robert – Creo que entiendo. Lo intentaré.

1 me gusta