]> git.babelmonkeys.de Git - socialXMPP.git/blob - scripts/basic.js
Design changes
[socialXMPP.git] / scripts / basic.js
1 var DEBUG = false;
2 var BOSH_SERVICE = 'http://localhost:5280/http-bind/';
3
4 var NS_VCARD = 'vcard-temp';
5 var NS_CAPS= 'http://jabber.org/protocol/caps';
6 var NS_PEP = 'http://jabber.org/protocol/pubsub#event';
7 var NS_TUNE = 'http://jabber.org/protocol/tune';
8
9 var localJID = null;
10 var connection   = null;
11 var show_log     = true;
12
13 var features = new Array(NS_CAPS, NS_TUNE+'+notify', Strophe.NS.DISCO_INFO);
14 var appName = 'socialXMPP';
15
16 var roster = new Array();
17
18 function log(msg) {
19     var entry = $('<div></div>').append(document.createTextNode(msg));
20     $('#log').append(entry);
21 }
22
23 function rawInput(data) {
24     log('RECV: ' + data);
25 }
26
27 function rawOutput(data) {
28     log('SENT: ' + data);
29 }
30
31 function jid2id(jid) {
32     jid = Strophe.getBareJidFromJid(jid);
33     return jid.split('@').join('-').split('.').join('-');
34 }
35
36 function populateVCard(e, jid) {
37     var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
38     for (var i=0; i<easy_cases.length; i++) {
39         var text = e.getElementsByTagName(easy_cases[i])[0];
40         if (text) {
41             text = Strophe.getText(text);
42             $('#'+easy_cases[i]).append(Strophe.xmlTextNode(text));
43         }
44     }
45     var avatar = e.getElementsByTagName('PHOTO')[0];
46     if (avatar) {
47         var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
48         var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
49
50         $("#"+jid2id(jid)+" img").attr('src', 'data:'+mime+';base64,'+binval);
51         $("#PHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
52     }
53     $(e).find('TEL:has(HOME)').each(function() {
54         $('#TELHOME').append(' ');
55         $('#TELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
56     });
57     $(e).find('TEL:has(WORK)').each(function() {
58         $('#TELWORK').append(' ');
59         $('#TELWORK').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
60     });
61     $(e).find('EMAIL:has(HOME)').each(function() {
62         $('#EMAILHOME').append(' ');
63         $('#EMAILHOME').append(Strophe.xmlTextNode($(this).find('USERID').text()));
64     });
65     $(e).find('EMAIL:has(WORK)').each(function() {
66         $('#EMAILWORK').append(' ');
67         $('#EMAILWORK').append(Strophe.xmlTextNode($(this).find('USERID').text()));
68     });
69
70     if (!roster[jid2id(jid)].tune.isEmpty()) {
71         $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+
72                         roster[jid2id(jid)].tune.title + ' by ' + roster[jid2id(jid)].tune.artist +
73                         ' from ' + roster[jid2id(jid)].tune.source + '</li>')
74     }
75
76     $('#vCard').click(function () {
77         $('#vCard_container').slideUp("normal", function() {
78                 $('#box-overlay').hide();
79         });
80         roster[jid2id(jid)].visible = false;
81       });
82
83     $('#box-overlay').show();
84     $('#vCard_container').slideDown("normal");
85     roster[jid2id(jid)].visible = true;
86 }
87
88 function _cbVCard(e) {
89     var jid = e.getAttribute('from');
90     if (roster[jid2id(jid)].vCard == "") {
91         roster[jid2id(jid)].vCard = e;
92     }
93     if ($('#vCard_container').is(':visible')) {
94         $('#vCard_container').hide();
95     }
96     $('#vCard_container').empty();
97     $('#vCard_container').load('vCard.html #vCard', function() {populateVCard(e, jid);});
98
99     return false;
100 }
101
102 function _cbOwnVCard(e) {
103     $('#ownInfo').empty();
104     $('#ownInfo').load('vCard.html #ownvCard', function() {
105     var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
106     for (var i=0; i<easy_cases.length; i++) {
107         var text = e.getElementsByTagName(easy_cases[i])[0];
108         if (text) {
109             text = Strophe.getText(text);
110             $('#own'+easy_cases[i]).append(Strophe.xmlTextNode(text));
111         }
112     }
113     var avatar = e.getElementsByTagName('PHOTO')[0];
114     if (avatar) {
115         var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
116         var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
117
118         $("#ownPHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
119     }
120     $(e).find('TEL:has(HOME)').each(function() {
121         $('#ownTELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
122     });
123     $(e).find('TEL:has(WORK)').each(function() {
124         $('#ownTELWORK').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
125     });
126     $(e).find('EMAIL:has(HOME)').each(function() {
127         $('#ownEMAILHOME').append(Strophe.xmlTextNode($(this).find('USERID').text()));
128     });
129     $(e).find('EMAIL:has(WORK)').each(function() {
130         $('#ownEMAILWORK').append(Strophe.xmlTextNode($(this).find('USERID').text()));
131     });
132     $('#ownInfo').show();
133     });
134
135     return false;
136 }
137
138 function getVCard(jid) {
139     var id = connection.getUniqueId('vCardGet');
140     if (roster[jid2id(jid)].vCard == "") {
141         var vCardiq = $iq({'to':jid,
142                         'id':id,
143                         'type':'get'}
144                 ).c('vCard', {'xmlns':NS_VCARD});
145         connection.addHandler(_cbVCard, null, 'iq', 'result', id);
146         connection.send(vCardiq.tree());
147     } else {
148         _cbVCard(roster[jid2id(jid)].vCard);
149     }
150 }
151
152 function getOwnInfo() {
153     var id = connection.getUniqueId('vCardGet');
154     var vCardiq = $iq({'id': id, 'type': 'get'}
155         ).c('vCard', {'xmlns':NS_VCARD});
156     connection.addHandler(_cbOwnVCard, null, 'iq', 'result', id);
157     connection.send(vCardiq.tree());
158 }
159
160 function addFriend(jid, nick) {
161     roster[jid2id(jid)] = new Buddy(nick, jid);
162     $('#friends').append('<div class="friend" id="'+jid2id(jid)+'"><img src="imgs/none.png" /><br /><a class="nick">'+nick+'</a></div>');
163     $('#' + jid2id(jid) + ' img').click(function() {
164         getVCard(jid);
165     });
166     $('#' + jid2id(jid) + ' a').click(function() {
167         var id = jid2id(jid) + 'Chat';
168         if ($('#' + id).length <= 0) {
169             createBubble(jid);
170         }
171         $('#' + id).show();
172     });
173
174 }
175
176 function _cbRoster(e) {
177     var query = e.getElementsByTagName('query')[0];
178     var entries = query.getElementsByTagName('item');
179     for (var item=0; item<entries.length; item++) {
180         nick = entries[item].getAttribute('name');
181         if (!nick) {
182             nick = entries[item].getAttribute('jid').split('@')[0];
183         }
184         addFriend(entries[item].getAttribute('jid'), nick);
185     }
186     connection.addHandler(_cbPEP, NS_PEP, 'message');
187     var initialPresence = $pres().c('show').t('online').up().c('status').t('Hy, I am an socialXMPP instance').up().c('priority').t('1').up().c('c', {xmlns: NS_CAPS, hash: 'sha-1', node: 'http://jabber.babelmonkeys.de', ver: genCaps()}).up();
188     connection.send(initialPresence.tree());
189
190     $('#friends').css('display', 'table');
191
192     return false;
193 }
194
195 function getRoster() {
196     var id = connection.getUniqueId('roster');
197
198     var rosteriq = $iq({'id':id,
199                         'type':'get'}
200         ).c('query', {'xmlns':Strophe.NS.ROSTER});
201
202     connection.addHandler(_cbRoster, null, 'iq', 'result', id);
203     connection.send(rosteriq.tree());
204 }
205
206 function _cbDisco(e) {
207     var id = e.getAttribute('id');
208     var jid = e.getAttribute('from');
209
210     if (jid) {
211         var response = $iq({id: id, type: 'result', to: jid});
212     } else {
213         var response = $iq({id: id, type: 'result'});
214     }
215     var query = response.c('query', {xmlns: Strophe.NS.DISCO_INFO})
216     query.c('identity', {category: 'client', type: 'web', name: appName}).up();
217     for (var i = 0; i < features.length; i++) {
218         query.c('feature', {'var': features[i]}).up();
219     }
220     connection.send(response.tree());
221
222     return true;
223 }
224
225 function sendMessage(form, to) {
226     if (form.text.value) {
227         var id = jid2id(to) + 'Chat';
228         var message = $msg({'type': 'chat', 'to': to}).c('body').t(form.text.value);
229         connection.send(message.tree());
230         if ($('#' + id + ' p *').length > 0) {
231             $('#' + id + ' p').append('<br/>');
232         }
233         $('#' + id + ' p').append('<span class="receiver">' + localJID + ': </span>');
234         $('#' + id + ' p').append(form.text.value);
235         form.text.value = '';
236     }
237
238     return false;
239 }
240
241 function createBubble(jid) {
242     var id = jid2id(jid) + 'Chat';
243     $('body').append('<div class="chat" id="' + id + '" onmousedown="startDrag(this)"><a href="#" onclick="$(' + "'#" + id + "'" + ').hide()">Close</a>' +
244                     '<span class ="chatTitle"> ' + jid + '</span><p></p></div>');
245     $('#' + id).append('<form id="' + id + 'Form" class="chatForm" onsubmit="return sendMessage(this, \'' + jid + '\');" action="#"><input type="text" name="text" id="' + id + 'Text" class="chatForm" /></form>')
246     $('#' + id).css( 'top', $('#' + jid2id(jid)).position().top + 40);
247     $('#' + id).css( 'left', $('#' + jid2id(jid)).position().left + 40);
248 }
249
250
251 function _cbMessage(msg) {
252     if ($(msg).attr('type') != 'chat')
253         return true;
254     var jid = $(msg).attr('from');
255     var id = jid2id(jid) + 'Chat';
256     var body = $(msg).find('body:first').text();
257     body = escape(body);
258     body = body.replace(/%0A/g, '<br/>');
259     body = body.replace(/%3C/g, '&lt;');
260     body = body.replace(/%3E/g, '&gt;');
261     body = body.replace(/%26/g, '&amp;');
262     body = unescape(body);
263     if ($('#' + id).length <= 0) {
264         createBubble(jid);
265     }
266     if ($('#' + id + ' p *').length > 0) {
267         $('#' + id + ' p').append('<br/>');
268     }
269     $('#' + id + ' p').append('<span class="sender">' + jid + ': </span>');
270     $('#' + id + ' p').append(body);
271     $('#' + id).show();
272
273     return true;
274 }
275
276 function genCaps() {
277     var S = '';
278     S += 'client/web//' + appName + '<'
279     features.sort();
280     for (var i = 0; i < features.length; i++) {
281         S += features[i] + '<';
282     }
283     return b64_sha1(S);
284 }
285
286 function handleTune(jid, tuneXML) {
287     var tune = new Tune();
288     if (tuneXML.childNodes.length > 0) {
289         tune.artist = Strophe.getText(tuneXML.getElementsByTagName('artist')[0]);
290         tune.length= Strophe.getText(tuneXML.getElementsByTagName('length')[0]);
291         tune.rating= Strophe.getText(tuneXML.getElementsByTagName('rating')[0]);
292         tune.source= Strophe.getText(tuneXML.getElementsByTagName('source')[0]);
293         tune.title= Strophe.getText(tuneXML.getElementsByTagName('title')[0]);
294         tune.track= Strophe.getText(tuneXML.getElementsByTagName('track')[0]);
295         tune.uri= Strophe.getText(tuneXML.getElementsByTagName('uri')[0]);
296         if (roster[jid2id(jid)].visible == true) {
297             if ( $('#tune').length > 0) {
298                 $('#tune').empty();
299                 $('#tune').append('<span class="vCardName">Tune: </span>');
300                 $('#tune').append(Strophe.xmlTextNode('Listening to '+ tune.title +
301                         ' by ' + tune.artist + ' from ' + tune.source));
302             } else {
303                 $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+ tune.title +
304                         ' by ' + tune.artist + ' from ' + tune.source + '</li>')
305             }
306         }
307     } else {
308         $('#tune').remove();
309     }
310     roster[jid2id(jid)].tune = tune;
311 }
312
313 function _cbPEP(e) {
314     var from = e.getAttribute('from');
315     if (Strophe.getBareJidFromJid(from) == Strophe.getBareJidFromJid(connection.jid)) {
316         return true; // Drop own PEP events
317     }
318     var items = e.getElementsByTagName('items')[0];
319     // Handle Tune
320     if (items.getAttribute('node') == NS_TUNE) {
321         handleTune(from, items.getElementsByTagName('tune')[0]);
322     }
323     return true;
324 }
325
326 function onConnect(status) {
327     if (status == Strophe.Status.CONNECTING) {
328         log('Strophe is connecting.');
329     } else if (status == Strophe.Status.CONNFAIL) {
330         log('Strophe failed to connect.');
331         showConnect();
332     } else if (status == Strophe.Status.DISCONNECTING) {
333         log('Strophe is disconnecting.');
334     } else if (status == Strophe.Status.DISCONNECTED) {
335         log('Strophe is disconnected.');
336         showConnect();
337     } else if (status == Strophe.Status.AUTHFAIL) {
338         log('Authentication failed');
339         if (connection) {
340             connection.disconnect();
341         }
342     } else if (status == Strophe.Status.CONNECTED) {
343         log('Strophe is connected.');
344         getOwnInfo();
345         getRoster();
346         connection.addHandler(_cbDisco, Strophe.NS.DISCO_INFO, 'iq', 'get');
347         connection.addHandler(_cbMessage, Strophe.NS.CLIENT, 'message');
348     }
349 }
350
351 function showConnect() {
352     var jid = $('#jid');
353     var pass = $('#pass');
354     var button = $('#connect').get(0);  
355
356     $('#log').empty();
357     $('#ownInfo').empty();
358     $('#ownInfo').hide();
359     $('#vCard_container').empty();
360     $('#friends').empty();
361     $('#friends').hide();
362     $('.chat').remove();
363     $('label').show();
364     jid.show();
365     pass.show();
366     button.value = 'connect';
367     return false;
368 }
369
370 function showDisconnect() {
371     var jid = $('#jid');
372     var pass = $('#pass');
373     var button = $('#connect').get(0);  
374
375     button.value = 'disconnect';
376     pass.hide();
377     jid.hide();
378     $('label').hide();
379     return false;
380 }
381
382 $(document).ready(function () {
383     if (DEBUG) {
384         $('#log_container').show();
385     }
386     connection = new Strophe.Connection(BOSH_SERVICE);
387     connection.rawInput = rawInput;
388     connection.rawOutput = rawOutput;
389
390     $("#log_toggle").click(function () {
391         $("#log").toggle();     
392       });
393
394     $('#cred').bind('submit', function () {
395         var button = $('#connect').get(0);
396         var jid = $('#jid');
397         var pass = $('#pass');  
398         localJID = jid.get(0).value;
399         
400         if (button.value == 'connect') {
401             showDisconnect();
402             connection.connect(localJID,
403                                pass.get(0).value,
404                                onConnect);
405         } else {
406             connection.disconnect();
407         }
408         return false;
409     });
410 });
411
412 // Element moving
413 var dragElement = null;
414 var mouseX = 0;
415 var mouseY = 0;
416 var offX = 0;
417 var offY = 0;
418
419 function startDrag(element) {
420     dragElement = element;
421     offX = mouseX - dragElement.offsetLeft;
422     offY = mouseY - dragElement.offsetTop;
423 }
424
425 function doDrag(eve) {
426     mouseX = eve.pageX;
427     mouseY = eve.pageY;
428
429     if (dragElement) {
430         dragElement.style.left = (mouseX - offX) + 'px';
431         dragElement.style.top = (mouseY - offY) + 'px';
432     }
433 }
434
435 function stopDrag(eve) {
436     dragElement = null;
437 }
438
439 onunload = function() {
440     if (connection) {
441         connection.disconnect();
442     }
443 }
444
445 onmousemove = doDrag;
446 onmouseup = stopDrag;
447