changed conversation listing method...

- made the requestRepliesAfter function recursive
- displayed replies indented (something like #153)
- changed maxExpandPost value to 8
- added conversation modal to show all post in a conversation...
- added Symbola.ttf for possible missing unicode symboles..

css/style.css

@@ -9,6 +9,11 @@
     src: url("OpenSans-Bold.ttf");
     font-weight: bold;
 }
+@font-face
+{
+    font-family: "Symbola";
+    src: url("Symbola.ttf");
+}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -30,7 +35,7 @@ time, mark, audio, video, textarea
     font: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif, Symbola;
 }
 textarea, input
 {
@@ -644,6 +649,15 @@ textarea.splited-post {
 {
     color: #ff0000;
 }
+.post .show-more {
+    font-size: 13px;
+    font-weight: bold;
+    margin-left: 60px;
+    color: rgba(0, 0, 0, 0.5);
+}
+.post .show-more:before {
+    content: '💭';
+}
 /***********************************
 ********************* WHO TO FOLLOW
 ***********************************/
@@ -1121,6 +1135,10 @@ ol.toptrends-list {
 {
     display: inline-block;
 }
+.post .sub-replies {
+    border-left: solid 3px #E34F42;
+    margin-left: 2px;
+}
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/
@@ -1473,6 +1491,31 @@ ol.toptrends-list {
     margin-left: 0;
 }
 /*************************************
+****************** CONVERSATION MODAL
+**************************************/
+.conversation-modal .modal-wrapper
+{
+    position: absolute;
+    width: 560px;
+    height: 80%;
+    top: 10%;
+    margin: 0 0 0 -330px;
+    overflow: hidden;
+}
+.conversation-modal .modal-content
+{
+    overflow-y: auto;
+    height: 90%;
+}
+.conversation-modal .modal-buttons
+{
+    display: none;
+}
+.conversation-modal .postboard
+{
+    margin-left: 0;
+}
+/*************************************
 ****************** FOLLOWING MODAL
 **************************************/
 .following-modal .modal-wrapper

following.html

@@ -234,6 +234,7 @@
                         </div>
                     </form>
                 </div>
+                <span class="show-more label">Show more in this conversation...</span>
             </div> <!-- expanded-content -->
         </div> <!-- post-data -->
     </li> <!-- post-template -->

home.html

@@ -261,6 +261,7 @@
                         </div>
                     </form>
                 </div>
+                <span class="show-more label">Show more in this conversation...</span>
             </div> <!-- expanded-content -->
         </div> <!-- post-data -->
     </li> <!-- post-template -->

js/interface_common.js

@@ -320,6 +320,37 @@ function openWhoToFollowModal(e) {
     $( "." + whoToFollowModalClass + " h3" ).text( polyglot.t("Who to Follow") );
 }
 
+function newConversationModal(postLi) {
+    var hashtagModalContent = $( "#hashtag-modal-template" ).children().clone(true);
+    hashtagModalContent.find( ".postboard-news").click(function (){
+        $(this).hide();
+        displayHashtagPending($(".conversation-modal .postboard-posts"));
+    });
+
+    getTopPostOfConversation(postLi, null, hashtagModalContent.find(".postboard-posts"));
+
+    return hashtagModalContent;
+}
+
+function openConversationModal(e)
+{
+    e.stopPropagation();
+    e.preventDefault();
+
+    var $this = $( this );
+    var postLi = $this.parents(".module.post.original.open").find('.module.post.original');
+
+    var conversationModalClass = "conversation-modal";
+    openModal( conversationModalClass );
+    //$( "." + threadingModalClass ).attr("data-resource","hashtag");
+
+    var hashtagModalContent = newConversationModal( postLi );
+    hashtagModalContent.appendTo("." + conversationModalClass + " .modal-content");
+
+    //título do modal
+    $( "." + conversationModalClass + " h3" ).text( polyglot.t('conversation_title', {'username': postLi.find('.post-data').attr('data-screen-name')}) );
+}
+
 //
 // Post actions, submit, count characters
 // --------------------------------------
@@ -1279,6 +1310,7 @@ function initInterfaceCommon() {
     $( ".post-area-new" ).clickoutside( unfocusThis );
     $( ".post-submit").click( postSubmit );
     $( ".modal-propagate").click( retweetSubmit );
+    $( ".expanded-content .show-more").bind('click', openConversationModal);
 
     if ($.Options.getUnicodeConversionOpt() === "disable")
         $( ".undo-unicode" ).click( undoLastUnicode ).css("display", "none");

js/interface_localization.js

@@ -227,7 +227,9 @@ if(preferredLanguage == "en"){
       "Show conversation": "Show conversation",
       "Mark all as read": "Mark all as read",
       "show_more_count": "%{count} more...",
-      "hide": "hide"
+      "hide": "hide",
+      "Show more in this conversation...": "Show more in this conversation...",
+      "conversation_title": "Conversation of @%{username}"
     };
 }
 if(preferredLanguage == "es"){
@@ -1873,7 +1875,9 @@ if(preferredLanguage == "tr"){
       "Show conversation": "Sohbeti göster",
       "Mark all as read": "hepsini okundu olarak işaretle",
       "show_more_count": "%{count} tane daha...",
-      "hide": "gizle"
+      "hide": "gizle",
+      "Show more in this conversation...": "Sohbetin tamamını göster...",
+      "conversation_title": "@%{username} kullanıcısının bir sohbeti"
     };
 }
 

js/mobile_abstract.js

@@ -365,6 +365,29 @@ var MAL = function()
          }
     }
 
+    this.reqRepAfterCB = function(postLi, postsFromJson) {
+        if ($.hasOwnProperty("mobile")) {
+            for( var i = 0; i < postsFromJson.length; i++) {
+                var newStreamPost = postToElem(postsFromJson[i], "related");
+                newStreamPost.hide();
+                postLi.after(newStreamPost);
+                newStreamPost.slideDown("fast");
+            }
+        } else {
+            var $replist = $('<ol class="sub-replies"></ol>');
+            var $newli = $('<li class="post open related"></li>');
+            postLi.after($newli);
+            $newli.append($replist);
+            for (var i = 0; i < postsFromJson.length; i++) {
+                var newStreamPost = postToElem(postsFromJson[i], "related");
+                newStreamPost.hide();
+                $replist.prepend(newStreamPost);
+                newStreamPost.slideDown("fast");
+                requestRepliesAfter(newStreamPost);
+            }
+        }
+        $.MAL.relatedPostLoaded();
+    };
 }
 
 jQuery.MAL = new MAL;

