From f6f807205bf87e6544c280403050ad3c2a116e8a Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 3 Feb 2016 22:04:53 +0500 Subject: [PATCH] optimization of DMs list handling --- home.html | 29 +++++++++++------------ js/interface_common.js | 51 +++++++++++++++++++++++++++++++++++++++- js/mobile_abstract.js | 23 ++++++++---------- js/tmobile.js | 10 ++++---- js/twister_directmsg.js | 50 ++++++++++----------------------------- js/twister_formatpost.js | 26 -------------------- tmobile.html | 43 +++++++++++++++++++-------------- 7 files changed, 116 insertions(+), 116 deletions(-) diff --git a/home.html b/home.html index 24f4253..d3c21f7 100644 --- a/home.html +++ b/home.html @@ -457,23 +457,22 @@ -
-
    - -
+
+
    -
  1. -
    user-photo
    -
    - - @ - -
    - -

    -
    0
    -
    2. +
    +
  2. +
    user-photo
    +
    + + @ + +
    +

    +
    0
    +
    3. +
      diff --git a/js/interface_common.js b/js/interface_common.js index b9d149b..b134fb4 100644 --- a/js/interface_common.js +++ b/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 diff --git a/js/mobile_abstract.js b/js/mobile_abstract.js index 5e75d10..7ecba97 100644 --- a/js/mobile_abstract.js +++ b/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") ) { diff --git a/js/tmobile.js b/js/tmobile.js index c296a5c..450e53e 100644 --- a/js/tmobile.js +++ b/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 () { diff --git a/js/twister_directmsg.js b/js/twister_directmsg.js index 6e3bcc7..d3b5273 100644 --- a/js/twister_directmsg.js +++ b/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=' + diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 556a520..62559de 100644 --- a/js/twister_formatpost.js +++ b/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)) diff --git a/tmobile.html b/tmobile.html index 6c82856..e048ec7 100644 --- a/tmobile.html +++ b/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; +}
      @@ -589,8 +602,7 @@
      -
        -
      +
        @@ -607,8 +619,7 @@
        -
          -
        +
          @@ -812,19 +823,17 @@ user-photo - -
        • - - user-photo -

          - - @ - -

          - -

          - -
          • +
          +
        • +
          user-photo
          +
          + + @ + +
          +

          +
          • +