Add gap control

[stijnvanouplines]

This will fix #142 & #383

[stijnvanouplines]

Commit #d931831 adds 2 new actions: jet-form-builder/before-field & jet-form-builder/after-field

Now it’s possible to add elements before or after a field. For example you can add a minus and plus button to a number field:

add_action( 'jet-form-builder/before-field', function ($that) {
    if (isset($that->args['name']) && $that->args['name'] === 'quantity') {
        echo '<button type="button" class="minus">-</button>';
    }
} );

add_action( 'jet-form-builder/after-field', function ($that) {
    if (isset($that->args['name']) && $that->args['name'] === 'quantity') {
        echo '<button type="button" class="plus">+</button>';
    }
} );

Use this little code snipped to make the buttons work:

document.querySelectorAll( '.jet-form-builder__field-wrap:has([name="quantity"])' ).forEach( ( field ) => {
    field.addEventListener( 'click', ( event ) => {
        const input = field.querySelector( 'input' );
        const value = parseFloat( input.value );
        const min = parseFloat( input.getAttribute( 'min' ) );
        const max = parseFloat( input.getAttribute( 'max' ) );
        const step = parseFloat( input.getAttribute( 'step' ) );

        if ( event.target.classList.contains( 'plus' ) ) {
            if ( max && ( max <= value ) ) {
                input.value = max;
            } else {
                input.value = value + step;
            }
        } else {
            if ( min && ( min >= value ) ) {
                input.value = min;
            } else if ( value > min ) {
                input.value = value - step;
            }
        }
    });
});

The idea came from WooCommerce

[girafffee]

@stijnvanouplines Without looking at the details, in general, thank you for your contribution:)

[stijnvanouplines]

Hi @girafffee can you please have a look again?