Diferenciar Moderadores, Moderadores del Chat y Administradores en el Chatbox

Flerex

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.

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.