[Tutorial] Usar o chatbox no modo arquivos

Informações:

Autor: JScript
Versões: Todas as versões
Introdução: Usar o chatbox no modo arquivos

Painel de controle ->> Modulos ->> HTML & Javascripts ->> Gestão dos códigos Javascripts

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);
}