Afficher statut en ligne/hors ligne dans la liste des membres

[Hallow]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://123test.forumactif.com

Description du problème

Bonjour,

Je prépare une mise à jour de mon forum et j'aimerais afficher le statut des membres(connecté/pas connecté) sur la liste des membres.

Pour cela j'ai suivi ce tutoriel, d'abord en copiant/collant tout pareil, et ensuite comme ça ne fonctionnait pas, en mettant mes propres noms de class : https://www.never-utopia.com/t58295-liste-des-membres-afficher-si-un-membre-est-connecte

Sans succès, malheureusement, faut dire que je suis une bille en JS (un jour j'apprendrai!). Donc si quelqu'un peut corriger mon script et/ou me donner une autre méthode, je suis preneuse.

Voici mon template memberlist_body:

Code:

<div class="titre-page"><h1>Registre du Lorhestan</h1>
  <div class="membres-pagination" style="float:none;">
   <!-- BEGIN switch_pagination -->
   {PAGINATION}
   <!-- END switch_pagination -->
</div>
<form action="{S_MODE_ACTION}" method="get">
<div class="membres-recherches">
   <p style="text-align:right; margin: 0; padding: 0;">
      <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="Chercher quelqu'un" />
      {S_MODE_SELECT}
      {S_ORDER_SELECT}
      {S_HIDDEN_SID}
      <input class="button2" type="submit" name="submit" value="Filtrer" />
   </p>

</div>
</form>
</div>

<div class="liste-membres">
   <!-- BEGIN memberrow -->
  <div class="bloc-membre"><a class="member-link-online" style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>  
<div class="membre-avatar">{memberrow.AVATAR_IMG}</div><div class="membre-donnees">
      <div class="membre-pseudo"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
    <div class="membre-contact"><!-- BEGIN switch_td_pm -->
      {memberrow.PM_IMG}
      <!-- END switch_td_pm -->
      {memberrow.WWW_IMG}</div>
    <div id="hu-memberlist-rank"><script language="javascript" type="text/javascript">
$(function(){
$.get($("#hu-memberlist-rank a[href^='/u']")[0].href,function(d){
(a=$("#rang_membre",$(d))).length&&$("#membre-rank").html(a);})
});</script>
     <span id="membre-rank"></span>
<a id="member-link" style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>    
  </div>
          <div class="membre-infos">
 <div class="membre-derniereco">Dernier flânage le {memberrow.LASTVISIT}</div>
 <div class="membre-arrivee">Vadrouille depuis le {memberrow.JOINED}</div>
</div></div>
  </div>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <div class="bloc-sansmembre">
      {switch_no_user.L_NO_USER}
   </div>
   <!-- END switch_no_user -->
</div>

<div class="bas-membres-pagination" style="float:none;">
   <!-- BEGIN switch_pagination -->
   {PAGINATION}<br /><br />
   <!-- END switch_pagination -->
</div>

Voici mon template viewonline_body:

Code:

<!-- BEGIN googlemap -->
<div>
   <br />
   <iframe frameborder="0" scrolling="no" width="100%" height="450" src="{googlemap.U_GOOGLEMAP}"></iframe><br />
   <br />
</div>
<!-- END googlemap -->

<div class="liste-viewonline">
  <!-- BEGIN reg_user_row -->
  <div class="bloc-viewonline"><a class="varonline-user" href="{reg_user_row.U_USER_PROFILE}">{reg_user_row.USERNAME}</a>
    <a class="viewonline-action" href="{reg_user_row.U_FORUM_LOCATION}">{reg_user_row.FORUM_LOCATION}</a>
    <span class="viewonline-update">Dernière vadrouille le {reg_user_row.LASTUPDATE}</span>
</div>
<!-- END reg_user_row -->

<!-- BEGIN bot_user_row -->  
    <div class="bloc-viewonline">{bot_user_row.USERNAME}
    <span class="viewonline-update"><a href="{bot_user_row.U_FORUM_LOCATION}">{bot_user_row.FORUM_LOCATION}</a></span>
    <span class="viewonline-update">Dernière vadrouille le {bot_user_row.LASTUPDATE}</span>
</div>
 <!-- END bot_user_row -->

<!-- BEGIN guest_user_row -->  
    <div class="bloc-viewonline">{guest_user_row.USERNAME}
    <span class="viewonline-update"><a href="{guest_user_row.U_FORUM_LOCATION}">{guest_user_row.FORUM_LOCATION}</a></span>
    <span class="viewonline-update">Dernière vadrouille le {guest_user_row.LASTUPDATE}</span>
</div>
  <!-- END guest_user_row -->
</div>

<p class="viewonline-p">{L_ONLINE_EXPLAIN}</p>

{JUMPBOX}

Le CSS des deux templates concernés :

Code:

/*MEMBERLIST*/
.titre-page{display:flex;flex-wrap:wrap;align-items: center;justify-content: space-between;flex-direction: row;gap:20px;filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));margin: 20px auto;background-repeat: no-repeat;background-size: auto;}
.titre-page h1{flex-grow: 1;background:var(--primarycolor);border-radius:10px;padding: 0px 10px;width:40%;border-bottom: 5px solid var(--goldcolor); position: relative;font-weight:700;text-transform:uppercase;font-family:var(--primaryfamilyfont);font-size: 2.5em;line-height:2em;color: var(--primaryfont);}
.titre-page .membre-pagination{text-transform:none;font-family:var(--tertiaryfamilyfont);font-size: 0.6em;line-height:0.8em;color: var(--accentcolor);position:absolute;right:10px;bottom:0;}
.membres-recherches input, .membres-recherches select{background:var(--primarycolor);border-radius:10px;padding:10px;margin:0 5px;border-bottom: 5px solid var(--redcolor); position: relative;font-weight:700;text-transform:uppercase;font-family:var(--secondaryfamilyfont);font-size: 1em;line-height:1em;color: var(--primaryfont);}
.membres-recherches .button2{height: 45px;}
.liste-membres{display: flex;flex-direction:row;gap:10px;}
.bloc-membre{overflow: hidden;border-radius:10px;display: flex;flex-direction:row;width: 290px;height: 190px;background:var(--primarycolor);filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));}
.bloc-membre:nth-child(odd){border-bottom:5px solid var(--redcolor);}
.bloc-membre:nth-child(even){border-bottom:5px solid var(--greencolor);}
.bloc-membre:nth-child(odd) .membre-pseudo{box-shadow: inset 0 0 0 0 var(--redcolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre:nth-child(odd) .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--redcolor);}
.bloc-membre:nth-child(even) .membre-pseudo{box-shadow: inset 0 0 0 0 var(--greencolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre:nth-child(even) .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--greencolor);}
.membre-avatar{width: 90px;height: 190px;overflow: hidden;}
.membre-avatar img{width:auto;height:  190px;transform: translateX(-25%);}
.membre-donnees{display: flex;flex-direction:column;justify-content: space-between;width: 80%;position: relative;overflow: hidden;}
.membre-pseudo{border-radius:0 10px 0 0;text-align:center;}
.membre-pseudo:hover a span{color:var(--secondarycolor)!important;}
.membre-pseudo a span{transition: color .1s ease-in-out;font-family:var(--secondaryfamilyfont);font-size: 2.2em;line-height:2em;font-weight:700;text-transform:uppercase;}
#hu-memberlist-rank{text-align:center;font-family:var(--secondaryfamilyfont);font-size: 1.5em;line-height:1em;text-transform:uppercase;}


.membre-contact{display: flex;flex-direction:row;width: 100%;justify-content: space-around;align-items: center;}
.membre-contact a:hover{box-shadow: inset 200px 0 0 0 var(--bluecolor);color: var(--primaryfont)!important;}
.membre-contact a{font-size: 2.2em;line-height:2em;border-radius:10px;text-align:center;height: 25px;width: 25px;padding: 12px 10px 10px 10px;color: transparent!important;background-clip: text;-webkit-background-clip: text;background-image:var(--degradebleu);box-shadow: inset 0 0 0 0 var(--bluecolor);transition: all .3s ease-in-out;}
.membre-infos{overflow:hidden;font-family:var(--tertiaryfamilyfont);font-size: 1.2em;line-height:1em;color: var(--primaryfont);}
.membre-derniereco, .membre-arrivee{position:absolute;bottom:5px;width: 100%;transition: all 0.3s ease-in-out;}
.membre-arrivee {transform:translateX(-100%);}
.membre-derniereco{transform:translateX(0);}
.membre-infos:hover .membre-arrivee {transform:translateX(0);}
.membre-infos:hover .membre-derniereco {transform:translateX(-110%);}
.bloc-sansmembre{overflow: hidden;border-radius:10px;width: 100%;background:var(--primarycolor);border-bottom:5px solid var(--goldcolor);filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));font-family:var(--secondaryfamilyfont);font-size: 2.2em;line-height:2em;font-weight:700;text-transform:uppercase;color:var(--secondarycolor);padding:10px;text-align:center;}
.bas-membres-pagination{}
/*VIEWONLINE*/
.liste-viewonline{display: flex;flex-direction:row;gap:10px;}
.bloc-viewonline{overflow: hidden;border-radius:10px;display: flex;flex-direction:column;padding: 10px;background:var(--primarycolor);filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));border-bottom:5px solid var(--goldcolor);}
.varonline-user{font-family:var(--secondaryfamilyfont);font-size: 2.2em;line-height:2em;font-weight:700;text-transform:uppercase;text-align:center;}
a.viewonline-action{font-family:var(--secondaryfamilyfont);color: var(--primaryfont);font-size: 1.2em;line-height:1.5em;}
.viewonline-update{font-family:var(--tertiaryfamilyfont);font-size: 1.2em;line-height:1em;color: var(--primaryfont);}
.viewonline-p{margin-top:10px;font-family:var(--secondaryfamilyfont);color: var(--primaryfont);text-transform:uppercase;}

Et enfin, le script que j'ai mis dans la gestion des codes JS.

Code:

if(document.location.pathname == "/memberlist") {
    $.get("/viewonline", function(data){
        var idLink;
        /* on attend que notre propre page soit prête */
        $(function(){
            /* on récupère chaque membre connecté */
            $(".varonline-user", data).each(function(){
                idLink = $(this).attr("href"); /* on récupère le lien du membre */

                /* on ajoute la classe sur le block autour du membre */
                $(".member-link-online[href='" + idLink + "']").closest(".bloc-membre").addClass("is-online");
            });
        });
    });
}

J'ai essayé de mettre le script en bas de du template memberlist_body, dans le overall_header, dans la gestion des codes JS (où il est actuellement) également et rien ne fait...

Aussi, dans le CSS il n'y a pas de .is-online de "configurer", mais actuellement on peut voir .bloc-membre:nth-child(odd) et .bloc-membre:nth-child(even), en fait j'aimerais que le membre hors-ligne prenne les propriétés de odd et celui en ligne les propriétés de even.

En espérant avoir tout bien expliqué, j'espère que quelqu'un apportera une solution à ma demande. Merci beaucoup

[Toryudo]

Bonjour !

Alors, pour commencer, c'est un peu étrange : sur la page https://123test.forumactif.com/memberlist je ne vois pas le code qui correspondrait à cette ligne :

Code:

<a class="member-link-online" style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

Il n'y a aucun élément .member-link-online sur la page, donc le script ne peut pas le trouver pour mettre à jour l'élément parent. Je vois bien l'élément dans le Template memberlist_body que vous avez fournis par contre, est-ce que vous avez modifié quelque chose depuis ?

[Hallow]

Bonjour,

Y'a moyen qu'en continuant de modifier le template je l'ai supprimé parce que ça ne fonctionnait pas. Je l'ai rajouté à l'instant Mais le problème persiste, après je ne suis pas attachée à utiliser exactement cette méthode, on peut aussi utiliser le statut en ligne/hors ligne dans le profil du membre non ? Le problème c'est que le template profile_view_body est en travaux, je pourrai le poster dès que je l'aurai terminé.

