Componente tema Tabbis

Sviluppatore
1

Ciao! Sto cercando di creare un componente tema per utilizzare lo script esterno tabbis.js in modo da poter creare schede nei post. Ho seguito la guida qui: Embed widget within text in a topic - #2 by Johani

Ecco come appare finora il mio componente tema.

Comune > 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";

// usiamo la libreria Discourse Load script per garantire che gli script vengano caricati
// correttamente. Non preoccuparti, questo è abbastanza intelligente da non duplicare lo script
// se è già stato caricato
const loadScript = require("discourse/lib/load-script").default;

// crea un decoratore di post
api.decorateCookedElement(
  post => {
    // questo post ha schede tabbis?
    const tabbisTabs = post.querySelectorAll('[data-wrap="tabbis"]');

    // Sì, quindi facciamo un po' di lavoro.
    if (tabbisTabs.length) {
      // per ogni widget tabbis
      tabbisTabs.forEach(tabbisTab => {

        // carica lo script tabbis.
        loadScript(TABBIS_SCRIPT_SRC).then(() => {

          // tutto è pronto, chiamiamo lo script tabbis
          tabbis();
        });
      });
    }
  },
  // aggiungi un id al decoratore per evitare perdite di memoria
  { id: "render-tabbis-tabs" }
);

</script>

Comune > CSS (copiato direttamente dal repository tabbis.js)

[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: aggiunto https://cdn.jsdelivr.net

Markup del post

[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]

Lo script sembra caricarsi per una frazione di secondo dopo che modifico il post, ma una volta caricato completamente è inutilizzabile.

Questo appare nella console ma non ho idea di come risolverlo. C’è un conflitto con altre schede in Discourse?

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

Come posso farlo funzionare? Sono perso!

1 Mi Piace
How-to: Make a Social Network Landing Page
2

Penso che ti servirà un plugin per farlo, ma potrei sbagliarmi.

Potresti dare un’occhiata al plugin math o alle guide dei plugin.

3

Perché questo script richiede un plugin invece di un componente del tema? La struttura dell’applicazione a pagina singola mi è ancora molto nuova.

4

Per favore, condividi tutto il codice sorgente del tuo componente tema (preferibilmente come repository GitHub) in modo che possiamo aiutarti facilmente.\n\nA proposito, questo sembra un componente tema piuttosto utile!

6 Mi Piace
5

Grazie! Sono rimasto sorpreso nel vedere che non esistesse già un qualche tipo di plugin o componente per le schede qui; è qualcosa che desidero davvero per la mia community, quindi ci sto provando. Sono abbastanza nuovo a tutto tranne che a javascript molto basilare, ma sto cercando di imparare.

2 Mi Piace
6

Modificare il markup del post in

[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]

lo fa funzionare :tada:

Ci sono alcune note che potresti usare per migliorarlo ulteriormente:

  1. Non chiamare loadScript più volte. Verifica se è già stato caricato prima di chiamarlo, altrimenti verrà chiamato più volte.

  2. Passa un selettore più specifico alla chiamata tabbis(), in modo da inizializzare quello che hai selezionato specificamente.

6 Mi Piace