Intégrer la chatbox à la toolbar

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

  • 0

Astuce Intégrer la chatbox à la toolbar

Message par Walt le Ven 7 Avr 2017 - 17:27

Ajouter la chatbox à la toolbar

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 CSS

Panneau d'administration  Affichage  Couleurs - 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 script

Panneau 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".

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.


Modifications

Au 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



avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3431
Inscrit(e) le : 08/09/2015

Walt 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