fixing #151 and #152

css/style.css

@@ -85,10 +85,6 @@ h3
     color: #1a1;
     content: '\2714';
 }
-.notFollowing:after {
-    color: #a11;
-    content: '\2718';
-}
 /*************************************
 **************************** BUTTONS **
 **************************************/
@@ -536,6 +532,12 @@ button.disabled:hover
     overflow: hidden;
     font-size: 12px;
 }
+.show-more-followers {
+    color: #f11;
+    font-weight: bold;
+    cursor: pointer;
+    float: right;
+}
 .mini-follower-link
 {
     display: inline-block;

js/interface_localization.js

@@ -225,7 +225,9 @@ if(preferredLanguage == "en"){
       "Show if a user follows me": "Show if a user follows me",
       "follows you": "follows you",
       "Show conversation": "Show conversation",
-      "Mark all as read": "Mark all as read"
+      "Mark all as read": "Mark all as read",
+      "show_more_count": "%{count} more...",
+      "hide": "hide"
     };
 }
 if(preferredLanguage == "es"){
@@ -1869,8 +1871,9 @@ if(preferredLanguage == "tr"){
       "Show if a user follows me": "Bir kullanıcının beni takip edip etmediğini göster",
       "follows you": "seni takip ediyor",
       "Show conversation": "Sohbeti göster",
-      "Mark all as read": "hepsini okundu olarak işaretle"
-
+      "Mark all as read": "hepsini okundu olarak işaretle",
+      "show_more_count": "%{count} tane daha...",
+      "hide": "gizle"
     };
 }
 

js/twister_following.js

@@ -425,10 +425,8 @@ function whoFollows(username) {
     return list;
 }
 
-function getWhoFollows(username, item) {
-    var list = whoFollows(username);
-
-    for (var i = 0; i < list.length; i++) {
+function fillWhoFollows(list, item, offset, size) {
+    for (var i = offset; i < offset + size; i++) {
         var follower_link = $( '<a class="mini-follower-link"></a>' );
 
         // link follower to profile page
@@ -442,6 +440,32 @@ function getWhoFollows(username, item) {
     }
 }
 
+function getWhoFollows(username, item) {
+    var list = whoFollows(username);
+
+    fillWhoFollows(list, item, 0, (list.length > 5 ? 5 : list.length));
+
+    if (list.length > 5) {
+        var more_link = $('<a class="show-more-followers">' + polyglot.t('show_more_count', {'count': list.length - 5}) + '</a>');
+        more_link.on('click', function() {
+            fillWhoFollows(list, item, 5, list.length - 5);
+
+            var $this = $(this);
+            $this.remove();
+
+            $this.text(polyglot.t('hide'));
+            $this.unbind('click');
+            $this.bind('click', function() {
+                item.html('');
+                getWhoFollows(username, item);
+            });
+
+            item.append($this);
+        });
+        item.append(more_link);
+    }
+}
+
 // adds following users to the interface (following.html)
 function showFollowingUsers(){
     var $notFollowing = $(".not-following-any");

js/twister_io.js

@@ -217,22 +217,16 @@ function getFullname( username, item ){
         if (twisterFollowingO.knownFollowers.indexOf(username) > -1) {
             item.addClass('isFollowing');
             item.attr("title", polyglot.t("follows you"));
-        } else if (twisterFollowingO.notFollowers.indexOf(username) > -1)
-            item.addClass("notFollowing");
-        else {
+        } else if (twisterFollowingO.notFollowers.indexOf(username) === -1) {
             loadFollowingFromDht(username, 1, [], 0, function (args, following, seqNum) {
                 if (following.indexOf(args.user) > -1) {
                     item.addClass('isFollowing');
                     item.attr("title", polyglot.t("follows you"));
                     if (twisterFollowingO.knownFollowers.indexOf(args.username) < 0)
                         twisterFollowingO.knownFollowers.push(args.username);
-                } else {
-                    item.addClass('notFollowing');
-                    if (twisterFollowingO.notFollowers.indexOf(args.username) < 0)
-                        twisterFollowingO.notFollowers.push(args.username);
-                }
+                } else
+                    twisterFollowingO.notFollowers.push(args.username);
 
-                //storeFollowingSessionData();
                 twisterFollowingO.save();
             }, {"user": defaultScreenName, "item": item, "username": username});
         }