Added follow button behavior from site profile to surf bar

This commit is contained in:
Victoria Wang 2014-11-10 14:48:30 -06:00
parent e7955b77dc
commit b636eedbcc

View file

@ -137,6 +137,37 @@
display:none!important; display:none!important;
visibility:hidden 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> </style>
</head> </head>
<body> <body>
@ -182,12 +213,10 @@
<% if current_site && current_site != @site %> <% if current_site && current_site != @site %>
<li> <li>
<a id="followLink" href="" onclick="toggleFollow(<%= @site.id %>); return false"> <a id="followLink" href="#" onclick="toggleFollow(<%= @site.id %>); return false" class="<% if current_site.is_following? @site %>is-following<% end %>">
<% if current_site.is_following? @site %> <span class="unfollow"><i class="fa fa-times"></i> Unfollow</span>
<i class="fa fa-times"></i> Unfollow <span class="following"><i class="fa fa-check"></i> Following</span>
<% else %> <span class="follow"><i class="fa fa-plus"></i> Follow</span>
<i class="fa fa-plus"></i> Follow
<% end %>
</a> </a>
</li> </li>
<% end %> <% end %>
@ -230,15 +259,25 @@
e.target.form.submit() e.target.form.submit()
}) })
var link = $('a#followLink');
function toggleFollow(id) { function toggleFollow(id) {
$.post('/site/'+id+'/toggle_follow', {csrf_token: '<%= csrf_token %>'}, function(res) { $.post('/site/'+id+'/toggle_follow', {csrf_token: '<%= csrf_token %>'}, function(res) {
if(res.result == 'followed') if(res.result == 'followed')
$('#followLink').html('<i class="fa fa-times"></i> Unfollow') link.addClass('is-following')
if(res.result == 'unfollowed') 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> </script>
</body> </body>
</html> </html>