[PHPBB3] Ratio Message/nombre de post

Coucou Serge,
ce script devrait fonctionner:


L'aperçu imagé:



Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.

Coches  Sur les sujets


Déposes ceci:

Code:


$(function(){if(!_userdata["session_logged_in"])return;
$('.postprofile').each(function(){
  var $this=$(this);
$(this).find('.M14_blocSpan.field_messages').before('<span class="M14_blocSpanParticip"><span class="label">Participation</span> : <span class="value"></span></span><br />');
var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
var a=$(this).find('a[href^="/u"]').attr('href');  
var b=$(this).find('a[href^="/u"]').text();
var stats="stats";
$.get(a+stats, function(data){
var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
var sujet=h.match(/\d+/);
var result=message/sujet;
var v=result.toFixed(0);
if(v<20)
{
$this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('Participation').html('<span>'+v+'%</span>');
$this.find('.value.M14_implication').find('span').css('width',''+v+'px');
}
if(v>=20)
{
$this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('Participation').css('width','100%').html('<span>100%</span>');
$this.find('.value.M14_implication').find('span').css('width','100px');
}
});
  
});
});


Penses a cliquer sur le bouton







Pour la c.s.s une petite virgule et hop on donne la même apparence
que sa sœurette    :

Code:

/*LA PARTIE DROITE POURCENTAGE*/
.value.M14_implication , .value.Participation
{
 text-align:left;
  padding:2px;
  background:#ccc;
  height:15px;
  line-height:15px;
  font-size:10px;
  display:inline-flex;
  width:100px!important;
  border-radius: 6px;
}
/*LA PARTIE POURCENTAGE*/
.value.M14_implication span , .value.Participation span
{
max-width:100px;
background:#20aec8;
min-width:30px;
border-radius: 6px;
color:#222;
padding:1px 5px;
}


Par contre pour le script précédent:
https://www.milouze14.com/t33009-resoluphpbb3-ratio-messages-reputation#629781

J'ai omis d'ajouter la condition pour que le script ne doit être visible que par les membres.
J'ai modifié mon message.


Juste avant :

Code:


$('div[class*="post--"]').each(function(){
    var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();


Ajoutes:

Code:

if(!_userdata["session_logged_in"])return;

Bonjour Philippe,

Un grand merci pour ce nouveau script.

Tout est installé, mais je n'ai rien qui apparait sous l'autre graphique

Re Serge,
tu n'as même rien du tout le texte ne s'affiche pas du tout avec le compte chacat!!!

Oui, rien ne s'affiche. Bizarre.

Je t'ai mis en admin si tu veux voir.

Ok, je regarde, ne touche à rien Serge

Re Serge,
j'ai supprimé le script sur ton fofo.
Sur mon fofo pas de soucis pour récupérer la variable des sujets (valeur) par contre sur le tien le temps de chargement des pages est tellement long que cela doit en être la cause.
De plus il placé pas le code html qui allait servir a placer nos valeur car il ne reconnaissait les class de la partie du bloc messages du profil.


Il faut donc revoir le script autrement et ne pas définir de condition et faire juste le calcul.

Et donc de placer directement les variables dans le code html:


Dernier test:

Code:

$(function(){if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
      var $this=$(this);
    $(this).find('.label span:contains(Messages)').closest('span.M14_blocSpan').before('<span class="M14_blocSpanParticip"><span class="label">Participation</span> : <span class="value"></span></span><br />');
    var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
    var a=$(this).find('a[href^="/u"]').attr('href'); 
    var b=$(this).find('a[href^="/u"]').text();
    var stats="stats";
    $.get(a+stats, function(data){
    var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
    var sujet=h.match(/\d+/);
    var result=message/sujet;
    var v=result.toFixed(0);
 
    $this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('Participation').html('<span>'+v+'%</span>');
    $this.find('.value.Participation').find('span').css('width',''+sujet+'px');
 
 
    });
     
    });
    });

Re Phil,

Merci d'avoir repris le script. C'est vrai que mon forum doit être l'un des plus compexe de FA.

Alors ton dernier code fonctionne, il est en place; on a bien la champ Participation qui apparait.

Par contre:
. La valeur reste toujours à 0%. La variable sujet est bonne, mais la variable message semble erronée.

. Dans cette ligne pour le width, tu as mis la variable sujet au lieu de la variable v me semble-t-il:

Code:

$this.find('.value.Participation').find('span').css('width',''+sujet+'px');

Je suis avec mon téléphone,
oups effectivement il faut remplacer la variable sujet par la variable v .
Ensuite il faut placer ce script après celui qui gère les class du profil jamais avant ou alors le placer seul en créant un autre script

Impec Phil, c'était bien ça pour l'ordre des scripts

C'est presque tout bon.

Je fais la mise à l'échelle en multipliant la variable result par 5 pour que 20 fasse 100%, et j'ajoute le tooltip sur la bulle.
J'essaie ça et je reviens.

Re Serge,

Je fais la mise à l'échelle en multipliant la variable result par 5 pour que 20 fasse 100%,

Essayes ce script Serge car tu vas fausser le résultat en multipliant par 5 la variable v :

Code:

$(function(){if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
      var $this=$(this);
    $(this).find('.M14_blocSpan.field_messages').before('<span class="M14_blocSpanParticip"><span class="label">Participation</span> : <span class="value"></span></span> ');
    var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
    var a=$(this).find('a[href^="/u"]').attr('href');  
    var b=$(this).find('a[href^="/u"]').text();
    var stats="stats";
    $.get(a+stats, function(data){
    var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
    var sujet=h.match(/\d+/);
    var result=message/sujet;
    var v=result.toFixed(0);
    if(v<20)
    {
    $this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('M14_Participation').html('<span>'+v+'%</span>');
    $this.find('.value.M14_Participation').find('span').css('width',''+v+'px');
    }
    if(v>=20)
    {
    $this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('M14_Participation').css('width','100%').html('<span>100%</span>');
    $this.find('.value.M14_Participation').find('span').css('width','100px');
    }
       //start tooltipster
   $('.M14_blocSpanParticip ').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });        
     //end tooltipster
    });
      
    });
    });


J'ai mis ton script Phil, mais ça ne collait pas, je n'avais pas le graphique.
Tu aavais modifié la class Participation en M14_Participation

Par ailleurs, le width étant toujours <20  a fallu le multiplier par 5 pour un graphique qui va jusqu'à 100%.

ça donnerait ça:

Code:


//Ratio messages/sujets postés
$(function(){if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
      var $this=$(this);
    $(this).find('.M14_blocSpan.field_messages').before('<span class="M14_blocSpanParticip"><span class="label">Participation</span> : <span class="value"></span></span> ');
    var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
    var a=$(this).find('a[href^="/u"]').attr('href');  
    var b=$(this).find('a[href^="/u"]').text();
    var stats="stats";
    $.get(a+stats, function(data){
    var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
    var sujet=h.match(/\d+/);
    var result=message/sujet;
    var v=result.toFixed(0);
    if(v<20)
    {
    $this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('Participation').html('<span>'+v+'%</span>');
    $this.find('.value.Participation').find('span').css('width',''+v*5+'px');
    }
    if(v>=20)
    {
    $this.find('.M14_blocSpanParticip').attr('title','Ratio messages/sujets').find('.value').addClass('Participation').css('width','100%').html('<span>100%</span>');
    $this.find('.value.Participation').find('span').css('width','100px');
    }
       //start tooltipster
   $('.M14_blocSpanParticip ').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });        
     //end tooltipster
    });
      
    });
    });

C'est installe si tu veux voir.

Oups désolé pour la bourde!!

a fallu le multiplier par 5 pour un graphique qui va jusqu'à 100%.

Non Serge,
tu ajoutes juste *5 sur le span et donc le width ne va pas à 100% !!!!!!
https://photoclic.forum-pro.fr/t23451-flore-oiseau-du-paradis#294830

Tu confonds pour avoir un width sur le background de fond,
c'est la css qui le détermine:

