Agora'Tchat
Bienvenue sur Agoratchat.

Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
Admin
Admin
Messages : 53
Age : 54
Voir le profil de l'utilisateurhttp://lfde.meilleurforum.com

tchat box code CSS et HTML

le Dim 15 Mar - 18:31
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: Sélectionner le contenu
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.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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
Code:
#chatbox .cb-avatar > img{ border-radius: 50%!important; }



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

Code: Sélectionner le contenu
Code:
#chatbox .user-msg .user, #chatbox .user-msg .msg {    display: inline;}



Agrandir cette image Cliquez ici pour la voir à sa taille originale.



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: Sélectionner le contenu
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: Sélectionner le contenu
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 truede 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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
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: Sélectionner le contenu
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  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: Sélectionner le contenu
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){}})});
Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum