Tema: problemas con un chat
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/08/2012, 04:53
edie8
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: problemas con un chat
chat.js
Código Javascript: 
Ver original
  1. var windowFocus = true;
  2. var username;
  3. var chatHeartbeatCount = 0;
  4. var minChatHeartbeat = 1000;
  5. var maxChatHeartbeat = 33000;
  6. var chatHeartbeatTime = minChatHeartbeat;
  7. var originalTitle;
  8. var blinkOrder = 0;
  9.  
  10. var chatboxFocus = new Array();
  11. var newMessages = new Array();
  12. var newMessagesWin = new Array();
  13. var chatBoxes = new Array();
  14.  
  15. $(document).ready(function(){
  16.     originalTitle = document.title;
  17.     startChatSession();
  18.  
  19.     $([window, document]).blur(function(){
  20.         windowFocus = false;
  21.     }).focus(function(){
  22.         windowFocus = true;
  23.         document.title = originalTitle;
  24.     });
  25. });
  26.  
  27. function restructureChatBoxes() {
  28.     align = 0;
  29.     for (x in chatBoxes) {
  30.         chatboxtitle = chatBoxes[x];
  31.  
  32.         if ($("#chatbox_"+chatboxtitle).css('display') != 'none') {
  33.             if (align == 0) {
  34.                 $("#chatbox_"+chatboxtitle).css('right', '20px');
  35.             } else {
  36.                 width = (align)*(225+7)+20;
  37.                 $("#chatbox_"+chatboxtitle).css('right', width+'px');
  38.             }
  39.             align++;
  40.         }
  41.     }
  42. }
  43.  
  44. function chatWith(chatuser) {
  45.     createChatBox(chatuser);
  46.     $("#chatbox_"+chatuser+" .chatboxtextarea").focus();
  47. }
  48.  
  49. function createChatBox(chatboxtitle,minimizeChatBox) {
  50.     if ($("#chatbox_"+chatboxtitle).length > 0) {
  51.         if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
  52.             $("#chatbox_"+chatboxtitle).css('display','block');
  53.             restructureChatBoxes();
  54.         }
  55.         $("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
  56.         return;
  57.     }
  58.  
  59.     $(" <div />" ).attr("id","chatbox_"+chatboxtitle)
  60.     .addClass("chatbox")
  61.     .html('<div class="chatboxhead"><div class="chatboxtitle">'+chatboxtitle+'</div><div class="chatboxoptions"><a href="javascript:void(0)" onclick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')">-</a> <a href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chatboxtitle+'\')">X</a></div><br clear="all"/></div><div class="chatboxcontent"></div><div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+chatboxtitle+'\');"></textarea></div>')
  62.     .appendTo($( "body" ));
  63.                
  64.     $("#chatbox_"+chatboxtitle).css('bottom', '0px');
  65.     
  66.     chatBoxeslength = 0;
  67.  
  68.     for (x in chatBoxes) {
  69.         if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
  70.             chatBoxeslength++;
  71.         }
  72.     }
  73.  
  74.     if (chatBoxeslength == 0) {
  75.         $("#chatbox_"+chatboxtitle).css('right', '20px');
  76.     } else {
  77.         width = (chatBoxeslength)*(225+7)+20;
  78.         $("#chatbox_"+chatboxtitle).css('right', width+'px');
  79.     }
  80.     
  81.     chatBoxes.push(chatboxtitle);
  82.  
  83.     if (minimizeChatBox == 1) {
  84.         minimizedChatBoxes = new Array();
  85.  
  86.         if ($.cookie('chatbox_minimized')) {
  87.             minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
  88.         }
  89.         minimize = 0;
  90.         for (j=0;j<minimizedChatBoxes.length;j++) {
  91.             if (minimizedChatBoxes[j] == chatboxtitle) {
  92.                 minimize = 1;
  93.             }
  94.         }
  95.  
  96.         if (minimize == 1) {
  97.             $('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
  98.             $('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
  99.         }
  100.     }
  101.  
  102.     chatboxFocus[chatboxtitle] = false;
  103.  
  104.     $("#chatbox_"+chatboxtitle+" .chatboxtextarea").blur(function(){
  105.         chatboxFocus[chatboxtitle] = false;
  106.         $("#chatbox_"+chatboxtitle+" .chatboxtextarea").removeClass('chatboxtextareaselected');
  107.     }).focus(function(){
  108.         chatboxFocus[chatboxtitle] = true;
  109.         newMessages[chatboxtitle] = false;
  110.         $('#chatbox_'+chatboxtitle+' .chatboxhead').removeClass('chatboxblink');
  111.         $("#chatbox_"+chatboxtitle+" .chatboxtextarea").addClass('chatboxtextareaselected');
  112.     });
  113.  
  114.     $("#chatbox_"+chatboxtitle).click(function() {
  115.         if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') != 'none') {
  116.             $("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
  117.         }
  118.     });
  119.  
  120.     $("#chatbox_"+chatboxtitle).show();
  121. }
  122.  
  123.  
  124. function chatHeartbeat(){
  125.  
  126.     var itemsfound = 0;
  127.     
  128.     if (windowFocus == false) {
  129.  
  130.         var blinkNumber = 0;
  131.         var titleChanged = 0;
  132.         for (x in newMessagesWin) {
  133.             if (newMessagesWin[x] == true) {
  134.                 ++blinkNumber;
  135.                 if (blinkNumber >= blinkOrder) {
  136.                     document.title = x+' dice...';/* AKI ES LO DE ARRIBA DEL TITULO*/
  137.                     titleChanged = 1;
  138.                     break;  
  139.                 }
  140.             }
  141.         }
  142.         
  143.         if (titleChanged == 0) {
  144.             document.title = originalTitle;
  145.             blinkOrder = 0;
  146.         } else {
  147.             ++blinkOrder;
  148.         }
  149.  
  150.     } else {
  151.         for (x in newMessagesWin) {
  152.             newMessagesWin[x] = false;
  153.         }
  154.     }
  155.  
  156.     for (x in newMessages) {
  157.         if (newMessages[x] == true) {
  158.             if (chatboxFocus[x] == false) {
  159.                 //FIXME: add toggle all or none policy, otherwise it looks funny
  160.                 $('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
  161.             }
  162.         }
  163.     }
  164.     
  165.     $.ajax({
  166.       url: "chat.php?action=chatheartbeat",
  167.       cache: false,
  168.       dataType: "json",
  169.       success: function(data) {
  170.  
  171.         $.each(data.items, function(i,item){
  172.             if (item)   { // fix strange ie bug
  173.  
  174.                 chatboxtitle = item.f;
  175.  
  176.                 if ($("#chatbox_"+chatboxtitle).length <= 0) {
  177.                     createChatBox(chatboxtitle);
  178.                 }
  179.                 if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
  180.                     $("#chatbox_"+chatboxtitle).css('display','block');
  181.                     restructureChatBoxes();
  182.                 }
  183.                 
  184.                 if (item.s == 1) {
  185.                     item.f = username;
  186.                 }
  187.  
  188.                 if (item.s == 2) {
  189.                     $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>');
  190.                 } else {
  191.                     newMessages[chatboxtitle] = true;
  192.                     newMessagesWin[chatboxtitle] = true;
  193.                     $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+item.m+'</span></div>');
  194.                 }
  195.  
  196.                 $("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
  197.                 itemsfound += 1;
  198.             }
  199.         });
  200.  
  201.         chatHeartbeatCount++;
  202.  
  203.         if (itemsfound > 0) {
  204.             chatHeartbeatTime = minChatHeartbeat;
  205.             chatHeartbeatCount = 1;
  206.         } else if (chatHeartbeatCount >= 10) {
  207.             chatHeartbeatTime *= 2;
  208.             chatHeartbeatCount = 1;
  209.             if (chatHeartbeatTime > maxChatHeartbeat) {
  210.                 chatHeartbeatTime = maxChatHeartbeat;
  211.             }
  212.         }
  213.         
  214.         setTimeout('chatHeartbeat();',chatHeartbeatTime);
  215.     }});
  216. }
  217.  
  218. function closeChatBox(chatboxtitle) {
  219.     $('#chatbox_'+chatboxtitle).css('display','none');
  220.     restructureChatBoxes();
  221.  
  222.     $.post("chat.php?action=closechat", { chatbox: chatboxtitle} , function(data){  
  223.     });
  224.  
  225. }
  226.  
  227. function toggleChatBoxGrowth(chatboxtitle) {
  228.     if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') == 'none') {  
  229.         
  230.         var minimizedChatBoxes = new Array();
  231.         
  232.         if ($.cookie('chatbox_minimized')) {
  233.             minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
  234.         }
  235.  
  236.         var newCookie = '';
  237.  
  238.         for (i=0;i<minimizedChatBoxes.length;i++) {
  239.             if (minimizedChatBoxes[i] != chatboxtitle) {
  240.                 newCookie += chatboxtitle+'|';
  241.             }
  242.         }
  243.  
  244.         newCookie = newCookie.slice(0, -1)
  245.  
  246.  
  247.         $.cookie('chatbox_minimized', newCookie);
  248.         $('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','block');
  249.         $('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','block');
  250.         $("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
  251.     } else {
  252.         
  253.         var newCookie = chatboxtitle;
  254.  
  255.         if ($.cookie('chatbox_minimized')) {
  256.             newCookie += '|'+$.cookie('chatbox_minimized');
  257.         }
  258.  
  259.  
  260.         $.cookie('chatbox_minimized',newCookie);
  261.         $('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
  262.         $('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
  263.     }
  264.     
  265. }
  266.  
  267. function checkChatBoxInputKey(event,chatboxtextarea,chatboxtitle) {
  268.      
  269.     if(event.keyCode == 13 && event.shiftKey == 0)  {
  270.         message = $(chatboxtextarea).val();
  271.         message = message.replace(/^\s+|\s+$/g,"");
  272.  
  273.         $(chatboxtextarea).val('');
  274.         $(chatboxtextarea).focus();
  275.         $(chatboxtextarea).css('height','44px');
  276.         if (message != '') {
  277.             $.post("chat.php?action=sendchat", {to: chatboxtitle, message: message} , function(data){
  278.                 message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
  279.                 $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+username+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+message+'</span></div>');
  280.                 $("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
  281.             });
  282.         }
  283.         chatHeartbeatTime = minChatHeartbeat;
  284.         chatHeartbeatCount = 1;
  285.  
  286.         return false;
  287.     }
  288.  
  289.     var adjustedHeight = chatboxtextarea.clientHeight;
  290.     var maxHeight = 94;
  291.  
  292.     if (maxHeight > adjustedHeight) {
  293.         adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
  294.         if (maxHeight)
  295.             adjustedHeight = Math.min(maxHeight, adjustedHeight);
  296.         if (adjustedHeight > chatboxtextarea.clientHeight)
  297.             $(chatboxtextarea).css('height',adjustedHeight+8 +'px');
  298.     } else {
  299.         $(chatboxtextarea).css('overflow','auto');
  300.     }
  301.      
  302. }