Codes(10) pour la chatbox

Poster un nouveau sujet   Répondre au sujet

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Codes(10) pour la chatbox

Message par Ea le Dim 22 Fév 2015 - 12:34

Codes pour la chatbox


Ces codes concernent les chatbox incluses dans des pages, soit sur le portail et l'index via les options du panneau d'administration, soit insérées dans des pages du forum via un script ou un code html*.

Il faut insérer les scripts sur les pages de votre forum contenant votre/vos chatbox ( voir gestion des pages javascript ), et ajouter les codes CSS dans Panneau d'administration > Affichage > Couleurs | Feuille de style.

* les éventuels ?archives=1 dans ces codes devraient être retirés.

Liste des astuces :



Notification sonore :

Un script javascript pour mettre une notification sonore à la réception de message sur la chatbox :

Code:
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.mono.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.readyState > 0) 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) {
        if(a.readyState > 0) 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);
            if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (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()+")();";$('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){}})
});

sounds contient une table de raccourcis faisant correspondre commande : url de fichier audio, cela permet de changer facilement de son.

Après ça il y a également une série de variable pour des valeurs par défaut :

  • default_sound : contient l'url du fichier audio par défaut ( si l'utilisateur n'en a pas choisi un autre ).

  • default_freq : indique sur quels messages on veut une notification, plusieurs valeurs sont possibles :

    • "all" => on veut un son à tout les messages (même un écrit par nous-même),
    • "new" => on ne veut un son qu'à un nouveau message écrit par un autre membre.
  • default_when : indique quand les notifications doivent être produites, plusieurs valeurs sont possibles :

    • "always" => on veut un son qu'on soit sur la chatbox ou pas,
    • "on" => on veut les sons seulement quand on est sur la chatbox,
    • "off" => on veut les sons seulement quand on est pas sur la chatbox,
    • "once" => on veut recevoir au maximum une notification depuis la dernière fois qu'on était sur la chatbox,
    • "never" => on ne veut aucune notification sonore.
  • default_volume : le niveau sonore de la notification, un nombre de 0 à 100


Il y a également un ensemble de commande supplémentaire possible :

  • /sound : lance le son actuellement utilisé,

  • /sound {un des raccourcis de sounds} : change le son utilisé pour celui du raccourci et le lance,

  • /sound https?://* : change le son utilisé pour celui de l'url indiquée et le lance.

  • /sound volume 0-100 : change le volume sonore (0 = 0% et 100 = 100%).

  • /sound default : remet la configuration par défaut.

  • /sound [pause | stop] : pause ou stop un son en cours.

  • /sound [all | new] : changer sur quels messages on est notifié (voir au dessus).

  • /sound [always | on | off | once | never] : changer quand on veut être notifié (voir au dessus).


Notification nouveau message visuelle :


Un script javascript pour changer le titre de l'onglet et l'icône à la réception d'un message :

Code:
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 = '!! Nouveau message !! '+title;
    var rep_icon = 'http://illiweb.com/fa/fdf/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){}})
});


Changement du titre de la chatbox :


Ce script javascript perrmet de changer le titre de la chatbox :

Code:
$(window).load(function() {
  var chatbox_script = function() {
    $("a.chat-title").text("In Da Place");
  };
  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){}})
});

Changer le "In Da Place" permet d'avoir un autre titre.


Retirer les lignes " a rejoint le chat le / s'est deconnecté le " :

=>

Ce script javascript permet de retirer les lignes de connexions et déconnexions sans être en mode archive :

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


Style des avatars de la chatbox :

Changer la taille des avatars par un code CSS :

Code:
#chatbox .cb-avatar, #chatbox .cb-avatar > img { width: 50px !important; height: 50px !important; }

Faire disparaitre le cadre des avatars par un code CSS :

Code:
#chatbox .cb-avatar { background: transparent !important; box-shadow: none !important; }
body #chatbox .cb-avatar { border: none !important; /*retirer la bordure*/ }

Avoir des avatars ronds par un code CSS :

Code:
#chatbox .cb-avatar > img{ border-radius: 50% !important; }

Avoir le texte sur la même ligne que le pseudo:

Code:
#chatbox .user-msg .user, #chatbox .user-msg .msg {
    display: inline;
}




Ajouter les avatars où ils ne sont pas :


Ce script javascript permet d'ajouter les avatars dans la liste des membres et dans les messages de statuts :

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

Pour limiter la taille des avatars dans la liste des membres, on peut ajouter un code CSS de ce genre :

Code:
#chatbox_members .cb-avatar > img {
  height:30px;width:30px;
  vertical-align: middle;
}

Pour ne pas ajouter les avatars dans la liste des membres, on peut remplacer la valeur true de ava_in_member_list par false.

Pour ne pas les ajouter dans les messages de statuts, on peut remplacer la valeur true de ava_in_indirect_message par false.


Ouvrir les archives dans un nouvel onglet :

Pour qu'un clic sur le lien Archives les ouvres dans un nouvel onglet plutôt que recharger la page. C'est surtout utile quand on utilise d'autres scripts ( qui ne fonctionneront plus après un clic sur Archives ).

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


Mettre un message à la connexion :


Ce script javascript perrmet d'ajouter un message à la connexion d'un membre à la chatbox :

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

dans le code on peut juste changer le 60000 ( qui est le temps d'affichage en millisecondes, cela correspond donc à 60 secondes ) et le message affiché se met via un code CSS de ce genre :

Code:
#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: "Bienvenue sur la chatbox =D \a Si tu es seul, remets une bûche sur le feu.";
}

Dans ce code css, le message est spécifié par l'attribut content, on ne peut mettre que du texte dedans mais il y a la possibilité de mettre un retour à la ligne en mettant \a.


Changer le préfixe de modérateur :


Ce script javascript permet de remplacer ou supprimer le @ devant le nom d'un modérateur de chatbox :

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

on peut remplacer <img src="http://i.imgur.com/zICIAne.png" /> par le remplacement qu'on souhaite ou une chaîne vide pour que ça soit supprimé.


Connexion automatique :

Ce script javascript permet d'automatiquement se connecter à la chatbox à la visite d'une page si on ne l'était pas :

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


Ea
Aidactif
Aidactif

Messages : 23428
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum