[AwesomeBB] Intégrer la ChatBox dans la barre de navigation

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://www.gemurama.com

Description du problème

Bonjour à tous

J'ai suivi votre tutoriel : https://forum.forumactif.com/t391323-integrer-la-chatbox-a-la-toolbar

Et malgré ce que le tableau indique, il ne semble pas compatible avec AwesomeBB. Est-il possible d'adapter le CSS et script ?

Merci d'avance pour votre aide

[Lutins]

Bonjour @Zlork,

J'ai suivi votre tutoriel : https://forum.forumactif.com/t391323-integrer-la-chatbox-a-la-toolbar

Et malgré ce que le tableau indique, il ne semble pas compatible avec AwesomeBB. Est-il possible d'adapter le CSS et script ?

En effet, il y a une erreur dans la tableau des astuces. Elle n'est pas compatible avec la version AwesomeBB car elle ne présente pas la même ToolBar. J'ai donc décoché AwesomeBB du tableau et j'en ai profité pour mettre à jour certaines informations contenues dans ladite astuce.

---

Concernant votre demande, j'ai une solution (qui n'est pas des plus élégantes mais qui semble fonctionnelle dans l'atelier du Père Noël).

Dans un premier temps, vous allez installer le script JS de l'astuce ainsi que le code CSS.

Dans un second temps, vous allez suivre les instructions ci-dessous :

Panneau d'administration  Affichage  Templates  Général, overall_header

1. Rechercher la balise <!-- BEGIN switch_user_logged_out --> et placer, juste avant, l'élément HTML <div id="fa_right">
   
   
2. Rechercher l'élément HTML <ul id="header-navigation"> et placer, juste avant, l'élément HTML </div>

Ainsi, vous devez obtenir :

Après validation du template, vous devez obtenir ceci :

Il faut maintenant compléter le code CSS donné par l'astuce :

Panneau d'administration  Affichage  Images et Couleurs - Couleurs & CSS, onglet Feuille de style CSS

Il faut ajouter ce code pour gérer convenablement l'affichage des notifications :

Code:

#live_notif .content{
  height:60px !important;
}

N'oubliez pas de valider la modification. Ainsi, les notifications devraient s'afficher :

Passez de bonnes fêtes de fin d'année

[Invité]

Cela semble fonctionner. Merci beaucoup !

Par contre, esthétiquement, c'est moche (désolé de le dire)

Est-il possible de mettre à la place de "Chatbox", l'image :

Code:

<i class="material-icons">chat_bubble</i>

Et mettre tout ça à côté de la cloche ?

[Lutins]

Re @Zlork,

C'est possible !

Panneau d'administration  Affichage  Templates  Général, overall_header

Vous allez déplacer l'élément HTML </div> et le mettre juste après <!-- END switch_user_logged_in -->

Ainsi, vous devez obtenir :

Ensuite, il va falloir remplacer le script JS par celui-ci :

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

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: '<i class="material-icons">chat_bubble</i>',
            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.parent); // 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);
    });
})();

Si tout est fait correctement, vous devez obtenir :

Lutins

[Invité]

Re  @Zlork,

C'est possible !

---

Lutins

Impeccable !

Juste une question, si on va sur mobile, le script marche très bien mais la chatbox n'est pas responsive, ne s'adapte pas à l'écran automatiquement.

C'est normal ?

[Invité]

Petite relance par rapport à ma question

[Lutins]

Bonjour @Zlork,

Panneau d'administration  Affichage  Images et Couleurs - Couleurs & CSS, onglet Feuille de style CSS

Il faut remplacer le code concernant #fa_chat_container par :

Code:

#fa_chat_container {
          background:#FFF;
          border:1px solid #556682;
          border-radius:3px;
          position:fixed;
          right:3px;
          z-index:999;
          overflow:hidden;
          max-width:100%!important;
          min-height:250px;
          transition:300ms;
        }

Lutins

[Invité]

Merci beaucoup, ça fonctionne !

Je passe le sujet en résolu