Toggle Field

Developers
1

I created a toggle field to use in my modules (rather than using the select field)

You can download it to use from git github.com/CarassiusPro/beaver-builder-toggle-field

This is the default look

And this is with the custom settings

The output value is always ‘true’ or ‘false’ but you can see you can change the labels and colours.

The settings are fairly straight forward


'my_toggle_field'     => array(
'type'          => 'toggle',
'label'         => __( 'Toggle Field', 'fl_builder' ),
'default'       => 'true',
'color'         => 'red',
'true'          => 'Yes',
'false'         => 'No',
),
2

Hey Jon,

That is badass! Personally I’d default it to Yes/No instead of True/False since that seems a little more techy, but otherwise it’s fantastic! We’ll have to look at implementing something like that in the builder soon.

Justin

3

Thanks Justin, it still needs some work and has taken me ages to get something even remotely working, but will be adding some more to it. I am going to using the options to loop through and create the toggles (similar to the select field) and try to get the toggle option working as well.

Have to admit, I was surprised there are no checkbox or radio fields in core already.

4

I just updated this to fix a couple of bugs, as well as add support for styling active and nonactive states and also the ability to have three buttons

5

Hey Justin

Could you take a look at my code, and see where I might place the code to add field toggle support?

I think this is the code I need to add?

<?php if(isset($field['toggle'])) echo "data-toggle='". json_encode($field['toggle']) ."'"; if(isset($field['hide'])) echo "data-hide='". json_encode($field['hide']) ."'"; ?>

6

Hey Jon,

The toggle logic is only setup to run on select inputs, but you may be able to get it working with some custom JS. Can you give something like this a shot (replacing your info where needed)…

You’ll need this event…

$('body').delegate('YOUR_TOGGLE_CLASS_SELECTOR', 'change', FLBuilder._settingsSelectChanged);

You’ll also want this to be called when a settings form is loaded…

$('.fl-builder-settings:visible').find('YOUR_TOGGLE_CLASS_SELECTOR').trigger('change');

For the first event to work, you’ll need to manually trigger the change event on your toggle input whenever it is clicked.

Let me know if you have any questions.

Justin

7

[Content Hidden]