[TUTORIAL] Códigos para personalizar o seu chatbox

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Principal Contribuidor

[TUTORIAL] Códigos para personalizar o seu chatbox Empty [TUTORIAL] Códigos para personalizar o seu chatbox

Mensagem por Shek 12.04.15 0:26




[TUTORIAL] Códigos para personalizar o seu chatbox Chatbox  

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.


- 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 >>
[TUTORIAL] Códigos para personalizar o seu chatbox Painel13
[TUTORIAL] Códigos para personalizar o seu chatbox 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Códigos para personalizar o seu chatbox 110210Seta 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.
[TUTORIAL] Códigos para personalizar o seu chatbox 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Códigos para personalizar o seu chatbox 110410Seta 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.

- 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...:

[TUTORIAL] Códigos para personalizar o seu chatbox Chat_o10

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.

[TUTORIAL] Códigos para personalizar o seu chatbox Chat_c10

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:

[TUTORIAL] Códigos para personalizar o seu chatbox Chatbo10

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-




©️ Fórum dos Fóruns


[TUTORIAL] Códigos para personalizar o seu chatbox Act_bottom 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
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos