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!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
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