Intégrer le QEEL dans une page HTML ?

[foxies]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous Je ne suis pas parvenue à trouver une solution à un problème qui concerne le QEEL de mon forum.

Pour différentes raisons, j'ai fait le choix de créer une page HTML qui utilise le haut et le bas de mon forum et cette page est utilisée en tant que page d'accueil. Le soucis c'est que le QEEL ne s'affiche plus... En l’occurrence, j'ai auparavant effectué des changements au niveau du template index_body afin que seule la variable suivante s'affiche :

Code:

{LOGGED_IN_USER_LIST}

Il s'agit donc d'afficher uniquement la liste des membres connectés.

Voici mon template :

Code:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
         <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->

      <!-- BEGIN message_admin_txt -->
         <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div class="user-list">
  <div id="logged-in" class="masterTooltip" title="En ligne">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">
    document.getElementById('logged-in').innerHTML=document.getElementById('logged-in').innerHTML.replace(/Utilisateurs enregistrés :/,"");
</script>
</div>
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

Ma question est celle-ci : existe-t-il une solution pour que cette variable s'affiche au sein de ma page HTML (j'avais prévu de la placer tout à la fin) ?

Merci d'avance

[*Splash*]

Je post pour le lien du fofo

[foxies]

Des idées ?

[Garionix]

Bonsoooir ! Les variables pour êtres utilisées dans une Page Html c'est... Complexe, rien que pour la variable qui affiche le nom d'utilisateur de celui qui visionne la page c'était spéciale. Heureusement que l'équipe de ForumActif en avait proposé un tutoriel...

Par contre, pour celles qui affiches diverses éléments de la page, tel que les utilisateurs en ligne... Là je sèche, après bien entendu. Je suis arrivé avec une solution alternative, hé !

Met ce petit bout de code à l'endroit dont tu souhaite voir ceux qui sont connectés apparaître :

Code:

<script>
$.get( '/viewonline', function( data ) {
  var ViewQeel = $('.forumbg', data ).html();
  $('#Qeel').html(ViewQeel);
});
</script>

<div id="Qeel">
 
</div>

C'est encore archaïque, mais c'est une petite solution que je propose qui pourrai peut-être t'aider, voir non. C'est comme tu vois !

Heureusement, ForumActif dispose d'une page spéciale pour afficher le Qeel, il m'a suffit de récupérer un élément ciblé de cette fameuse page, puis de la rentrer dans la div portant l'id "Qeel".
Je l'ai testé sur mon Forum de test après l'avoir fait passer sous version ModernBB, s'il y a un problème hésite pas !

Et en espérant avoir pu aider !

[foxies]

Bonjour @Garionix et merci pour cette proposition qui est intéressante (je ne savais même pas qu'une page /viewonline existait) ! J'ai essayé le script et il marche très bien.

Néanmoins, dans la mesure où les données générées concernent uniquement les membres connectés durant les cinq dernières minutes et non à l'instant donné, je vais patienter encore sur ce topic, voir si quelqu'un n'aurait pas une autre chose à proposer

Merci encore et bonne journée

[foxies]

UP

[Ea]

Bonjour,


À ma connaissance un utilisateur/visiteur en ligne est quelqu'un qui a ouvert une page dans les X dernières minutes.

Si on veut savoir qui a un onglet du forum ouvert à un instant donné, on ne peut pas le savoir vu que qu'un aurait pu ouvrir une page il y a 30 secondes et la fermer depuis, ou quelqu'un pourrait avoir ouvert une page il y a deux heures et toujours être dessus.

Cordialement.

[foxies]

Bonjour @Ea, je vois Je n'y avais pas pensé, c'est vrai.

Malgré tout, je ne suis pas sûre que même en utilisant la technique proposée plus haut, je puisse "isoler" les pseudos des membres connectés car le reste ne m'intéresse pas pour le rendu que j'aimerais avoir :/ A moins peut-être d'utiliser un certain script, mais mes compétences là-dedans sont bien trop limitées...

[Garionix]

Yoplaaa ! Désolé, j'étais pris dans un travaux compliqué >.>

Et en effet, afficher un utilisateur dans l'immédiat tant qu'il n'a pas ouvert de page c'est compliqué...

Après, comme on charge les données par Jquery, on peut faire que les modifications s'effectuent sans que vous mêmes ayez besoin de recharger la page... Mais à savoir c'est un code qui se lance toutes les x secondes.

Ah si c'est possible, il suffit d'affiner la sélection de Jquery ou bien pour un résultat sûr on peut modifier quelques peu le template. Car la page /viewonline est liée à un template de ForumActif.

[Ea]

Pour l'exemple en affinant plus avec jquery, cela pourrait donner ceci en partant du script de garionix:

Code:

<div></div>
<script>
$.get( '/viewonline', function( data ) {
  debugger;
  var users = $('.forumbg td:first-child > a[href^="/u"]', data).map(function () {
    return $(this).prop('outerHTML');
  }).toArray();
  if (users.length == 0) {
    this.text("Il n'y a aucun utilisateur connecté");
    return;
  }
  this.html("Utilisateurs connectés : "+users.join(', '));
}.bind($('script:last').prev()));
</script>

[foxies]

Wow, super top ! Merci à vous deux, c'est exactement ce que je voulais

Si je peux me permettre, j'ai une autre question Grâce à la méthode de Garionix j'ai également récupéré la liste des membres et elle s'affiche maintenant sur la page HTML en plus de la liste des membres connectés à présent :

Code:

<script>
$.get( '/memberlist', function( data ) {
  var ViewMl = $('.memberlist-wrapper', data ).html();
  $('#MemberList').html(ViewMl);
});
</script>
<div id="MemberList"></div>

Dans le template correspondant (memberlist_body), j'ai ceci afin qu'au survol des avatars, le pseudo du membre concerné s'affiche :

Code:

<a href="{memberrow.U_VIEWPROFILE}"><div class="member-avatar masterTooltip" title="{memberrow.USERNAME}">{memberrow.AVATAR_IMG}</div></a>

Le JS suivant est installé sur mon forum :

Code:

$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});

Malheureusement, la class masterTooltip ne s'affiche pas. Elle fonctionne pourtant sur une autre partie de la page HTML : en passant le curseur sur les pseudos des membres connectés avec comme titre "En ligne" (je viens tout juste de le mettre en place). Sauriez-vous comment la faire marcher ?

[Garionix]

Pour moi cela fonctionne bien pourtant... Lorsque je passe le pointeur de ma souris sur les avatar se situant dans la div member-avatar masterTooltip, j'ai bien le pseudo qui s'affiche et qui suit le pointeur de ma souris tant que je survole l'avatar.

[Ea]

Bonjour,


Je n'ai pas testé, mais les deux scripts devraient pouvoir être combiné comme ceci:

Code:

<div id="MemberList"></div>
<script>
$.get( '/memberlist', function( data ) {
    var ViewMl = $('.memberlist-wrapper', data ).html();
    $('#MemberList').html(ViewMl);
    // Tooltip only Text
    $('#MemberList').find('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});
</script>

Ce qu'il pourrait se passer avec le code précédent, c'est que le code au survol soit exécuté après que la liste des membres soient inclue dans la page.

Sinon il me semble que la liste des membres est paginée, donc si il y a plus de deux pages il est possible qu'on ne voit que la première.

Cordialement.

[foxies]

Un grand merci pour votre aide ! Le code de @Ea fait marcher la tooltip convenablement.

Très bonne journée à vous deux