From b636eedbccacadd720997fc3bb7ddc1e420c60a5 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Mon, 10 Nov 2014 14:48:30 -0600
Subject: [PATCH] Added follow button behavior from site profile to surf bar

---
 views/surf.erb | 55 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/views/surf.erb b/views/surf.erb
index fc6bcd3a..bb2be59b 100644
--- a/views/surf.erb
+++ b/views/surf.erb
@@ -137,6 +137,37 @@
       display:none!important;
       visibility:hidden
     }
+    #followLink .follow {
+      display: inline;
+    }
+    #followLink .following {
+      display: none;
+    }
+    #followLink .unfollow { 
+      display: none;
+    }
+    #followLink.is-following {
+      width: 6em;
+      display: block;
+    }
+    #followLink.is-following .follow {
+      display: none;
+    }
+    #followLink.is-following .following { 
+      display: inline;
+    }
+    #followLink.is-following .unfollow { 
+      display: none;
+    }
+    #followLink.is-following.unfollow .follow {
+      display: none;
+    }
+    #followLink.is-following.unfollow .following { 
+      display: none;
+    }
+    #followLink.is-following.unfollow .unfollow { 
+      display: inline;
+    }
     </style>
   </head>
   <body>
@@ -182,12 +213,10 @@
 
       <% if current_site && current_site != @site %>
         <li>
-          <a id="followLink" href="" onclick="toggleFollow(<%= @site.id %>); return false">
-            <% if current_site.is_following? @site %>
-              <i class="fa fa-times"></i> Unfollow
-            <% else %>
-              <i class="fa fa-plus"></i> Follow
-            <% end %>
+          <a id="followLink" href="#" onclick="toggleFollow(<%= @site.id %>); return false" class="<% if current_site.is_following? @site %>is-following<% end %>">
+            <span class="unfollow"><i class="fa fa-times"></i> Unfollow</span>
+            <span class="following"><i class="fa fa-check"></i> Following</span>
+            <span class="follow"><i class="fa fa-plus"></i> Follow</span>
           </a>
         </li>
       <% end %>
@@ -230,15 +259,25 @@
       e.target.form.submit()
     })
 
+    var link = $('a#followLink');
+    
     function toggleFollow(id) {
       $.post('/site/'+id+'/toggle_follow', {csrf_token: '<%= csrf_token %>'}, function(res) {
         if(res.result == 'followed')
-          $('#followLink').html('<i class="fa fa-times"></i> Unfollow')
+          link.addClass('is-following')
 
         if(res.result == 'unfollowed')
-          $('#followLink').html('<i class="fa fa-plus"></i> Follow')
+          link.removeClass('is-following')
       })
     }
+
+    link.hover(function() {
+      if (link.hasClass('is-following')) {
+        link.addClass('unfollow');
+      }
+    }, function() {
+      link.removeClass('unfollow');
+    });
   </script>
   </body>
 </html>
\ No newline at end of file