chat.js

   1 //Settings
   2
   3 // Config starts here
   4 var endpoint = 'xmpphp/chat_backend.php'
   5 var history_size = 20;
   6 // Config ends here
   7
   8 var InputBuffer = new Array();
   9 var History = new Array();
  10 var HistoryPosition = 0;
  11
  12 function addBuffer(message) {
  13         InputBuffer.push(message);
  14 }
  15
  16 function outBuffer() {
  17         InputBuffer.reverse();
  18         while (InputBuffer.length > 0) {
  19                 raw_message = InputBuffer.pop();
  20                 $('#inputfield input').addClass('loading');
  21                 $.getJSON(endpoint, {op: 'SendMessage', message : raw_message}, function(data){
  22                             addChatMessage($("input[name='nick']").attr('value'), raw_message);
  23                             $('#inputfield input').removeClass('loading');
  24                           });
  25         }
  26         setTimeout('outBuffer()',500);
  27 }
  28
  29 function now() {
  30         var timestamp = new Date();
  31         timestamp = timestamp.format('HH:MM:s');
  32         return timestamp;
  33 }
  34
  35 function addError(error) {
  36         var message = '<div class="logentry error"><span class="timestamp">'+now()+'</span><span class="logmessage">'+error+'</span></div>';
  37         $(message).appendTo('#chatlog');
  38         cleanLog();
  39 }
  40
  41 function addStatus(status) {
  42         var message = '<div class="logentry status"><span class="timestamp">'+now()+'</span><span class="logmessage">'+status+'</span></div>';
  43         $(message).appendTo('#chatlog');
  44         cleanLog();
  45 }
  46
  47 function addSuccess(success) {
  48         var message = '<div class="logentry success"><span class="timestamp">'+now()+'</span><span class="logmessage">'+success+'</span></div>';
  49         $(message).appendTo('#chatlog');
  50         cleanLog();
  51 }
  52
  53 function addLog(logEntry){
  54   var fullentry = '<div class="logEntry"><span class="timestamp">'+now()+'</span><span class="logmessage">'+logEntry+'</span></div>';
  55   $(fullentry).appendTo('#chatlog');
  56   cleanLog();
  57 };
  58
  59 function cleanLog() {
  60         if ($('.logEntry').length > history_size) {
  61             $('.logEntry:last').remove();
  62           }
  63 }
  64
  65 function addChatMessage(nick, message) {
  66   var logentry = '<span class="nick">'+nick.split('@')[0]+'</span><span class="message">'+message+'</span>';
  67   addLog(logentry);
  68 }
  69
  70 function handleEvent() {
  71   $.getJSON(endpoint,{'op' : 'GetEvents'}, function(data) {
  72               if(data['status'] == 0) {
  73                 addChatMessage(data['nick'], data['message']);
  74               }
  75               window.setTimeout('handleEvent()',1000);
  76             });
  77 };
  78
  79 $(document).ready(function(){
  80                     $('#nojs').css('display','none');
  81                     $('#chatbox').css('display','block');
  82                     $('#messagebox').attr('value','Enter your message here.');
  83                     $('#messagebox').bind('focus',function() {
  84                                             if ($('#messagebox').attr('value') == 'Enter your message here.') {
  85                                               $('#messagebox').attr('value','');
  86                                             } else {
  87                                               $('#messagebox').select();
  88                                             }
  89                                           });
  90
  91                     $("input[name='textinput']").bind('keypress', function(key){
  92                                 if (key.keyCode == 38) {
  93                                         if ((History.length > 0) && (HistoryPosition > 0)){
  94                                                 HistoryPosition--;
  95                                                 $('#textinput').attr('value',History[HistoryPosition]);
  96                                         }
  97                                 } else if(key.keyCode == 40) {
  98                                         if ((History.length > 0) && (HistoryPosition < History.length)){
  99                                                 HistoryPosition++;
 100                                                 $('#textinput').attr('value',History[HistoryPosition]);
 101                                         }
 102                                 } else if(key.keyCode == 13) {
 103                                         var message = $('#textinput').attr('value').replace(/</g, '&lt;').replace(/>/g, '&gt;');;
 104                                         addBuffer(message);
 105                                         History.push(message);
 106                                         $('#textinput').addClass('loading');
 107                                         $('#textinput').attr('value','');
 108                                         $('#textinput').focus();
 109                                         HistoryPosition = History.length;
 110                                 } else {
 111                                         HistoryPosition = History.length;
 112                                 }
 113                     });
 114
 115                     $("input[name='submit_nick']").bind('click',function(e){
 116                                                           $('#asknick').fadeOut('fast');
 117                                                           $('#chatlog-fieldset legend').text('Welcome ' + $("input[name='nick']").attr('value'));
 118                                                           $('#chatlog-fieldset').fadeIn('fast');
 119                                                           addStatus('Connecting...');
 120                                                           // establish a connection to the ajax socket
 121                                                           $('#messagebox input').addClass('loading');
 122                                                           $.getJSON(endpoint,{'op' : 'InitConnection', 'nick' : $("input[name='nick']").attr('value')}, function(data) {
 123                                                                       if(data['status'] == 0) {
 124                                                                         addStatus(data['message']);
 125                                                                         handleEvent();
 126                                                                         outBuffer();
 127                                                                         $('#messagebox input').removeClass('loading');
 128                                                                       }
 129                                                                     });
 130                                                         });
 131                   });