Show own vCard. Nicer style.

diff --git a/css/standard.css b/css/standard.css
index 53313c8e3acaf17c341221e2e8683f2a4a22c845..31a1782e0528ca635fdc487c91236780a667db5f 100644 (file)
--- a/css/standard.css
+++ b/css/standard.css
@@ -7,13 +7,35 @@
 }
 
 #vCard_container {
-  clear: both;
+  float: left;
   display: none;
   margin: 1em;
 }
 
+#ownInfo {
+  display: none;
+  background: lightgrey;
+  float: left;
+  padding: 1em;
+}
+
+#friends {
+  max-width: 50%;
+  background: grey;
+  float: left;
+}
+
+.vCardName {
+  font-weight: bold;
+}
+
 .friend {
   float: left;
   margin: 2em;
   text-align: center;
 }
+
+.friend img, #vCard_container img {
+  max-width: 70px;
+  max-height: 70px;
+}

diff --git a/index.html b/index.html
index d808d1261237b99b3930ab6275508c9f7cc67c9a..f68b77745c583aea3984383a7ca78a10c91d0159 100644 (file)
--- a/index.html
+++ b/index.html
@@ -21,6 +21,19 @@
       <input type='submit' id='connect' value='connect' />
     </form>
   </div>
+  <div id="ownInfo">
+    <div id="ownPHOTO"><span class="vCardName">Avatar: </span><img src="imgs/none.png" /></div>
+    <div id="ownFN"><span class="vCardName">Full Name: </span></div>
+    <div id="ownFAMILY"><span class="vCardName">Last Name: </span></div>
+    <div id="ownGIVEN"><span class="vCardName">First Name: </span></div>
+    <div id="ownMIDDLE"><span class="vCardName">Middle Name: </span></div>
+    <div id="ownNICKNAME"><span class="vCardName">Nickname: </span></div>
+    <div id="ownBDAY"><span class="vCardName">Birthday: </span></div>
+    <div id="ownTELWORK"><span class="vCardName">Telephone (Work): </span></div>
+    <div id="ownTELHOME"><span class="vCardName">Telephone (Home): </span></div>
+    <div id="ownCTRY"><span class="vCardName">Country: </span></div>
+    <div id="ownUSERID"><span class="vCardName">E-Mail: </span></div>
+  </div>
   <div id='friends'>
   </div>
   <div id='vCard_container'>

diff --git a/scripts/basic.js b/scripts/basic.js
index 9a1584e5cacc2e67ef109c4a10601fb51efb023a..cc4fde5a693a6ea63da3ec3760b687b0ce040eaa 100644 (file)
--- a/scripts/basic.js
+++ b/scripts/basic.js
@@ -64,6 +64,27 @@ function _cbVCard(e) {
     return false;
 }
 
+function _cbOwnVCard(e) {
+    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);
+           $('#own'+easy_cases[i]).append(Strophe.xmlTextNode(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]);
+
+       $("#ownPHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
+    }
+    $('#ownInfo').show();
+
+    return false;
+}
+
 function getVCard(jid) {
     var id = 'getvCard'+jid2id(jid);
     if (roster[jid2id(jid)].vCard == "") {
@@ -79,6 +100,16 @@ function getVCard(jid) {
 
 }
 
+function getOwnInfo() {
+    var id = 'getvCard'+jid2id(connection.jid);
+    var vCardiq = $iq({'to': Strophe.getBareJidFromJid(connection.jid),
+               'id': id,
+               'type': 'get'}
+       ).c('vCard', {'xmlns':NS_VCARD});
+    connection.addHandler(_cbOwnVCard, null, 'iq', 'result', id);
+    connection.send(vCardiq.tree());
+}
+
 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>');
@@ -188,6 +219,7 @@ function onConnect(status) {
 
     } else if (status == Strophe.Status.CONNECTED) {
        log('Strophe is connected.');
+       getOwnInfo();
        getRoster();
        connection.addHandler(_cbDisco, Strophe.NS.DISCO_INFO, 'iq', 'get');
     }
@@ -199,6 +231,7 @@ function showConnect() {
     var button = $('#connect').get(0); 
 
     $('#log').empty();
+    $('#ownInfo').empty();
     $('#vCard_container').empty();
     $('#friends').empty();
     $('label').show();