Customising VIPER editor - image selection


(Kequi) #1

Matrix Version:
Squiz Matrix v5.4.1.0

Hi everyone - need some expert js advice on customising VIPER please!

I have added the VIPER editor to an asset builder edit page (using simple edit layout).

Works fine for most things including uploading images and setting images via urls.
I can also paste or type in an assetid in the image ID input box - and this will work also.

The asset finder doesn’t work (Insert Image - Asset - Pick Asset) - which I guess is because I don’t have the full Edit + system running which includes all the code round the asset finder.
But that’s OK - I don’t really want the people using this edit page to have access to the asset finder.

What I want is for users to see a list of images under a specific root node - then click a button and have the ID inserted into the ID field in VIPER.

I’ve actually managed to do that (crudely for now but it works - see screen grab).

Unfortunately what I can’t do is at the same time as inserting the id number - triggering the keyup event that activates the ID number and loads the preview image and activates the “apply” button. (so I can get the ID number in the box but I have to then press a key to move on)

I can trigger this by manually pressing a key - but for the life of me I can’t work out how to trigger it as part of the onclick function that inserts the id number.

I’ve tried sending a keyup event - and this will trigger MY test code where I’ve added my own keyup event to the input box - but it won’t trigger the viper keyup event.

// $( “.Viper-chooseAssetRow input.Viper-textbox-input” ).trigger( “keyup” );

I’ve spent hours looking around the viper code to try and work out how to fire this keyup event via js - but my js skills are nowhere near where they need to be.

So if anyone has any ideas on how to fire the relevant Viper event to a specific input box I’d be very interested to hear your thoughts.

Thanks again

Karl