Toggle Field

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.
This topic is: not resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #91298

    Jon
    Participant

    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',
    ),
    #91496

    Justin Busa
    Keymaster

    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

    #91519

    Jon
    Participant

    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.

    #91538

    Jon
    Participant

    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

    #91540

    Jon
    Participant

    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']) ."'"; ?>

    #91776

    Justin Busa
    Keymaster

    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

    #108332

    Didou
    Participant
    This reply has been marked as private.
Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Custom Module Development’ is closed to new topics and replies.