[Plugin] Popular post

Introduction:
This plugin will serve to make a special post "popular", according to the number of votes.

Below is the code that should be added with placement in topics:

Code:

/*
 *  Application: Popular post
 *  Date: 14/07/2015
 *  Version: 1.323072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
$(function() {

var qtd = 5; // Number of votes for the post to become popular

$("head").append(
'<style type="text/css">' +
'.popular_post {' +
' background: #D5DEE5;' +
' border-radius: 5px 5px 5px 5px;' +
' color: #1D3652;' +
' float: right;' +
' font-size: 0.8em;' +
' font-weight: bold;' +
' margin: 5px 10px 10px;' +
' padding: 5px;' +
' text-align: center;' +
'}' +
'.popular_post img {' +
' max-width: 20px;' +
'}' +
'</style>'
);

var x = $(".vote");
var popular = "<p class='popular_post'><img src='http://imgur.com/hds8Nup.png'><br>POPULAR</p>";
var value, votebar, numbar;
for(var i = 0, l = x.length; i < l; i++) {
    var v = x[i];
    value = 0;
    votebar = $(".vote-bar", v)[0];
    if(votebar) {
        numbar = votebar.title.match(/\d+/g);
        value = Math.round(parseInt(numbar[1]) * parseInt(numbar[0])) / 100;
    }
    if(value >= qtd) {
        v.insertAdjacentHTML("afterbegin", popular);
    }
}
});

Result:

@Daemon
hummm, I had already made a similar to my old forum, you remember?

However your code is pretty clean!

5* from me,

JS

Hello,
I installed it on my forum but it is not working Is LGLike affecting it?

Black-Shadow wrote:Hello,
I installed it on my forum but it is not working Is LGLike affecting it?

That would most likely be the case as LG's like system removes the default reputation system. Bars and buttons included.

Hello @Ange Tuteur,
Yes it is affecting it. I disabled temporary the LGLike and enabled this code and it is working.
Is there a way to adapt it to work with LGLike?

Black-Shadow wrote:Hello @Ange Tuteur,
Yes it is affecting it. I disabled temporary the LGLike and enabled this code and it is working.
Is there a way to adapt it to work with LGLike?

You could contact him to replace remove() with hide(), although I highly doubt he will, or you can host his source elsewhere and modify it to work with your forum.

EDIT :
This almost slipped my mind, but you could also try to execute LG's like system later.

The code has been updated!
I realized that the code had a small error of interpretation in finding the correct value of positive votes.

I tried it on a test forum without LGLike but it is displaying only voting green bar.

I tried the @Daemon 's IPB Voting script

Code:


/*
    * Codigo: IPB Like System.
    * Data de criacao: 18/07/2014.
    * Atualizacao: 18/11/2014.
    * Autor: Daemon.
    * Versao: 1.1.
    * Inspirado: IPB.
    * Acesse: http://bestskins.net.
    * Nao distribuir, ou remover os creditos do autor.
    */
    function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                     
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputacao
                    var reputation_UP = 'http://i.imgur.com/PTraX1a.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
         $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }


but it conflicts most popular javascript.

Black-Shadow wrote:I tried it on a test forum without LGLike but it is displaying only voting green bar.

I tried the @Daemon 's IPB Voting script

Code:


/*
    * Codigo: IPB Like System.
    * Data de criacao: 18/07/2014.
    * Atualizacao: 18/11/2014.
    * Autor: Daemon.
    * Versao: 1.1.
    * Inspirado: IPB.
    * Acesse: http://bestskins.net.
    * Nao distribuir, ou remover os creditos do autor.
    */
    function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                     
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputacao
                    var reputation_UP = 'http://i.imgur.com/PTraX1a.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
         $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }


but it conflicts most popular javascript.

Try that:

Code:

function bestskins_ls() {
  $('head').append(
  '<style type="text/css">' +
  '.popular_post {' +
  ' background: #D5DEE5;' +
  ' border-radius: 5px 5px 5px 5px;' +
  ' color: #1D3652;' +
  ' float: right;' +
  ' font-size: 0.8em;' +
  ' font-weight: bold;' +
  ' margin: 5px 10px 10px;' +
  ' padding: 5px;' +
  ' text-align: center;' +
  '}' +
  '.popular_post img {' +
  ' max-width: 20px;' +
  '}' +
  '</style>'
  );
  // Imagem de reputação
  var reput_UP = 'http://i.imgur.com/PTraX1a.png',
      qtd = 5; // Number of votes for the post to become popular   
 
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var val = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                     
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                    val = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                }
                if(val >= qtd) {
                  var pop = '<p class="popular_post"><img src="http://imgur.com/hds8Nup.png"><br>POPULAR</p>';
                  barra.parentNode.insertAdjacentHTML('beforebegin', pop);
                }
                botao = botao ? '<li><span onclick="bestskinsPlus(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reput_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reput_UP + '" alt="+" class="rep_up"></li>';
                var numrep = '<li>' + (val == 0 ? '<span class="reput_vote zero">' + val + '</span>' : '<span class="reput_vote positive">' + val + '</span>') + '</li>';
                var htmlFinal =
                '<div class="rep_bar clearfix" id="rep_post">' +
                '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                '</div>';

    $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
  }
  x.remove();
};
function bestskinsPlus(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    a.parentNode.style.display = 'none';
    var verify = a.parentNode.nextSibling.firstChild.innerHTML;
    if(verify == 0) {
    a.parentNode.nextSibling.firstChild.classList.remove('zero'),
    a.parentNode.nextSibling.firstChild.classList.add('positive');
    }
    var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
    c.innerHTML = c.innerHTML.replace(/\d+/,b);
    });
};
if (document.readyState === 'complete') {
        bestskins_ls();
} else {
      document.addEventListener('DOMContentLoaded', function() {
        bestskins_ls();
      });
}

Hello @Daemon,
Now seems ok, you combined two javascripts into one
Great job

Thank you.

Updated! ^^