js/twister_actions.js

@@ -10,7 +10,8 @@
 // global variables
 
 var postsPerRefresh = 10;
-var maxExpandPost = 20;
+var maxExpandPost = 8;
+var maxExpandPostTop = 4;
 var _hashtagProcessedMap = {};
 var _hashtagPendingPosts = [];
 var autoUpdateHashtag = false;
@@ -19,7 +20,7 @@ var autoUpdateHashtag = false;
 
 function requestRepliedBefore(postLi)
 {
-    if(postLi.siblings().length >= maxExpandPost)
+    if(postLi.siblings().length >= maxExpandPostTop)
         return;
 
     var originalPost = postLi.find(".post-data");
@@ -41,7 +42,7 @@ function requestRepliedBefore(postLi)
 
 function requestRepliesAfter(postLi)
 {
-    if(postLi.siblings().length >= maxExpandPost)
+    if(postLi.parents('.module.post.original.open').find('.post.related').length >= maxExpandPost)
         return;
 
     var originalPost = postLi.find(".post-data");
@@ -49,16 +50,56 @@ function requestRepliesAfter(postLi)
     var original_k = originalPost.attr('data-id');
 
     if( original_n != undefined && original_k != undefined ) {
-        dhtget( original_n, "replies" + original_k, "m",
-               function(postLi, postsFromJson) {
-                   for( var i = 0; i < postsFromJson.length; i++) {
-                       var newStreamPost = postToElem(postsFromJson[i], "related");
-                       newStreamPost.hide();
-                       postLi.after(newStreamPost);
-                       newStreamPost.slideDown("fast");
-                   }
-                   $.MAL.relatedPostLoaded();
-               }, postLi);
+        dhtget( original_n, "replies" + original_k, "m", $.MAL.reqRepAfterCB, postLi);
+    }
+}
+
+function getTopPostOfConversation(postLi, post, postboard) {
+    var reply_n;
+    var reply_k;
+
+    if (post && typeof(post) !== 'undefined' && "reply" in post["userpost"]) {
+        reply_k = post["userpost"]["reply"]["k"];
+        reply_n = post["userpost"]["reply"]["n"];
+    } else if (postLi && typeof(postLi) !== 'undefined') {
+        var originalPost = postLi.find(".post-data");
+        reply_n = originalPost.attr('data-replied-to-screen-name');
+        reply_k = originalPost.attr('data-replied-to-id');
+    }
+
+    if( reply_n != undefined && reply_k != undefined ) {
+        dhtget( reply_n, "post" + reply_k, "s",
+            function(postLi, postFromJson) {
+                getTopPostOfConversation(null, postFromJson, postboard);
+            }, postLi);
+    } else {
+        var newStreamPost;
+        if (post)
+            newStreamPost = postToElem(post, "related");
+        else {
+            newStreamPost = postLi.clone(true);
+            newStreamPost.removeClass('original');
+            newStreamPost.addClass('related');
+            newStreamPost.find('.expanded-content').hide();
+            newStreamPost.find('.show-more').hide();
+        }
+        requestRepliesAfterAll(newStreamPost);
+        newStreamPost.find('.post-expand').remove();
+        newStreamPost.unbind('click');
+        newStreamPost.hide();
+        postboard.append(newStreamPost);
+        newStreamPost.slideDown("fast");
+    }
+}
+
+function requestRepliesAfterAll(postLi)
+{
+    var originalPost = postLi.find(".post-data");
+    var original_n = originalPost.attr('data-screen-name');
+    var original_k = originalPost.attr('data-id');
+
+    if( original_n != undefined && original_k != undefined ) {
+        dhtget( original_n, "replies" + original_k, "m", $.MAL.reqRepAfterCB, postLi);
     }
 }