various fixes around follow button

css/style.css

@@ -748,17 +748,18 @@ textarea.splited-post {
 .twister-user-remove:hover{
     opacity: 1;
 }
-.follow
-{
+
+.follow, .unfollow {
     background: none;
     border: solid 1px rgba( 0, 0, 0 ,.2 );
     padding: 3px 15px;
     color: rgba( 0, 0, 0 ,.4 );
 }
-.follow:hover
-{
+
+.follow:hover, .unfollow:hover {
     color: rgba( 0, 0, 0 ,.7 );
 }
+
 .refresh-users,
 .view-all-users
 {

js/interface_common.js

@@ -549,18 +549,49 @@ var replyInitPopup = function(e, post)
 }
 
 //abre o menu dropdown de configurações
-var dropDownMenu = function( e )
-{
-    var $configMenu = $( ".config-menu" );
-    $configMenu.slideToggle( "fast" );
-    e.stopPropagation();
+function dropDownMenu() {
+    $( ".config-menu" ).slideToggle( "fast" );
 }
 
 //fecha o config menu ao clicar em qualquer lugar da tela
-var closeThis = function()
-{
+function closeThis() {
     $( this ).slideUp( "fast" );
-};
+}
+
+function toggleFollowButton(button, followingUser) {
+    if (!button || !followingUser)
+        return;
+
+    button
+        .removeClass("follow")
+        .addClass("unfollow")
+        .unbind("click")
+        .bind("click",
+            (function(e) {
+                unfollow(this.toString(),
+                    (function() {
+                        this
+                            .removeClass("unfollow")
+                            .addClass("follow")
+                            .unbind("click")
+                            .bind("click", userClickFollow);
+
+                        if ($.Options.getTheme() === 'nin') {
+                            this.attr('title', polyglot.t('Follow'));
+                        } else {
+                            this.text(polyglot.t('Follow'));
+                        }
+                    }).bind($(e.target))
+                );
+            }).bind(followingUser)
+        );
+
+    if ($.Options.getTheme() === 'nin') {
+        button.attr('title', polyglot.t('Unfollow'));
+    } else {
+        button.text(polyglot.t('Unfollow'));
+    }
+}
 
 var postExpandFunction = function( e, postLi )
 {
@@ -1435,7 +1466,8 @@ function initInterfaceCommon() {
         $('.mark-all-as-read').css('display', 'none');
     });
 
-    $(".prompt-close").on('click', function(event){
+    $(".prompt-close").on('click', function(e){
+        e.stopPropagation();
         closePrompt();
     });
 
@@ -1456,8 +1488,8 @@ function initInterfaceCommon() {
     });
     $( ".post-reply" ).bind( "click", postReplyClick );
     $( ".post-propagate" ).bind( "click", reTwistPopup );
-    $( ".userMenu-config-dropdown" ).bind( "click", dropDownMenu );
-    $( ".config-menu" ).clickoutside( closeThis );
+    $( ".userMenu-config" ).clickoutside( closeThis.bind($( ".config-menu" )) );
+    $( ".userMenu-config-dropdown" ).click( dropDownMenu );
     $( ".module.post" ).bind( "click", function(e) {
         if(e.button === 0 && window.getSelection() == 0) postExpandFunction(e,$(this));
     });

js/twister_following.js

@@ -353,6 +353,9 @@ function updateFollowing(cbFunc, cbArg) {
 function follow(user, publicFollow, cbFunc, cbArg) {
     if( followingUsers.indexOf(user) < 0 ) {
         followingUsers.push(user);
+        twisterFollowingO.update(user);
+        $(".following-count").text(followingUsers.length-1);
+        setTimeout('requestTimelineUpdate("latest",postsPerRefresh,["'+user+'"],promotedPostsOnly)', 1000);
     }
     if( publicFollow == undefined || publicFollow )
         _isFollowPublic[user] = true;
@@ -367,6 +370,7 @@ function unfollow(user, cbFunc, cbArg) {
     if( i >= 0 ) {
         followingUsers.splice(i,1);
         twisterFollowingO.update(user);
+        $(".following-count").text(followingUsers.length-1);
     }
     delete _isFollowPublic[user];
     saveFollowing();
@@ -570,8 +574,7 @@ function processSuggestion(arg, suggestion, followedBy) {
 
 function closeSearchDialog()
 {
-    var $this = $(".userMenu-search-field");//$( this );
-    $( this ).siblings().slideUp( "fast" );
+    $(".userMenu-search-field").siblings().slideUp( "fast" );
     removeUsersFromDhtgetQueue( _lastSearchUsersResults );
     _lastSearchUsersResults = [];
 }
@@ -654,6 +657,8 @@ function processDropdownUserResults(partialName, results){
             resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(results[i]));
             getAvatar(results[i],resItem.find(".mini-profile-photo"));
             getFullname(results[i],resItem.find(".mini-profile-name"));
+            if (followingUsers.indexOf(results[i]) >= 0)
+                toggleFollowButton(resItem.find(".follow"), results[i]);
             resItem.appendTo(typeaheadAccounts);
         }
 
@@ -677,11 +682,12 @@ function newFollowingConfigModal(username) {
 function userClickFollow(e) {
     e.stopPropagation();
     e.preventDefault();
+    $(e.target).addClass("followingInitiator");
 
     var $this = $(this);
     var $userInfo = $this.closest("[data-screen-name]");
     var username = $userInfo.attr("data-screen-name");
-    
+
     if(!defaultScreenName)
     {
       alert(polyglot.t("You have to log in to follow users."));
@@ -702,7 +708,7 @@ function initUserSearch() {
     var $userSearchField = $( ".userMenu-search-field" );
     $userSearchField.keyup( userSearchKeypress );
     $userSearchField.bind( "click", userSearchKeypress );
-    $userSearchField.clickoutside( closeSearchDialog );
+    $(".userMenu-search").clickoutside( closeSearchDialog );
 
     $("button.follow").bind( "click", userClickFollow );
 
@@ -710,7 +716,7 @@ function initUserSearch() {
     $(".following-config-method-buttons .public-following").click( function() {
         closePrompt();
         // delay reload so dhtput may do it's job
-	window.setTimeout("loadModalFromHash();",500);
+        window.setTimeout("loadModalFromHash();",500);
     });
 }
 
@@ -754,9 +760,14 @@ function setFollowingMethod(e) {
     if( !$this.hasClass("private") ) {
         publicFollow = true;
     }
-
     //console.log("start following @" +username +" by method "+publicFollow);
-    follow(username, publicFollow);
+    follow(username, publicFollow,
+        (function() {
+            var followingInitiator = $(".followingInitiator");
+            if (followingInitiator)
+                toggleFollowButton(followingInitiator, this);
+        }).bind(username)
+    );
 }
 
 

theme_calm/css/style.css

@@ -920,17 +920,18 @@ textarea.splited-post {
     opacity: 1;
     text-decoration: none;
 }
-.follow
-{
+
+.follow, .unfollow {
     background: none;
     border: solid 1px rgba( 0, 0, 0 ,.2 );
     padding: 3px 15px;
     color: rgba( 0, 0, 0 ,.4 );
 }
-.follow:hover
-{
+
+.follow:hover, .unfollow:hover {
     color: rgba( 0, 0, 0 ,.7 );
 }
+
 .refresh-users,
 .view-all-users
 {

theme_nin/css/style.css

@@ -121,13 +121,13 @@
 
 /* '' */
 /* line 120, ../sass/_fonts.sass */
-.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before {
+.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button.follow:before {
   content: "";
 }
 
 /* '' */
 /* line 125, ../sass/_fonts.sass */
-.icon-minus:before {
+.icon-minus:before, ul.userMenu-search-profiles button.unfollow:before {
   content: "";
 }
 
@@ -1855,10 +1855,13 @@ ul.userMenu-search-profiles .mini-profile-info {
   float: none;
 }
 /* line 119, ../sass/style.sass */
-ul.userMenu-search-profiles button, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span {
+ul.userMenu-search-profiles button.unfollow, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span {
   background-color: #66686B;
   padding: 3px;
 }
+ul.userMenu-search-profiles button {
+  padding: 3px;
+}
 /* line 124, ../sass/style.sass */
 ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-profile-actions span:after, .mini-profile-actions ul.userMenu-search-profiles span:after {
   content: "";
@@ -2316,14 +2319,14 @@ textarea.splited-post {
 }
 
 /* line 491, ../sass/style.sass */
-button.follow, .mini-profile-actions span.follow {
+button.follow, .mini-profile-actions span.follow, button.unfollow, .mini-profile-actions span.unfollow {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background: #B4C669;
 }
 /* line 496, ../sass/style.sass */
-button.follow:hover, .mini-profile-actions span.follow:hover {
+button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .mini-profile-actions span.unfollow {
   background: #aaa;
 }