You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@esme.apache.org by dh...@apache.org on 2009/01/04 16:29:30 UTC

svn commit: r731272 - /incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html

Author: dhague
Date: Sun Jan  4 07:29:30 2009
New Revision: 731272

URL: http://svn.apache.org/viewvc?rev=731272&view=rev
Log:
Updated message.html with first cut of JavaScript comet message update code (only timeline so far, not public timeline or tags/words). Somewhat limited by the JSON data at this stage - e.g. only author ID is passed in JSON, not the author name. For now, this is a reasonable proof-of-concept for further building on.

Modified:
    incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html

Modified: incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html
URL: http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html?rev=731272&r1=731271&r2=731272&view=diff
==============================================================================
--- incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html (original)
+++ incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html Sun Jan  4 07:29:30 2009
@@ -36,6 +36,126 @@
 
                     <dd>
                       <lift:comet type="Timeline"/>
+                      <div class="b-list">
+                      <table id="timeline_messages">
+                        <thead>
+                          <tr>
+                              <th>Author</th>
+                              <th>Message</th>
+                              <th>Tags</th>
+                              <th>Source</th>
+                              <th>Date</th>
+                          </tr>
+                        </thead>
+<!-- msgArray is an array of objects of the form:
+  'conversation': 0, 'author': 1, 'replyto': 0, 'viagroup': 0, 'id': 1,
+  'text': '<message><body>Checking out the latest ESME</body>\u000a
+        <tags><tag name="Esme" id="1"></tag></tags></message>',
+  'source': 'web', 'when': 1230587914019}
+-->
+                        <script>
+                    // <![CDATA[
+                            function msgDateCompare(msg1, msg2)
+                            {
+                                return parseInt(msg1.when) - parseInt(msg2.when);
+                            }
+
+                            function displayMessages(msgArray, spanId)
+                            {
+                                // Select the first element in table id="timeline_messages"
+                                //  with id="message" as the message template
+                                if (msgTemplate == null) {
+//                                    var msgTemplate = jQuery('span.'+spanId+' message:first');
+                                    var msgTemplate = jQuery('table#timeline_messages #message:first');
+                                    var tagTemplate = msgTemplate.find('#tag:first');
+                                    var msgInsertPt = jQuery('table#timeline_messages #messages');
+
+                                    // Now we have the template, make the existing instances invisible
+                                    jQuery('table#timeline_messages *[id=message]').hide();
+                                }
+
+                                // Sort the messages into date order
+                                msgArray.sort(msgDateCompare);
+
+                                for (var msgIndex in msgArray)
+                                {
+                                    // Marshall the data from the Comet-supplied message
+                                    var cometMsg = msgArray[msgIndex];
+                                    var msgId = "message_"+cometMsg.id;
+
+                                    // Only do this if the message is not already in the table
+                                    if (jQuery('table#timeline_messages #'+msgId).size() == 0)
+                                    {
+                                        var msgAuthor = cometMsg.author;
+                                        var msgBody = jQuery(cometMsg.text).find('body').html();
+                                        var msgDateObj = new Date(parseInt(cometMsg.when));
+                                        var msgDateStr = msgDateObj.toLocaleDateString() +
+                                            ' ' + msgDateObj.toLocaleTimeString();
+                                        var msgSource = cometMsg.source;
+                                        var msgTags = jQuery(cometMsg.text).find('tag').get();
+                                        for (var tagIndex=0; tagIndex < msgTags.length; tagIndex++) {
+                                            // Replace each tag element with the plain tag text
+                                            msgTags[tagIndex] = jQuery(msgTags[tagIndex]).attr('name');
+                                        }
+
+                                        // Put the marshalled data into a copy of the template
+                                        var newMsg = msgTemplate.clone(true).attr('id',msgId);
+
+                                        newMsg.find('#author').text(msgAuthor);
+                                        newMsg.find('#body').html(msgBody);
+                                        newMsg.find('#source').text(msgSource);
+                                        newMsg.find('#when').text(msgDateStr);
+                                        for (var tagIndex=0; tagIndex < msgTags.length; tagIndex++) {
+//                                            alert('msgId: '+msgId+' msgTags['+tagIndex+'] = '+ msgTag);
+
+                                            var newTag = tagTemplate.clone(true).attr('id',msgTags[tagIndex]);
+                                            newTag.find('a')
+                                                .attr('href','tag/'+msgTags[tagIndex])
+                                                .text(msgTags[tagIndex]);
+                                            newTag.insertBefore(newMsg.find('#tag'));
+                                        }
+                                        // Remove any old tags from the template
+                                        newMsg.find('*[id=tag]').remove();
+
+                                        // Insert the updated copy of the message into the page
+                                        newMsg.prependTo(msgInsertPt).show();
+                                    }
+                                }
+                            }
+                    // ]]>
+                        </script>
+                        <tbody id="messages">
+                          <tr id="message">
+                              <td id="author">dhague</td>
+                              <td class="message">
+                                <div class="outer"><div class="inner clear">
+                                    <p class="text" id="body">This is a test message in the HTML for designers.</p>
+                                </div></div>
+                              </td>
+                              <td id="tags" class="tag">
+                                  <p id="tag"><a href="tag/tag1">tag1</a></p>
+                                  <p id="tag"><a href="tag/tag2">tag2</a></p>
+                              </td>
+                              <td id="source">web</td>
+                              <td id="when" class="date">Jan 1, 2009 12:00</td>
+                          </tr>
+                          <tr id="message">
+                              <td id="author">user2</td>
+                              <td class="message">
+                                <div class="outer"><div class="inner clear">
+                                    <p class="text" id="body">This is another test message in the HTML for designers.</p>
+                                </div></div>
+                              </td>
+                              <td id="tags" class="tag">
+                                  <p id="tag"><a href="tag/tag1">tag1</a></p>
+                                  <p id="tag"><a href="tag/tag3">tag3</a></p>
+                              </td>
+                              <td id="source">web</td>
+                              <td id="when" class="date">Jan 1, 2009 11:58</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      </div>
                     </dd>
                   </dl>