Componente de tema Tabbis

Desarrollador
1

Hola! Estoy intentando crear un componente de tema para usar el script externo tabbis.js para poder crear pestañas en las publicaciones. Seguí el tutorial aquí: Embed widget within text in a topic - #2 by Johani

Así es como se ve mi componente de tema hasta ahora.

Común > Encabezado

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

// usamos la biblioteca Discourse Load script para asegurar que los scripts se carguen
// correctamente. No te preocupes, esto es lo suficientemente inteligente como para no duplicar el script
// si ya está cargado
const loadScript = require("discourse/lib/load-script").default;

// crear un decorador de publicación
api.decorateCookedElement(
  post => {
    // ¿tiene esta publicación pestañas tabbis?
    const tabbisTabs = post.querySelectorAll('[data-wrap="tabbis"]');

    // Sí, así que vamos a hacer algo de trabajo.
    if (tabbisTabs.length) {
      // para cada widget tabbis
      tabbisTabs.forEach(tabbisTab => {

        // cargar el script tabbis.
        loadScript(TABBIS_SCRIPT_SRC).then(() => {

          // todo está listo, llamemos al script tabbis
          tabbis();
        });
      });
    }
  },
  // añadir un id al decorador para evitar fugas de memoria
  { id: "render-tabbis-tabs" }
);

</script>

Común > CSS (copiado directamente del repositorio de tabbis.js)

[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: .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; } }

Script de Política de Seguridad de Contenido: se agregó https://cdn.jsdelivr.net

Marcado de publicación

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

El script parece cargarse por una fracción de segundo después de editar la publicación, pero una vez que se carga por completo, es inutilizable.

Esto aparece en la consola, pero no tengo idea de cómo solucionarlo. ¿Hay algún conflicto con otras pestañas en Discourse?

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

¿Cómo puedo hacer que esto funcione? ¡Estoy perdido!

1 me gusta
2

Creo que necesitarás un plugin para hacer eso, pero podría estar equivocado.

Podrías consultar el plugin de matemáticas o las guías de plugins.

3

¿Por qué este script requiere un plugin en lugar de un componente temático? La estructura de la aplicación de una sola página todavía es muy nueva para mí.

4

Por favor, comparte el código fuente completo de tu componente temático (preferiblemente como un repositorio de GitHub) para que podamos ayudarte fácilmente con él.

Por cierto, ¡este parece ser un componente temático bastante útil!

6 Me gusta
5

¡Gracias! Me sorprendió ver que aún no existía algún tipo de plugin o componente de pestañas por aquí; es algo que realmente quiero para mi comunidad, así que lo estoy intentando. Soy bastante nuevo en cualquier cosa que no sea javascript muy básico, pero estoy tratando de aprender.

2 Me gusta
6

Cambiando el marcado de la publicación a

[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 hace funcionar :tada:

Hay algunas notas que podrías usar para mejorarlo aún más:

  1. No llames a loadScript varias veces. Comprueba si ya está cargado antes de llamarlo, de lo contrario se llamará varias veces.

  2. Pasa un selector más específico a la llamada tabbis(), para que inicialices el que has seleccionado específicamente.

6 Me gusta