Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Uitgebreid reputatiesysteem

Vorige onderwerp Volgende onderwerp Go down

  • 0

Uitgebreid reputatiesysteem

Bericht van 10spetter10 op do 7 jan 2016 - 12:24

Uitgebreid reputatiesysteem


Deze tutorial zal je helpen jouw reputatiesysteem uit te breiden zodat het de positieve en negatieve 'vind ik leuks' telt en toont in de posts. Ook zorgt het ervoor dat je 'vind ik leuks' kan sturen zonder van pagina te moeten wisselen!


Deze aanpassing is toepasbaar op elke forumversie, zolang je jouw templates niet te hard hebt aangepast. Ook moet je het standaard reputatiesysteem geactiveerd hebben.

Beheerderspaneel Modules Punten en reputatie Reputatie  

De CSS instellen


Als eerste ga je wat CSS moeten toevoegen in je stylesheet zodat het systeem correct wordt weergegeven.

Beheerderspaneel Display Plaatjes en Kleuren Kleuren Cascading Style Sheet

Plak de onderstaande regels code in je stylesheet:
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;
}

Voel je vrij om aanpassingen te maken.

Het JavaScript instellen


Beheerderspaneel Modules html & javascript Javascript code beheer  

Om het systeem in te stellen moet je nog enkel een nieuw script maken met volgende instellingen.

Code:
Titel: (vb: uitbereiding reputatiesysteem)
Plaatsing: "Op alle pagina's"
Code: (zie hieronder)

Code:
$(function() {
  // Algemene instellingen van de plugin
  var config = {
    position_left : true, // true voor links || false voor rechts
    negative_vote : true, // true negatieve stemmen || false voor enkel positieve
    vote_bar : true, // toon een smalle balk onder de stemmen
  
    // knop 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="-"/>',
  
    // taal config
    title_plus : 'Vind %{USERNAME}\'s post leuk',
    title_minus : 'Vind %{USERNAME}\'s post niet leuk',
  
    title_like_singular : '%{VOTES} persoon vind %{USERNAME}\'s post leuk',
    title_like_plural : '%{VOTES} personen vinden %{USERNAME}\'s post leuk',
  
    title_dislike_singular : '%{VOTES} persoon vind %{USERNAME}\'s post niet leuk',
    title_dislike_plural : '%{VOTES} personen vinden %{USERNAME}\'s post niet leuk',
  
    title_vote_bar : '%{VOTES} personen vinden %{USERNAME}\'s post leuk %{PERCENT}'
  },
    
    
  // functie gebonden aan de onclick handler van de vote knoppen
  submit_vote = function() {
    var next = this.nextSibling, // de teller naast de vote knoppen was aangeklikt
        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;
  
    // stuur de stem asynchroon door
    $.get(this.href, function() {
      next.innerHTML = +next.innerHTML + 1; // tel bij bij de vote teller
      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 + ')');
      }
    });
  
    // trek de mogelijkheid om te stemmen in wanneer er al gevote is op de post
    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('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
 
  // versie data zodat deze arrays niet gewijzigd dienen te worden gedurende de loop
  vdata = {
    tag : ['SPAN', 'LI', 'SPAN', 'LI'][version],
    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton'][version],
    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version],
  },
 
  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // defineer variabelen voor later gebruik in de loop
 
  // voorkom uitvoering wanneer de versie niet bepaald kan worden
  if (version == 'badapple') {
    if (window.console) console.warn('Deze plugin is niet geoptimaliseerd voor je forum. Contacteer het ondersteuningsforum voor verdere hulp.');
    return;
  }
 
  for (; i < j; i++) {
    post = $(vote[i]).parentsUntil('.post').parent()[0];
    bar = $('.vote-bar', vote[i])[0]; // vote bar
    button = $('.vote-button', vote[i]); // plus en min knoppen
    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // gebruikersnaam van de poster
    ul = $(vdata.actions, post)[0]; // post acties
    li = document.createElement(vdata.tag); // vote systeem container
    li.className = 'fa_reputation';
  
    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
  
    // bereken stemmen
    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;
    }
  
    // stel positieve en negatieve titels op met de correcte grammatica, stemmen en gebruikersnamen
    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);
  
    // defineer het aantal stemmen
    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'); // gebruik de vote teller containers als ankerpunt
  
    // maak positieve stem knop
    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]);
  
    // maak negatieve stem knop
    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]);
    }
  
    // maak stem balk
    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);
    }
  
    // voeg het stemsysteem in en verwijder de standaard
    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
    vote[i].parentNode.removeChild(vote[i]);
  }
});

Sla het script op en de aanpassing aan het reputatiesysteem is nu ingesteld! Als je nog aanpassingen wilt maken, lees dan de volgende sectie. Smile

Pas het script aan


Om je controle over het script te geven en het makkelijk aanpasbaar te maken, bevat het script een configuratie object aan de top van het script, genaamd config. Hieronder vind je een uitleg over een tal van instellingen.


  • Algemene configuratie

    De algemene configuratie opties bevatten en boolean waarde: true of false. Met true wordt er toestaan bedoeld, en met false weigeren.

    position_left : Wanneer je deze optie op true zet zal het vote systeem links in de postopties weergegeven worden. Verander je dit naar false als je wilt dat het vote systeem rechts weergegeven moet worden.

    negative_vote : Wanneer je deze optie op true zet zal de negatieve stemknop bereikbaar zijn. Zet je deze optie op false als je wilt dat er geen negatieve stemmen gegeven mogen worden.

    vote_bar : Wanneer je deze optie op true zet zal er een smalle balk die de verhoudingen van de votes voorstelt onder de vind-ik-leuk en vind-ik-niet-leuk knoppen verschijnen. Als je deze balk niet wilt weergeven zet je de optie op false.


  • Knop configuratie

    De knop config staat je toe om de iconen of weergegeven tekst voor de vind-ik-leuk en vind-ik-niet-leuk knoppen aan te passen. Je kan zowel html of tekst gebruiken, de keuze is aan jou. Smile

    icon_plus : Verander het icoon dat weergegeven wordt als de vind-ik-leuk knop. Standaard is dit een html afbeelding element:
    Code:
    <img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>

    icon_minus : Verander het icoon dat weergegeven wordt als de vind-ik-niet-leuk knop. Standaard is dit ook een html afbeelding element:
    Code:
    <img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>

    Als je andere afbeeldingen wilt gebruiken, moet je juist de afbeelings url binnen het src attribuut vervangen door jouw eigen url. Als je tekst wilt gebruiken, dan verwijder je alles behalve de aanhalingstekens en schrijf je wat je maar wilt, zoals "like".


Overzicht


Eens het systeem is geïnstalleerd en je hebt je aanpassingen gemaakt, heb je een nieuwe manier om te stemmen op de posts in je forum! Wanneer je een stem post, zal je geen pagina "your vote has been submitted" zien omdat alles asynchroon verloopt. In de plaats hiervan zie je de teller verhogen en de balk wordt aangepast afhankelijk van je instellingen.



Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates  en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!
avatar

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1310
Geboortedatum : 21-04-97
Leeftijd : 20
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum