Forum Discussion

Jake_N's avatar
Jake_N
Mentor
7 years ago

Badge Hove Function

Hey again everyone,

I have hit another thing I would love help with.

 

I have an example of what I want here https://www.workshop.com.au/t5/badges/userbadgespage/user-id/865/page/1

I would like to know how they were able to get a hover option in the view all badge area.

 

This is something I have been working on that I have been able to recreate the view all page, but no revoke button due to this being a component not being able to replicate unless anyone has any ideas? I saw a post that says that this is not something that can happen but I am hopefully regardless.

 

How would I get the revoke button to show and stop the click function from occurring and get the hover function implemented instead. I know the code that executed the click function but I am unable to override this. I tried with a  bunch of JS and jQuery to no avail.

  • peterlu's avatar
    peterlu
    7 years ago
    Jake_N That is a built in Lithium user badges page. Revoke is Out-of-Box feature. I think Revoke is for admin to see. Normal user should not be able to see the revoke. Correct me if I am wrong :) Also there are some APIs for badges, and you can build some fancy function for this page. By default, it is clicking to see the back of the badge card. You can use LITHIUM.jQuery to unbind the click function. see jquery off() function. And you can use CSS hover to achieve the hover effect.
  • ClaudiusH's avatar
    ClaudiusH
    7 years ago

    On a Lithium community page the jQuery root object is  instantiated as 

    LITHIUM.jQuery

    So you need to use the LITHIUM. namespace in order to access it. This is if you are not using your own jQuery object and library.

     

    The behaviour of showing the badge description on hover is actually the Lithium out of the box behaviour for the "View All Badges" page. It is realized fully via CSS and showing one of the two containers for reach badge depending on hover state. This is the container structure you would build:

    { [Badge front with image and name]  [Badge back with description] }

    The :hover would apply to the  { } outer container.

     

    The "Revoke badge" button can't be re-created via API right now. See also the related discussion here: https://community.lithium.com/t5/Developer-Discussion/Recreating-Badge-List-Component/m-p/278456

  • peterlu's avatar
    peterlu
    Champion
    7 years ago
    Jake_N That is a built in Lithium user badges page. Revoke is Out-of-Box feature. I think Revoke is for admin to see. Normal user should not be able to see the revoke. Correct me if I am wrong :) Also there are some APIs for badges, and you can build some fancy function for this page. By default, it is clicking to see the back of the badge card. You can use LITHIUM.jQuery to unbind the click function. see jquery off() function. And you can use CSS hover to achieve the hover effect.
    • Jake_N's avatar
      Jake_N
      Mentor
      7 years ago

      Hi peterlu,

      Thanks for that. Yeah you are right with the revoke button. I thought as much.

      I did try using the .off() and also the unbind to stop the clink function but was unsuccessful.

       

      I was using jQuery('elem').off(); & jQuery('elem').unbind(); but neither of these work do I need to include the "LITHIUM" part?

      • peterlu's avatar
        peterlu
        Champion
        7 years ago

        Jake_N 

        Below is the full freemarker and js code

        <@liaAddScript>
;(function($){
	$(function() {
		$('.lia-component-badges-list .lia-user-badge-display-card').off('click');
	});
})(LITHIUM.jQuery);
</@liaAddScript>

         

        You can also try the blow script directly in Chrome console for quick testing purpose.

        ;(function($){
	$('.lia-component-badges-list .lia-user-badge-display-card').off('click');
})(LITHIUM.jQuery);

         

        Kudo and solution :)