Tabbis Theme-Komponente

Entwickler
1

Hallo! Ich versuche, eine Theme-Komponente zu erstellen, um das externe Skript tabbis.js zu verwenden, damit ich Tabs in Beiträgen erstellen kann. Ich habe dem Leitfaden hier gefolgt: Embed widget within text in a topic - #2 by Johani

Hier ist, wie meine Theme-Komponente bisher aussieht.

Common > Header

<script type="text/discourse-plugin" version="0.8">
// options
const TABBIS_SCRIPT_SRC = "https://cdn.jsdelivr.net/gh/jenstornell/tabbis.js/assets/js/src/tabbis.es6.js";

// wir verwenden die Discourse Load Script-Bibliothek, um sicherzustellen, dass Skripte korrekt geladen werden
// richtig. Keine Sorge, dies ist schlau genug, um das Skript nicht zu duplizieren,
// wenn es bereits geladen wurde
const loadScript = require("discourse/lib/load-script").default;

// eine Post-Decorator erstellen
api.decorateCookedElement(
  post => {
    // hat dieser Beitrag Tabbis-Tabs?
    const tabbisTabs = post.querySelectorAll('[data-wrap="tabbis"]');

    // Ja, also lass uns etwas Arbeit leisten.
    if (tabbisTabs.length) {
      // für jedes Tabbis-Widget
      tabbisTabs.forEach(tabbisTab => {

        // lade das Tabbis-Skript.
        loadScript(TABBIS_SCRIPT_SRC).then(() => {

          // alles ist bereit, lass uns das Tabbis-Skript aufrufen
          tabbis();
        });
      });
    }
  },
  // eine ID zum Decorator hinzufügen, um Speicherlecks zu vermeiden
  { id: "render-tabbis-tabs" }
);

</script>

Common > CSS (direkt aus dem Tabbis.js-Repository kopiert)

[data-tabs],
[data-panes] {
  --color: #000;
}

[data-tabs] {
  background: var(--color);
  border: 2px solid var(--color);
  border-bottom: none;
  overflow-x: auto;
  display: flex;
}
[data-tabs] > [role="tab"] {
  all: unset;
  padding: 0.75rem 1.5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 600;
  color: #fff;
  border: 1px solid transparent;
  outline: none;
}
[data-tabs] > [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.2);
}
[data-tabs] > [role="tab"]:active {
  background: rgba(255, 255, 255, 0.3);
}
[data-tabs] > [role="tab"]:focus {
  border: 1px dotted rgba(255, 255, 255, 0.5);
}
[data-tabs] > [role="tab"][aria-selected="true"] {
  background: #fff;
  color: #000;
}
[data-tabs] > [role="tab"][aria-selected="true"]:focus {
  border: 1px dotted rgba(0, 0, 0, 0.5);
}

[data-panes] {
  border: 2px solid var(--color);
  border-top: none;
}
[data-panes] > * {
  background: #fff;
  padding: 2rem;
  font-weight: 600;
  outline: none;
  border: 1px solid transparent;
}
[data-panes] > *:focus {
  border: 1px dotted rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 460px) {
  [data-panes] > * {
    padding: 1rem;
  }
}

Content Security Policy Script src: https://cdn.jsdelivr.net hinzugefügt

Post-Markup

[wrap="tabbis"]<div data-tabs>
<button>Tab1</button>
<button>Tab2</button>
<button>Tab3</button>
</div>

<div data-panes>
<div>Pane1</div>
<div>Pane2</div>
<div>Pane3</div>
</div>[/wrap]

Das Skript scheint für den Bruchteil einer Sekunde zu laden, nachdem ich den Beitrag bearbeite, aber sobald es vollständig geladen ist, ist es unbrauchbar.

Dies erscheint in der Konsole, aber ich habe keine Ahnung, wie ich es beheben kann. Gibt es einen Konflikt mit anderen Tabs in Discourse?

tabbis uncaught type error
tabbis uncaught type error345×286 14.4 KB

Wie kann ich das zum Laufen bringen? Ich bin ratlos!

1 „Gefällt mir“
How-to: Make a Social Network Landing Page
2

Ich glaube, Sie benötigen ein Plugin, um das zu tun, aber ich könnte mich irren.

Sie könnten sich das Mathe-Plugin oder die Plugin-Anleitungen ansehen.

3

Warum benötigt dieses Skript ein Plugin anstelle einer Theme-Komponente? Die Single-Page-App-Struktur ist für mich noch sehr neu.

4

Bitte teilen Sie den gesamten Quellcode Ihrer Theme-Komponente (vorzugsweise als GitHub-Repository), damit wir Ihnen leicht helfen können.

Übrigens klingt das wie eine ziemlich nützliche Theme-Komponente!

6 „Gefällt mir“
5

Vielen Dank! Ich war überrascht, dass es hier noch kein Tab-Plugin oder eine Komponente gab. Ich möchte das unbedingt für meine Community und versuche es daher. Ich bin ziemlich neu in allem außer sehr grundlegendem JavaScript, aber ich versuche zu lernen.

2 „Gefällt mir“
6

Ändern des Post-Markups zu

[wrap="tabbis"]
  <div>
    <span>Tab1</span>
    <span>Tab2</span>
    <span>Tab3</span>
  </div>

  <div>
    <div>Pane1</div>
    <div>Pane2</div>
    <div>Pane3</div>
  </div>
[/wrap]

funktioniert :tada:

Hier sind ein paar Hinweise, die Sie zur weiteren Verbesserung nutzen könnten:

  1. Rufen Sie loadScript nicht mehrmals auf. Prüfen Sie, ob es bereits geladen wurde, bevor Sie es aufrufen, andernfalls wird es mehrmals aufgerufen.

  2. Übergeben Sie einen spezifischeren Selektor an den tabbis()-Aufruf, damit Sie den von Ihnen speziell ausgewählten initialisieren.

6 „Gefällt mir“