Show Who Kudoed a Post (working code sample provided!)
Hi everyone,
I recently created a custom component that will replace the title attribute of the kudos counter with a list of users who clicked the button. I did this because it was frustrating to our users to have to click the button to view a list of users who clicked the kudos button. This is a two part component - one component is added to the forum message quilt right next to your message kudos component, the other exists on the forum topic page (where you see a list of posts) and this is just some javascript that will take the data and clone it into the title attribute of the kudos element. This is a working example and you are free to take my code and do whatever you want to it.
Component 1 - getting the data for each post (place this next to the kudos button in your quilt)
<#assign messageId = env.context.message.uniqueId /> <#if messageId?? && messageId gt 0> <#assign cutoff = 10 /> <#assign counter = 0 /> <#assign users = rest("/messages/id/${messageId}/kudos/givers?page_size=${cutoff}").users /> <#assign kudosCount = rest("/messages/id/${messageId}/kudos/count").value /> <#assign remaining = kudosCount?number - cutoff?number /> <#if users??> <#if kudosCount?number gte 1 ><span class="kudosgivers hidden">${kudosCount} <#if kudosCount?number == 1>user<#else>users</#if> liked/thanked this post: <#list users.user as kudosGiver><#assign counter = counter+1 />${kudosGiver.login}<#if counter?number == cutoff?number && kudosCount?number gte cutoff?number+1>... and ${remaining} other <#if remaining == 1> user<#else>users</#if>. <#else><#if counter?number == kudosCount?number>. <#else>, </#if></#if></#list> <#if kudosCount?number gte cutoff?number+1 >Click the number to view who else liked/thanked this post.</#if></span> </#if> </#if> </#if>
Component 2 - using javascript to clone the data and replace the title attribute (place this somewhere in your forum topic quilt)
<@liaAddScript> ;(function($) { $(".kudosgivers").each(function() { var $kudosgivers = $(this); $kudosgivers.parent().find('.kudos-count-link').attr('title', $kudosgivers.text()); $(this).remove(); }); })(LITHIUM.jQuery); </@liaAddScript>
Make sure that you have the '.hidden' CSS (display: none;) so that it hides the span containing the data as it will be displayed on pageload before the javascript destroys the element - also if for any reason a user has javascript turned off it will still keep the element hidden from view.
Feel free to change it to whatever you would like it to do - you don't need to use the javascript if you want to display the users somewhere in a message.
Hope you find this useful!