tchat box code CSS et HTML
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
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_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 :
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
Changement du titre de la chatbox :
Ce script javascript perrmet de changer le titre de la chatbox :
Code: Sélectionner le contenu
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
Style des avatars de la chatbox :
Changer la taille des avatars par un code CSS :
Code: Sélectionner le contenu
Faire disparaitre le cadre des avatars par un code CSS :
Code: Sélectionner le contenu
Avoir des avatars ronds par un code CSS :
Code: Sélectionner le contenu
Avoir le texte sur la même ligne que le pseudo:
Code: Sélectionner le contenu
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
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
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
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
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
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
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
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
- Notification nouveau message visuelle
- Changement du titre de la chatbox
- Retirer les lignes " a rejoint le chat le / s'est deconnecté le "
- Style des avatars de la chatbox
- Ajouter les avatars où ils ne sont pas
- Ouvrir les archives dans un nouvel onglet
- Mettre un message à la connexion
- Changer le préfixe de modérateur
- Connexion automatique
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.
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 " :
=> |
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://2img.net/i/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> '); 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){}})});
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|