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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Mat le Mer 21 Juin 2017 - 20:59

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

Merci d'avance Wink


Dernière édition par FkS_DjMat le Lun 3 Juil 2017 - 19:08, édité 1 fois
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Chezoit le Mer 21 Juin 2017 - 21:08

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

Merccciii
avatar

Chezoit
***

Masculin
Messages : 139
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Mat le Mer 21 Juin 2017 - 21:14

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

Merccciii
Je voulais par remercié ton message  Very Happy
Mais de rien  Razz
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Chezoit le Mer 21 Juin 2017 - 21:23

Very Happy

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

Chezoit
***

Masculin
Messages : 139
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Chezoit le Ven 23 Juin 2017 - 10:24

uP
Merci
avatar

Chezoit
***

Masculin
Messages : 139
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Mat le Ven 23 Juin 2017 - 12:41

@Chezoit a écrit:uP
Merci
C'est gentil de up mon sujet  Very Happy
Mais je sais pas si tu as e droit :p
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Chezoit le Sam 24 Juin 2017 - 9:11

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. Very Happy

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

@FkS_DjMat
Bonne continuation à toi !
avatar

Chezoit
***

Masculin
Messages : 139
Inscrit(e) le : 14/03/2008

http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Chacha le Jeu 29 Juin 2017 - 9:42

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 55120
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Mat le Jeu 29 Juin 2017 - 11:53

Et un up Wink
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Walt le Lun 3 Juil 2017 - 13:02

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
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3623
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Mat le Lun 3 Juil 2017 - 13:17

@Walt a écrit: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 Wink
Ca marche aussi :


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



Je sais, j'aime bien compliqué tout  Very Happy
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Walt le Lun 3 Juil 2017 - 18:12

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

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
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3623
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajouter un système de "j'aimes" comme sur le Forum des Forums

Message par Mat le Lun 3 Juil 2017 - 19:08

Et c'est pafait Wink
Encore un grand merci à vous Wink
@Walt a écrit: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 Very Happy
Tout est parfait Wink
Je tient aussi à vous remercier pour toutes votre aide aujourd'hui Wink
avatar

Mat
*****

Messages : 799
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum