Eigene Anpassungen der Seitenleiste per Programmierung

Entwickler
,
1

Dies ist eine großartige Funktion, aber was ist, wenn der Inhalt eines benutzerdefinierten Seitenleistenabschnitts programmatisch erstellt werden muss? Ich habe dies auf eine Weise erreicht, die @Olya_Fursova oben ähnelt, nur dass der Inhalt durch Abfragen der API generiert und dann Links gerendert werden, einige zu Kategorien und einige direkt zu bestimmten Themen. Zwei Probleme, auf die ich gestoßen bin, sind:

  • Wenn die Seitenleiste beim anfänglichen Rendern der Seite ausgeblendet ist, wird der dynamische Inhalt nicht angezeigt, da der Seitenleistencontainer nicht vorhanden ist. Wenn die Seitenleiste anfänglich angezeigt, dann aber eingeklappt und wieder angezeigt wird, ist der dynamische Inhalt weg, da der Seitenleistencontainer ohne Ausführung des benutzerdefinierten Codes neu gerendert wird. Frage: Gibt es eine Möglichkeit, in den Seitenleisten-Rendering-Prozess einzugreifen, um meinen benutzerdefinierten Code auszuführen, wann immer die Seitenleiste angezeigt wird?
  • Wenn die Links, die ich programmatisch zur Seitenleiste hinzufüge, angeklickt werden, wird die gesamte Seite aktualisiert. Frage: Gibt es eine Möglichkeit, eine vollständige Seitenaktualisierung zu verhindern, wenn auf einen meiner benutzerdefinierten Links in der Seitenleiste geklickt wird?

Es wäre wirklich fantastisch, wenn es eine Möglichkeit gäbe, die Seitenleiste programmatisch zu ändern!

2 „Gefällt mir“
2

Wir haben auch eine API zum Hinzufügen benutzerdefinierter Seitenleistenabschnitte erstellt.

Einige Beispiele finden Sie in den Kommentaren hier: discourse/app/assets/javascripts/discourse/app/lib/plugin-api.js at 00ab94bf53b784478d0aa7744bf3bb2d5b527580 · discourse/discourse · GitHub

Dies ist als experimentell gekennzeichnet, sollte aber sicher zu verwenden sein (wir verwenden es zum Beispiel, um Chat-Inhalte zur Seitenleiste hinzuzufügen, wenn diese aktiviert ist).

6 „Gefällt mir“
3

Das sieht interessant aus, danke! Es wird jedoch einige Zeit dauern, bis ich es wirklich verstehe, z. B. verstehe ich das Routing noch nicht ganz. Außerdem sieht es so aus, als ob die Links in einer Sektion nur eine flache Liste sein können, richtig? Was ich derzeit zu erreichen versuche, ist etwas wie dieses, d. h. eine Einrückungsebene:

image
image234×292 1.84 KB

Ist das etwas, das ich mit der neuen API für benutzerdefinierte Seitenleistensektionen erreichen kann?

1 „Gefällt mir“
4

Nein, wir haben standardmäßig keine Einrückung in die Seitenleiste integriert … aber solange Sie Ihre Abschnitte mit der API in der gewünschten Reihenfolge erhalten können, denke ich, dass die Einrückung wahrscheinlich mit CSS-Styling gehandhabt werden kann?

5

Nachdem ich mich etwas weiter damit beschäftigt habe, bin ich zuversichtlich, dass dies funktionieren wird, ja! Meine Herausforderung ist jetzt, dass die Linkliste dynamisch ist und sich mit jedem Seitenwechsel potenziell ändern kann. Mein naiver Ansatz, api.addSidebarSection innerhalb von api.onPageChange aufzurufen, funktioniert nicht, weil (a) die Seitenleiste nur aktualisiert wird, wenn sie durch Aus- und Wiedereinblenden neu gerendert wird, und (b) die Abschnitte wiederholt werden, da api.addSidebarSection nicht darauf achtet, ob der Schlüsselname wiederverwendet wird.

Gibt es eine Möglichkeit, mit der neuen API einen Seitenabschnitt zu erreichen, der bei jedem Seitenübergang mit den neuen Daten aktualisiert wird?

1 „Gefällt mir“
6

Sie können sich ansehen, wie das Chat-Plugin in die Seitenleiste integriert ist:

In diesem Fall wird der Status von Links im Service-Objekt gespeichert und die Seitenleiste wird aktualisiert, wann immer sich der Status ändert:

Eine mögliche Lösung wäre, das Seitenwechselereignis zu abonnieren und die Links zu aktualisieren. Pseudocode könnte so aussehen:

import { tracked } from "@glimmer/tracking";

api.addSidebarSection(
  (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
    const TestSectionLink = class extends BaseCustomSidebarSectionLink {
      // definieren Sie hier Ihre benutzerdefinierten Link-Eigenschaften
    };

    const SidebarTestSection = class extends BaseCustomSidebarSection {
      @tracked links = [];

      constructor() {
        super(...arguments);

        this.#updateLinks();
        this.onAppEvent("page:changed", () => this.#updateLinks());
      }

      get newLinksArray() {
        // Liste der Links basierend auf der aktuellen URL
      }

      #updateLinks() {
        this.links = this.newLinksArray.map(
          (link) =>
            new TestSectionLink({
              link,
            })
        );
      }

      get sectionLinks() {
        return this.links;
      }
    };
    return SidebarTestSection;
  }
);
6 „Gefällt mir“