Visualizzare contenuti diversi all'interno di un argomento in base all'appartenenza ai gruppi dell'utente?

Sviluppatore
1

Lavoro nell’hosting di discourse.org, quindi i plugin non sono possibili per me in questo caso. Immagina di aver pubblicato un argomento in cui chiunque può vederlo.

Se qualcuno appartiene al gruppo “A”, voglio che veda questo contenuto. Se NON appartiene, voglio che veda quest’altro contenuto. E una parte dell’argomento tutti dovrebbero vederla. Schematicamente così…

Questo è il contenuto che tutti vedono.

{pensiero magico: solo per le persone nel gruppo A}
Ehi, grazie per far parte del gruppo speciale!
{/pensiero magico}

{pensiero magico: solo per le persone NON nel gruppo A}
Ehi, abbiamo un gruppo speciale a cui puoi unirti. [Leggi di più a riguardo](…)
{/pensiero magico}

Sono fiducioso (ma dimentico esattamente come farlo) che questo possa essere fatto con un componente tematico per impostare classi CSS sul contenuto che voglio “attivare/disattivare”. Farò questo se questa è la migliore soluzione che riesco a trovare.

Ma display: none di CSS è una soluzione debole. Vorrei far sparire dal DOM ciò che non dovrebbero vedere. Fatto sparire lato server, se possibile, ma mi accontenterei almeno di farlo sparire lato browser tramite JavaScript. (Ciò richiede un livello di astuzia molto più elevato per aggirarlo rispetto a display: none in CSS.)

2 Mi Piace
2

bump! nessuno? :~(

perché non possiamo taggare @team :wink:

3

Non ho molto tempo per approfondire al momento, ma questo componente del tema potrebbe esserti d’aiuto perché elencherà tutti i gruppi dell’utente corrente, credo, nel tag body. Quindi potresti usare selettori CSS per mostrare/nascondere in base alla presenza di determinati nomi di classi di gruppo nel tag body.

E combina questo con alcune informazioni da questo post su quali elementi HTML puoi usare nel composer e come racchiudere il testo del composer in classi, e potrebbe funzionare:

Sì, l’ho appena testato qui e dovrebbe funzionare se usi quel componente combinato con qualcosa come:

<span data-group-a>Testo solo per il gruppo A</span>
<span data-group-b>Testo solo per il gruppo B</span>

E poi hai selettori CSS che fanno qualcosa come:

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

O qualcosa del genere…

Scusa per tutte le modifiche. L’ho appena testato su una delle mie istanze e funziona.

Ma come hai detto, forse non è quello che volevi :slight_smile: …

Questo potrebbe essere possibile con un javascript del tema, aggiungendo qualcosa nella sezione <head> per selezionare gli elementi e rimuoverli. Potrebbe comunque richiedere lo span e il wrapping come sopra, ma rimuoverlo tramite quello.

3 Mi Piace
4

Ok, mi sono reso conto che potrei aver bisogno anche di questo, quindi ci ho approfondito :slight_smile:

Questo codice non funziona ancora e non è molto elegante, ma penso che sia quasi abbastanza buono da inserire nella parte </head> del tema, deve solo avere il modo giusto per selezionare gli elementi 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>

AVVERTENZA: Penso che possa essere difficile nascondere tutte le informazioni dalla ricerca e da altre cose, quindi anche se questo potrebbe essere meglio che nasconderle solo tramite CSS, non credo che impedirà completamente alle persone di vedere le informazioni.

MODIFICA: L’ho corretto in modo che i selettori CSS dovrebbero funzionare. Ripeti il codice per tutti i gruppi che vuoi usare. Cambia THEME-ID in un nome univoco. Penso che dovrebbe funzionare :slight_smile:

Oops, non ho ancora capito questa parte:

3 Mi Piace
5

Apprezzo molto i tuoi sforzi in questo… Ci sto ancora pensando e penso che tu mi abbia dato l’avvio per una soluzione praticabile. Ho un componente di template che ho scritto, il che mi fa pensare che potrei far funzionare qualcosa di simile…

Supponiamo che io immagini un componente “foobar”. Potrei scrivere un argomento, aggiungendo alcuni DIV come questo…

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

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

Il componente quindi elimina dal DOM, uno o l’altro DIV, in base al gruppo dell’utente visualizzatore.

Questo mi sembra più robusto di un display: none; CSS, che è banale da riattivare tramite le funzionalità di ispezione del DOM di qualsiasi browser web. Per aggirare questo, qualcuno dovrebbe modificare il j/s che viene eseguito al caricamento della pagina, il che è possibile, ma molto più difficile.

perché lo voglio?

Così posso fare una rivelazione parziale di contenuti per le persone che NON fanno parte del gruppo. (Perché entrare nel gruppo richiede un abbonamento a pagamento.)

Questo è un argomento davvero interessante. Questo primo
paragrafo è davvero interessante.

<div data-custom="foobar" data-foobar="<groupname>">
Ecco il resto del contenuto.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
Ciao, scusa l'interruzione!
Ci sono altri contenuti qui per i nostri membri paganti...
ti piacerebbe saperne di più su come diventarlo?
</div>

Le persone nel gruppo vedono semplicemente l’intero argomento. Non c’è traccia di alcun paywall.

Le persone fuori dal gruppo vedono la porzione iniziale, non presente in nessuno dei DIV sopra, e un paywall.

Quindi posso usarlo in un’area completamente pubblica in modo che le persone possano vedere cosa ottengono se si iscrivono, accedono e diventano membri paganti.

6

Finalmente ho trovato il tempo di realizzarlo, come descritto qui: https://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay Molto semplice, rimuove semplicemente il DIV di destinazione dal DOM in base al fatto che l’utente corrente sia o meno nel gruppo “foobar” o non nel gruppo tramite “!foobar”. Questo mi permette di avere un semplice display a commutazione di contenuti come nell’immagine sottostante.

Naturalmente, se il componente è disabilitato, tutti i contenuti vengono visualizzati (poiché senza il componente il DOM non viene ridotto). Ma questo è sufficiente per quello che voglio fare.

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

4 Mi Piace
7

Mi hai risolto un mal di testa molto simile.

1 Mi Piace
8

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