Revised contactlist gadget

Gruntfile.js

@@ -110,8 +110,6 @@ module.exports = function (grunt) {
             "<%= global_config.src %>/jabberclient/jabberclient.css",
           "<%= global_config.dest %>/jabberclient_connection/jabberclient_connection.css":
             "<%= global_config.src %>/jabberclient_connection/jabberclient_connection.css",
-          "<%= global_config.dest %>/jabberclient_contactlist/jabberclient_contactlist.css":
-            "<%= global_config.src %>/jabberclient_contactlist/jabberclient_contactlist.css",
           "<%= global_config.dest %>/jabberclient_chatbox/jabberclient_chatbox.css":
             "<%= global_config.src %>/jabberclient_chatbox/jabberclient_chatbox.css"
         }

src/jabberclient/jabberclient.js

@@ -108,32 +108,15 @@
         .push(this.pleaseRedirectMyHash.bind(this));
     })
 
-    .declareMethod('getConnectionJID', function () {
+    .allowPublicAcquisition('getConnectionJID', function () {
       return this.getDeclaredGadget('connection')
         .push(function (connection_gadget) {
           return connection_gadget.getConnectionJID();
         });
     })
 
-    .allowPublicAcquisition('getConnectionJID', function () {
-      return this.getConnectionJid();
-    })
-
-    .allowPublicAcquisition('getJID', function () {
-      return this.login_gadget.getJID();
-    })
-
-    .allowPublicAcquisition('openChat', function (jid) {
-      var gadget = this;
-      return gadget.getConnectionJID()
-        .push(function (connection_jid) {
-          return gadget.aq_pleasePublishMyState({
-            page: 'chatbox',
-            current_contact_jid: jid[0],
-            jid: connection_jid
-          });
-        })
-        .push(this.pleaseRedirectMyHash.bind(this));
+    .allowPublicAcquisition('getHash', function (options) {
+      return this.aq_pleasePublishMyState(options[0]);
     })
 
     .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")

src/jabberclient_chatbox/jabberclient_chatbox.js

@@ -75,12 +75,22 @@
     })
 
     .declareMethod('render', function (options) {
-      var gadget = this;
+      var gadget = this,
+        messages;
       this.props.jid = options.jid;
       this.props.current_contact_jid = options.current_contact_jid;
       $('[data-role="page"]').height("100%");
       $('.gadget-container').height("93%");
 
+      $(gadget.__element).find(".talk-box").html("");
+
+      if (this.props.talks[this.props.current_contact_jid]) {
+        messages = this.props.talks[this.props.current_contact_jid].messages;
+        messages.forEach(function (message) {
+          displayMessage(message);
+        });
+      }
+
       $(this.__element).find(".send-button").click(function (e) {
         e.preventDefault();
         sendInput(gadget);

src/jabberclient_contactlist/index.html

@@ -5,7 +5,6 @@
     <title>Jabber client</title>
 
     <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
-    <link rel="stylesheet" href="jabberclient_contactlist.css">
 
     <script src="../<%= curl.jquery.relative_dest %>"></script>
     <script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
@@ -18,23 +17,29 @@
 
     <script class="offline-contact-template" type="text/x-handlebars-template">
       <li>
-        <img src="../jabberclient_contactlist/images/offline.png">
-        <h2>{{name}}&nbsp&nbsp{{jid}}</h2>
+        <img src="../jabberclient_contactlist/images/offline.png"
+             alt="offline"
+             class="ui-li-icon ui-corner-none">
+        {{name}}&nbsp&nbsp{{jid}}
       </li>
     </script>
 
     <script class="online-contact-template" type="text/x-handlebars-template">
-      <li>
-        <img src="../jabberclient_contactlist/images/online.png">
-        <h2>{{name}}&nbsp&nbsp{{jid}}</h2>
-      </li>
+      <li><a href="{{hash}}">
+        <img src="../jabberclient_contactlist/images/online.png"
+             alt="online"
+             class="ui-li-icon ui-corner-none">
+        {{name}}&nbsp&nbsp{{jid}}
+      </a></li>
     </script>
 
     <script class="status-contact-template" type="text/x-handlebars-template">
-      <li>
-        <img src="../jabberclient_contactlist/images/status.png">
-        <h2>{{name}}&nbsp&nbsp{{jid}}&nbsp&nbsp({{status}})</h2>
-      </li>
+      <li><a href="{{hash}}">
+        <img src="../jabberclient_contactlist/images/status.png"
+             alt="{{status}}"
+             class="ui-li-icon ui-corner-none">
+        {{name}}&nbsp&nbsp{{jid}}&nbsp&nbsp({{status}})
+      </a></li>
     </script>
 
   </head>

src/jabberclient_contactlist/jabberclient_contactlist.css

-#contact-list img {
-    float: left;
-    margin-right: 5px;
-}
-#contact-list li {
-    min-height: 0.625em;
-    padding-left: 3.25em;
-}
-
-#contact-list li > * {
-    cursor: pointer;
-}
-
-#contact-list h2 {
-    margin: -0.6em 0;
-    margin-top: -0.3em;
-}
\ No newline at end of file

src/jabberclient_contactlist/jabberclient_contactlist.js

-/*global window, rJS, Strophe, $, DOMParser,
+/*global window, rJS, Strophe, $, DOMParser, RSVP,
   XMLSerializer, Handlebars, $iq, $pres*/
 /*jslint nomen: true*/
 
@@ -25,7 +25,6 @@
   function updateContactElement(gadget, contact) {
     var template,
       options = {};
-
     if (contact.el) { contact.el.remove(); }
     if (contact.offline) {
       template = offline_contact_template;
@@ -37,10 +36,18 @@
     }
     options.jid = contact.jid;
     options.name = contact.name;
-    contact.el = $(template(options));
-    contact.el.click(function () {
-      gadget.openChat(contact.jid);
-    });
+    return gadget.getConnectionJID()
+      .push(function (connection_jid) {
+        return gadget.getHash({
+          page: "chatbox",
+          current_contact_jid: contact.jid,
+          jid: connection_jid
+        });
+      })
+      .push(function (hash) {
+        options.hash = hash;
+        contact.el = $(template(options));
+      });
   }
 
   function updateContact(gadget, contact, presence) {
@@ -54,37 +61,49 @@
         contact.status = show.text();
       }
     }
-    updateContactElement(gadget, contact);
+    return updateContactElement(gadget, contact);
   }
 
