Diferenciar Moderadores, Moderadores del Chat y Administradores en el Chatbox

El siguiente código elimina la arroba de los moderadores del chat, tanto en los mensajes como en la lista de usuarios conectados. Al mismo tiempo, añade las siguientes clases a los usuarios dependiendo de sus permisos:

• Moderador: .chat-user-mod
• Moderador del chat: (los antiguos «arrobas») .chat-user-chatmod
• Administradores: .chat-user-admin
• Usuario: .chat-user-normal

Con estas clases, el código permite poner un identificador personalizado para los moderadores e incluso añadir cualquier tipo de formato personalizado con CSS (sombras, bordes, fondos, etc.).

Instalación

Coloca el siguiente JS y actívalo solo en las zonas donde tu chat aparezca.

let script = document.createElement('script');
script.textContent = `(${(function() {

    let getClassFromUser = function(user) {
        let output = [],
        chatlevel = user.hasOwnProperty('chatLevel') ? 'chatLevel' : 'chat_level',
        userlevel = user.hasOwnProperty('userLevel') ? 'userLevel' : 'user_level';

        if(user[chatlevel] == 2)
            output.push('chat-user-chatmod');

        switch(user[userlevel]) {
            case '0':
                output.push('chat-user-normal');
                break;
            case '1':
                output.push('chat-user-admin');
                break;
            case '2':
                output.push('chat-user-mod');
                break;
        }

        return output;
    },
    removeAtSymbol = function(cont) {
        if(cont.nodeType == 3) cont.remove();
    },

    previousMethod = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
        previousMethod.call(this, data);

        /* Userlist modifications */
        $('#chatbox_members li span[data-user]').each(function() {
            let $this = $(this),
                userid = $this.attr('data-user'),
                user = data.users.find(elm => elm.id == userid);
            console.log(getClassFromUser(user).join(' '));
            $this.parent().addClass(getClassFromUser(user).join(' '));
            removeAtSymbol($this.parent()[0].childNodes[0]);
        });

        /* chat messages modifications */
        $('#chatbox .user span[data-user]').filter(function() {
            return $(this).attr('data-user') > 0;
        }).each(function() {
            let $this = $(this),
                userid = $this.attr('data-user'),
                user = data.messages.find(elm => elm.userId == userid);
            $this.closest('.user').addClass(getClassFromUser(user).join(' '));
            removeAtSymbol($this.parent()[0].childNodes[0]);
        });
    };
    chatbox.init();

}).toString()})();`;

$(function() {
    $('object[data^="/chatbox/index.forum"], iframe[src^="/chatbox/index.forum"]').each(function() {
        this.addEventListener('load', function() {
            this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
        });
    });
});

Ahora podéis, por ejemplo, ponerle el símbolo # a los administradores con el siguiente CSS:

.chat-user-admin::before {
    content: '# ';
}

O una imagen a los moderadores así:

.chat-user-mod::before {
    content: '';
    background: transparent url('url a la imagen') no-repeat 0 0;
    width: 20px;
    height: 20px;
}

Nota

Recordad que debido a limitaciones de Foroactivo no es posible aplicar modificaciones con JS al chat que se encuentra en la ruta /chatbox/index.forum. Este código solo funcionará con los chats que incrustes desde el foro.