Beaver's System Custom Elements

beavers-selection

Beavers-selection is a custom element that emulate the look and behaviour of a selectbox. Enhancing a selection with images on each option.

usage:

just surround your existing select box with a <beavers-selection>

<beavers-selection>
 <select>
   <option value="1" img="$img">text</option>
 </select>
</beavers-selection>

The following attributes are transformed

• <select disabled //will emulate disabled selectbox
• <select size="l" //will emulate the selectbox in large = 30px default 20px
• <select name="xyz" //emulates a form field e.g. can be used within vtt FormApplications as normal.
• <option img="" //will use this as image for your emulated option.
• <option value="" //will be used as selected id.

interaction:

instead of listening for a change event on a select element you need to listen on an InputEvent on an input element.

$(this).find('select').on('change',doAction);
$(this).find('input').on('input',doAction);