Merci pour ta réponse en tout cas.

EDIT : Je remets le template de memberlist_body en ayant rajouté la balise que j'avais enlevée.

Code:

<div class="titre-page"><h1>Registre du Lorhestan</h1>
  <div class="membres-pagination" style="float:none;">
 <!-- BEGIN switch_pagination -->
 {PAGINATION}
 <!-- END switch_pagination -->
</div>
<form action="{S_MODE_ACTION}" method="get">
<div class="membres-recherches">
 <p style="text-align:right; margin: 0; padding: 0;">
 <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="Chercher quelqu'un" />
 {S_MODE_SELECT}
 {S_ORDER_SELECT}
 {S_HIDDEN_SID}
 <input class="button2" type="submit" name="submit" value="Filtrer" />
 </p>

</div>
</form>
</div>

<div class="liste-membres">
 <!-- BEGIN memberrow -->
  <div class="bloc-membre"><a class="member-link-online" style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
<div class="membre-avatar">{memberrow.AVATAR_IMG}</div><div class="membre-donnees">
 <div class="membre-pseudo"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
    <div class="membre-contact"><!-- BEGIN switch_td_pm -->
 {memberrow.PM_IMG}
 <!-- END switch_td_pm -->
 {memberrow.WWW_IMG}</div>
    <div id="hu-memberlist-rank"><script language="javascript" type="text/javascript">
$(function(){
$.get($("#hu-memberlist-rank a[href^='/u']")[0].href,function(d){
(a=$("#rang_membre",$(d))).length&&$("#membre-rank").html(a);})
});</script>
     <span id="membre-rank"></span>
<a id="member-link" style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>    
  </div>
     <div class="membre-infos">
 <div class="membre-derniereco">Dernier flânage: {memberrow.LASTVISIT}</div>
 <div class="membre-arrivee">Vadrouille depuis le {memberrow.JOINED}</div>
</div></div>
  </div>
 <!-- END memberrow -->
 <!-- BEGIN switch_no_user -->
 <div class="bloc-sansmembre">
 {switch_no_user.L_NO_USER}
 </div>
 <!-- END switch_no_user -->
</div>

<div class="bas-membres-pagination" style="float:none;">
 <!-- BEGIN switch_pagination -->
 {PAGINATION}<br /><br />
 <!-- END switch_pagination -->
</div>

