Ajouter un système de "j'aimes" comme sur le Forum des Forums

[Mat]

Bonjour ,
je voudrais savoir comment ajouter un système de "j'aimes" comme sur le Forum des Forums
J'ai déja vu la solution avec le systèmes de réputations, mais on ne vois pas combien de personnes on aimé

Merci d'avance

[Chezoit]

Tu m'as devancé @FkS_DjMat !
Perso ça serait sous ModernBB.

Merccciii

[Mat]

Tu m'as devancé @FkS_DjMat !
Perso ça serait sous ModernBB.

Merccciii

Je voulais par remercié ton message 
Mais de rien 

[Chezoit]

Et par la même occasion le petit bandeau qui apparaît quand on est remercié est top aussi !

[Chezoit]

uP
Merci

[Mat]

uP
Merci

C'est gentil de up mon sujet 
Mais je sais pas si tu as e droit :p

[Chezoit]

Je viens de relire la charte.
Exact, c'est que l'auteur du sujet qui peut relancer.

Par contre, c'est "une seule question par sujet" qui est autorisée et vu que toi c'est pour du phpBB2 et moi pour du ModernBB...Ca ne va pas le faire.

Vraiment désoler le @Staff, je me retire du post.
Je vais ouvrir un spécifique.

@FkS_DjMat
Bonne continuation à toi !

[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 »

[Mat]

Et un up

[Walt]

Bonjour,

Puisqu'un tutoriel n'est pas encore disponible sur le FDF français, je vous indique celui présent sur le forum anglais :
http://help.forumotion.com/t142870-improve-the-reputation-system-so-it-counts-votes

Cordialement,
Walt

[Mat]

Bonjour,

Puisqu'un tutoriel n'est pas encore disponible sur le FDF français, je vous indique celui présent sur le forum anglais :
http://help.forumotion.com/t142870-improve-the-reputation-system-so-it-counts-votes

Cordialement,
Walt

Encore un grand merci @Walt
Ca marche aussi :


Mais possible de l'ajouter sur la version mobile aussi, ici :



Je sais, j'aime bien compliqué tout 

[Walt]

Effectivement vous n'aimez pas nous simplifier la tâche...

Dans le template viewtopic_body (version mobile), situez cet extrait :

Code:

            <ul class="post-buttons">
                <li>{postrow.displayed.EDIT_IMG}</li>
                <li>{postrow.displayed.DELETE_IMG}</li>
            </ul>

Et ajoutez juste après :

Code:

            <!-- BEGIN switch_vote_active -->
            <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->
           
                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->
           
                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->
           
                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->
           
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
            </div>
            <!-- END switch_vote_active -->

Modifiez le script précédent par :

Code:

$(function() {
  // General Configuration of the plugin
  var config = {
    position_left : true, // true for left || false for right
    mobile_position_left: false, // true for left || false for right
    negative_vote : true, // true for negative votes || false for positive only
    vote_bar : true, // display a small bar under the vote buttons
 
    // button config
    icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
 
    // language config
    title_plus : 'Like %{USER&amp;#8288;NAME}\'s post',
    title_minus : 'Dislike %{USER&amp;#8288;NAME}\'s post',
 
    title_like_singular : '%{VOTES} person likes %{USER&amp;#8288;NAME}\'s post',
    title_like_plural : '%{VOTES} people like %{USER&amp;#8288;NAME}\'s post',
 
    title_dislike_singular : '%{VOTES} person dislikes %{USER&amp;#8288;NAME}\'s post',
    title_dislike_plural : '%{VOTES} people dislike %{USER&amp;#8288;NAME}\'s post',
 
    title_vote_bar : '%{VOTES} people liked %{USER&amp;#8288;NAME}\'s post %{PERCENT}'
  },
   
   
  // function bound to the onclick handler of the vote buttons
  submit_vote = function() {
    var next = this.nextSibling, // the counter next to the vote button that was clicked
        box = this.parentNode,
        bar = box.getElementsByTagName('DIV'),
        vote = box.getElementsByTagName('A'),
        mode = /eval=plus/.test(this.href) ? 1 : 0,
        i = 0, j = vote.length, pos, neg, percent;
 
    // submit the vote asynchronously
    $.get(this.href, function() {
      next.innerHTML = +next.innerHTML + 1; // add to the vote count
      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
   
      pos = +vote[0].nextSibling.innerHTML;
      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
   
      if (bar[0]) {
        bar[0].style.display = '';
        bar[0].firstChild.style.width = percent;
        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
      }
    });
 
    // revoke voting capabilities on the post once the vote is cast
    for (; i < j; i++) {
      vote[i].href = '#';
      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
      vote[i].onclick = function() { return false };
    }
 
    return false;
  },
   
  vote = $('.vote'), i = 0, j = vote.length,
  version = $('.bodylinewidth')[0] ? 0 : document.getElementById('mpage-body-modern') ? 4 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
 
  // version data so we don't have to redefine these arrays during the loop
  vdata = {
    tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.poster_name'][version],
    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.post-buttons'][version],
    posts: ['.post', '.post', '.post', '.post', '.topic'][version],
  },
 
  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
 
  // prevent execution if the version cannot be determined
  if (version == 'badapple') {
    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
    return;
  }
 
  for (; i < j; i++) {
    post = $(vote[i]).parentsUntil( vdata.posts ).parent()[0];
    bar = $('.vote-bar', vote[i])[0]; // vote bar
    button = $('.vote-button', vote[i]); // plus and minus buttons
    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
    ul = $(vdata.actions, post)[0]; // post actions
    li = document.createElement(vdata.tag); // vote system container
    li.className = 'fa_reputation';
 
    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
 
    // calculate votes
    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
   
      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }
 
    // set up negative and positive titles with the correct grammar, votes, and usernames
    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
 
    // define the vote counts
    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
 
    // create positive vote button
    plus = document.createElement('A');
    plus.href = button[0] ? button[0].firstChild.href : '#';
    plus.onclick = button[0] ? submit_vote : function() { return false };
    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
    plus.innerHTML = config.icon_plus;
    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
 
    span[0] && li.insertBefore(plus, span[0]);
 
    // create negative vote button
    if (config.negative_vote) {
      minus = document.createElement('A');
      minus.href = button[1] ? button[1].firstChild.href : '#';
      minus.onclick = button[1] ? submit_vote : function() { return false };
      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
      minus.innerHTML = config.icon_minus;
      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
   
      span[1] && li.insertBefore(minus, span[1]);
    }
 
    // create vote bar
    if (config.vote_bar) {
      vote_bar = document.createElement('DIV');
      vote_bar.className = 'fa_votebar';
      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
      vote_bar.style.display = bar ? '' : 'none';
      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
      li.appendChild(vote_bar);
    }
 
    // finally insert the vote system and remove the default one
    if(version != 4)
      config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
    else
      config.mobile_position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
   
    vote[i].parentNode.removeChild(vote[i]);
  }
});

Enfin, modifiez le CSS précédent par :

Code:

.fa_vote,.fa_voted,.fa_count {
   font-size:12px;
   font-family:Verdana,Arial,Helvetica,Sans-serif;
   display:inline-block !important;
   width:auto !important;
   transition:300ms;
}
.fa_voted,.fa_vote:hover {
   opacity:0.4
}
.fa_voted {
   cursor:default
}
.fa_count {
   font-weight:bold;
   margin:0 3px;
   cursor:default;
}
.fa_positive {
   color:#4A0
}
.fa_negative {
   color:#A44
}
.fa_votebar,.fa_votebar_inner {
   background:#C44;
   height:3px;
}
.fa_votebar_inner {
   background:#4A0;
   transition:300ms;
}
.fa_reputation a {
   float: none;
}

Normalement ça devrait fonctionner correctement sur votre version desktop, ainsi que sur la version mobile. Par défaut, j'ai préféré afficher les boutons de vote du côté droit sur mobile, mais vous pouvez modifier la variable mobile_position_left pour modifier cela.

Cordialement,
Walt

[Mat]

Et c'est pafait
Encore un grand merci à vous

Normalement ça devrait fonctionner correctement sur votre version desktop, ainsi que sur la version mobile. Par défaut, j'ai préféré afficher les boutons de vote du côté droit sur mobile, mais vous pouvez modifier la variable mobile_position_left pour modifier cela. 

C'est génial ça
Tout est parfait
Je tient aussi à vous remercier pour toutes votre aide aujourd'hui