Ce tutoriel vous explique comment ajouter la chatbox de votre forum sur toutes les pages de celui-ci, via la toolbar, et ajoute quelques améliorations telles qu'une notification visuelle et sonore lorsqu'un message est posté sur la chatbox. La toolbar indique, en outre, le nombre de connectés sur la chatbox.
- Voir l'aperçu:
Prérequis :
Ajouter le CSSPanneau d'administration Affichage Images et Couleurs - Couleurs & CSS, onglet Feuille de style CSS
Ajoutez le code suivant à votre CSS :
- Code:
#fa_chat_container {
background:#FFF;
border:1px solid #556682;
border-radius:3px;
position:fixed;
right:3px;
z-index:999;
overflow:hidden;
min-width:500px;
min-height:250px;
transition:300ms;
}
#fa_chat {
border:none;
width:100%;
height:100%;
}
#fa_chat_button {
color:#FFF;
line-height:30px;
margin-left:10px;
padding:0 5px;
cursor:pointer;
}
#fa_chat_button.fa_chat_active {
color:#333;
background:#FFF;
}
Installer le scriptPanneau d'administration Modules HTML & JAVASCRIPT - Gestion des codes Javascript
Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Chatbox sur toutes les pages" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts).
Insérez-y le code suivant :
- Code:
(function() {
if (!window.FA) window.FA = {};
if (FA.Chat) {
if (window.console) console.warn('FA.Chat has already been initialized');
return;
}
FA.Chat = {
// chatbox settings
config: {
height: '60%',
width: '70%',
live_notif: true,
sound_notif: {
enabled: true,
file: 'https://illiweb.com/fa/fdf/zelda.mono.mp3'
},
notifRate: 10000
},
// language settings
lang: {
chatbox: 'Chatbox',
new_msg: 'Un nouveau message a été posté sur la <a href="javascript:FA.Chat.toggle();">chatbox</a>.'
},
// technical data below
node: {}, // node cache
users: 0, // users in chat
messages: 'initial', // total chat messages
actif: false, // tells us if the chatbox is opened
notifActif: false, // tells us if the notifications are active
// initial setup of the chatbox
init: function() {
var right = document.getElementById('fa_right'),
container = document.createElement('DIV'),
button = document.createElement('A'),
audio;
button.id = 'fa_chat_button';
button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
button.onclick = FA.Chat.toggle;
FA.Chat.node.button = button;
container.id = 'fa_chat_container';
container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
container.style.width = FA.Chat.config.width;
container.style.height = FA.Chat.config.height;
container.style.bottom = '-' + FA.Chat.config.height;
container.style.visibility = 'hidden';
if (right) {
right.insertBefore(button, right.lastChild); // add the chat button to the right side of the toolbar
document.body.appendChild(container);
// create the notification audio element
if (FA.Chat.config.sound_notif.enabled) {
audio = document.createElement('AUDIO');
audio.src = FA.Chat.config.sound_notif.file;
if (audio.canPlayType) {
FA.Chat.node.audio = audio;
document.body.appendChild(audio);
}
}
FA.Chat.node.container = document.getElementById('fa_chat_container');
FA.Chat.node.chatters = document.getElementById('fa_chatters');
FA.Chat.node.frame = document.getElementById('fa_chat');
FA.Chat.node.frame.onload = FA.Chat.getFrame;
}
delete FA.Chat.init;
},
// get the frame window, document, and elements
getFrame: function() {
if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
if (this.contentDocument || this.contentWindow) {
FA.Chat.window = this.contentWindow;
FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;
FA.Chat.node.message = FA.Chat.document.getElementById('message');
FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');
FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // listen for changes every 0.3 seconds
}
},
// listen for changes in the chatbox
listen: function() {
var users = FA.Chat.node.members.getElementsByTagName('LI').length,
messages = FA.Chat.window.chatbox.messages.length;
// update user count
if (users > FA.Chat.users || users < FA.Chat.users) {
FA.Chat.users = users;
FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
}
// initial / active updates
if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;
// notify new messages while connected and the chatbox is closed
if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
FA.Chat.messages = messages; // update message count
FA.Chat.notifActif = true;
if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); // play sound notification
// wait before notifying the user again
window.setTimeout(function() {
FA.Chat.notifActif = false;
}, FA.Chat.config.notifRate);
}
},
// create a custom notification
notify: function(msg) {
var notif = document.createElement('DIV'),
live = document.getElementById(Toolbar.LIVE_NOTIF);
notif.className = 'fa_notification';
notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
notif.style.display = 'none';
$(notif).mouseover(function() {
$(this).stop(true, true)
});
$(notif).mouseleave(function() {
$(this).delay(5000).fadeOut()
});
live.insertBefore(notif, live.firstChild);
$(notif.firstChild).dotdotdot();
$(notif).fadeIn(100, function() {
$(this).delay(10000).fadeOut()
});
},
// toggle the display state of the chatbox
toggle: function() {
var container = FA.Chat.node.container.style;
if (/hidden/i.test(container.visibility)) {
FA.Chat.node.button.className = 'fa_chat_active';
FA.Chat.actif = true;
container.visibility = 'visible';
container.bottom = '3px';
// auto focus the message field
window.setTimeout(function() {
FA.Chat.node.message.focus();
}, 350); // some browsers ( firefox ) need a delay
} else {
FA.Chat.node.button.className = '';
FA.Chat.actif = false;
container.visibility = 'hidden';
container.bottom = '-' + FA.Chat.config.height;
}
}
};
$(function() {
// initialize the chat when the document is ready and the user is logged in
if (_userdata.session_logged_in) $(FA.Chat.init);
});
})();
Enregistrez le code pour achever l'installation. Dès cette étape, l'astuce est fonctionnelle ! Si vous souhaitez apporter des modifications, vous pouvez continuer la lecture de ce tutoriel.
ModificationsAu début du script que vous venez de créer, vous trouverez un objet config qui contient les principaux éléments de configuration de cette astuce :
- Code:
config : {
height : '60%',
width : '70%',
live_notif : true,
sound_notif : {
enabled : true,
file : 'http://illiweb.com/fa/fdf/zelda.mono.mp3'
},
notifRate : 10000
},
- height vous permet de configurer la hauteur de la chatbox lorsqu'elle est ouverte. Vous pouvez la spécifier en px, en em, en %... la valeur par défaut est fixée à 60%.
- width vous permet de configurer la largeur de la chatbox lorsqu'elle est ouverte. Les mêmes unités sont acceptées, et la valeur par défaut est de 70%.
- live_notif vous permet d'activer ou non les notifications en direct lorsqu'un message est posté sur la chatbox. Pour les activer, indiquez true, et indiquez false pour les désactiver. Notez que les notifications ne s'affichent que lorsque vous vous êtes connecté(e) sur la chatbox et que vous n'avez pas ouvert la chatbox.
- sound_notif ce paramètre se subdivise en deux :
- enabled vous permet d'activer ou non l'émission d'une notification sonore lorsqu'un message est posté sur la chatbox. Pour les activer, indiquez true, et indiquez false pour les désactiver.
- file vous permet de modifier le son émis. Vous devez alors remplacer le fichier indiqué par celui de votre choix, au format .mp3
notifRate vous permet d'afficher plus ou moins souvent les notifications. Par défaut, les notifications de nouveaux messages ne sont affichées que toutes les 10.000ms (10 secondes). Vous pouvez augmenter ou réduire cette fréquence en modifiant cette valeur
|
Accueil
Créer un forum
Intégrer la chatbox à la toolbar
par Walt Ven 7 Avr 2017 - 17:27
Sujets similaires