-  function Contact(gadget, jid, options) {
-    this.jid = jid;
-    this.offline = true;
-    this.status = null;
+  function createContact(gadget, jid, options) {
+    gadget.contactList.list[jid] = {};
+    gadget.contactList.list[jid].jid = jid;
+    gadget.contactList.list[jid].offline = true;
+    gadget.contactList.list[jid].status = null;
     if (typeof options === 'object') {
-      $.extend(this, options);
+      $.extend(gadget.contactList.list[jid], options);
     }
-    updateContactElement(gadget, this);
+    return updateContactElement(gadget, gadget.contactList.list[jid]);
   }
 
   function ContactList(gadget, rosterIq) {
     var that = this,
       contactItems = rosterIq.childNodes[0].childNodes,
-      jid,
-      options;
+      queue = new RSVP.Queue();
     this.list = {};
     this.el = $('#contact-list ul');
+    //that.el.listview();
+    this.el.hide();
     [].forEach.call(contactItems, function (item) {
-      jid = $(item).attr('jid');
-      options = {};
-      [].forEach.call(item.attributes, function (attr) {
-        options[attr.name] = attr.value;
-      });
-      that.list[jid] = new Contact(gadget, jid, options);
-      that.el.append(that.list[jid].el);
+      queue
+        .push(function () {
+          var options = {},
+            jid = $(item).attr('jid');
+          [].forEach.call(item.attributes, function (attr) {
+            options[attr.name] = attr.value;
+          });
+          return createContact(gadget, jid, options);
+        })
+        .push(function () {
+          var jid = $(item).attr('jid');
+          that.el.append(that.list[jid].el);
+        });
     });
-    this.el.listview();
-    gadget.send($pres().toString());
+    queue
+      .push(function () {
+        that.el.listview();
+        that.el.show();
+        gadget.send($pres().toString());
+      });
   }
 
   function updateContactList(gadget, presence) {
@@ -92,19 +111,26 @@
       contact = gadget.contactList.list[jid];
 
     if (contact) {
-      updateContact(gadget, contact, presence);
-      if (contact.offline) {
-        gadget.contactList.el.append(contact.el);
-      } else {
-        gadget.contactList.el.prepend(contact.el);
-      }
-      gadget.contactList.el.listview('refresh');
+      return updateContact(gadget, contact, presence)
+        .push(function () {
+          if (contact.offline) {
+            gadget.contactList.el.append(contact.el);
+          } else {
+            gadget.contactList.el.prepend(contact.el);
+          }
+          gadget.contactList.el.listview('refresh');
+        });
     }
   }
 
   gadget
 
+    .declareAcquiredMethod('getHash', 'getHash')
+
+    .declareAcquiredMethod("getConnectionJID", "getConnectionJID")
+
     .declareAcquiredMethod('send', 'send')
+
     .declareAcquiredMethod('openChat', 'openChat')
 
     .declareMethod('receiveRoster', function (roster) {
@@ -112,7 +138,7 @@
     })
 
     .declareMethod('receivePresence', function (presence) {
-      updateContactList(this, parseXML(presence));
+      return updateContactList(this, parseXML(presence));
     });
 
 }($, Strophe, rJS(window)));