Replace Follow Button w/ Font Glyph

[Elli]

Replace Follow Button w/ Font Glyph

Replaces the "Follow" button on User Profiles with an icon from Font Awesome.


Bottom of User Profile Template

<script>
$(function() {
   // Replace follow button with Font Awesome glyphs
   (function replaceFollowButton() {
       function buildFollowButton() {
           var $followButton = $('.follow_button');
           var buttonContent = '';

           /**
            * If the current user is already following the user they're viewing,
            * we want to show the "Unfollow" button.
            */
           if ($followButton.text() === 'Unfollow') {
               $followButton.attr('title', 'Unfollow User');
               buttonContent += '<i class="fal fa-user-times" aria-hidden="true"></i>';
           } else { // Otherwise, show the "Follow" button
               $followButton.attr('title', 'Follow User');
               buttonContent += '<i class="fal fa-user-plus" aria-hidden="true"></i>';
           }

           $followButton.html(buttonContent);
       }

       buildFollowButton();

       /**
        * This is needed because the ajax that updates this button overwrites the
        * button content with `new_button_text`, so we have to wait until it's done.
        */
       $(document).ajaxComplete(function(event, xhr, settings) {
           if (settings.url === proboards.routeMap.follow_user) {
               buildFollowButton();
           }
       });
   })();
});
</script>