Second edit : Ou même en utilisant ce genre de données(script déjà utilisé pour l'avatar en overall_header) : https://www.never-utopia.com/t58294-astuce-forumactif-javascript-informations-membres
Faire un script pour récupérer le statut en ligne du membre concerné appliquer une class ou id. J'ai quelques idées/pistes mais je suis bloquée par le manque de connaissances.

[Toryudo]

Bonjour !

Alors, quand je teste sur mon forum, j'ai bien une class .is-online qui s'ajoute au bloc .bloc-membre, donc chez moi, c'est bon maintenant, le script fonctionne.
Il y a des chances qu'il ne fonctionne pas sur votre forum par contre, parce que je vois des erreurs dans la Console Web sur d'autres scripts ; si vous pouviez désactiver les autres scripts le temps que nous faisions tous les tests sur celui-ci, ce serait parfait !

Donc ensuite, effectivement, il n'y a aucun CSS sur le .is-online, donc pour l'instant, on ne voit pas de différence.
Si vous voulez que les membres hors-ligne soient affichés comme odd et que les membres en ligne soient affichés comme even, il vous suffit de remplacer ceci :

Code:

.bloc-membre:nth-child(odd){border-bottom:5px solid var(--redcolor);}
.bloc-membre:nth-child(even){border-bottom:5px solid var(--greencolor);}
.bloc-membre:nth-child(odd) .membre-pseudo{box-shadow: inset 0 0 0 0 var(--redcolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre:nth-child(odd) .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--redcolor);}
.bloc-membre:nth-child(even) .membre-pseudo{box-shadow: inset 0 0 0 0 var(--greencolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre:nth-child(even) .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--greencolor);}

Par ceci :

Code:

.bloc-membre{border-bottom:5px solid var(--redcolor);}
.bloc-membre .membre-pseudo{box-shadow: inset 0 0 0 0 var(--redcolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--redcolor);}

.bloc-membre.is-online{border-bottom:5px solid var(--greencolor);}
.bloc-membre.is-online .membre-pseudo{box-shadow: inset 0 0 0 0 var(--greencolor);transition: box-shadow .3s ease-in-out;}
.bloc-membre.is-online .membre-pseudo:hover{box-shadow: inset 800px 0 0 0 var(--greencolor);}

Et tout devrait fonctionner comme vous voulez !

[Hallow]

Bonjour,

Le CSS a été changé, et j'ai désactivé tous les scripts, cela a fonctionné. Puis j'ai réactivé un à un les scripts en testant à chaque fois. Le coupable est celui pour le parallax de la bannière:

Code:

$(function() {
document.querySelectorAll(".parallax-headerevent").forEach(parallaxWrap =>
  parallaxWrap.addEventListener("mousemove", ({ clientX, clientY }) => {
    parallaxWrap.style.setProperty("--x", clientX);
    parallaxWrap.style.setProperty("--y", clientY);
  }),
 );
})();

Et effectivement la console donne une erreur que je ne saurai réparer.

[Toryudo]

Bonjour !

Quand je teste le script, il a l'air de bien fonctionner, en tout cas en tant qu'invité.
Quelle erreur est-ce que vous voyez dans la console de votre côté ?

[Hallow]

Bonjour,

J'avais gardé le script du parallax désactivé mais quand je l'active, le script pour le statut des membres ne fonctionne plus.

L'erreur affichée dans la console est :


Voici le lien que j'ai utilisé pour installer le parallax sur la bannière : https://codepen.io/lukeshiru/embed/rNYdLKK?height=600&default-tab=result&embed-version=2#result-box

EDIT : J'ai supprimé les deux parenthèses () qui étaient dans le })(); et le script fonctionne, sans erreur. Permettant au script du statut des membres de fonctionner également.

Problème résolu, même si j'aurais une dernière question, qui n'a rien à voir (dites-moi s'il vaut mieux que j'ouvre un autre sujet) : Pour la mise en page du profil, je "distribue" les champs de profil dans différentes div, or pour se faire je fais appel à chaque fois à tous les champs de profil puis j'applique un CSS pour masquer tous ceux qui ne m'intéressent pas, mais ça m'affiche des erreurs puisque les id apparaissent plusieurs fois sur la page alors qu'une id n'est sensée apparaître qu'une fois. Comment faire dans ce cas ?

Merci de votre aide!

[Toryudo]

Bonjour !

Oui, plutôt un nouveau sujet pour le nouveau problème, avec le maximum d'informations possible !
Vous pourrez aussi préciser à quel endroit est-ce que "cela affiche des erreurs", pour qu'on essaye de vous proposer la meilleure solution.

[Cloo]

Bonjour,

Le sujet initial de la publication m'intéresse beaucoup, je voudrais implanter ceci sur mon forum.

Mais comme il y a eu plusieurs essais et corrections, j'ai du mal à synthétiser le tout. Serait-il possible de faire un résumé de ce qu'il faudrait implanter sur un forum phpBB3?

Merci beaucoup!

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Hallow]

Bonjour,

Très bien je ferai une autre publication au sujet du profil.

Cloo j'ai simplement suivi ce tuto : https://www.never-utopia.com/t58295-liste-des-membres-afficher-si-un-membre-est-connecte
Cependant un de mes scripts empêchait son fonctionnement, en suivant simplement le tuto proposé je pense que tu ne devrais pas avoir de souci.

Enfin, le sujet est résolu. Merci!

[Cloo]

Cloo j'ai simplement suivi ce tuto : https://www.never-utopia.com/t58295-liste-des-membres-afficher-si-un-membre-est-connecte
Cependant un de mes scripts empêchait son fonctionnement, en suivant simplement le tuto proposé je pense que tu ne devrais pas avoir de souci.

D'accord, je vais essayer, merci!