Code:

.value.M14_implication , .value.Participation
{

  width:100px!important;

}

A moins que je ne saisisse pas ce que tu souhaites
Si tu supprimes le*5 de la variable v, tu dois avoir le même résultat  

J'en ai profité pour ajouter ceci dans ta feuille de style:

Code:

.postprofile .label,.M14_blocSpan {color: #367780 !important;}

Tu avais deux petits points qui étaient blanc

Merci Phil pour les : blancs. Je ne voyais pas comment les traiter, et j'ai un peu modifié car je voulais garder les contenus en blanc.

Concernant le *5, ce que j'avais en tête était d'avoir en pourcentage le graphique qui soit rempli à 100% quand le ratio est >ou = à 20, donc que le graphique soit rempli à 50% quand le ratio est a 10, et qu'il soit rempli à 25% quand le ratio est à 5 etc.

si j'enlève le *5 dans cette ligne:

Code:

$this.find('.value.Participation').find('span').css('width',''+v+*5'px');

je n'aurais, quand le ratio est à 20 que 20% du graphique en bleu car width= 20px, et que 10px en bleu quand le ratio est à 10.

Pour moi c'est tout bon à présent Philippe.

Beaucoup de temps passé, mais cela en valait la peine.
Vraiment sympa ce nouveau développement, et j'ai beaucoup appris à nouveau grâce à toi.

Un grand merci l'ami  

Hello Serge,



Tu peux tester ce nouveau développement  Serge,
tooltip ne devrait plus être nécessaire.

J'ai simplifié le script sur le code html et donné des conditions si aucun sujet car il faut le prendre en compte comme le pseudo phildu85 qui n'a aucun sujet à son actif:





Et ensuite jouer avec les autres:

A 100% quand le ratio est >ou = à 20,

A 50% quand le ratio est a 10

A 25% quand le ratio est à 5

Il faudra aussi modifier la css car j'ai préféré ajouter une balise i au lieu d'un span car la css pouvait aussi associée les width et donner une mauvaise apparence Serge.

La c.s.s associée au script:

Code:

/*LA PARTIE DROITE POURCENTAGE*/
.value.M14_Participation
{
 text-align:left;
  padding:2px;
  background:#ccc;
  height:15px;
  line-height:15px;
  font-size:10px;
  display:inline-flex;
  width:100px!important;
  border-radius: 6px;
}
/*LA PARTIE POURCENTAGE*/
.value.M14_Participation i
{
  
max-width:100px;
background:#20aec8;
min-width:20px;
font-size:6px!important;
border-radius: 6px;
color:#222;
padding:1px 2px;
font-style: normal!important;
}



Le script:

Code:

$(function(){if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
      var $this=$(this);
    $(this).find('.M14_blocSpan.field_messages').before('<span class="M14_blocSpanParticip"title="Ratio messages/sujets"><span class="label">Participation</span> : <span class="value M14_Participation"><i></i></span></span>');
    var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
    var a=$(this).find('a[href^="/u"]').attr('href');  
    var b=$(this).find('a[href^="/u"]').text();
    var stats="stats";
    $.get(a+stats, function(data){
    var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
    var sujet=h.match(/\d+/);
    var result=message/sujet;
    var v=result.toFixed(0);
console.log(sujet);
//Si pas de sujet  
if(sujet<1)
{
$this.find('.M14_blocSpanParticip').find('.value i').text('0%');
}

//ratio est <5
else if (v<=5)
{
$this.find('.M14_blocSpanParticip').find('.value i').css('width','5px').text('25%');
}

//ratio est = 10      
else if ( v >= 10)
{
$this.find('.M14_blocSpanParticip').find('.value i').css('width','50px').text('50%');
}

//ratio est >ou = à 20      
else if (v>=20)
{
$this.find('.M14_blocSpanParticip').find('.value i').css('width','100px').text('100%');
}

    });
      
    });
    });

Bonsoir Philippe,

