Following > list of users followed by any user

css/style.css

@@ -1324,6 +1324,28 @@ button.disabled:hover
 	margin-left: 0;
 }
 /*************************************
+****************** FOLLOWING MODAL
+**************************************/
+.following-modal .modal-wrapper
+{
+	width: 560px;
+	height: 470px;
+	margin: -200px 0 0 -280px;
+	overflow-x: hidden;
+}
+.following-modal .modal-content
+{
+	overflow-y: auto;
+}
+.following-modal .modal-buttons
+{
+	display: none;
+}
+.following-modal ol
+{
+	margin: 15px;
+}
+/*************************************
 ****************** LOADER ************
 **************************************/
 .postboard-loading

following.html

@@ -346,7 +346,7 @@
             </div>
             <ul class="module profile-data">
               <li><a href="#"><span class="posts-count">&nbsp;</span>Posts</a></li>
-              <li><a href="#"><span class="following-count">&nbsp;</span>Following</a></li>
+              <li><a href="#" class="open-following-modal"><span class="following-count">&nbsp;</span>Following</a></li>
               <li><a href="#"><span class="followers-count">&nbsp;</span>Followers</a></li>
             </ul>
             <button class="follow" href="#">Follow</button>
@@ -391,6 +391,31 @@
     </div>
     <!-- MODAL DE HASHTAGS END -->
 
+    <!-- MODAL DE FOLLOWING -->
+    <div id="following-modal-template">
+        <!-- ÁREA DE PROFILE PHOTO INIT -->
+        <h2>All users publicly followed by <span class="following-screen-name">@<b></b></span></h2>
+        <!-- ÁREA DE PROFILE END -->
+
+        <!-- ÁREA DE FOLLOWING INIT -->
+        <ol class="following-list">
+            <li id="following-by-user-template" style="display: none;">
+                <div class="mini-following-info" data-screen-name="">
+                    <a href="#" class="open-following-modal">
+                        <img class="mini-following-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
+                        <span class="mini-following-name">Fulano da Silva</span>
+                        <span class="mini-screen-name">@
+                            <b class="following-screen-name"></b>
+                        </span>
+                    </a>
+                </div>
+            </li>
+        </ol>
+          
+        <!-- ÁREA DE FOLLOWERS END -->
+    </div>
+    <!-- MODAL DE FOLLOWING END -->
+
 
   </div>
   <!-- TEMPLATES END -->

home.html

@@ -353,7 +353,7 @@
             </div>
             <ul class="module profile-data">
               <li><a href="#"><span class="posts-count">&nbsp;</span>Posts</a></li>
-              <li><a href="#"><span class="following-count">&nbsp;</span>Following</a></li>
+              <li><a href="#" class="open-following-modal"><span class="following-count">&nbsp;</span>Following</a></li>
               <li><a href="#"><span class="followers-count">&nbsp;</span>Followers</a></li>
             </ul>
             <button class="follow" href="#">Follow</button>
@@ -398,6 +398,30 @@
     </div>
     <!-- MODAL DE HASHTAGS END -->
 
+    <!-- MODAL DE FOLLOWING -->
+    <div id="following-modal-template">
+        <!-- ÁREA DE PROFILE PHOTO INIT -->
+        <h2>All users publicly followed by <span class="following-screen-name">@<b></b></span></h2>
+        <!-- ÁREA DE PROFILE END -->
+
+        <!-- ÁREA DE FOLLOWING INIT -->
+        <ol class="following-list">
+            <li id="following-by-user-template" style="display: none;">
+                <div class="mini-following-info" data-screen-name="">
+                    <a href="#" class="open-following-modal">
+                        <img class="mini-following-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
+                        <span class="mini-following-name">Fulano da Silva</span>
+                        <span class="mini-screen-name">@
+                            <b class="following-screen-name"></b>
+                        </span>
+                    </a>
+                </div>
+            </li>
+        </ol>
+          
+        <!-- ÁREA DE FOLLOWERS END -->
+    </div>
+    <!-- MODAL DE FOLLOWING END -->
 
   </div>
   <!-- TEMPLATES END -->

interface_common.js

@@ -100,7 +100,7 @@ function timeSincePost(t) {
 }
 
 //
-// Profile, mentions and hashtag modal
+// Profile, mentions, hashtag, and following modal
 // -----------------------------------
 
 function newProfileModal(username) {
@@ -198,6 +198,32 @@ function openMentionsModal(e)
     resetMentionsCount();
 }
 
+function newFollowingModal(username) {
+    var followingModalContent = $( "#following-modal-template" ).children().clone(true);
+
+    updateFollowingData(followingModalContent, username);
+
+    return followingModalContent;
+}
+
+function openFollowingModal(e)
+{
+    e.stopPropagation();
+    e.preventDefault();
+
+    var $this = $( this );
+    var username = $.MAL.followingUrlToUser( $this.attr("href") );
+
+    var followingModalClass = "following-modal";
+    openModal( followingModalClass );
+
+    var followingModalContent = newFollowingModal( username );
+    followingModalContent.appendTo("." +followingModalClass + " .modal-content");
+
+    //título do modal
+    $( "."+followingModalClass + " h3" ).text( "Followed by " + username );
+}
+
 //
 // Post actions, submit, count characters
 // --------------------------------------
@@ -438,5 +464,6 @@ function initInterfaceCommon() {
 
     $( ".open-profile-modal").bind( "click", openProfileModal );
     $( ".open-hashtag-modal").bind( "click", openHashtagModal );
+    $( ".open-following-modal").bind( "click", openFollowingModal );
     $( ".userMenu-connections a").bind( "click", openMentionsModal );
 }

mobile_abstract.js

@@ -147,6 +147,15 @@ var MAL = function()
             return "";
     }
 
+    this.followingUrlToUser = function(url) {
+        var dummyUrl = this.isFollowingUrl("");
+        var urlIdx = url.indexOf(dummyUrl);
+        if( urlIdx >= 0 )
+            return url.substr(urlIdx + dummyUrl.length);
+        else
+            return "";
+    }
+
     this.mentionsUrl = function(username) {
         if( $.hasOwnProperty("mobile") ) {
             return "#mentions?user=" + username;
@@ -171,6 +180,14 @@ var MAL = function()
         }
     }
 
+    this.isFollowingUrl = function(username) {
+        if( $.hasOwnProperty("mobile") ) {
+            return "#following?user=" + username;
+        } else {
+            return "#following?user=" + username;
+        }
+    }
+    
     this.followUrl = function(username) {
         if( $.hasOwnProperty("mobile") ) {
             return "#following?follow=" + username;

twister_actions.js

@@ -175,9 +175,15 @@ function updateProfileData(profileModalContent, username) {
     getFollowers( username, profileModalContent.find(".followers-count") );
     getNumFollowing( username, profileModalContent.find(".following-count") );
     
+    profileModalContent.find(".following-count").parent().attr("href", $.MAL.isFollowingUrl(username));                     
+
     requestPostRecursively(profileModalContent.find(".postboard-posts"),username,"status",10);
 }
 
+function updateFollowingData(followingModalContent, username) {
+    followingModalContent.find(".following-screen-name b").text(username);
+    loadFollowingIntoList( username, $(followingModalContent[1]) );
+}
 
 function clearHashtagProcessed() {
     _hashtagProcessedMap = {};

twister_following.js

@@ -83,6 +83,23 @@ function getNumFollowing( username, item ) {
                          }, null);
 }
 
+function loadFollowingIntoList( username, html_list ) {
+    loadFollowingFromDht( username, 1, [], 0,
+        function(args, following, seqNum) {
+            html_list.html("");
+            $.each(following, function(i, following_user){
+                var following_user_li = $( "#following-by-user-template" ).children().clone(true);
+                following_user_li.find(".mini-following-info").attr("data-screen-name", following_user);
+                following_user_li.find(".following-screen-name b").text(following_user);
+
+                getAvatar( following_user, following_user_li.find(".mini-following-photo") );
+                getFullname( following_user, following_user_li.find(".mini-following-name") );
+      
+                html_list.append( following_user_li );
+            });
+        }, null);
+}
+
 // load following list from localStorage and then from the dht resource
 function loadFollowing(cbFunc, cbArg) {
     loadFollowingFromStorage();