[Tutorial] Usar o chatbox no modo "Arquivos"

Olá pessoal!

O novo formato do chat box só permite conversação no modo sem "Arquivos", isso significa que em uma média de 15 minutos as postagens vão "sumindo"!
Daí para termos acesso as mensagens anteriores, temos que clicar no link Arquivos.

Bom, eu sou um dos que ainda não se acostumaram com isso, pois na versão anterior prevalecia os "Arquivos" na conversação, onde ficávamos com uma lista de até 250 mensagens onde poderíamos visualizá-las e postar ao mesmo tempo!

Para quem desejar ter essa funcionalidade da versão anterior, abasta adicionar o código abaixo apenas no "Indice":

Código:


// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
}

$(function() {
   if (_userdata.session_logged_in) {
      $('#frame_chatbox').load(function () {
         chat_archives();
      });
   }
});

function chat_archives() {
   var oIframe = (document.getElementById("frame_chatbox").contentWindow.document || document.getElementById("frame_chatbox").contentDocument),
      script = oIframe.createElement("script"),
      chatbox_script = function () {

      // "For" asynchronous loop, faster and does not lock the browser interface when you have many messages!
      (function ($) {
         $.assyncFor = function (arr, callback) {
            for (var i = 0, len = arr.length; i < len; ++i) {
               var boundCallback = callback.bind(null, i, arr[i]);
               setTimeout(boundCallback, i);
            }
            return this;
         };
      }(jQuery));

      var interval = 0;

      $("#chatbox_option_co, #chatbox_option_disco").bind("click", function () {
         $("#chatbox").empty();
      });

      Chatbox.prototype.refresh = function (data) {
         if (data.error) {
            $("body").html(data.error)
         } else {
            if (this.connected) {
               $("#chatbox_display_archives").show();
               $("#chatbox_option_co").hide();
               $("#chatbox_option_disco, #chatbox_footer").show();
               $("#chatbox_messenger_form").css('display', 'block');
               $("#chatbox_messenger_form").css('visibility', 'visible');
               $(".format-message").each(function () {
                  var name = $(this).attr('name');
                  var value = my_getcookie('CB_' + name);
                  $(this).prop('checked', parseInt(value) ? true : false)
               });
               this.format();
               if (data.lastModified) {
                  this.listenParams.lastModified = data.lastModified
               }
               if (!interval) {
                  interval = setInterval(function () {
                     chatbox.init();
                  }, 5000);
               }
            } else {
               clearInterval(interval);
               interval = 0;
               $("#chatbox_option_co").show();
               $("#chatbox_option_disco, #chatbox_footer").hide();
               $("#chatbox_display_archives").hide();
               $("#chatbox_messenger_form").css('display', 'none');
               $("#chatbox_messenger_form").css('visibility', 'hidden');
            }
            if (data.users) {
               this.users = [];
               $(".online-users, .away-users").empty();
               $(".member-title").hide();
               for (var i in data.users) {
                  var user = data.users[i];
                  this.users[user.id] = user;
                  var username = "<span style='color:" + user.color + "'>" + (user.admin ? "@ " : "") + "<span class='chatbox-username chatbox-user-username' data-user='" + user.id + "' >" + user.username + "</span>" + "</span>";
                  var list = user.online ? '.online-users' : '.away-users';
                  $(list).append('<li>' + username + '</li>')
               }
               if (!$(".online-users").is(':empty')) {
                  $(".member-title.online").show()
               }
               if (!$(".away-users").is(':empty')) {
                  $(".member-title.away").show()
               }
            }
            if (data.messages) {
               var scroll = !this.messages || this.messages.length != data.messages.length;
               this.messages = data.messages;

               if (this.messages) {
                  var oThis = this; // Here we save the current "this" for use inside "For" asynchronous loop!

                  $.assyncFor(oThis.messages, function (index, content) { // The "For" asynchronous loop...
                     // Here checks if there is already a message in the DOM, if already, not need to process the same message!
                     if ($(".shout-" + index).length) {
                        return oThis;
                     }

                     var message = content, //                                       |ClassName index|
                        html = "<p class='chatbox_row_" + (index % 2 == 1 ? 2 : 1) + " clearfix shout-" + index + "'>" + "<span class='date-and-time' title='" + message.date + "'>[" + message.datetime + "]</span>";

                     if (message.userId == -10) {
                        html += "<span class='msg'>" + "<span style='color:" + message.msgColor + "'>" + "<strong> " + message.msg + "</strong>" + "</span>" + "</span>"
                     } else {
                        html += "<span class='user-msg'>";
                        if (oThis.avatar) {
                           html += "   <span class='cb-avatar'><img src='" + message.user.avatar + "' /></span>"
                        }
                        html += "   <span class='user' style='color:" + message.user.color + "'>" + "<strong> " + (message.user.admin ? "@ " : "") + "<span class='chatbox-username chatbox-message-username'  data-user='" + message.userId + "' >" + message.username + "</span> :&nbsp;" + "</strong>" + "</span>" + "<span class='msg'>" + message.msg + "</span>" + "</span>"
                     }
                     html += "</p>";

                     /**
                      * Here the "append" will not make slow the code execution since it is not within a synchronous loop,
                      * but instead in an asynchronous loop that schedules the execution later!
                      */
                     $("#chatbox").append(html);

                     if ((index + 1) == oThis.messages.length) {
                        if (scroll) {
                           $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2
                        }
                     }
                  });
               }
            }
         }
      };
      $("#chatbox").empty();
      chatbox.init();
      interval = setInterval(function () {
         chatbox.init();
      }, 5000);
   };

   script.type = "text/javascript";
   script.innerHTML = "(" + chatbox_script.toString() + ")();";
   oIframe.getElementsByTagName("head")[0].appendChild(script);
}


Nota: Se tiveres algum outro código de personalização do chat, terás que pedir ajuda para conciliar o meu código com o seu!

Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Espero que gostem,

JS

Esse é um código excelente amigo [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] , o antigo chat era bem melhor mesmo. Obrigado pelo código.

Gostei do Codigo [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] fica melhor sim - obrigado por compartilhar assim fica mas facil e pratica do que fica subindo chat!

Pessoal, eu fiz umas modificações, melhorias e correções no código!

JS

Obrigado funciona bem , testei no meu chatbox