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 IdcontentTypeId
: (string) Content Type IdtypeId
: (string) Like Type IdinitialState
: (boolean) Currently liked by the accessing userinitialMessage
: (string) Current like messageinitialCount
: (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: -
onLike
: Function which implements what happens when a like{toggle}
is toggledon
. Automatically defined by Evolution within the like UI component, but can be overridden. Passed parameters:contentId
: Content Id being likedcontentTypeId
: Content Type Id being likedtypeId
: Like Type Idcomplete
: Callback to invoke when liking has completed.
-
onUnlike
: Function which implements what happens when a like{toggle}
is toggledoff
. Automatically defined by Evolution within the like UI component, but can be overridden. Passed parameters:contentId
: Content Id being likedcontentTypeId
: Content Type Id being likedtypeId
: Like Type Idcomplete
: 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'
- default:
-
unlikeText
: Unlike toggle text- default:
'Unlike'
- default:
-
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'
- default:
-
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.'
- default:
-
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.'
- default:
-
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'
- default:
-
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'
- default:
Delegated Popup Modal Options
For calls to $.fn.evolutionLike.delegatePopups(options)
-
modalTitleText
: Modal title- default:
'People who like this'
- default:
-
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 IdcontentTypeId
: Content Type IdtypeId
: Like Type Idcomplete
: Callback to invoke when liking has completed.pageSize
: Likes to return per pagepageIndex
: Page index
onOptions
: A function which parses an element for data to use in calls toonList
. Passed the element which triggered the delegated event handler. Must return an object withcontentId
,contentTypeId
, andtypeId
.likersTemplate
: Template defining the display of a page of likers within the modallikersPopupTemplate
: 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" alt="<%= liker.displayName %>" />
<% } %>
</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>