¿Mostrar contenido diferente dentro de un tema según la membresía de los grupos del usuario?

Desarrollador
1

Estoy trabajando en el hosting de discourse.org, por lo que los plugins no son una opción para mí en este caso. Imagina que tengo un tema publicado donde cualquiera puede verlo.

Si alguien pertenece al grupo “A”, quiero que vea este contenido. Si NO, entonces quiero que vea este otro contenido. Y hay una parte del tema que todos deberían ver. Esquemáticamente así…

Este es contenido que todos ven.

{pensamiento deseado: solo para personas del grupo A}
¡Hola, gracias por estar en el grupo especial!
{/pensamiento deseado}

{pensamiento deseado: solo para personas NO del grupo A}
Hola, tenemos un grupo especial al que puedes unirte. [Lee más al respecto](…)
{/pensamiento deseado}

Confío en que esto se puede hacer con un componente de tema para establecer clases CSS en el contenido que quiero “activar/desactivar” la visualización. Haré esto si es lo mejor que puedo averiguar.

Pero display: none de CSS es una solución débil. Me gustaría que desapareciera del DOM lo que no deberían ver. Desaparecido del lado del servidor si es posible, pero me conformaría con que desapareciera al menos del lado del navegador basado en j/s. (Eso requiere un nivel de astucia mucho mayor para sortearlo que display: none en CSS).

2 Me gusta
2

¡subir! ¿nadie? :~(

¿por qué no podemos etiquetar a @team :wink:

3

No tengo mucho tiempo para profundizar en ello ahora mismo, pero este componente de tema puede ayudarte porque listará todos los grupos del usuario actual en, creo, la etiqueta body. Luego, probablemente podrías usar selectores CSS para mostrar/ocultar según si existen ciertos nombres de clase de grupo en la etiqueta body.

Y combina eso con información de esta publicación sobre qué elementos HTML puedes usar en el compositor y cómo envolver el texto del compositor en clases, y puede que funcione:

Sí, lo acabo de probar aquí y debería funcionar si usas ese componente combinado con algo como:

<span data-group-a>Texto solo para el grupo A</span>
<span data-group-b>Texto solo para el grupo B</span>

Y luego tienes selectores CSS que hacen algo como:

span[data-group-a] {display: none;}
body.group-a span[data-group-a] {display: block;}

O algo así…

Perdón por todas las ediciones. Lo acabo de probar en una de mis instancias y funciona.

Pero como mencionaste, tal vez eso no era lo que querías :slight_smile: …

Esto podría ser posible con un script de tema, agregando algo en la sección <head> para seleccionar los elementos y eliminarlos. Aún podría requerir el span y el envoltorio como se mencionó anteriormente, pero eliminándolo a través de eso.

3 Me gusta
4

Ok, me di cuenta de que también podría necesitar esto, así que lo investigué más a fondo :slight_smile:

Este código aún no funciona y no es muy bonito, pero creo que es casi lo suficientemente bueno como para incluirlo en la parte < /head > del tema, solo necesita la forma correcta de seleccionar los elementos usando JS:

  <script type="text/discourse-plugin" version="0.8.42">

  api.decorateCookedElement(
    element => {
      var hasGroupA = document.body.classList.contains('group-a');

      const group_a_spans = element.querySelectorAll("span[data-group-a]");

      if (!group_a_spans.length) {
        return;
      }

      if (!hasGroupA) {
        group_a_spans.forEach(function (el) {
           el.innerHTML = "";
        });
      }

      },
      { id: "THEME-ID", onlyStream: true }
   );
  </script>

ADVERTENCIA: Creo que puede ser difícil ocultar toda la información de la búsqueda y cosas así, así que aunque esto puede ser mejor que simplemente ocultarla con CSS, no creo que evite por completo que la gente vea la información.

EDITADO: Lo arreglé para que los selectores CSS funcionen. Repite el código para tantos grupos como quieras usar. Cambia THEME-ID por un nombre único. ¡Creo que esto debería funcionar :slight_smile:

Oops, aún no tengo esta parte:

3 Me gusta
5

Realmente aprecio tus esfuerzos en esto… Todavía estoy pensando en ello y creo que me has dado el punto de partida para una solución viable. Tengo un componente de plantilla que escribí, lo que me hace pensar que podría hacer que algo como esto funcione…

Supongamos que imagino un componente “foobar”. Podría escribir un tema, añadiendo algunos DIVs como este…

<div data-custom="foobar" data-foobar="<groupname>">
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
</div>

El componente luego elimina del DOM, uno u otro DIV, basándose en el grupo del usuario que está viendo.

Esto me parece más robusto que un display: none; de CSS, que es trivial de volver a activar a través de las funciones de inspección del DOM de cualquier navegador web. Para evitar esto, alguien tendría que modificar el j/s que se ejecuta cuando la página se carga; es posible, pero mucho más difícil.

¿Por qué quiero esto?

Para poder hacer una revelación parcial de contenido para personas que NO están en el grupo. (Porque unirse al grupo requiere una suscripción de pago).

Este es un tema muy interesante. Este primer
párrafo es realmente interesante.

<div data-custom="foobar" data-foobar="<groupname>">
Aquí está el resto del contenido.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
¡Hola, disculpa la interrupción!
Hay más contenido aquí para nuestros miembros de pago...
¿Te gustaría saber cómo convertirte en uno?
</div>

Las personas del grupo simplemente ven el tema completo. No hay rastro de ningún muro de pago.

Las personas que no están en el grupo ven la porción inicial, que no está en ninguno de los DIVs anteriores, y un muro de pago.

Así que puedo usar esto en un área completamente pública para que la gente pueda ver lo que obtienen si se registran, inician sesión y se convierten en miembros de pago.

6

Finalmente me dediqué a armar esto como, \u003chttps://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay\u003e Súper simple, solo elimina el DIV objetivo del DOM según si el usuario actual está en un grupo llamado “foobar” o no está en el grupo a través de “!foobar”. Eso me permite tener una visualización de contenido de alternancia simple como la imagen a continuación.\n\nPor supuesto, si el componente está deshabilitado, entonces se muestra todo el contenido (ya que sin el componente el DOM no se recorta). Pero esto es suficiente para lo que quiero hacer.\n\n

Screen Shot 2022-10-21 at 14.45.00
Screen Shot 2022-10-21 at 14.45.001920×1351 224 KB

4 Me gusta
7

Resolviste uno de mis dolores de cabeza muy similares.

1 me gusta
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.