Merci d'être revenu sur ce sujet très intéressant.
Bien vu pour le cas où le sujet est à zéro et le tooltip intégré.

Je viens de tester ton dernier script sur mon forum test.
ça fonctionne bien comme tu l'as prévu

Je l'adapterai pour y ajouter l'histoire des couleurs.
Je verrais pour le graphe pour: soit garder une évolution linéaire avec le *5, soit uniquement des valeurs fixes comme dans ton derniers scripts.

En tout cas, c'est tout bon pour moi avec tous les éléments que tu m'as donnés.

Encore un grand merci l'ami pour tout ça

Hello Serge,

de rien cher ami,
c'était sympa comme développement ,
ensuite on peut tout imaginer sur le style donné pour chaque pourcentage .

Un affichage avec des background différents couleurs différentes(si besoin) bordures arrondies à gauche (haut et bas) en fonction de l'avancement et tout arrondi si 100%

Comme ce script:

Code:

$(function(){if(!_userdata["session_logged_in"])return;
        $('.postprofile').each(function(){
          var $this=$(this);
        $(this).find('.M14_blocSpan.field_messages').before('<span class="M14_blocSpanParticip"title="Ratio messages/sujets"><span class="label">Participation</span> : <span class="value M14_Participation"><i></i></span></span>');
        var message=$(this).find('.M14_blocSpan.field_messages').find('.value').text();
        var a=$(this).find('a[href^="/u"]').attr('href');  
        var b=$(this).find('a[href^="/u"]').text();
        var stats="stats";
        $.get(a+stats, function(data){
        var h= $(data).find('a[href="/st/'+b+'"]').closest('li').text();
        var sujet=h.match(/\d+/);
        var result=message/sujet;
        var v=result.toFixed(0);
          
        
    console.log(sujet);
    //Si pas de sujet  
    if(sujet<1)
    {
      $this.find('.M14_blocSpanParticip').find('.value i').css({"border-radius":"6px","background":"#010410","width":"100px","color":"#fff"}).text('0%');
    }

    //ratio est <5
    else if (v<=5)
    {
      $this.find('.M14_blocSpanParticip').find('.value i').css({"border-top-left-radius":"6px", "border-bottom-left-radius": "6px","background":"#6773AD","width":"25px","color":"#fff"}).text('25%');
    }

    //ratio est = 10      
    else if ( v >= 10)
    {
    $this.find('.M14_blocSpanParticip').find('.value i').css({"border-top-left-radius":"6px", "border-bottom-left-radius": "6px","background":"#59638E","width":"50px","color":"#fff"}).text('50%');
    }

    //ratio est >ou = à 20      
    else if (v>=20)
    {
    $this.find('.M14_blocSpanParticip').find('.value i').css({"border-radius":"6px","background":"#4D5579","width":"100px","color":"#fff"}).text('100%');
    }

        });
          
        });
        });


Et cette c.s.s:

Code:

.M14_blocSpanParticip .value
{
 text-align:left;
  padding:2px;
  background:#ccc;
line-height:20px;
height:20px;
  display:inline-flex;
  width:100px!important;
  background-color:#ccc;
  border-radius: 6px;
}
.M14_blocSpanParticip .value i
{
max-width:100px;

min-width:30px;
font-size:10px!important;

color:#222;
padding:1px 2px;
font-style: normal!important;
  text-align:center;
}


Les couleurs présentes ne sont pas dans le script .

Bonjour Philippe,

C'est impec et c'est complet cette fois.
Y a plus qu'à faire son marché :-)

Un grand merci pour tout ce développement l'ami



Edit:
Pour info, en cliquant sur le bouton Résolu, j'ai un un message que je n'ai pas eu le temps de lire concernant un renvoi sur une page.
Le Résolu s'est mis quand même.

@photoclic ,

Edit:
Pour info, en cliquant sur le bouton Résolu, j'ai un un message que je n'ai pas eu le temps de lire concernant un renvoi sur une page.

Si cela se représente , pourras-tu me capture s'il te plait et merci pour la remontée Serge..

De rien mon ami et à bientôt .