_like.html.erb

<div class="like-buttons d-print-none btn-toolbar mb-3">
    <% if logged_in_as(['admin', 'moderator']) || (current_user && (current_user.uid == node.uid || node.has_tag("with:#{current_user.username}"))) %>
        <% if node.type == 'note' %>
            <a <% if current_user && current_user.uid != node.uid %>data-confirm='Please be aware that you are editing a post by another contributor, a privilege you have only because you are an admin or co-author.' <% end %> class='btn btn-outline-secondary btn-circle btn-sm' href='/notes/edit/<%= node.id %>?t=<%= Time.now.to_i %><% if params[:controller] == "questions" %>&redirect=question&template=question<% end %>'>
                <i class='ml-1 ff fa fa-pencil'></i>
            </a>
        <% end %>
    <% end %>

    <span data-toggle="tooltip" data-placement="top" rel="tooltip" title="Liked by <%= node.likers.length %> people" class="btn btn-outline-secondary btn-circle btn-like" node-id="<%= node.id %>" id="like-button-<%= node.id %>">
        <% if !current_user %>
            <a id="open-login-like" data-hashparams="like" data-toggle="modal" data-target="#loginModal">
                <span id="like-star-<%= node.id %>" class="ff fa fa-star"></span>
            </a>
        <% else %>
            <span id="like-star-<%= node.id %>" class="ff fa fa-star<% if !node.liked_by(current_user.uid) %>-o<% end %>"></span>
        <% end %>
    </span>

    <% if @node %>
        <% subpage_count = Tag.find_pages("parent:#{@node.slug}", 100).count %>
        <% if subpage_count > 0 %>
            <span class="btn btn-outline-secondary btn-circle" data-toggle="tooltip" data-placement="top" rel="tooltip" title="<%= subpage_count %> sub-pages">
                <a href="/wiki/tag/parent:<%= @node.slug %>">
                    <i class="ff fa fa-book"></i>
                </a>
            </span>
        <% end %>
    <% end %>

    <span data-toggle="tooltip" data-placement="top" title="Tools" class="btn btn-outline-secondary btn-circle btn-sm" rel="popover" data-placement="left" data-html="true" style="overflow: auto; max-height: 500px" data-content="

        <p><b>Users who liked this</b></p>
        <% node.likers.each do |user| %>
            <i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>/'><%= user.username %></a><br />
        <% end %>
        <% if node.likers.length == 0 %><i>None</i><% end %>
        <% if node.type == 'note' && current_user && node.uid != current_user.uid%>
            <hr style='margin-bottom:3px;' />
            <p><b>Award a Barnstar:</b></p>
            <form class='form' action='/barnstar/give'>
                <select name='star' class='form-control'>
                    <option value='basic'>The basic barnstar</option>
                    <option value='photo-documentation'>The photo documentation barnstar</option>
                    <option value='video-documentation'>The video documentation barnstar</option>
                    <option value='watchdog'>The watchdog barnstar</option>
                    <option value='empiricism'>The empiricism barnstar</option>
                    <option value='excessive-enthusiasm'>The enthusiasm barnstar</option>
                </select><br />
                <input type='hidden' name='nid' value='<%= node.id %>'/>
                <input type='submit' class='btn btn-primary' value='Give'/> &nbsp; <a _target='blank' href='/wiki/barnstars'>Learn more</a>
            </form>
        <% end %>

        <% if logged_in_as(['admin', 'moderator']) || (current_user && current_user.uid == node.uid) %>

            <hr />

            <div class='btn-group'>
                <a rel='tooltip' title='Flag as spam' class='btn btn-sm btn-outline-secondary btn-flag-spam-<%= node.id %>' href='mailto:[email protected]?subject=Reporting+spam+on+Public+Lab&body=Hi,+I+found+this+item+that+looks+like+spam+or+needs+to+be+moderated:+<%= node.title.gsub(/ /,'+') %>+https://publiclab.org/n/<%= node.id %>+by+https://publiclab.org/profile/<%= node.author.username %>+Thanks!'>
                    <i class='fa fa-flag'></i>
                </a>
                <li data-toggle='tooltip' data-placement='top' title='Follow by tag or author' class='btn btn-outline-secondary btn-sm requireLogin nestedPopover' data-html='true' rel='popover' data-placement='left' data-content=&quot;    <%= "No tags" if tagnames.nil? || tagnames.length == 0 %>    <% if tagnames %><% tagnames.each do |tagname| %><p style='margin-bottom:3px; overflow: hidden; text-overflow: ellipsis;'><a href='/subscribe/tag/<%= tagname %>' class='btn btn-outline-secondary btn-sm'><%= tagname %></a></p><% end %><% end %><hr /><i class='fa fa-user'></i><% if current_user && !current_user.following?(node.author) %>&nbsp;<a class='btn btn-sm' href='/relationships?followed_id=<%= node.author.id %>' data-method='post' > <%= node.author.name %></a><% else %>  &nbsp;<%= node.author.name %><% end %>&quot;>
                    <i class='fa fa-user-plus' aria-hidden='true'></i>
                </li>

                <a href='/notes/delete/<%= node.id %>' class='btn btn-outline-secondary btn-sm' data-confirm='Are you sure?'>
                    <i class='fa fa-trash'></i><span class='d-none d-lg-inline'> Delete</span>
                </a>
                <a href='/notes/raw/<%= node.id %>' class='btn btn-outline-secondary btn-sm'>
                    <i class='fa fa-code'></i><span class='d-none d-lg-inline'> Raw</span>
                </a>
                <% if logged_in_as(['admin', 'moderator']) %>
                    <% if node.type == 'note' %>
                        <a class='btn btn-outline-secondary btn-sm' href='/moderate/spam/<%= node.id %>'><i class='fa fa-ban-circle'></i> Spam</a>
                    <% elsif node.type == 'page' %>
                        <a class='btn btn-outline-secondary btn-sm' href='/moderate/revision/spam/<%= @revision.vid %>'><i class='fa fa-ban-circle'></i> Spam revision</a>
                    <% end %>
                <% end %>
            </div>
        <% end %>

        <br />
        <hr style='clear:both;' />

        <div>
            <p><a id='print-command-no-links'><i class='fa fa-print'></i> Print without page links</a></p>
            <p><a id='print-command-3-col'><i class='fa fa-print'></i> Print in 3-column layout</a></p>
        </div>
        ">
        <span style="margin: 5px !important;" class="ff fa fa-ellipsis-h"></span>
    </span>

    <style type="text/css">
