evolutionLike jQuery Plugin

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. Raises and responds to 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.

$.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 messages)
  • {message}: Current message (updated upon 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, 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, 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> <span class="who-likes">and 1 other</span> 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 <span class="who-likes">{count} others</span> 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 <span class="who-likes">1 other</span> like this'
• whoLikesAccessingMultipleText: Like {message} value when three or more users (including the current user) like the content
  • default: 'You and <span class="who-likes">{count} others</span> 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 defining the display of a page of likers within the modal
• likersPopupTemplate: 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>