[Tutorial] Like system

Informações:

Autor: Daemon
Versões: Todas as versões
Introdução: Sistema de like

Painel de controle ->> Modulos ->> HTML & Javascripts ->> Gestão dos códigos Javascripts

Código:

/*
* Código: Like System
* Data de criação: 18/07/2014
* Atualização: 19/07/2015
* Autor: Daemon
* Versão: 1.3
* Veja mais em: http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor
*/
function d_like_system() {
   $('head').append(
   '<style type="text/css">' +
   '.like_post {' +
   '  float: right;' +
   '  list-style: none;' +
   '  margin-right: 3px;' +
   '}' +
   '.like_post .qtd {' +
   '  background-color: #333;' +
   '  color: #fff;' +
   '  font-size: 13px;' +
   '  padding: 0 5px;' +
   '  border-radius: 3px;' +
   '  font-weight: 700;' +
   '  margin-left: 3px;' +
   '  -moz-border-radius: 3px;' +
   '  -webkit-border-radius: 3px;' +
   '}' +
   '.like_post .plus {' +
   '  color: green;' +
   '}' +
   '.like_post .minus {' +
   '  color: red;' +
   '}' +
   '.like_button img {' +
   '  margin-bottom: -3px;' +
   '}' +
   '.like_button {' +
   '  padding: 3px;' +
   '  -moz-border-radius: 3px;' +
   '  margin-right: 5px;' +
   '  cursor: pointer;' +
   '  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
   '  -webkit-border-radius: 3px;' +
   '  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
   '  background: #e4e4e4 url(http://i.imgur.com/lvfV1wd.png) repeat-x 0 0!important;' +
   '  border: 1px solid #a6a6a6;' +
   '  border-bottom-color: #979797!important;' +
   '  border-radius: 3px;' +
   '  box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
   '}' +
   '.BS_disabled .like_button {' +
   '  cursor: default;' +
   '  opacity: 0.5;' +
   '}' +
   '</style>'
   );
   // Imagens de reputação
   var rep_UP = 'http://i.imgur.com/YCo2xVa.png',
       rep_DOWN = 'http://i.imgur.com/TzlArci.png';
 
   for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var plus = 0,
                    minus = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                      
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                    plus = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    minus = Math.round(parseInt( numbarra[1] ) - plus);
                }
 
                botao = botao ? '<li><span onclick="lsVoto(\'' + botao.firstChild.href + '\',this);" class="like_button"><img src="' + rep_UP + '" alt="+"><span class="qtd">' + plus + '</span></span><span onclick="lsVoto(\'' + botao.nextSibling.nextSibling.firstChild.href + '\',this);" class="like_button"><img src="' + rep_DOWN + '" alt="-"><span class="qtd">' + minus + '</span></span></li>' : '<li class="BS_disabled"><span class="like_button"><img src="' + rep_UP + '" alt="+"><span class="qtd">' + plus + '</span></span><span class="like_button"><img src="' + rep_DOWN + '" alt="-"><span class="qtd">' + minus + '</span></span></li>';
 
                var htmlFinal = '<ul class="like_post">' + botao + '</ul>';
 
     $('.postbody', vote.parentNode.parentNode.parentNode.parentNode).after( htmlFinal );
   }
   x.remove();
};
function lsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
     var c = a.lastChild,
         b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
         a.parentNode.className += ' BS_disabled';
    });
}
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
      d_like_system();
  }
}