optimization of DMs list handling

home.html

@@ -457,23 +457,22 @@
     <!-- MODAL DE DIRECT MESSAGES INIT -->
     <!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo
     com a thread de mensagens individual -->
-    <div class="direct-messages-template">
-      <ol class="direct-messages-list">
-        <!-- use "dm-snippet-template here -->
-      </ol>
+    <div id="template-direct-messages-list">
+        <ol class="direct-messages-list"></ol>
     </div>
 
-    <li id="dm-snippet-template" class="module post message">
-      <div class="post-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
-      <div class="post-info">
-        <a href="#" class="post-info-name open-profile-modal"></a>
-        <span class="post-info-tag">@</span>
-        <a href="#" class="post-info-time" title=""><span></span></a>
-      </div>
-      <!-- o texto do post (restrição de caracteres?) -->
-      <p class="post-text"></p>
-        <div class="messages-qtd">0</div>
-    </li>
+    <div id="template-direct-messages-list-item">
+        <li class="module post message">
+            <div class="post-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
+            <div class="post-info">
+                <a class="post-info-name open-profile-modal"></a>
+                <span class="post-info-tag">@</span>
+                <a class="post-info-time"><span></span></a>
+            </div>
+            <p class="post-text"></p>
+            <div class="messages-qtd">0</div>
+        </li>
+    </div>
 
     <div class="messages-thread-template">
       <ol class="direct-messages-thread">

js/interface_common.js

@@ -674,6 +674,46 @@ function newConversationModal(peerAlias, resource) {
     return content;
 }
 
+function addToCommonDMsList(list, targetAlias, message) {
+    var item = twister.tmpl.commonDMsListItem.clone(true)
+        .attr('data-screen-name', targetAlias)
+        .attr('data-last_id', message.id)
+        .attr('data-time', message.time)
+    ;
+
+    item.find('.post-info-tag').text('@' + targetAlias);
+    item.find('.post-info-name').attr('href', $.MAL.userUrl(targetAlias));
+    item.find('.post-text').html(htmlFormatMsg(message.text).html);
+    item.find('.post-info-time')
+        .attr('title', timeSincePost(message.time))
+        .find('span:last')
+            .text(timeGmtToText(message.time))
+    ;
+    if (targetAlias[0] === '*') {
+        getAvatar(message.from, item.find('.post-photo img'));  // it's impossible yet to get group avatar
+        getGroupChatName(targetAlias, item.find('a.post-info-name'));
+    } else {
+        getAvatar(targetAlias, item.find('.post-photo img'));
+        getFullname(targetAlias, item.find('a.post-info-name'));
+    }
+
+    if (_newDMsPerUser[targetAlias] > 0)
+        item.addClass('new')
+            .find('.messages-qtd').text(_newDMsPerUser[targetAlias]).show();
+
+    var items = list.children();
+    for (var i = 0; i < items.length; i++) {
+        var elem = items.eq(i);
+        var time = elem.attr('data-time');
+        if (typeof time === 'undefined' || message.time > parseInt(time)) {
+            elem.before(item);
+            break;
+        }
+    }
+    if (i === items.length)  // equals to !item.parent().length
+        list.append(item);
+}
+
 function openConversationClick(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -775,7 +815,7 @@ function loadModalFromHash() {
             openConversationModal(splithashdata2[0], splithashdata2[1]);
         }
     } else if (hashstring === '#directmessages')
-        directMessagesPopup();
+        openCommonDMsModal();
     else if (hashstring === '#following')
         openFollowingModal();
     else if (hashstring === '#groupmessages')
