reduxframework / customizer-integration

0 stars 0 forks source link

Redux style not applied to hidden fields on customizer load #14

Open kmob2 opened 8 years ago

kmob2 commented 8 years ago

When the customizer panel is loaded, and a redux field is hidden on page load, and then made visible, the redux style is not applied to the field. Only the raw HTML field is shown, everything redux related is stripped from the style. Only once you click into the field, the redux style is being applied. The fields are being hidden using the official Customizer API.

//admin-config.php
array(
    'id'       => 'demo_buttons',
    'type'     => 'button_set',
    'title'    => __( 'Demo Buttons', 'redux-framework-demo' ),
    'options'  => array(
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3'
    ),
    'default'   => '1'
),

array(
    'id'            => 'demo_slider',
    'type'          => 'slider',
    'title'    => __( 'Demo Slider', 'redux-framework-demo' ),
    'default'       => 1,
    'min'           => 0,
    'step'          => 1,
    'max'           => 10,
    'display_value' => 'text'
),
//theme-customizer-panel.js
wp.customize( 'mytheme[demo_buttons]', function( setting ) {    

    var setupControl = function( hideInput ) {

        return function( control ) {
            var isDisplayed = function() {
                return $.inArray(setting.get(), hideInput) === -1;
            };

            var setActiveState = function() {
                control.active.set( isDisplayed() );
            };

            control.active.validate = isDisplayed;
            setActiveState();
            setting.bind( setActiveState );
        };
    };

    wp.customize.control( 'mytheme[demo_slider]', setupControl(['1', '2']) ); //Hide demo_slider when demo_buttons 1 or 2 is selected

} );

Any idea on how I could fix this? Clicking the radio button again, to hide the slider again, and then making them visible again, applies the style again. It seems that something doesn't fire when the customizer is first loaded and a redux field is hidden.

kmob2 commented 8 years ago

Calling$.redux.initFields(); when the value of a field is changed, seems to do the trick.

wp.customize( 'mytheme[demo_buttons]', function( value ) {
        value.bind( function( newval ) {
            $.redux.initFields();
        } );
    } );