Chatbox: codici per personalizzarla!


Tutorial Chatbox: codici per personalizzarla!

Messaggio Da MattiaDes il Lun 27 Apr 2015 - 16:49

Chatbox: codici per personalizzarla!


Chatbox: codici per personalizzarla!

Questo tutorial ti permetterà di personalizzare al meglio la vostra #chatbox, aggiungendoci anche ulteriori nuove funzioni. Di festa

Attenzione: Per aggiungere script nel tuo forum devi andare nel Pannello di amministrazione ► Moduli ► HTML & JAVASCRIPT ► Gestione dei codici Javascript ►  :new: Nuovo codice

Come posizione: L'Indice

1. Titolo per le Notifiche

Questo script ti permette di cambiare in automatico il titolo presente nella finestra (tab) quando si riceve un nuovo messaggio in chatbox.


Codice:
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){}})
});

2. Cambiare il Titolo della Chatbox

Hai sempre desiderato cambiare nome alla chatbox? Da ora è possibile grazie a questo script. Tutto quello che dovrai fare è modificare "TITOLONUOVO" con il nome che si vuole mettere.


Codice:

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

  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){}})
});

3. Rimuovere gli Avvisi della Chatbox

Vuoi rimuovere quei fastidiosi affisi della chatbox che ti segnalano quando un utente si connette o sconette dalla chatbox? Usa questo script:


Codice:

$(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){}})
});

4. Connessione Automatica

Se vuoi che i tuoi utenti si connettano automaticamente alla chatbox senza utilizzare alcun bottone, utilizza questo script:

Codice:
$(window).load(function() {
  var chatbox_script = function() {
    setTimeout(function(){ $('#chatbox_option_co:visible').click() }, 1000);
  };
  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){}})
});

5. Cambiare Prefiss ai Moderatori in Chat

Vuoi cambiare il prefisso (@) per i moderatori nella chatbox con una immagine? Utilizza questo script modificando la parte con il link dell'icona da te scelto.


Codice:
$(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){}})
});

6. Messaggio al Log-in

Questo script permette di aggiungere un messaggio qualsiasi appena ci si connette alla chatbox. E' inoltre possibile personalizzarlo attraverso la variabile #chatbox.recently-connected:after via CSS

Codice:
$(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){}})
});

7. Archivi in una Nuova Pagina

Utilizza questo script se vuoi che gli archivi (i log della chatbox) siano visualizzati in una nuova pagina a parte:

Codice:
$(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){}})
});

8. Impostare un Avatar di Default

Utilizza questo script se hai gli avatar abilitati nella tua chatbox e vuoi che ce ne sia uno di default per coloro che non hanno una immagine di profilo. Puoi scegliere quale immagine modificare modificando la variabile var default_avatar:


Codice:
$(window).load(function() {
  var chatbox_script = function() {
 
    var default_avatar = 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png';
    var ava_in_member_list = true;
    var ava_in_indirect_message = true;
 
    var avatars = {};
    var d;
    var set_avatar = function(pseudo, elem_to_prepend){
      var avatar = avatars[pseudo];
      var el = $(this);
      elem_to_prepend.find('.cb-avatar').remove();
      elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');
      if(!avatar) {
        if(!d) {
          d = $.get('/memberlist?change_version=prosilver').done(function(c){
            $('.avatar-mini img', c).each(function(){
              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')
            })
          })
        }
        d.done(function(){
          var avatar = avatars[pseudo];
          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)
        })
      }
    };
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      var next_scroll = false;
      if (data.messages && data.messages.length) {
        $.each(data.messages, function(_,m){
          if(ava_in_indirect_message)
            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();
          if(m.user && m.user.avatar)
            avatars[m.username] = m.user.avatar
        });
        next_scroll = !this.messages || this.messages.length != data.messages.length;
      }
      overrided.call(this, data);
      d = null;
      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){
        set_avatar($(this).text(), $(this).parent());
      });
      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){
        set_avatar($(this).children().attr('data-username'), $(this).parent());
      });
      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2
    };
  };
  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){}})
});

Nuovi codici prossimamente :W:



Tutorial creato da Ea del forum di supporto francese
Copyrigth © FORUMATTIVO.COM




avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2854
Località : Modena, Italy


Vedere il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum