[TUTORIAL] Códigos para personalizar o seu chatbox

Com a chegada das novas mudanças do Chatbox, você poderá corrigir alguns códigos que já não funcionam mais devido à essa nova atualização. Os códigos abaixo são de alguns respectivos tutoriais que já encontram-se desativados no fórum de tutoriais.


1º - Aplicação do javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas ou no local que você desejar.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Códigos & correções:
Temos uma lista de códigos que foram corrigidos de acordo com a nova estrutura do Chatbox. Por isso, os usuários que tem um código antigo podem simplesmente alterá-lo.

Efeito sonoro no chatbox

Ao receber novas mensagens, você ouve um som a escolha do Administrador. O tutorial Efeito sonoro no chatbox recebe um novo código, que já pode ser aplicado:

Código:

   window.localStorage && $(window).load(function() {
      var chatbox_script = function() {
        var sounds = {
          'future': 'http://illiweb.com/fa/fdf/future.mp3',
          'hal': 'http://illiweb.com/fa/fdf/hal.mp3',
          'secret': 'http://illiweb.com/fa/fdf/secret.mp3',
          'zelda': 'http://illiweb.com/fa/fdf/zelda.mp3'
        };
        var default_sound = sounds['zelda'];
        var default_freq = 'new';
        var default_when = 'once';
        var default_volume = 100;

    
        if(localStorage.cb_sound && !localStorage.cb_sound.indexOf('https://dl.dropboxusercontent.com/u/181621985/')) localStorage.removeItem('cb_sound');
        var a = document.createElement('audio');
        if(!a.canPlayType) return;
        a.volume = Math.min(1, Math.max(0, localStorage.cb_volume||(default_volume/100)));
    
        var origin_send = Chatbox.prototype.send;
        Chatbox.prototype.send = function(params) {
          var m = $.trim($("#message").val());
          if(m.indexOf('/sound')&&m.indexOf('/soudn'))
            return origin_send.call(this, params);
          m = $.trim(m.substr(6)).split(/\s+/,3);
          var bad_apple = false;
          switch(m[0].toLowerCase()) {
            case "":
              if(!a.src) {
                a.src = localStorage.cb_sound||default_sound;
                a.load();
            }
              a.play();
              break;
            case "all":
            case "new":
              localStorage.cb_freq = m[0]; break;
            case "always":
            case "off":
            case "on":
            case "once":
            case "never":
              localStorage.cb_when = m[0]; break;
            case "stop":
              if(!a.paused) a.pause();
              if(!a.ended) a.currentTime = 0;
              break;
            case "pause":
              if(!a.paused) a.pause();
              break;
            case "volume":
              if(m.length>1) {
                localStorage.cb_volume = Math.min(1, Math.max(0, parseFloat(m[1].replace(',','.'))/100));
                a.volume = localStorage.cb_volume;
                break
              }
            default:
              bad_apple = true;
          };
          if(bad_apple) {
            if(m[0] in sounds) {
              m[0]= sounds[m[0]];
            }
            if(m[0]=="default") {
              m[0]=default_sound;
              localStorage.removeItem('cb_sound');
              localStorage.removeItem('cb_freq');
              localStorage.removeItem('cb_volume');
              localStorage.removeItem('cb_when');
              a.volume = Math.min(1, Math.max(0, default_volume/100));
            }
            if(/^https?:\/\/.+/.test(m[0])) {
              localStorage.cb_sound = m[0];
              a.pause();
              a.src = m[0];
              a.load();
              a.play();
            } else {
              var message = $('#message').val();
              alert('/sound [all | new]\n/sound [always | off | on | once | never]\n/sound [stop | pause]\n/sound default\n/sound volume 0-100\n/sound ['+$.map(sounds,function(_,k){return k}).join(' | ')+']\n/sound [http://* | https://*]');
              setTimeout(function(){ $("#message").val(message).select().focus(); }, 100);
              return;
            }
          }
          return $("#message").val('').focus();
        };

        $(window).on("focus", function(){ localStorage.removeItem('cb_once'); localStorage.removeItem('cb_blurred') }).on("blur", function(){ localStorage.cb_blurred=1; });

        var play_sound = function(){
          if(a.paused || a.ended) {
            a.currentTime=0;
            if(!a.src) {
              a.src = localStorage.cb_sound||default_sound;
              a.load()
            }
            a.play()
          }
        };
        var overrided = Chatbox.prototype.refresh;
        Chatbox.prototype.refresh = function(data) {
          if (data.messages && data.messages.length) {
            var lm = data.messages.slice(-1)[0];
            var last_message = lm.time+','+lm.action+','+lm.msg;
            if(this.last_message_sound != last_message) {
              var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
              user = user.length ? user[0] : [{}];
              if(this.last_message_sound!==undefined) {
                var freq = (localStorage.cb_freq||default_freq);
                var when = (localStorage.cb_when||default_when);
                console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
                if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (localStorage.cb_blurred && !localStorage.cb_once))) {
                  console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
                  if(freq =="all" || (lm.userId!=chatbox.userId && user.username!=lm.username)) {
                    if(when!="once" || !localStorage.cb_once) {
                      play_sound();
                      localStorage.cb_once = 1;
                    }
                  }
                }
              }
              this.last_message_sound = lm;
            }
          }
          overrided.call(this, data);
        };
      };
      var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";jQuery('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{jQuery(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Assim que aplicar, saiba que há uma série de mudanças que deve ser feito. default_sound corresponde a pasta com o áudio ou URL da mesma.

Notificações na barra de títulos

Este tutorial ainda não está disponível. A nossa equipe de suporte estaria lançando um código funcional na versão antiga do chatbox no pacotão anterior, contudo, devido a atualização nós decidimos não lançar. Agora, é possível mudar o título da página ao receber novas mensagens no chat.

Código:

   window.localStorage && $(window).load(function() {
      var chatbox_script = function() {
        var t_icon = window.top.$.find('link[rel="shortcut icon"]')[0];
        var t_doc = window.top.document;
        var title = t_doc.title;
        var icon = t_icon.getAttribute('href');

        var rep_title = '!! New message !! '+title;
        var rep_icon = 'http://s301826463.onlinehome.fr/f/al.ico';

        $(window).on("focus", function(){ localStorage.cb_blurred='' }).on("blur", function(){ localStorage.cb_blurred=1; });
        var overrided = Chatbox.prototype.refresh;
        Chatbox.prototype.refresh = function(data) {
          if (data.messages && data.messages.length) {
            var lm = data.messages.slice(-1)[0];
            var last_message = lm.time+','+lm.action+','+lm.msg;
            if(this.last_message != last_message) {
              var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
              user = user.length ? user[0] : [{}];
              if(this.last_message!==undefined) {
                if(lm.userId!=chatbox.userId && user.username!=lm.username) {
                  if(localStorage.cb_blurred) (function(){
                    var blink = function(){
                      if(title == t_doc.title) {
                        if(!localStorage.cb_blurred) return;
                        var new_title = rep_title;
                        var new_icon = rep_icon;
                      } else {
                        var new_title = title;
                        var new_icon = icon;
                      }
                      t_doc.title = new_title;
                      var new_t_icon = t_icon.cloneNode(true);
                      new_t_icon.setAttribute('href', new_icon);
                      var t_icon_parent = t_icon.parentNode;
                      t_icon_parent.removeChild(t_icon);
                      t_icon_parent.appendChild(new_t_icon);
                      t_icon = new_t_icon;
                      setTimeout(blink, 500);
                    };
                    blink();
                  })();
                } else {
                  localStorage.cb_blurred='';
                }
              }
              this.last_message = lm;
            }
          }
          overrided.call(this, data);
        };
      };

      var
    s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Alterar o título do chatbox

Altere o valor do código MEU_TEXTO_AQUI para definir um título para o chatbox:

Código:

   $(window).load(function() {
      var chatbox_script = function() {
        $("a.chat-title").text("MEU_TEXTO_AQUI");
      };

      var
    s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Remover linhas "... conectado ao chatbox" e "... desconectado do chatbox"

Com este novo código você pode retirar as mensagens padrão .. foi desconectado... e ... se juntou ao chat em...:

Código:

   $(window).load(function() {
      var chatbox_script = function() {
        $('#chatbox > p > .msg > span').filter('[style="color:green"],[style="color:red"]').closest('p').remove();
        var overrided = Chatbox.prototype.refresh;
        Chatbox.prototype.refresh = function(data) {
          if (data.messages && data.messages.length) {
            data.messages = $.grep(data.messages, function(v) {
              return v.userId != -10 || $.inArray(v.msgColor, ["red", "green"]) == -1;
            });
          }
          overrided.call(this, data);
        };
      };

      var
    s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Abrir "Pasta de Arquivos" em nova aba

Ao clicar no link Arquivos abre em uma nova guia em vez de recarregar a página. Ele é especialmente útil quando se utiliza outros scripts (que não funcionam mais depois de clicar Arquivos).

Código:

   $(window).load(function() {
      var chatbox_script = function() {
        $("#chatbox_option_with_archives a").attr('target', 'ChatBox');
      };
      var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Adicionar mensagem de LOGIN personalizada

Já pensou fazer isso? Bem, é possível sim! Adicionar uma mensagem personalizada quando o usuário se conecta ao chatbox.

Código:

   $(window).load(function() {
      var chatbox_script = function() {
        $('#chatbox_option_co').click(function(){
          $('#chatbox').addClass('recently-connected');
          setTimeout(function(){ $('#chatbox').removeClass('recently-connected') }, 60000)
        })
      };
      var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Em seguida, acesse Painel de Controle >> Visualização >> Imagens e Cores > Cores > Folha de estilos CSS > e adicione este CSS:

Código:

   #chatbox.recently-connected:after {
      font-family: "trebuchet ms", serif;
      font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
      box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
      width:80%; margin:1.5% auto; padding:1%; white-space: pre;
      content: "Bem vindo ao chatbox do fórum de suporte Forumeiros!!";
    }

Você poderá modificar o texto "Bem vindo ao chatbox do fórum de suporte Forumeiros!!" pelo texto de seu gosto.

Mudar prefixo do Moderador

Este script irá substituir ou remover o @ antes do nome de um moderador chatbox:

Código:

   $(window).load(function() {
      var chatbox_script = function() {
        var overrided = Chatbox.prototype.refresh;
        Chatbox.prototype.refresh = function(data) {
          overrided.call(this, data);
          $('.chatbox-username').each(function(){
            this.previousSibling&&$.trim(this.previousSibling.nodeValue)=="@"&&$(this.previousSibling).replaceWith('<img src="http://i.imgur.com/zICIAne.png" /> ')
          })
        };
      };
      var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Você pode substituir <img src = "https://i.imgur.com/zICIAne.png" /> pela imagem de sua escolha ou um texto vazio se você quer ele seja removido.

Conexão automática

Atualizamos o tutorial de conexão automática. Você poderá consultá-lo neste endereço: https://ajuda.forumeiros.com/t95430-

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Códigos para personalizar seu chatbox atual