evolutionLike jQuery Plugin

Ben Tiedt — Tue, 19 Nov 2019 20:29:10 GMT

Current Revision posted to API Documentation by Ben Tiedt on 11/19/2019 20:29:10

jQuery.fn.evolutionLike

This plugin renders a templatable, interactive, like indicator and toggle. It is typically not called directly, but instead via usage of the [[like UI Component|like UI component]]. Raises and responds to [[ui.like Client Message|ui.like]] messages.

Usage

Initializes a new plugin instance against a span:

$('span.mySelector').evolutionLike(options);

jQuery.fn.evolutionLike also defines a method for initializing "Who Liked?" modal popups to be bound to click events via event delegation. This is also not typically called directly, but instead via usage of the [[like UI Component|like UI component]].

$.fn.evolutionLike.delegatePopups(options);

Options

Primary Options

contentId: (string) Content Id
contentTypeId: (string) Content Type Id
typeId: (string) Like Type Id
initialState: (boolean) Currently liked by the accessing user
initialMessage: (string) Current like message
initialCount: (number) Initial like count
format: (string) text format defining the presentation of the like. While the string can contain any text, three specific tokens are replaced when they exist:
- {count}: Current like count (updated upon [[ui.like Client Message|ui.like]] messages)
- {message}: Current message (updated upon [[ui.like Client Message|ui.like]] messages)
- {toggle}: Link which toggles a like, calling onLike or onUnlike
onLike: Function which implements what happens when a like {toggle} is toggled on. Automatically defined by Evolution within the [[like UI Component|like UI component]], but can be overridden. Passed parameters:
- contentId: Content Id being liked
- contentTypeId: Content Type Id being liked
- typeId: Like Type Id
- complete: Callback to invoke when liking has completed.
onUnlike: Function which implements what happens when a like {toggle} is toggled off. Automatically defined by Evolution within the [[like UI Component|like UI component]], but can be overridden. Passed parameters:
- contentId: Content Id being liked
- contentTypeId: Content Type Id being liked
- typeId: Like Type Id
- complete: Callback to invoke when liking has completed.

Resource Options

Defined (and localized) globally by Evolution, but can be overridden.

likeText: Like toggle text
- default: 'Like'
unlikeText: Unlike toggle text
- default: 'Unlike'
whoLikesOtherText: Like {message} value when only one (non-current) user likes the content
- default: '<a href="{user_profile_url}" class="internal-link view-user-profile">{user_display_name}</a> likes this'
whoLikesOtherTwoText: Like {message} value when two users (not including the current user) like the content
- default: '<a href="{user_profile_url}" class="internal-link view-user-profile">{user_display_name}</a> and 1 other like this.'
whoLikesOtherMultipleText: Like {message} value when three or more users (not including the current user) like the content
- default: '<a href="{user_profile_url}" class="internal-link view-user-profile">{user_display_name}</a> and {count} others like this.'
whoLikesAccessingText: Like {message} value the current user likes the content
- default: `'You like this'
whoLikesAccessingTwoText: Like {message} value when two users (including the current user) like the content
- default: 'You and 1 other like this'
whoLikesAccessingMultipleText: Like {message} value when three or more users (including the current user) like the content
- default: 'You and {count} others like this'

Delegated Popup Modal Options

For calls to $.fn.evolutionLike.delegatePopups(options)

modalTitleText: Modal title
- default: 'People who like this'
containerSelector: Container elements on which to bind 'click' events to initiate modals
- default: '.content-fragment'
delegatedSelector: Specific elements on which to delegate 'click' events.
- default: '.ui-like'
onList: Function which returns a list of users who have liked a content item. Passed parameters:
- contentId: Content Id
- contentTypeId: Content Type Id
- typeId: Like Type Id
- complete: Callback to invoke when liking has completed.
- pageSize: Likes to return per page
- pageIndex: Page index
onOptions: A function which parses an element for data to use in calls to onList. Passed the element which triggered the delegated event handler. Must return an object with contentId, contentTypeId, and typeId.
likersTemplate: [[template JavaScript API Module|Template]] defining the display of a page of likers within the modal
likersPopupTemplate: [[template JavaScript API Module|Template]] defining the modal

default likersTemplate:

<% foreach(likers, function(liker) { %>
    <li class="content-item">
        <div class="full-post-header"></div>
        <div class="full-post">
            <span class="avatar">
                <a href="<%: liker.profileUrl %>"  class="internal-link view-user-profile">
                    <% if(liker.avatarHtml) { %>
                        <%= liker.avatarHtml %>
                    <% } else { %>
                        <img src="<%: liker.avatarUrl %>" alt="" border="0" width="32" height="32" style="width:32px;height:32px" />
                    <% } %>
                </a>
            </span>
            <span class="user-name">
                <a href="<%: liker.profileUrl %>" class="internal-link view-user-profile"><%= liker.displayName %></a>
            </span>
        </div>
        <div class="full-post-footer"></div>
    </li>
<% }); %>

default likersPopupTemplate:

<div class="who-likes-list">
    <div class="content-list-header"></div>
    <ul class="content-list"><%= likers %></ul>
    <div class="content-list-footer"></div>
    <% if(hasMorePages) { %>
        <a href="#" class="show-more"><%= showMoreText %></a>
    <% } %>
</div>