Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 11.x
  • Verint Community
Verint Community 11.x
API Documentation like UI Component
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • +JavaScript API Modules
      • +jQuery Events
      • +jQuery Plugins
      • -UI Components
        • bookmark UI Component
        • code UI Component
        • collapseexpand UI Component
        • feature UI Component
        • html UI Component
        • like UI Component
        • links UI Component
        • loading UI Component
        • masonry UI Component
        • moderate UI Component
        • page UI Component
        • poll UI Component
        • previewhtml UI Component
        • rate UI Component
        • resizedimage UI Component
        • scheduledfile UI Component
        • searchresult UI Component
        • select UI Component
        • squeezetext UI Component
        • theater UI Component
        • tip UI Component
        • tourtip UI Component
        • UI Component tag
        • viewhtml UI Component
        • webpreview UI Component
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

like UI Component


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

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2022 Verint, Inc.
Powered by Verint Community