Merge pull request #294 from slr/tasty-retwists

retwist with comment

css/style.css

@@ -1074,14 +1074,16 @@ ol.toptrends-list {
     font-size: 13px;
     top: 40px;
 }
-.post-retransmited-icon
-{
+
+.post-retransmited-icon {
     display: inline-block;
     width: 16px;
     height: 16px;
     background: url(../img/repost.png) no-repeat left center;
     vertical-align: middle;
+    margin: 2px;
 }
+
 .post-interactions
 {
     margin: 2px 10px 10px 60px;
@@ -1253,6 +1255,7 @@ ol.toptrends-list {
     border-left: solid 3px #E34F42;
     margin-left: 2px;
 }
+
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/
@@ -1736,7 +1739,7 @@ ol.toptrends-list {
 **************************************/
 
 .reTwist.prompt-wrapper {
-    margin-top: -100px;
+    margin-top: -140px;
 }
 
 .reTwist .post-expand,
@@ -1750,6 +1753,10 @@ ol.toptrends-list {
     min-height: 68px;
 }
 
+.reTwist .post-area-extras {
+    margin-right: 10px;
+}
+
 /*************************************
 ********* REPLY POSTS PROMPT *********
 **************************************/
@@ -2085,3 +2092,38 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
     text-decoration: none;
     cursor: pointer;
 }
+
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 11px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 11px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #000;
+}

following.html

@@ -222,11 +222,7 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
-            <div class="post-context" style="display: none;">
-                <i class="post-retransmited-icon"></i>
-                <span>twisted again by</span>
-                <a class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
+            <div class="post-context" style="display: none;"></div>
             <span class="post-expand">Expand</span>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <div class="post-interactions">
@@ -261,6 +257,25 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" 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>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span>twisted again by</span><span> </span>
+        <a class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
+
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>
     <!-- template for user links in message (open profile modal) -->

home.html

@@ -314,11 +314,7 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
-            <div class="post-context" style="display: none;">
-                <i class="post-retransmited-icon"></i>
-                <span>twisted again by</span>
-                <a class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
+            <div class="post-context" style="display: none;"></div>
             <span class="post-expand">Expand</span>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <div class="post-interactions">
@@ -353,6 +349,25 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" 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>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span>twisted again by</span><span> </span>
+        <a class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
+
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>
     <!-- template for user links in message (open profile modal) -->

js/interface_common.js

@@ -293,7 +293,7 @@ function openConversationClick(e) {
     e.stopPropagation();
     e.preventDefault();
 
-    var postData = $(this).parents('.module.post.original.open .module.post.original .post-data');
+    var postData = $(this).closest(e.data.feeder);
 
     window.location.hash = '#conversation?post=' + postData.attr('data-screen-name') +
         ':post' + postData.attr('data-id');
@@ -379,13 +379,25 @@ function reTwistPopup(e) {
         return;
     }
 
-    openModal({
+    var modal = openModal({
         classBase: '.prompt-wrapper',
         classAdd: 'reTwist',
         title: polyglot.t('retransmit_this')
-    })
-        .content
-            .append(postToElem($.evalJSON($(this).parents('.post-data').attr('data-userpost')), ''));
+    });
+
+    modal.content
+        .append(postToElem($.evalJSON($(this).parents('.post-data').attr('data-userpost')), ''))
+        .append($('#reply-modal-template').children().clone(true))  // FIXME retwist-reply-modal-template
+    ;
+
+    var replyArea = modal.content.find('.post-area .post-area-new');
+    var textArea = replyArea.find('textarea');
+    var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
+    $.each(['placeholder', 'data-reply-to'], function(i, attribute) {
+        textArea.attr(attribute, textAreaPostInline.attr(attribute));
+    });
+
+    replyArea.find('.post-submit').addClass('with-reference');
 }
 
 // Expande Área do Novo post
@@ -399,16 +411,16 @@ function replyInitPopup(e, post) {
     getFullname(post.userpost.n, modal.self.find('h3 .fullname'));
 
     modal.content
-        .append($('#reply-modal-template').children().clone(true))
         .append(postToElem(post, ''))
+        .append($('#reply-modal-template').children().clone(true))
     ;
 
     // FIXME passing data through attributes may result in a mess like following
     var replyArea = modal.content.find('.post-area .post-area-new').addClass('open');
-    var replyText = replyArea.find('textarea');
-    var postInlineReplyText = modal.content.find('.post .post-area-new textarea');
+    var textArea = replyArea.find('textarea');
+    var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
     $.each(['placeholder', 'data-reply-to'], function(i, attribute) {
-        replyText.attr(attribute, postInlineReplyText.attr(attribute));
+        textArea.attr(attribute, textAreaPostInline.attr(attribute));
     });
 
     composeNewPost(e, replyArea);
@@ -587,7 +599,7 @@ function posPostPreview(event) {
             - postPreview.css('padding-left') - postPreview.css('padding-right'));
     }
     if (textArea[0].value.length)
-        postPreview.html(htmlFormatMsg(textArea[0].value, [])).show();
+        postPreview.html(htmlFormatMsg(textArea[0].value).html).show();
     else
         postPreview.hide();
     textArea.before(postPreview);
@@ -698,7 +710,7 @@ function replyTextInput(event) {
 
         if ($.Options.postPreview.val) {
             if (textArea[0].value.length)
-                textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])).show();
+                textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value).html).show();
             else
                 textAreaForm.find('#post-preview').html('').hide();
         }
@@ -1202,82 +1214,95 @@ function undoLastUnicode(e) {
 }
 
 function postSubmit(e, oldLastPostId) {
+    var btnPostSubmit;
+
     if (e instanceof $) {
-        var $this = e;
+        btnPostSubmit = e;
         //check if previous part was sent...
         if (oldLastPostId === lastPostId) {
-            setTimeout(postSubmit, 1000, $this, oldLastPostId);
+            setTimeout(postSubmit, 1000, btnPostSubmit, oldLastPostId);
             return;
         }
     } else {
         e.stopPropagation();
         e.preventDefault();
-        var $this = $(this);
+        btnPostSubmit = $(this);
     }
-    $.MAL.disableButton($this);
+    $.MAL.disableButton(btnPostSubmit);
 
-    var $replyText = $this.closest('.post-area-new').find('textarea');
+    var textArea = btnPostSubmit.closest('.post-area-new').find('textarea');
 
-    $replyText.siblings('#post-preview').hide();
+    textArea.siblings('#post-preview').hide();
 
-    var $postOrig = $this.closest('.post-data');
-    if (!$postOrig.length) {
-        $postOrig = $this.closest('.modal-content').find('.post-data');
+    var postData = btnPostSubmit.closest('.post-data');
+    if (!postData.length) {
+        postData = btnPostSubmit.closest('.modal-content').find('.post-data');
     }
 
-    if (splitedPostsCount > 1) {
-        if ($replyText.length < splitedPostsCount) {
-            //current part will be sent as reply to the previous part...
-            $postOrig = $('<div data-id="' + lastPostId + '" data-screen-name="' + defaultScreenName + '"></div>');
+    if (btnPostSubmit.hasClass('with-reference')) {
+        var doSubmitPost = function (postText, postData) {
+            newRtMsg(postData, postText);
+        }
+    } else {
+        if (splitedPostsCount > 1) {
+            if (textArea.length < splitedPostsCount) {
+                //current part will be sent as reply to the previous part...
+                postData = $('<div data-id="' + lastPostId + '" data-screen-name="' + defaultScreenName + '"></div>');
+            }
+        }
+
+        var doSubmitPost = function (postText, postData) {
+            newPostMsg(postText, postData);
         }
     }
 
-    if ($replyText.length <= 1) {
+    if (textArea.length <= 1) {
         if (splitedPostsCount > 1) {
-            var postxt = '';
-            var reply_to = $replyText.attr('data-reply-to');
-            var val = $replyText.val();
+            var postText = '';
+            var reply_to = textArea.attr('data-reply-to');
+            var val = textArea.val();
             if (typeof reply_to === 'undefined' || checkPostForMentions(val, reply_to, 140))
-                postxt = val + ' (' + splitedPostsCount.toString() + '/' + splitedPostsCount.toString() + ')';
+                postText = val + ' (' + splitedPostsCount.toString() + '/' + splitedPostsCount.toString() + ')';
             else
-                postxt = reply_to + val + ' (' + splitedPostsCount.toString() + '/' + splitedPostsCount.toString() + ')';
+                postText = reply_to + val + ' (' + splitedPostsCount.toString() + '/' + splitedPostsCount.toString() + ')';
 
-            newPostMsg(postxt, $postOrig);
+            doSubmitPost(postText, postData);
         } else
-            newPostMsg($replyText.val(), $postOrig);
+            doSubmitPost(textArea.val(), postData);
 
         splitedPostsCount = 1;
     } else {
-        var postxt = '';
-        var reply_to = $replyText.attr('data-reply-to');
-        var val = $replyText[0].value;
+        var postText = '';
+        var reply_to = textArea.attr('data-reply-to');
+        var val = textArea[0].value;
         if (typeof reply_to === 'undefined' || checkPostForMentions(val, reply_to, 140))
-            postxt = val + ' (' + (splitedPostsCount - $replyText.length + 1).toString() + '/' + splitedPostsCount.toString() + ')';
+            postText = val + ' (' + (splitedPostsCount - textArea.length + 1).toString() + '/' + splitedPostsCount.toString() + ')';
         else
-            postxt = reply_to + val + ' (' + (splitedPostsCount - $replyText.length + 1).toString() + '/' + splitedPostsCount.toString() + ')';
+            postText = reply_to + val + ' (' + (splitedPostsCount - textArea.length + 1).toString() + '/' + splitedPostsCount.toString() + ')';
 
-        $($replyText[0]).remove();
+        $(textArea[0]).remove();
 
         oldLastPostId = lastPostId;
-        newPostMsg(postxt, $postOrig);
-        setTimeout(postSubmit, 1000, $this, oldLastPostId);
+        doSubmitPost(postText, postData);
+        setTimeout(postSubmit, 1000, btnPostSubmit, oldLastPostId);
 
         return;
     }
 
-    $replyText.val('').attr('placeholder', polyglot.t('Your message was sent!'));
-    var tweetForm = $this.parents('form');
-    var remainingCount = tweetForm.find('.post-area-remaining');
-    remainingCount.text(140);
-
-    if ($this.parents('.prompt-wrapper').length)
+    if (btnPostSubmit.parents('.prompt-wrapper').length)
         closeModalHandler('.prompt-wrapper');
-
-    if ($this.closest('.post-area,.post-reply-content')) {
-        $('.post-area-new').removeClass('open').find('textarea').blur();
-    };
-    $replyText.data('unicodeConversionStack', []);
-    $replyText.data('disabledUnicodeRules', []);
+    else {
+        textArea.val('').attr('placeholder', polyglot.t('Your message was sent!'));
+        var tweetForm = btnPostSubmit.parents('form');
+        var remainingCount = tweetForm.find('.post-area-remaining');
+        remainingCount.text(140);
+
+        if (btnPostSubmit.closest('.post-area,.post-reply-content')) {
+            $('.post-area-new').removeClass('open').find('textarea').blur();
+        };
+        textArea.data('unicodeConversionStack', []);
+        textArea.data('disabledUnicodeRules', []);
+    }
 }
 
 function retweetSubmit(e) {
@@ -1402,7 +1427,8 @@ function initInterfaceCommon() {
     ;
     $('.post-submit').on('click', postSubmit);
     $('.modal-propagate').on('click', retweetSubmit);
-    $('.expanded-content .show-more').on('click', openConversationClick);
+    $('.expanded-content .show-more').on('click',
+        {feeder: '.module.post.original.open .module.post.original .post-data'}, openConversationClick);
 
     if ($.Options.unicodeConversion.val === 'disable')
         $('.undo-unicode').on('click', undoLastUnicode).css('display', 'none');

js/options.js

@@ -373,7 +373,7 @@ function tickOptionsPostPreview() {
     var imgPreviewCont = elem.find('.preview-container');
 
     elem.children().first().html(htmlFormatMsg(
-        polyglot.t('post_preview_dummy', {logo: '/img/twister_mini.png', site: 'http://twister.net.co'}), []));
+        polyglot.t('post_preview_dummy', {logo: '/img/twister_mini.png', site: 'http://twister.net.co'})).html);
 
     if ($.Options.displayPreview.val === 'enable') {
         imgPreviewCont.empty();

js/tmobile.js

@@ -488,6 +488,15 @@ function handleAvatarFileSelectMobile(evt) {
     }
 }
 
+function openConversationClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    var userpost = $(event.target).closest(event.data.feeder).attr('data-userpost');
+
+    $.mobile.showPageLoadingMsg();
+    $.mobile.navigate('#post?userpost=' + encodeURIComponent(userpost));
+}
 
 
 function clearProfilePage() {

js/twister_actions.js

@@ -263,30 +263,60 @@ function newPostMsg(msg, $postOrig) {
     }
 }
 
-function newRtMsg($postOrig) {
-    var content_to_rt = $postOrig.attr('data-content_to_rt');
-    var content_to_sigrt = $postOrig.attr('data-content_to_sigrt');
+function newRtMsg(postData, msg) {
+    var userpost = $.evalJSON(postData.attr('data-content_to_rt'));
+    var sig_userpost;
+
+    if (userpost.rt) {
+        if (parseInt(twisterVersion) <= 93000) {
+            alert(polyglot.t('error',
+                {error: 'can\'t handle retwisting of commented retwisted twists with daemon version '
+                    + twisterDisplayVersion + ' and below of that. please upgrade it.'}
+            ));
+
+            return;
+        } else {
+            // dropping of rt to avoid overquoting
+            sig_userpost = userpost.sig_wort;
+            userpost.rt = undefined;
+            userpost.sig_rt = undefined;
+        }
+    } else {
+        sig_userpost = postData.attr('data-content_to_sigrt');
+    }
 
-    var sig_userpost = String(content_to_sigrt);
-    var userpost = $.evalJSON(String(content_to_rt));
-    var rtObj = { sig_userpost :sig_userpost, userpost : userpost };
+    if (typeof sig_userpost === 'undefined') {
+        alert(polyglot.t('error',
+            {error: 'can\'t sig_userpost is not deifned'}
+        ));
 
-    if( lastPostId != undefined ) {
-        if ( typeof _sendedPostIDs !== 'undefined' )
+        return;
+    }
+
+    userpost.sig_wort = undefined;
+
+    var rtObj = {sig_userpost: sig_userpost, userpost: userpost};
+
+    if (typeof lastPostId !== 'undefined') {
+        if (typeof _sendedPostIDs !== 'undefined')
             _sendedPostIDs.push(lastPostId + 1);
 
-        var params = [defaultScreenName, lastPostId+1, rtObj]
+        var params = [defaultScreenName, lastPostId + 1, rtObj];
 
-        twisterRpc("newrtmsg", params,
-                   function(arg, ret) { incLastPostId(); }, null,
-                   function(arg, ret) { var msg = ("message" in ret) ? ret.message : ret;
-                                        alert(polyglot.t("ajax_error", { error: msg })); }, null);
+        if (typeof msg !== 'undefined')
+            params.push(msg);
+
+        twisterRpc('newrtmsg', params,
+            function(arg, ret) {incLastPostId();}, null,
+            function(arg, ret) {var msg = ('message' in ret) ? ret.message : ret;
+                alert(polyglot.t('ajax_error', {error: msg}));
+            }, null
+        );
     } else {
-        alert(polyglot.t("Internal error: lastPostId unknown (following yourself may fix!)"));
+        alert(polyglot.t('Internal error: lastPostId unknown (following yourself may fix!)'));
     }
 }
 
-
 function updateProfileData(profileModalContent, username) {
 
     //profileModalContent.find("a").attr("href",$.MAL.userUrl(username));

js/twister_formatpost.js

@@ -3,12 +3,18 @@
 //
 // Format JSON posts and DMs to HTML.
 
+var _templatePostRtReference
+var _templatePostRtBy
 var _htmlFormatMsgLinkTemplateExternal;
 var _htmlFormatMsgLinkTemplateUser;
 var _htmlFormatMsgLinkTemplateHashtag;
 
 $(document).ready(function() {
     // we're setting it here for perfomance improvement purpose  // to not search and prepare it for for every post every time
+    _templatePostRtReference = $('#post-rt-reference-template').children().clone(true);
+    _templatePostRtReference.find('.post-text')
+        .on('click', {feeder: '.post-rt-reference'}, openConversationClick);
+    _templatePostRtBy = $('#post-retransmited-by-template').children().clone(true);
     _htmlFormatMsgLinkTemplateExternal = $('#external-page-link-template')
     if (_htmlFormatMsgLinkTemplateExternal.length) {
         _htmlFormatMsgLinkTemplateExternal = _htmlFormatMsgLinkTemplateExternal[0].cloneNode();
@@ -28,7 +34,19 @@ $(document).ready(function() {
 
 // format "userpost" to html element
 // kind = "original"/"ancestor"/"descendant"
-function postToElem( post, kind, promoted ) {
+function postToElem(post, kind, promoted) {
+
+    function setPostCommon(elem, username, time) {
+        var postInfoName = elem.find('.post-info-name')
+            .text(username).attr('href', $.MAL.userUrl(username));
+
+        getFullname(username, postInfoName);
+        //elem.find('.post-info-tag').text("@" + username);  // FIXME
+        getAvatar(username, elem.find('.avatar'));
+
+        elem.find('.post-info-time').text(timeGmtToText(time)).attr('title', timeSincePost(time));
+    }
+
     /*
     "userpost" :
     {
@@ -50,115 +68,153 @@ function postToElem( post, kind, promoted ) {
     "sig_userpost" : signature by userpost.n
     */
 
+    var username, k, time, msg, rt, content_to_rt, content_to_sigrt, retweeted_by;
+
     // Obtain data from userpost
-    var postJson = $.toJSON(post);
-    var userpost = post["userpost"];
-    if( "rt" in userpost ) {
-        var rt = userpost["rt"];
-        var n = rt["n"];
-        var k = rt["k"];
-        var t = rt["time"];
-        var msg = rt["msg"];
-        var content_to_rt = $.toJSON(rt);
-        var content_to_sigrt = userpost["sig_rt"];
-        var retweeted_by = userpost["n"];
+    var userpost = post.userpost;
+
+    if (post.sig_wort)
+        userpost.sig_wort = post.sig_wort;
+
+    if (userpost.rt) {
+        rt = userpost.rt;
+        if (userpost.msg) {
+            username = userpost.n;
+            k = userpost.k;
+            time = userpost.time;
+            msg = userpost.msg;
+            content_to_rt = $.toJSON(userpost);
+            content_to_sigrt = post.sig_userpost;
+        } else {
+            username = rt.n;
+            k = rt.k;
+            time = rt.time;
+            msg = rt.msg;
+            content_to_rt = $.toJSON(rt);
+            content_to_sigrt = userpost.sig_rt;
+        }
+        retweeted_by = userpost.n;
     } else {
-        var n = userpost["n"];
-        var k = userpost["k"];
-        var t = userpost["time"];
-        var msg = userpost["msg"]
-        var content_to_rt = $.toJSON(userpost);
-        var content_to_sigrt = post["sig_userpost"];
-        var retweeted_by = undefined;
+        username = userpost.n;
+        k = userpost.k;
+        time = userpost.time;
+        msg = userpost.msg;
+        content_to_rt = $.toJSON(userpost);
+        content_to_sigrt = post.sig_userpost;
     }
 
     // Now create the html elements
     var elem = $.MAL.getPostTemplate().clone(true);
     elem.removeAttr('id')
         .addClass(kind)
-        .attr('data-time', t)
+        .attr('data-time', time)
     ;
 
-    if( post['isNew'] )
+    if (post.isNew)
         elem.addClass('new');
 
     var postData = elem.find('.post-data');
     postData.addClass(kind)
-        .attr('data-userpost', postJson)
+        .attr('data-userpost', $.toJSON(post))
         .attr('data-content_to_rt', content_to_rt)
         .attr('data-content_to_sigrt', content_to_sigrt)
-        .attr('data-screen-name', n)
+        .attr('data-screen-name', username)
         .attr('data-id', k)
-        .attr('data-lastk', userpost["lastk"])
+        .attr('data-lastk', userpost.lastk)
         .attr('data-text', msg)
     ;
-    if( 'reply' in userpost ) {
+    if (userpost.reply) {
         postData.attr('data-replied-to-screen-name', userpost.reply.n)
             .attr('data-replied-to-id', userpost.reply.k)
             .find('.post-expand').text(polyglot.t('Show conversation'))
         ;
-    } else if ( 'rt' in userpost && 'reply' in userpost.rt ) {
+    } else if (userpost.rt && userpost.rt.reply) {
         postData.attr('data-replied-to-screen-name', userpost.rt.reply.n)
             .attr('data-replied-to-id', userpost.rt.reply.k)
             .find('.post-expand').text(polyglot.t('Show conversation'))
         ;
     }
 
-    var postInfoName = elem.find('.post-info-name');
-    postInfoName.text(n).attr('href', $.MAL.userUrl(n));
-    getFullname( n, postInfoName );
-    //elem.find('.post-info-tag').text("@" + n);
-    getAvatar( n, elem.find('.avatar') );
-    elem.find('.post-info-time').text(timeGmtToText(t)).attr('title', timeSincePost(t));
+    setPostCommon(elem, username, time);
 
-    var mentions = [];
-    elem.find('.post-text').html(htmlFormatMsg(msg, mentions));
-    postData.attr('data-text-mentions', mentions);
-
-    var replyTo = '';
-    if( n !== defaultScreenName )
-        replyTo += '@' + n + ' ';
-    for (var i = 0; i < mentions.length; i++) {
-        if (mentions[i] !== n && mentions[i] !== defaultScreenName)
-            replyTo += '@' + mentions[i] + ' ';
+    msg = htmlFormatMsg(msg);
+    elem.find('.post-text').html(msg.html);
+    postData.attr('data-text-mentions', msg.mentions.join());  // FIXME no idea why do we need this attribute since we don't use it but use data-reply-to instead
+
+    if (username !== defaultScreenName) {
+        if (msg.mentions.indexOf(username) === -1)
+            msg.mentions.splice(0, 0, username);
     }
+    for (var i = msg.mentions.indexOf(defaultScreenName); i !== -1; i = msg.mentions.indexOf(defaultScreenName))
+        msg.mentions.splice(i, 1);
+
+    if (msg.mentions.length)
+        var replyTo = '@' + msg.mentions.join(' @') + ' ';
+    else
+        var replyTo = '';
 
     var postTextArea = elem.find('.post-area-new textarea');
     postTextArea.attr('data-reply-to', replyTo);
+
     if (!defaultScreenName)
         postTextArea.attr('placeholder', polyglot.t('You have to log in to post replies.'));
     else
-        postTextArea.attr('placeholder', polyglot.t('reply_to', { fullname: replyTo })+ '...');
+        postTextArea.attr('placeholder', polyglot.t('reply_to', {fullname: replyTo})+ '...');
 
     postData.attr('data-reply-to', replyTo);
 
-    if( retweeted_by != undefined ) {
-        elem.find('.post-context').show();
-        elem.find('.post-retransmited-by')
-            .attr('href', $.MAL.userUrl(retweeted_by))
-            .text('@' + retweeted_by)
-        ;
+    if (typeof retweeted_by !== 'undefined') {
+        var postContext = elem.find('.post-context');
+        if (userpost.msg) {
+            postContext.append(_templatePostRtReference.clone(true))
+                .find('.post-rt-reference')
+                    .attr('data-screen-name', rt.n)
+                    .attr('data-id', rt.k)
+                    .attr('data-userpost', $.toJSON({userpost: rt, sig_userpost: userpost.sig_rt}))
+                    .find('.post-text').html(htmlFormatMsg(rt.msg).html)
+            ;
+            setPostCommon(postContext, rt.n, rt.time);
+        } else {
+            postContext.append(_templatePostRtBy.clone(true))
+                .find('.post-retransmited-by')
+                    .attr('href', $.MAL.userUrl(retweeted_by)).text('@' + retweeted_by)
+            ;
+        }
+        postContext.show();
     }
 
-    if (typeof(promoted) !== 'undefined' && promoted) {
+    if (typeof promoted !== 'undefined' && promoted) {
         elem.find('.post-propagate').remove();
         postData.attr('data-promoted', 1);
-        postData.attr('data-screen-name', '!' + n);
+        postData.attr('data-screen-name', '!' + username);
     } else {
-        setPostInfoSent(userpost["n"], userpost["k"], elem.find('.post-info-sent'));
+        setPostInfoSent(userpost.n, userpost.k, elem.find('.post-info-sent'));
         if ($.Options.filterLang.val !== 'disable' && $.Options.filterLangSimulate.val) {
             // FIXME it's must be stuff from template actually
-            if (typeof(post['langFilter']) !== 'undefined') {
-                if (typeof(post['langFilter']['prob'][0]) !== 'undefined')
-                    var mlm = '  //  '+polyglot.t('Most possible language: this', {'this': '<em>'+post['langFilter']['prob'][0].toString()+'</em>'});
+            if (typeof post.langFilter !== 'undefined') {
+                if (typeof post.langFilter.prob[0] !== 'undefined')
+                    var mlm = '  //  ' + polyglot.t('Most possible language: this',
+                        {'this': '<em>' + post.langFilter.prob[0].toString() + '</em>'});
                 else
                     var mlm = '';
 
-                elem.append('<div class="langFilterSimData">'+polyglot.t('This post is treated by language filter', {'treated': '<em>'+((post['langFilter']['pass']) ? polyglot.t('passed') : polyglot.t('blocked'))+'</em>'})+'</div>')
-                    .append('<div class="langFilterSimData">'+polyglot.t('Reason: this', {'this': '<em>'+post['langFilter']['reason']+'</em>'})+mlm+'</div>')
+                elem.append('<div class="langFilterSimData">'
+                        + polyglot.t('This post is treated by language filter',
+                            {'treated': '<em>' + (post.langFilter.pass ? polyglot.t('passed') : polyglot.t('blocked')) + '</em>'})
+                        + '</div>'
+                    )
+                    .append('<div class="langFilterSimData">'
+                        + polyglot.t('Reason: this', {'this': '<em>' + post.langFilter.reason + '</em>'})
+                        + mlm +'</div>'
+                    )
                 ;
             } else {
-                elem.append('<div class="langFilterSimData">'+polyglot.t('This post is treated by language filter', {'treated': '<em>'+polyglot.t('not analyzed')+'</em>'})+'</div>');
+                elem.append('<div class="langFilterSimData">'
+                        + polyglot.t('This post is treated by language filter',
+                            {'treated': '<em>' + polyglot.t('not analyzed') + '</em>'})
+                        + '</div>'
+                    )
+                ;
             }
         }
     }
@@ -196,7 +252,7 @@ function dmDataToSnippetItem(dmData, remoteUser) {
         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, []));
+    dmItem.find(".post-text").html(htmlFormatMsg(dmData.text).html);
     dmItem.find(".post-info-time").text(timeGmtToText(dmData.time)).attr("title",timeSincePost(dmData.time));
 
     return dmItem;
@@ -214,14 +270,13 @@ function dmDataToConversationItem(dmData, localUser, remoteUser) {
     getAvatar(from, dmItem.find(".post-photo").find("img") );
     dmItem.find(".post-info-time").text(timeGmtToText(dmData.time)).attr("title",timeSincePost(dmData.time));
     setPostInfoSent(from,dmData.k,dmItem.find('.post-info-sent'));
-    var mentions = [];
-    dmItem.find('.post-text').html(htmlFormatMsg(dmData.text, mentions));
+    dmItem.find('.post-text').html(htmlFormatMsg(dmData.text).html);
 
     return dmItem;
 }
 
 // convert message text to html, featuring @users and links formating.
-function htmlFormatMsg(msg, mentions) {
+function htmlFormatMsg(msg) {
     // TODO: add options for emotions; msg = $.emotions(msg);
     // TODO make markup optionally mutable ?
 
@@ -522,6 +577,7 @@ function htmlFormatMsg(msg, mentions) {
         + whiteSpaces;
     var stopCharsMarkout = '/\\*~_-`.,:;?!%+=&\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011\u2047\u2048\u2049';
     var i, j, k, str;
+    var mentions = [];
 
     msg = {str: escapeHtmlEntities(msg), htmlEntities: []};
 
@@ -651,7 +707,7 @@ function htmlFormatMsg(msg, mentions) {
                     break;
             }
             str = msg.str.slice(i + 1, j).toLowerCase();
-            mentions.push(str);  // FIXME
+            mentions.push(str);
             msg = msgAddHtmlEntity(msg, i, i + str.length + 1,
                 newHtmlEntityLink(_htmlFormatMsgLinkTemplateUser,
                     $.MAL.userUrl(str), '@' + str)
@@ -701,7 +757,7 @@ function htmlFormatMsg(msg, mentions) {
     if ($.Options.displayLineFeeds.val === 'enable')
         msg = msg.replace(/\n/g, '<br />');
 
-    return msg;
+    return {html: msg, mentions: mentions};
 }
 
 function proxyURL(url) {

js/twister_network.js

@@ -4,6 +4,8 @@
 // Provides functions for periodic network status check
 // Interface to network.html page.
 
+var twisterVersion;
+var twisterDisplayVersion;
 var twisterdConnections = 0;
 var twisterdAddrman = 0;
 var twisterDhtNodes = 0;
@@ -39,9 +41,9 @@ function requestNetInfo(cbFunc, cbArg) {
                    twisterdBlocks      = ret.blocks;
                    twisterDhtNodes     = ret.dht_nodes;
                    twisterVersion      = ("0000000" + ret.version).slice(-8);
-                   twisterDisplayVersion = twisterVersion.slice(0,2) + '.' + 
-                                           twisterVersion.slice(2,4) + '.' + 
-                                           twisterVersion.slice(4,6) + '.' + 
+                   twisterDisplayVersion = twisterVersion.slice(0,2) + '.' +
+                                           twisterVersion.slice(2,4) + '.' +
+                                           twisterVersion.slice(4,6) + '.' +
                                            twisterVersion.slice(6,8);
 
                    $(".connection-count").text(twisterdConnections);
@@ -301,10 +303,10 @@ function initInterfaceNetwork() {
             });
         }
         else
-	{
-	    $(".userMenu-profile > a").text(polyglot.t("Login"));
-	    $(".userMenu-profile > a").attr("href","login.html");
-	}
+    {
+        $(".userMenu-profile > a").text(polyglot.t("Login"));
+        $(".userMenu-profile > a").attr("href","login.html");
+    }
     });
     networkUpdate();
     setInterval("networkUpdate()", 2000);

theme_calm/css/style.css

@@ -1436,14 +1436,16 @@ textarea.splited-post {
     font-size: 13px;
     top: 40px;
 }
-.post-retransmited-icon
-{
+
+.post-retransmited-icon {
     display: inline-block;
     width: 25px;
     height: 25px;
     background: url(../img/repost.png) no-repeat left center;
     vertical-align: middle;
+    margin: 2px;
 }
+
 .post-interactions
 {
     margin: -5px 10px 5px 60px;
@@ -1616,6 +1618,7 @@ textarea.splited-post {
     border-left: solid 3px #43464d;
     margin-left: 2px;
 }
+
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/
@@ -2128,7 +2131,7 @@ textarea.splited-post {
 **************************************/
 
 .reTwist.prompt-wrapper {
-    margin-top: -100px;
+    margin-top: -140px;
 }
 
 .reTwist .post-expand,
@@ -2142,6 +2145,10 @@ textarea.splited-post {
     min-height: 68px;
 }
 
+.reTwist .post-area-extras {
+    margin-right: 10px;
+}
+
 /*************************************
 ********* REPLY POSTS PROMPT *********
 **************************************/
@@ -2517,3 +2524,42 @@ p.post-text img {
 .reply textarea{
     margin-top: 20px;
 }
+
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 11px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 11px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-text a {
+    font-size: 11px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #000;
+}

theme_nin/css/style.css

@@ -56,7 +56,7 @@
   font-style: normal;
 }
 /* line 64, ../sass/_fonts.sass */
-[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
+[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-retransmited-icon:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
@@ -204,7 +204,7 @@
 
 /* '' */
 /* line 188, ../sass/_fonts.sass */
-.icon-twistagain:before, .post-context span:before, .post-propagate:before {
+.icon-twistagain:before, .post-retransmited-icon:before, .post-propagate:before {
   content: "";
 }
 
@@ -888,11 +888,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 .post-context {
   font-size: 11px;
   line-height: 11px;
-  margin: 0 0 1em 0;
+  margin: 2px 10px 4px 60px;
   color: #b3b5b7;
 }
 /* line 146, ../sass/_postboard.sass */
-.post-context span:before {
+.post-retransmited-icon:before {
   display: block;
   float: left;
   background: #B4C669;
@@ -907,17 +907,16 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   margin-right: 0.4em;
 }
 
+.post-context.post-retransmited-by-container {
+    margin: 0 0 1em;
+}
+
 /* line 158, ../sass/_postboard.sass */
 .mini-screen-name {
   font-size: 13px;
   color: #66686B;
 }
 
-/* line 163, ../sass/_postboard.sass */
-.post-retransmited-icon {
-  display: none;
-}
-
 /* line 166, ../sass/_postboard.sass */
 .post-interactions {
   margin: 10px 0 3px 0;
@@ -2790,7 +2789,7 @@ ol.toptrends-list a:hover {
 
 /* line 705, ../sass/style.sass */
 .reTwist.prompt-wrapper {
-  margin-top: -110px;
+  margin-top: -150px;
 }
 
 .reTwist .modal-content {
@@ -3319,3 +3318,41 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
     margin: 2% 1%;
   }
 }
+
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+    padding: 2px;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 11px;
+    padding-left: 0px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 11px;
+    margin: 4px 4px 4px 28px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #B3B5B7;
+}

theme_nin/js/theme_option.js

@@ -8,9 +8,8 @@ $(function(){
     $('.userMenu-search-profiles button').html('').attr('title',polyglot.t('Follow'));
     $('.mini-profile-actions span').html('');
 
-    $('.post-context').each(function(){
-        $(this).prependTo($(this).parent());
-    });
+    $.globalEval(postToElem.toString().replace(/postContext.append\(_templatePostRtBy/,
+        'postContext.addClass(\'post-retransmited-by-container\').prependTo(postContext.parent()).append(_templatePostRtBy'));
 
 
     $( '.userMenu-home.current a' ).on( 'click', function() {

theme_nin/sass/_postboard.sass

@@ -142,22 +142,10 @@
 .post-context
     font-size: 11px
     line-height: 11px
-    margin: 0 0 1em 0
+    margin: 2px 10px 4px 60px
     color: lighten($dark-grey,30%)
-    span
-        @extend .icon-twistagain
-        @extend .extend-icon
-        &:before
-            display: block
-            float: left
-            background: $main-color-color
-            text-align: center
-            padding: 1px 2px 2px 2px
-            line-height: 9px
-            font-size: 9px
-            +border-radius(3px)
-            color: white
-            margin-right: .4em
+    &.post-retransmited-by-container
+        margin: 0 0 1em
 
 .mini-screen-name
     font-size: 13px
@@ -165,7 +153,18 @@
 
 
 .post-retransmited-icon
-    display: none
+    @extend .icon-twistagain
+    @extend .extend-icon
+    display: block
+    float: left
+    background: $main-color-color
+    text-align: center
+    padding: 1px 2px 2px 2px
+    line-height: 9px
+    font-size: 9px
+    +border-radius(3px)
+    color: white
+    margin-right: .4em
 
 .post-interactions
     margin: 10px 0 3px 0
@@ -312,9 +311,6 @@
     margin-left: 1px
 
 
-
-
-
 /* MODAL */
 .modal-content
     .postboard
@@ -330,3 +326,27 @@
         img
             width: 100%
             height: 100%
+
+
+.post-rt-reference
+    background-color: #FAFAFA
+    border: 1px solid #ccc
+    padding: 2px
+    &:hover
+        background-color: #FFF
+        cursor: pointer
+    .post-photo
+        width: 24px
+        height: 24px
+        margin-right: 4px
+        img
+            width: 24px
+            height: auto
+    .post-info-name
+        font-size: 11px
+    .post-text
+        font-size: 11px
+        margin: 4px 4px 4px 28px
+    .post-info-time
+        font-size: 9px
+        color: #B3B5B7

theme_nin/sass/style.sass

@@ -778,7 +778,7 @@ ol.toptrends-list
 
 .prompt-wrapper.reTwist
   &.prompt-wrapper
-    margin-top: -110px
+    margin-top: -150px
   .modal-content
     padding: 20px 15px
   .modal-buttons

tmobile.html

@@ -75,8 +75,45 @@
   .header {position:fixed;z-index:10;top:0;width:100%}
   .content {padding:15px 20px 20px 20px;}
   .footer {position:fixed;z-index:10;bottom:0;width:100%}
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+    padding: 4px;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    float: left;
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 10px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 10px;
+    margin: 2px 10px 4px 10px;
 }
 
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    font-weight: lighter;
+    color: #000 !important;
+    float: right;
+}
 </style>
 
 <div id="index" data-role="page">
@@ -710,11 +747,7 @@
                 <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
             </h4>
             <p class="post-text no-ellipsis"></p>
-            <div class="post-context" style="display: none;">
-                <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">twisted again by</span>
-                <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
+            <div class="post-context" style="display: none;"></div>
         </div>
     </li> <!-- post-template -->
 
@@ -733,11 +766,7 @@
                 <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
             </h4>
             <p class="post-text no-ellipsis"></p>
-            <div class="post-context" style="display: none;">
-                <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">twisted again by</span>
-                <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
+            <div class="post-context" style="display: none;"></div>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <fieldset class="post-interactions ui-grid-a" data-role="fieldcontain">
                 <div class="ui-block-a">
@@ -761,6 +790,24 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" 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>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span style="font-size:60%;">twisted again by</span><span> </span>
+        <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
 
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>