/* Styling the links to remove underline on hover and setting pointer as cursor */
#print-command-3-col , #print-command-no-links {
    text-decoration : none;
    cursor : pointer;
}
    .bs-popover-bottom {
        overflow: visible;
        max-width: 1000px;
    }
    .like-buttons {
        margin-top:5px;
    }
    @media (max-width: 992px) {
        .like-buttons {
            justify-content: center !important;
            margin-top: 30px;
        }
    }
    </style>

    <script>
        $('[rel="tooltip"]').on('click', function () {
            $(this).tooltip('hide')
        })
        function print_three_column() {
            $('body').css('column-count', 3)
                .css('column-gap', '50px');
            $('.popover').popover('hide');
            window.print();
            $('body').css('column-count', 1)
                .css('column-gap', 0);
        }
        // Event listner on CLICK on links
        $(document).on("click", "#print-command-3-col",print_three_column);
        $(document).on("click", "#print-command-no-links",print_linkless);
        jQuery(document).ready(function() {
            // 304 cached response yields no data to insert, which is not useful
            jQuery.ajaxSetup({
                cache: false
            });
            // opens modal to login before you can like;
            $("#open-login-like").click(function() {
                $("input[name='hash_params']").val($(this).attr("data-hashparams"));
            });
            // triggers liking and unliking
            <% if current_user %>
                    $('#like-button-<%= node.id %>').on('click', debounce(<% if node.liked_by(current_user.uid) %>clickliked<% else %>clicknotliked<% end %>, 200, true));
            // leaving below uncommented for now - possibility useful for implement comment like functionality?
            // if(window.location.href.includes("#like")) {
            //   $('#like-button-<%= node.id %>').click();
            // }
        <% end %>
        });
        $('body').on('click', '.nestedPopover', function() {
            $(this).popover({
                container: 'body',
                trigger: 'focus click'
            });
            $(this).popover('show');
            $(this).removeClass("nestedPopover");
        });
        $('body').on('click', function (e) { // If there's a click event in the body
            $('[rel=popover]').each(function () { // For each popover
                /*
                 * The popover will only `hide` if all the conditions below are satisfied :
                 * 1. The target triggering the `click` event is not `this`
                 * 2. `this` doesn't have a child triggering the `click` event
                 * 3. Any element with `.popover` class doesn't have a child triggering the `click` event
                 */
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });
    </script>
</div>