Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Detalhes da questão

Endereço do fórum: http://www.libertytelecomctba.com.br/
Versão do fórum: Invision

Descrição

Olá Comunity Forumety
Eu estava dando uma passeada pelo Help Forumotion, ai páaah, vi esse tutorial(eu sei que ele está disponível aqui no Fdf) então, tive a ideia de adicionar este efeito em um botão no qual irei adicionar no menu.

O tutorial:
http://help.forumotion.com/t143414-add-the-chatbox-to-your-toolbar

O que desejo:
O mesmo efeito do botão chatbox na barra de ferramentas, porem, preciso adiciona-lo em um menu no qual estou fazendo(acredito que vou precisar do código HTML, CSS e .JS)


Vamos começar 2017, diferente, inovadoramente!

(acredito que vou precisar do código HTML, CSS e .JS)

Yep. Precisaremos destes caras para dar continuidade.

@Kyo Panda
Obrigado por sua resposta!(eu sei que sua internet é da NASA)
Mas meu caro, na verdade eu preciso do código para fazer o efeito em um botão hehe

Ainda estou montando o código do meu menu, mais preciso deste para já adiciona-lo.(Acredite, vou levar algum tempo para montar o código do menu, já que vou ter que "puxar" via JS as divs do perfil para este.)

Thnks!

O problema é não saber o atributo do elemento HTML para bindar o botão. Mas, a grosso modo:

Código:

(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 : 'http://illiweb.com/fa/fdf/zelda.mono.mp3'
      },
      notifRate : 10000
    },
 
    // language settings
    lang : {
      chatbox : 'Chatbox',
      new_msg : 'A new message has been posted in the <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);
  });
})();

Nessa linha:

Código:

var right = document.getElementById('fa_right'),

É definido o elemento que o chat (e seu botão) será inserido. O senhor pode configurá-lo como bem desejar.

Agora para realizarmos o processo completo, precisaria do HTML/CSS/JS da sua barra para garantirmos o funcionamento correto.

@Kyo Panda
o elemento fa_right é aonde será adicionado o botão do chatbox, certo? Eu gostaria apenas deste botão sem o uso do código .JS

Eu não compreendi o que deseja. O senhor quer o HTML que o JS gera para o botão, mas sem o chat em si?

Pera ai que agora até eu me confundi '-'

Eu necessito deste código do chatbox, quando clico no botão "Chatbox" ele aparece no canto inferior da tela. Mas, preciso somente deste botão com o efeito.

Com o código somente deste botão, vou adiciona-lo em um menu e não na barra de ferramentas.

Compreendeste my fryend?


Até logo mais

Vou tentar dar um exemplo. Supomos que o código do seu menu esteja assim:

Código:

<ul class="fa-custom-menu">
  <li><a href="/h1-">Link 1</a></li>
  <li><a href="/h2-">Link 2</a></li>
  <li><a href="/h3-">Link 3</a></li>
  <li><a href="/h4-">Link 4</a></li>
</ul>

E o senhor deseja introduzir esse botão no fim da lista. Um jeito de fazê-lo seria alterar o menu para:

Código:

<ul class="fa-custom-menu">
  <li><a href="/h1-">Link 1</a></li>
  <li><a href="/h2-">Link 2</a></li>
  <li><a href="/h3-">Link 3</a></li>
  <li><a href="/h4-">Link 4</a></li>
  <li id="fa-custom-chat"></li>
</ul>

E naquela parte do código que citei, mudar para:

Código:

var right = document.getElementById('fa-custom-chat'),

---

O script se injetará no elemento que quiser, mesmo que seja personalizado.

@Kyo Panda
Eu nem imaginei em fazer isso...


Mais muito obrigado! Dúvida resolvida.

Somos nozes. o/

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".