(Nihil) Afficher l'avatar des membres connectés dans la CB

Rappel du premier message :

Hello ! Je vous reviens avec une demande farfelue et peut-être insensée: je me demandais s'il était possible de faire apparaître l'avatar en miniature, dans la case de gauche "en ligne" ou "absent" à côté du pseudo des membres, dans la Chatbox ? (et donc uniquement dans la case qui liste les membres sur la CB, pas devant leur message).

Ma demande est sans doute compliquée, surtout qu'on a visiblement pas de template pour faire ce qu'on veut de la CB (sinon j'aurais essayé seul mais j'vois pas comment faire ... )

Est-ce donc quelque chose de possible ? :)

Up !

Hello :)

Je reprends le code ce soir, je n'y ai pas touché depuis un moment, en semaine j'avance rarement les codes JS :)
Avant de me modifier quoi que ce soit, je vais d'abord demander sur le support de FA s'ils ont l'intention dans un futur proche de pouvoir mettre les avatars dans la liste des membres aussi... Histoire de pas faire quoi que ce soit "pour rien"

Okay ça marche :)

Bon, j'ai bien fait d'attendre un petit peu... Ea (quelqu'un que j'admire beaucoup sur Forumactif d'ailleurs) vient de sortir ceci: http://forum.forumactif.com/t376202-codes7-pour-la-chatbox avec notamment "Ajouter les avatars où ils ne sont pas"

Je suis contente tout de même, car il utilise la technique que je voulais utiliser ♥ (petite Nihil = trop fière d'y avoir pensé tout comme Ea /ZBAAF/).
Merci d'avoir proposé cette suggestion, même si au final tu n'utiliseras pas mon code, je me suis vraiment bien amusée à le faire ! :)
Tous ces codes montrent la facilité de modification de cette nouvelle CB ♥, c'est franchement cooool *-* (Nihil = comme une enfant émerveillée )

Est ce que tu veux que je te file un coup de main pour installer le code ou bien c'est bon :) ?

Ah merci beaucoup ! Mais oui je veux bien de l'aide... Ils ne fontionnent pas sur mon fo... T_T Il faut bien créer un JS et coller le code dedans ? "toutes les pages" vu que j'ai une CB latérale sur chaque page... Sauf que bah... rien ne fonctionne T________T

Alors, première chose il faut que tu penses à retirer mon ancien code. Par ce que si on se retrouve avec 2 codes différents, on va avoir des conflits :)

Ensuite le code à rajouter pour les avatars est celui ci :

Code:

$(window).load(function() {
  var chatbox_script = function() {
 
    var default_avatar = 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png';
    var ava_in_member_list = true;
    var ava_in_indirect_message = false;
 
    var avatars = {};
    var d;
    var set_avatar = function(pseudo, elem_to_prepend){
      var avatar = avatars[pseudo];
      var el = $(this);
      elem_to_prepend.prepend('<span class="cb-avatar-list"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');
      if(!avatar) {
        if(!d) {
          d = $.get('/memberlist?change_version=prosilver').done(function(c){
            $('.avatar-mini img', c).each(function(){
              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')
            })
          })
        }
        d.done(function(){
          var avatar = avatars[pseudo];
          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)
        })
      }
    };
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      var next_scroll = false;
      if (data.messages) {
        $.each(data.messages, function(_,m){
          if(ava_in_indirect_message)
            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();
          if(m.user && m.user.avatar)
            avatars[m.username] = m.user.avatar
        });
        next_scroll = !this.messages || this.messages.length != data.messages.length;
      }
      overrided.call(this, data);
      d = null;
      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){
        set_avatar($(this).text(), $(this).parent());
      });
      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){
        set_avatar($(this).children().attr('data-username'), $(this).parent());
      });
      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2
    };
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/"],iframe[src^="/chatbox/"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("head").first().each(function(){this.appendChild(s.cloneNode(!0))})}catch(a){}})
});

Il faut aussi rajouter un CSS :

Code:

.cb-avatar-list > img {
          height:30px;width:30px;
          vertical-align: middle;
}

D'accord ! Merci, ça fonctionne, par contre ton code rendait mieux je trouve. Celui-ci prend l'avatar entier, et le redimensionne en carré (donc ça l'écrase car les avatars sont 320*200 de base). Le tiens prenait un fragment (le haut de l'avatar si j'ai compris). C'est possible de faire ça avec le CSS ? Genre avec des **% ? Je ne sais pas trop faire... ^^" (et je souhaite garder le "carré" sinon c'est trop encombrant).

Sinon, j'aurai bien aimé le script qui fait apparaître le "nouveau message" dans l'onglet, mais il ne fonctionne ni sur Chrome, ni sur Mozilla... :/

EDIT: en fait tous les autres ne fonctionnent pas (celui pour changer l'@ des modé, celui pour le pop-up nouveau message dans l'onglet...).

EDIT²: Le code de Ea ne fonctionne pas du tout sur l'ordinateur de ma co-admin (un Mac, Apple, sur Safari -> c'est ça ? Parce que le tiens ne bugais pas du tout.. là, celui-ci il s'affiche soit pas du tout, soit il s'affiche mais lorsque t'envoie un message, l'avatar se dédouble (donc si tu envoie 3 messages y a 4 fois le même avatars à côté du pseudo O.o )). RE-EDIT: ce n'est pas du à Safari puisque là, sur chrome, avec un ordi complètement différent, ça m'a fait pareil...

-> sinon c'est trop compliqué de rajouter juste le CSS dans ton code ? Parce qu'il marchait correctement, sans aucun bug...

Merci d'avance :) <3

Coucou Kiki :)

J'ai appris qu'Ea avait mis à jour son code ici : http://forum.forumactif.com/t376250-codes10-pour-la-chatbox#add_avatar mais effectivement, le code est toujours "en test" et de nombreuses personnes ont des problèmes pour l'instant.

Je vais réadapter mon code pour qu'il prenne en compte quelques modifications ♥. Il marchait bien, mais il était possible de l'améliorer un tout petit peu, car là il est peu trop "lourd" en terme de performances, je ne sais pas trop ce que ça donnerait au bout d'un certain temps connecté sur la CB sans rafraichir la page. :p

A priori il marche bien... pour être resté connecté plusieurs heures... Ca semblait fonctionner ton code :) Ca marche tu me diras alors !

Coucou :)

Du coup j'ai simplement repris mon ancien code sans faire toutes les améliorations pour l'instant ♥

Voici la nouvelle version du JS :

Code:

/*
 *  Améliorations futures :
 *  - récupérer l'avatar depuis la page /memberlist?change_version=subsilver
 *  C'est à dire la page membre avec les templates neutres.
 *
 *  - si l'avatar n'est pas dedans, chercher sur sa page de profil
 *
 *  - sauvegarder dans le localStorage pendant quelques minutes
 *  le lien de l'avatar (car la chatbox est sur toutes les pages)
 *
 *  - prendre en compte le nouveau code de la chatbox en modifiant
 *  Chatbox.prototype.refresh et en virant le setTimeout super lourd
 *
 */
$(function () {
   
    /* variable qui contiendra la liste des membres dont on a l'avatar */
    var list_members = [];
   
    /* On sélectione l'iframe de la chatbox et
    * on attends qu'elle soit chargée */
    $('iframe[src*="chatbox"]').load(function () {
        /* on récupère son contenu */
        var $contents = $(this).contents();
   
        /* on ajoute le CSS à la CB */
        $contents.find('body').append($('<style />', {
            id: 'chatboxMembers',
            text: '.chatbox-user-username:after{display:block;}'
        }));

        var $style = $contents.find('#chatboxMembers');

        /* cette partie là permettra de vérifier s'il faut actualiser les avatars de la CB ou non*/
        var old_text = '';
       
        /* on vérifie toutes les demi secondes */
        var interval = setInterval(function () {
            /* on regarde la nouvelle liste des membres */
            var new_text = $contents.find('#chatbox_members').text();
           
            /* si c'est identique, il n'y a pas eu de modification
            * on arrête ici */
            if (old_text == new_text) return;
           
            old_text = new_text;
           
            /* on sélectionne tous les pseudos */
            $contents.find('.chatbox-user-username').each(function () {
                var $this = $(this);

                var idMember = $this.attr('data-user');
               
                /* on regarde si on a déjà l'avatar ou non */
                if (list_members.indexOf(idMember) == -1) {
                    /* on load la page de profil pour récupérer l'avatar */
                    $.get("/u" + idMember, function (data) {
                        /* on récupère l'avatar */
                        var srcImg = $(data).find('td[width="300"] img:first, #profile-advanced-right .profile:first img:first').attr('src');

                        /* on ajoute le CSS pour ce membre là */
                        $style.append('.chatbox-user-username[data-user="' + idMember + '"]:after{background-image:url(' + srcImg + ')}');
                       
                        /* on rajoute l'avatar dans la liste des membres qu'on a */
                        list_members.push(idMember);
                    });
                }
            });
        }, 1000); /* 1000 = le code va se faire toutes les secondes */
    });

});

Et le CSS à rajouter :

Code:

.chatbox-user-username:after {
    float: left;
    content: "";
    width: 30px;
    height: 30px;
    background: black; /* fond par défaut */
    background-size: cover; /* resize l'avatar*/
    margin-right: 5px;
    display: none; /* on le masque par défaut, et on le montre que si le JS marche */
}


#chatbox_members li {
    overflow: auto; /* Permet de clear le float */
}

Je te laisse d'abord tester si ça marche bien, et ensuite on voit ensemble comment personnaliser le CSS :)

C'est parfait merci beaucoup ! Par contre, je voulais arrondir les coins de 1/2 px pour voir, mais border-radius, même suivit de !important ne fonctionne pas... Normal ? Par contre, ajouter une margin-top fonctionne parfaitement ! pareil pour un border... C'est du au JS ? Après si c'est chiant à faire, laisse ce n'est qu'un détail :)

Par contre, du coup, quand le pseudo est trop long, il se place au-dessus de l'image... Est-ce qu'il y a possibilité qu'il aille en dessous pour rester au niveau de l'image ? (sûrement avec un 'table' j'imagine mais c'est à nouveau du JS je suppose ? )

je te montre ici ce que ça donne si l'avatar est trop long, et ce que j'aimerai (ce sont des schémas sur paint hein mais tu verras ):

Spoiler:

C'est faisable ? Ou trop compliqué ? Parce que c'est un peu "gênant" je trouve du coup que le pseudo bouge de place s'il est trop long (et j'ai plusieurs membres à qui ça fait ça (là j'ai rajouté sur paint car les membres en question n'étaient pas co à ce moment)

Merci pour déjà tout ça en tout cas, c'est super :) ah et j'en reviens au sujet de EA: les JS pour les notifs de message et pour changer le @ des modé ne fonctionnent pas... Normal ?

Hello :)

Attention dans ton message précédent tu as ceci :

Code:

Par contre, du coup, quand le pseudo est trop long, il se place au-dessus de l'image... Est-ce qu'il y a possibilité qu'il aille en dessous pour rester au niveau de l'image ? (sûrement avec un <table j'imagine mais c'est à nouveau du JS je suppose ? )

Il considère le < table comme l'ouverture d'une nouvelle balise et ça crée un problème [screen]. Enlève le < et tout redeviendra normal :p

Pour le border-radius, chez moi ça fonctionne bien, je le met sur .chatbox-user-username::after

Code:

.chatbox-user-username::after {
    border-radius: 10px;
}

Par contre, du coup, quand le pseudo est trop long, il se place au-dessus de l'image... Est-ce qu'il y a possibilité qu'il aille en dessous pour rester au niveau de l'image ?

Oui j'avais remarqué (comme j'ai un long pseudo :p). C'est faisable en CSS directement, j'avais déjà testé :)
Il faut juste que je refasse le code et c'est bon ♥
Je suis désolée, je sais que ta demande dure depuis plusieurs semaines, mais c'est vraiment tombé à la période où j'ai enchainé boulots sur boulots >*<.

Merci pour déjà tout ça en tout cas, c'est super :) ah et j'en reviens au sujet de EA: les JS pour les notifs de message et pour changer le @ des modé ne fonctionnent pas... Normal ?

Je sais que sur le FdF plusieurs personnes ont des soucis, après je n'ai pas encore regardé les autres codes. Si tu veux tu peux regarder les topics sur le forum de forumactif, ou alors attendre un petit peu.

Pour les JS je ne trouve pas de soluce... Dommage j'aurai adoré avoir la notif de message dans l'onglet...

Le problème de table est réglé dans le msg, j'ai édité... Désolé ^^
Pas de soucis pour l'attente, ma demande n'est sans doute pas simple non plus !

En fait, aussi étonnant que cela puisse paraitre, ta demande n'est pas très difficile, c'est juste qu'il y a eu les modifications de forumactif sur la CB + le fait que je n'ai codé que le week end qui a ralenti tout ça... Enfin bon, de toutes les façons, ce n'est pas le genre de chose qui "bloque l'ouverture d'un forum", donc tout va bien. ♥

Alors, pour bien positionner les avatars, avec le CSS (à la place de l'autre), est ce que c'est mieux ?

Code:

/* ligne pour un pseudo */
#chatbox_members li {
    overflow: auto; /* Permet de clear le float */
    position: relative; /* Permet de positionner l avatar */
}

/* un pseudo dans la liste des membres CB */
#chatbox_members li > span {
    display: inline-block;
    margin-left: 35px;
    min-height: 35px;
}

/* image avatar avant le pseudo */
.chatbox-user-username:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto; /* pour centrer verticalement */
    content: "";
    width: 30px;
    height: 30px;
    background: black; /* fond par défaut */
    background-size: cover; /* resize l'avatar*/
    margin-right: 5px;
    border-radius: 10px;
}

Normalement cela s'affiche aussi sur la grande CB mais ça sans avoir l'image de l'avatar.

Si c'est bon, dis le moi et je met à jour le code JS et le CSS pour que cela ne s'affiche pas sur la grande CB (puisque les avatars ne peuvent pas s'ajouter dans la grande CB).

J'ai du régler quelques bugs (un ligne à retirer + mes avatars à 35px au lieu de 30 ne passaient pas+ une histoire de margin). Le border-radius marche mais ça fait moche donc je laisse carré !

Mais je pense que c'est bon du coup :) Je laisse le sujet ouvert un tout p'tit peu au cas où mais MERCI à toi en tout cas pour tout ça c'est super !