Come personalizzare ChatMessageInfo / CSS autore chat (non c'è un widget?)

Sviluppatore
1

In precedenza, ho creato un piccolo plugin che mi permette di personalizzare la riga dell’autore di ogni post del forum con del CSS basato su una logica specifica del sito. Esempio:

function initColorize(api)
{
	api.includePostAttributes('colorized_groups');

	// Hijacking post icons to sneak in CSS for forum posts
	api.addPosterIcons((cfs, attrs) => {
		// (A real icon could be specified by filling in the icon field.
		// I removed the icon though since it was getting a bit cluttered.
		// For now, with no icon specified, it's just for CSS highlighting of name.)	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Developer' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Researcher' };
	});

Successivamente, voglio fare alcune personalizzazioni simili per la chat in tempo reale, ma non esiste un equivalente di api.addPosterIcons per i messaggi della chat in tempo reale. Forse potrei usare api.decorateWidget, ma il componente corrispondente per la chat è ChatMessageInfo che è un componente, non un widget.

Scusa se è ovvio, ma quale sarebbe una buona strategia per personalizzare ChatMessageInfo da un plugin?

(È intenzionale che non mi affidi al gruppo primario dell’utente poiché c’è una logica speciale per decidere quale dovrebbe avere la priorità e non voglio dovermi affidare all’utente/amministratore per impostarlo correttamente manualmente.)

Grazie!

2

Ehi,

Penso che non sarà facile. Non ci sono PluginOutlet disponibili in quest’area (non esitare a richiederlo!)

Se vuoi aggiungere solo classnames, dovresti essere in grado di farlo in questo modo:

api.modifyClass(
  "component:chat/message/info",
  (Superclass) =>
    class extends Superclass {
      get usernameClasses() {
        let classes = super.usernameClasses;

        // Aggiungi classi extra
        classes += " developer";

        return classes;
      }
    }
)

sovrascrive questo codice:

1 Mi Piace
3

Grazie per la risposta! In realtà ho risolto con un’altra soluzione, ma apprezzo che tu abbia offerto la tua perché sembra un po’ più pulita (nella mia devo accedere al nome della classe e il mio metodo sembra un po’ una forzatura). Ecco la strategia che ho usato:

// Colora anche i nomi nella chat in tempo reale
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // nessun gruppo, niente da fare

	const nameClass = "chat-message-info__username__name";					
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normale: questo potrebbe essere un secondo messaggio che non ha l'intestazione del nome utente
		return; 

	let nameDiv = elements[0];

	if (colorized_groups.indexOf("developer") > -1)
		nameDiv.classList.add("developer");
	else if (colorized_groups.indexOf("wip_researcher") > -1)
		nameDiv.classList.add("wip_researcher");
	else if (colorized_groups.indexOf("researcher") > -1)
		nameDiv.classList.add("researcher");
});

Presumo che con il tuo metodo, passi ancora anche this.args.message.user?

1 Mi Piace
4

Ottimo lavoro nel trovare una soluzione! Non è poi così “hacky”. :smile:
Ma sì, sovrascrivere il getter è diretto e più pulito.

Esatto. :slight_smile:

1 Mi Piace
5

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