Diseño independiente a los mensajes dependiendo del grupo del autor

Flerex

En base a la sugerencia de @etherealxmemories traigo un nuevo código que permite darle un diseño a cada mensaje de un tema dependiendo de en qué grupo esté el autor del mismo. No solo se detectará en qué grupo está el usuario, sino que también permite cambiar el diseño si el usuario no está en un grupo o si el usuario es un invitado.

El funcionamiento es el siguiente: se crea una clase que identifica a los grupos y se añade a div.post para poder hacer cualquier tipo de modificación.

Instalación

La instalación es realmente simple. Tan solo hay que añadir desde la «Gestión de JavaScript» el siguiente código, activándolo solo en los temas:

/* 
* A la izquierda, el nombre de la clase del grupo al que
*   corresponde el color (tal y como lo tengas en el PA)
*   de la derecha 
*/
const groups_id = [
    ['mod', '#5AB07C'],
    ['admin', '#3262BA'],
],

getClassFromUsername = username => {
	let output = 'usergroup-',
	color = username.querySelector('span');

	if(username.childElementCount == 0)
		output += 'guest';
	else if(color) {
		const group = groups_id.find(elm => elm[1] == color.getAttribute('style').substr(6));
		output += group ? 'group-' + group[0] : 'unknown';
	} else
		output += 'nogroup';

	return output;

};
document.addEventListener('DOMContentLoaded', function() {
	Array.from(document.querySelectorAll('div.post')).forEach(post => {
		const username = post.querySelector('.postprofile dt strong[style^="font-size"]');
		post.classList.add(getClassFromUsername(username));
	});
});

De todo ese código solo hay que editar la constante groups_id, que se encuentra entre las primeras lineas, la cual permite identificar los grupos.

Se deberá añadir una linea nueva por cada grupo de tu foro, poniendo a la derecha el color de dicho grupo exactamente igual como aparece en el PA y a la izquierda un identificador del grupo que utilizará el código a la hora de crear las clases.

Consideraciones

  • Este código no añade clases estáticas en el tiempo. Es decir, si en un futuro un usuario cambia de grupo, pierde su grupo o se elimina (se convierte en invitado), la clase de sus mensajes cambiará con ellos.
  • Solo funciona en phpBB3 de Foroactivo.

Clases posibles

  • div.post.usergroup-group-{identificador_del_grupo}: Clase creada para los mensajes escritos por un usuario que esté en uno de los grupos del foro (dependiendo de la terminación del selector será un grupo o otro).
  • div.post.usergroup-nogroup: El autor del mensaje no pertenece a ningún grupo
  • div.post[class*="usergroup-group-"]:El autor del mensaje pertenece a un grupo cualquiera del foro identificado por el código.
  • div.post.usergroup-unknown: El usuario está en un grupo pero no ha sido identificado por el código (seguramente porque en la constante del código groups_id no hayas incluido el grupo o su color no corresponde).
  • div.post.usergroup-guest: El autor es un invitado.

por Flerex

Estudiante de Ingienería del Software con experiencia en el desarrollo web y la plataforma Foroactivo desde hace más de 8 años. Me encanta todo lo relacionado con el diseño de UI/UX.