Listen for checkbox check event for assets table and modify action trigger menu item

Question

I am able to listen to an event when the user checks the checkbox in the assets table. This is within my js file init file that extends garnish: Garnish.Base.extend

When the checkbox is selected, I see "checkbox clicked" in the console. The commented out in the function below is just to explain what I need to do when the checkbox is checked.

$('.elements:first').on('click', '.checkbox', function(event) { 

    if ($(event.target).is('#main .elements:first .checkbox')) {
        console.log('checkbox clicked');

        // if file kind == "Image" 
            // hide "View asset" from actions menu in the toolbar
        // else
            // do nothing

    }
});

What I need to do is, when the user checks the box, I need to determine the file kind, using the data-attr kind, the html for that td cell is below.

<td data-title="File Kind" data-attr="kind">Image</td>

If it is an image, then hide the "View asset" from the menu dropdown that displays in the toolbar. (image attached)

The view asset has an id of: View-actiontrigger

I am having trouble accessing it as it does not exist when my code is firing on the checkbox click.

Answer 1

Here is one approach: Whenever an asset is checked on or off, it triggers a manipulation of the hidden ul.menu. You could listen for that update to be complete, then you’ll be able to access and hide the link.

$('#main .elements:first').on('click', '.checkbox', function(evt) {

    // "View Asset" action is visible by default
    var isViewActionVisible = true;

    // If only one asset is selected and it is an image, set up to hide "View Asset"
    // Otherwise, stick with default behavior
    if ( $('#main .elements:first tr.sel').length == 1 &&
         $('#main .elements:first tr.sel td[data-attr="kind"]').html() == "Image" ) {
        isViewActionVisible = false;
    }

    // Wait for menu ul to finish updating, then show/hide "View Asset" action
    $(document).one('DOMNodeInserted', 'ul.menu', function() {
        $('a#View-actiontrigger').parent().toggle( isViewActionVisible );
    });

});