@@ -1959,6 +1999,8 @@ function replaceDashboards() {
 }
 
 function initInterfaceCommon() {
+    twister.tmpl.commonDMsList = extractTemplate('#template-direct-messages-list');
+
     $('.modal-close, .modal-blackout').not('.prompt-close').on('click', closeModal);
 
     $('.minimize-modal').on('click', function (event) {
@@ -2148,6 +2190,13 @@ $(document).ready(function () {
     twister.html.blanka.appendTo('body').hide();
     twister.tmpl.followingList = extractTemplate('#template-following-list');
     twister.tmpl.followingUser = extractTemplate('#template-following-user');
+    twister.tmpl.commonDMsListItem = extractTemplate('#template-direct-messages-list-item')
+        .on('mouseup', function (event) {
+            event.data = {route:
+                $.MAL.dmchatUrl($(event.target).closest('.module').attr('data-screen-name'))};
+            routeOnClick(event);
+        })
+    ;
     twister.tmpl.postRtReference = extractTemplate('#template-post-rt-reference')
         .on('mouseup', {feeder: '.post-rt-reference'}, openConversationClick)
         .on('click', muteEvent)  // to prevent post expanding or collapsing

js/mobile_abstract.js

@@ -31,27 +31,24 @@ var MAL = function()
         }
     }
 
-    this.dmThreadListLoaded = function() {
-        if( $.hasOwnProperty("mobile") ) {
+    this.commonDMsListLoaded = function () {
+        if ($.hasOwnProperty('mobile')) {
             $.mobile.hidePageLoadingMsg();
-            var $dmThreadList = $("#directmsg ul.direct-messages-thread");
-            $dmThreadList.listview('refresh');
+            $('#directmsg .direct-messages-list').listview('refresh');
         } else {
         }
-    }
+    };
 
-    this.dmChatListLoaded = function(dmConvo) {
-        if( $.hasOwnProperty("mobile") ) {
+    this.dmConversationLoaded = function (dmConvo) {
+        if ($.hasOwnProperty('mobile')) {
             $.mobile.hidePageLoadingMsg();
-            var $dmChatList = $("#dmchat ul.direct-messages-list");
-            $dmChatList.listview('refresh');
-            $.mobile.silentScroll( $(".dm-form").offset().top );
+            $('#dmchat .direct-messages-thread').listview('refresh');
+            $.mobile.silentScroll($('.dm-form').offset().top);
         } else {
-            var modalContent = dmConvo.closest(".modal-content");
+            var modalContent = dmConvo.closest('.modal-content');
             modalContent.scrollTop(modalContent[0].scrollHeight);
         }
-    }
-
+    };
 
     this.relatedPostLoaded = function() {
         if( $.hasOwnProperty("mobile") ) {

js/tmobile.js

@@ -272,9 +272,8 @@ var router=new $.mobile.Router(
         directmsg: function(type,match,ui) {
             $.mobile.showPageLoadingMsg();
             initializeTwister( true, true, function() {
-                var $dmThreadList = $("#directmsg ul.direct-messages-thread");
                 $.mobile.showPageLoadingMsg();
-                requestDMsnippetList($dmThreadList);
+                requestDMsnippetList($('#directmsg .direct-messages-list'));
             });
         },
         dmchat: function(type,match,ui) {
@@ -282,7 +281,7 @@ var router=new $.mobile.Router(
             $.mobile.showPageLoadingMsg();
             initializeTwister( true, true, function() {
                 var user = params.user;
-                var dmConvo = $("#dmchat ul.direct-messages-list");
+                var dmConvo = $('#dmchat .direct-messages-thread');
                 $("#dmchat .rtitle").text("Chat @" + user);
                 $("#dmchat textarea").val("");
                 dmConvo.html("");
@@ -590,9 +589,8 @@ function tmobileTick() {
         requestQuery(tmobileQueryReq);
     }
 
-    if( curPage == "dmchat" ) {
-        requestDmConversation($("#dmchat ul.direct-messages-list"),dmChatUser);
-    }
+    if (curPage === 'dmchat')
+        requestDmConversation($('#dmchat .direct-messages-thread'), dmChatUser);
 }
 
 $(document).bind('mobileinit', function () {

js/twister_directmsg.js

@@ -5,7 +5,7 @@
 
 var _groupMsgInviteToGroupQueue = [];
 
-function requestDMsnippetList(dmThreadList, forGroup) {
+function requestDMsnippetList(elemList, forGroup) {
     var followList = [];
     for (var i = 0; i < followingUsers.length; i++)
         followList.push({username: followingUsers[i]});
@@ -13,40 +13,19 @@ function requestDMsnippetList(dmThreadList, forGroup) {
         followList.push({username: groupChatAliases[i]});
 
     twisterRpc('getdirectmsgs', [defaultScreenName, 1, followList],
-        function(req, ret) {processDMsnippet(ret, req.dmThreadList, req.forGroup);},
-            {dmThreadList: dmThreadList, forGroup: forGroup},
+        processDMsnippet, {elemList: elemList, forGroup: forGroup},
         function(req, ret) {console.log('ajax error:' + ret);}, null
     );
 }
 
-function processDMsnippet(dmUsers, dmThreadList, forGroup) {
-    dmThreadList.empty();
+function processDMsnippet(req, DMs) {
+    req.elemList.empty();
 
-    for (var u in dmUsers) {
-        if ((forGroup && u[0] !== '*') || (!forGroup && u[0] === '*'))
-            continue;
+    for (var alias in DMs)
+        if ((req.forGroup && alias[0] === '*') || (!req.forGroup && alias[0] !== '*'))
+            addToCommonDMsList(req.elemList, alias, DMs[alias][0]);
 
-        // convert snipped to html and add it to date-sorted list
-        var dmItem = dmDataToSnippetItem(dmUsers[u][0], u);
-        if (_newDMsPerUser[u] > 0) {
-            dmItem.addClass('new')
-                .find('.messages-qtd').text(_newDMsPerUser[u]).show();
-        }
-        var timeDmItem = parseInt(dmItem.attr('data-time'));
-        var existingItems = dmThreadList.children();
-        for (var j = 0; j < existingItems.length; j++) {
-            var streamItem = existingItems.eq(j);
-            var timeExisting = streamItem.attr('data-time');
-            if (typeof timeExisting === 'undefined' || timeDmItem > parseInt(timeExisting)) {
-                // this post in stream is older, so post must be inserted above
-                streamItem.before(dmItem);
-                break;
-            }
-        }
-        if (j === existingItems.length)
-            dmThreadList.append(dmItem);
-    }
-    $.MAL.dmThreadListLoaded();
+    $.MAL.commonDMsListLoaded();
 }
 
 function requestDmConversationModal(postboard, peerAlias) {
@@ -103,7 +82,7 @@ function processDmConversation(stream, peerAlias, posts) {
                 streamPostsIDs.push(lastPostID);
             }
         }
-        $.MAL.dmChatListLoaded(stream);
+        $.MAL.dmConversationLoaded(stream);
     }
 
     if (newPosts) {
@@ -183,7 +162,7 @@ function newDirectMsg(msg, peerAlias) {
 }
 
 // dispara o modal de direct messages
-function directMessagesPopup() {
+function openCommonDMsModal() {
     if (!defaultScreenName) {
       alert(polyglot.t('You have to log in to use direct messages.'));
       return;
@@ -191,7 +170,7 @@ function directMessagesPopup() {
 
     var modal = openModal({
         classAdd: 'directMessages',
-        content: $('.direct-messages-template').children().clone(true),
+        content: twister.tmpl.commonDMsList.clone(true),
         title: polyglot.t('Direct Messages')
     });
 
@@ -245,7 +224,7 @@ function openGroupMessagesModal(groupAlias) {
     if (typeof groupAlias === 'undefined') {
         var modal = openModal({
             classAdd: 'directMessages groupMessages',
-            content: $('.direct-messages-template').children().clone(true),
+            content: twister.tmpl.commonDMsList.clone(true),
             title: polyglot.t('Group Messages')
         });
 
@@ -496,11 +475,6 @@ function initInterfaceDirectMsg() {
     $('.groupmessages').attr('href', '#groupmessages');
     $('.userMenu-groupmessages a').attr('href', '#groupmessages');
 
-    $('#dm-snippet-template').on('click', function() {
-        var alias = $(this).attr('data-screen-name');
-        window.location.hash = '#directmessages?' + (alias[0] === '*' ? 'group' : 'user') + '=' + alias;
-    });
-
     $('.dm-submit').on('click', directMsgSubmit);
     $('.direct-messages-with-user').on('click', function() {
         window.location.hash = '#directmessages?user=' +

js/twister_formatpost.js

@@ -251,32 +251,6 @@ function setPostInfoSent(n, k, item) {
     }
 }
 
-// format dmdata (returned by getdirectmsgs) to display in "snippet" per user list
-function dmDataToSnippetItem(dmData, remoteUser) {
-    var dmItem = $("#dm-snippet-template").clone(true);
-    dmItem.removeAttr('id');
-    dmItem.attr('data-screen-name', remoteUser);
-    dmItem.attr("data-last_id", dmData.id);
-    dmItem.attr("data-time", dmData.time);
-
-    dmItem.find(".post-info-tag").text("@" + remoteUser);
-    dmItem.find("a.post-info-name").attr("href", $.MAL.userUrl(remoteUser));
-    dmItem.find("a.dm-chat-link").attr("href", $.MAL.dmchatUrl(remoteUser));
-    getAvatar( remoteUser, dmItem.find(".post-photo").find("img") );
-    if( remoteUser.length && remoteUser[0] === '*' )
-        getGroupChatName( remoteUser, dmItem.find("a.post-info-name") );
-    else
-        getFullname( remoteUser, dmItem.find("a.post-info-name") );
-    dmItem.find(".post-text").html(htmlFormatMsg(dmData.text).html);
-    dmItem.find('.post-info-time')
-        .attr('title', timeSincePost(dmData.time))
-        .find('span:last')
-            .text(timeGmtToText(dmData.time))
-    ;
-
-    return dmItem;
-}
-
 // format dmdata (returned by getdirectmsgs) to display in conversation thread
 function postToElemDM(dmData, localUser, remoteUser) {
     var senderAlias = (dmData.from && dmData.from.length && dmData.from.charCodeAt(0))

tmobile.html

@@ -131,6 +131,19 @@
     font-size: 9px;
     float: right;
 }
+
+.direct-messages-list .post-info {
+    position: absolute;
+    top: 4px;
+    left: 72px;
+    width: 90%;
+}
+
+.direct-messages-list .post-text {
+    position: absolute;
+    top: 32px;
+    left: 72px;
+}
 </style>
 
 <div id="index" data-role="page">
@@ -589,8 +602,7 @@
   </div>
 
   <div class="content" data-role="content">
-    <ul class="direct-messages-thread" data-role="listview">
-    </ul>
+    <ul class="direct-messages-list" data-role="listview"></ul>
   </div>
 
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
@@ -607,8 +619,7 @@
   </div>
 
   <div class="content" data-role="content">
-    <ul class="direct-messages-list" data-role="listview">
-    </ul>
+    <ul class="direct-messages-thread" data-role="listview"></ul>
 
     <div class="dm-form" style="padding:15px 20px 20px 20px;">
       <form class="post-area-new open">
@@ -812,19 +823,17 @@
        <img class="avatar size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
     </a>
 
-    <!-- template for dm-snippet (dm threads list)  -->
-    <li id="dm-snippet-template" class="module post message" data-icon="arrow-r">
-      <a class="dm-chat-link post-photo" href="#dmchat">
-        <img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
-        <h4 class="post-info">
-          <span class="post-info-name open-profile-modal"></span>
-          <span class="post-info-tag">@</span>
-          <a class="post-info-time ui-li-aside"><span></span></a>
-        </h4>
-        <!-- o texto do post (restrição de caracteres?) -->
-        <p class="post-text"></p>
-      </a>
-    </li>
+    <div id="template-direct-messages-list-item">
+        <li class="module post message" data-icon="arrow-r">
+            <div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
+            <div class="post-info">
+                <a class="post-info-name"></a>
+                <span class="post-info-tag">@</span>
+                <a class="post-info-time ui-li-aside"><span></span></a>
+            </div>
+            <p class="post-text"></p>
+        </li>
+    </div>
 
     <!-- template for each dm (chat window) -->
     <li id="dm-chat-template" class="module post message">