like UI Component

Ben Tiedt — Fri, 08 Mar 2024 17:52:04 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:52:04

jQuery.telligent.evolution.ui.components.like

[[ui JavaScript API Module|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 jQuery Plugin|evolutionLike plugin]]. [[ui JavaScript API Module|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 Guid
contentid: (string) Content Id Guid
initialcount: (number) Current Like Count
initialstate: (boolean) Whether the accessing user has already liked the content
readonly: (boolean) Whether the UI component should render in a read-only state
initialmessage: (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}
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
- [[evolutionLike jQuery Plugin|jQuery.evolutionLike]] looks for the following optional configuration:
  - LinkClassName:
  - LikeTypeId:

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));