Basic vCard support

diff --git a/css/standard.css b/css/standard.css
index 54cbc06aa35c95c2eadefa03526f57b96bb4a7af..53313c8e3acaf17c341221e2e8683f2a4a22c845 100644 (file)
--- a/css/standard.css
+++ b/css/standard.css
@@ -6,7 +6,14 @@
   clear: both;
 }
 
+#vCard_container {
+  clear: both;
+  display: none;
+  margin: 1em;
+}
+
 .friend {
   float: left;
   margin: 2em;
+  text-align: center;
 }

diff --git a/index.html b/index.html
index 82c688dafa88b8a2d21918984a08ab4c7d865e06..a2a067e72fcc83ef07284466399cc6e983177c25 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <script language='javascript' type='text/javascript' src='scripts/strophejs/src/md5.js'></script>
   <script language='javascript' type='text/javascript' src='scripts/strophejs/src/sha1.js'></script>
   <script language='javascript' type='text/javascript' src='scripts/strophejs/src/strophe.js'></script>
+  <script language='javascript' type='text/javascript' src='scripts/buddy.js'></script>
   <script language='javascript' type='text/javascript' src='scripts/basic.js'></script>
   <link rel="stylesheet" href="css/standard.css" type="text/css" />
 </head>
@@ -22,10 +23,12 @@
   </div>
   <div id='friends'>
   </div>
+  <div id='vCard_container'>
+  </div>
   <div id='log_container'>
     <a id='log_toggle' href='#'>Status Log :</a>
     <div id='log'></div>
-  </div>
+ </div>
 </body>
 </html>
 

diff --git a/scripts/basic.js b/scripts/basic.js
index 35719aca0b88d1bf72480e73d3d83251f0d66033..1246bfbcff0de95e3aff7a0b368a1eb046b0feb4 100644 (file)
--- a/scripts/basic.js
+++ b/scripts/basic.js
@@ -4,6 +4,8 @@ var BOSH_SERVICE = 'http://localhost:5280/http-bind/';
 var connection   = null;
 var show_log     = true;
 
+var roster = new Array();
+
 function log(msg) {
     var entry = $('<div></div>').append(document.createTextNode(msg));
     $('#log').append(entry);
@@ -21,34 +23,60 @@ function jid2id(jid) {
     return jid.split('@').join('-').split('.').join('-');
 }
 
-function _cbVCard(e) {
-    var jid = e.getAttribute('from');
+function populateVCard(e, jid) {
+    var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
+    for (var i=0; i<easy_cases.length; i++) {
+       var text = e.getElementsByTagName(easy_cases[i])[0];
+       if (text) {
+           text = Strophe.getText(text);
+           $('#'+easy_cases[i]).append(document.createTextNode(text));
+       }
+    }
     var avatar = e.getElementsByTagName('PHOTO')[0];
     if (avatar) {
        var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
        var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
 
        $("#"+jid2id(jid)+" img").attr('src', 'data:'+mime+';base64,'+binval);
+       $("#PHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
+    }
+    $('#vCard_container').slideDown("normal");
+}
+
+function _cbVCard(e) {
+    var jid = e.getAttribute('from');
+    if (roster[jid2id(jid)].vCard == "") {
+       roster[jid2id(jid)].vCard = e;
+    }
+    if ($('#vCard_container').is(':visible')) {
+       $('#vCard_container').hide();
     }
+    $('#vCard_container').empty();
+    $('#vCard_container').load('vCard.html #vCard', function() {populateVCard(e, jid);});
 
     return false;
 }
 
-function getAvatar(jid) {
+function getVCard(jid) {
     var id = 'getvCard'+jid2id(jid);
-    var vCardiq = $iq({'to':jid,
+    if (roster[jid2id(jid)].vCard == "") {
+       var vCardiq = $iq({'to':jid,
                        'id':id,
                        'type':'get'}
-       ).c('vCard', {'xmlns':NS_VCARD});
-    connection.addHandler(_cbVCard, null, 'iq', 'result', id);
-    connection.send(vCardiq.tree());
+               ).c('vCard', {'xmlns':NS_VCARD});
+       connection.addHandler(_cbVCard, null, 'iq', 'result', id);
+       connection.send(vCardiq.tree());
+    } else {
+       _cbVCard(roster[jid2id(jid)].vCard);
+    }
 
 }
 
 function addFriend(jid, nick) {
+    roster[jid2id(jid)] = new Buddy(nick, jid);
     $('#friends').append('<div class="friend" id="'+jid2id(jid)+'"><img src="imgs/none.png" /><br /><span class="nick">'+nick+'</span></div>');
     $('#'+jid2id(jid)).click(function() {
-       getAvatar(jid);
+       getVCard(jid);
     });
 }
 
@@ -101,6 +129,7 @@ function showConnect() {
     var button = $('#connect').get(0); 
 
     $('#log').empty();
+    $('#vCard_container').empty();
     $('#friends').empty();
     $('label').show();
     jid.show();
@@ -126,10 +155,13 @@ $(document).ready(function () {
     connection.rawInput = rawInput;
     connection.rawOutput = rawOutput;
 
-    $("#log_toggle").bind('click', function () {
+    $("#log_toggle").click(function () {
        $("#log").toggle();     
-      } 
-      );
+      });
+      
+    $('#vCard_container').click(function () {
+        $('#vCard_container').slideUp("normal");
+      });
 
     $('#cred').bind('submit', function () {
        var button = $('#connect').get(0);

diff --git a/scripts/buddy.js b/scripts/buddy.js
new file mode 100644 (file)
index 0000000..1382787
--- /dev/null
+++ b/scripts/buddy.js
@@ -0,0 +1,5 @@
+Buddy = function(name, jid) {
+    this.name = name;
+    this.jid = jid;
+    this.vCard = "";
+};

diff --git a/vCard.html b/vCard.html
new file mode 100644 (file)
index 0000000..3f8da90
--- /dev/null
+++ b/vCard.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http: //www.w3.org/1999/xhtml">
+<head>
+  <title>vCard</title>
+</head>
+<body>
+  <div id='vCard'>
+    <div id="PHOTO"><span class="vCardName">Avatar: </span><img src="imgs/none.png" /></div>
+    <div id="FN"><span class="vCardName">Full Name: </span></div>
+    <div id="FAMILY"><span class="vCardName">Last Name: </span></div>
+    <div id="GIVEN"><span class="vCardName">First Name: </span></div>
+    <div id="MIDDLE"><span class="vCardName">Middle Name: </span></div>
+    <div id="NICKNAME"><span class="vCardName">Nickname: </span></div>
+    <div id="BDAY"><span class="vCardName">Birthday: </span></div>
+    <div id="TELWORK"><span class="vCardName">Telephone (Work): </span></div>
+    <div id="TELHOME"><span class="vCardName">Telephone (Home): </span></div>
+    <div id="CTRY"><span class="vCardName">Country: </span></div>
+    <div id="USERID"><span class="vCardName">E-Mail: </span></div>
+  </div>
+</body>
+</html>
+