jQuery.telligent.evolution.ui.components.like
UI Component which handles presentation of like behavior for content. Transforms the output from $core_v2_ui.Like(), which is a <span class="ui-like"></span> stub. The default implementation uses the evolutionLike plugin. Overrides can be provided at the theme level to present liking differently.
Options
Data made available to instances of the component:
contenttypeid: (string) Content Type Id Guidcontentid: (string) Content Id Guidinitialcount: (number) Current Like Countinitialstate: (boolean) Whether the accessing user has already liked the contentreadonly: (boolean) Whether the UI component should render in a read-only stateinitialmessage: (string) Pre-rendered message regarding the current likes a piece of content has-
format: string containing tokens identifying if, and where, the component should render a count, toggle link, and 'who likes' message. For example,"{toggle} {count}","{count} - {message}".-
Tokens:
- {count}
- {toggle}
- {message}
-
Tokens:
-
configuration: Object of all other keys and values passed via the options dictionary to$core_v2_ui.Like(), regardless of whether they have been pre-defined-
jQuery.evolutionLike looks for the following optional configuration:
LinkClassName:LikeTypeId:
-
jQuery.evolutionLike looks for the following optional configuration:
Example
A barebones UI component override which would result in rendering a read-only message of 'Likes: [count] Liked? [yes|no]'.
$.telligent.evolution.ui.components.like = {
setup: function() {
},
add: function(elm, options) {
var message = 'Likes: ' + (options.initialcount || 0);
if(options.initialstate) {
message = message + ' Liked? yes';
} else {
message = message + ' Liked? no';
}
$(elm).html(message);
}
};
Default Implementation
For reference purposes or as the basis for an override:
(function($){
var getCurrentCount = function(contentId, contentTypeId, typeId, complete) {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/likes.json',
data: {
ContentId: contentId,
ContentTypeId: contentTypeId,
TypeId: typeId,
SortBy: 'Date',
SortOrder: 'Descending',
PageSize: 1,
PageIndex: 0
},
cache: false,
dataType: 'json',
success: function(response) {
complete.call(this, {
count: response.TotalCount,
latestLike: response.Likes.length > 0 ? response.Likes[0] : null
});
}
});
};
$.telligent.evolution.messaging.subscribe('ui.like', function(data) {
// update existing like components so that if they regenerate, have the proper value
var likeLinks = data.typeId
? $('.ui-like[data-contentid="' + data.contentId + '"][data-contenttypeid="' + data.contentTypeId + '"][data-typeid="' + data.typeId + '"]')
: $('.ui-like[data-contentid="' + data.contentId + '"][data-contenttypeid="' + data.contentTypeId + '"]');
likeLinks
.attr('data-initialstate', data.liked.toString())
.attr('data-initialcount', data.count.toString())
.attr('data-initialmessage', data.message.toString());
});
$.telligent.evolution.ui.components.like = {
// set up efficient event-delegated handling of showing/hiding who likes popups
setup: function() {
$.fn.evolutionLike.delegatePopups({
containerSelector: '.content-fragment',
delegatedSelector: '.ui-like',
onList: function(contentId, contentTypeId, typeId, complete, pageSize, pageIndex) {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/likes.json',
data: {
ContentId: contentId,
ContentTypeId: contentTypeId,
TypeId: typeId,
SortBy: 'Date',
SortOrder: 'Descending',
PageSize: pageSize || 20,
PageIndex: pageIndex || 0
},
cache: false,
dataType: 'json',
success: function(response) {
// get the resized image html of all the avatars within a batch
$.telligent.evolution.batch(function(){
$.each(response.Likes, function(i, like) {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/ui/image.json',
data: {
url: like.User.AvatarUrl,
maxWidth: 32,
maxHeight: 32,
resizeMethod: 'ZoomAndCrop'
}
}).then(function(response){
like.userAvatarHtml = response.Html;
});
});
}).then(function(){
complete({
likers: $.map(response.Likes, function(like) {
var liker = {
displayName: like.User.DisplayName,
profileUrl: like.User.ProfileUrl,
avatarHtml: like.userAvatarHtml
};
return liker;
}),
hasMorePages: (((response.PageIndex + 1) * response.PageSize) < response.TotalCount)
});
})
}
});
},
onOptions: function(elm) {
var data = $.telligent.evolution.ui.data(elm);
var parsedData = {
contentId: data.contentid,
contentTypeId: data.contenttypeid,
typeId: data.configuration.LikeTypeId
};
return parsedData;
}
});
},
// set up instances of bus-bound like toggles/counts/messages
add: function(elm, options) {
var readOnly = options.readonly === 'true';
$(elm).evolutionLike({
contentId: options.contentid,
contentTypeId: options.contenttypeid,
initialState: options.initialstate,
initialMessage: options.initialmessage,
initialCount: options.initialcount,
format: (readOnly ? options.format.replace('{toggle}','') : options.format),
typeId: options.configuration.LikeTypeId,
onLike: function(contentId, contentTypeId, typeId, complete) {
$.fn.evolutionTip.hide();
var data = {
ContentId: contentId,
ContentTypeId: contentTypeId
};
if(typeId !== null && typeId.length > 0) {
data.TypeId = typeId;
}
$.telligent.evolution.post({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/likes.json',
data: data,
cache: false,
dataType: 'json',
success: function(response) {
getCurrentCount(contentId, contentTypeId, typeId, complete);
}
});
},
onUnlike: function(contentId, contentTypeId, typeId, complete) {
$.fn.evolutionTip.hide();
var data = {
ContentId: contentId
};
if(typeId !== null && typeId.length > 0) {
data.TypeId = typeId;
}
$.telligent.evolution.del({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/like.json',
data: data,
cache: false,
dataType: 'json',
success: function(response) {
getCurrentCount(contentId, contentTypeId, typeId, complete);
}
});
}
});
}
};
}(jQuery));