How do I show a Garnish hud in the CP

Question

I've written a custom plugin and added a custom button to the right panel of an entry page

Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets)

The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)

I put this code in my plugin specific js file

var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
        orientations: ['top', 'bottom', 'right', 'left'],
        hudClass: 'hud toolhud',
    });

But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.

Can anyone point me in the right direction?

Answer 1

I finally figured this out. I was actually close.

Here's the HTML that I use

<div class="hud-wrapper hidden">
    <div id="generate-pdf-form" class="form meta">
        <form>

            {% import "_includes/forms" as forms %}

            {{ forms.lightswitchField({
                 class: 'docraptorize-prod-lightswitch',
                 name: 'prod-pdf',
                 on: true
            }) }}   

            <input type="submit" class="btn submit" value="{{ "Go!"|t }}">
        </form>
    </div>
</div>

and this is the corresponding JS

var $btn = $('#generate-pdf-hud'),
$form = $('#generate-pdf-form');

$btn.on('click',function(){
    var hud = new Garnish.HUD($btn, $form, {
        orientations: ['top', 'bottom', 'right', 'left']
    });
   return false;
});