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