WordPress.org

Make WordPress Core

Changeset 29051


Ignore:
Timestamp:
07/09/2014 11:57:29 PM (4 years ago)
Author:
SergeyBiryukov
Message:

Customizer: Introduce WP_Customize_Control::active() method to determine whether the control is relevant to the current context (i.e. to the current URL being previewed).

Control can indicate its active state by a subclass overriding the 'active_callback' method, by supplying a callable 'active_callback' argument into the control's constructor, or by filtering 'customize_control_active'.

props westonruter.
see #27993.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r29048 r29051  
    3838            this.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
    3939            this.container = $( this.selector );
     40            this.active = new api.Value( this.params.active );
    4041
    4142            settings = $.map( this.params.settings, function( value ) {
     
    8081                });
    8182            });
     83
     84            control.active.bind( function ( active ) {
     85                control.toggle( active );
     86            } );
     87            control.toggle( control.active() );
    8288        },
    8389
    8490        ready: function() {},
     91
     92        /**
     93         * Callback for change to the control's active state.
     94         *
     95         * Override function for custom behavior for the control being active/inactive.
     96         *
     97         * @param {Boolean} active
     98         */
     99        toggle: function ( active ) {
     100            if ( active ) {
     101                this.container.slideDown();
     102            } else {
     103                this.container.slideUp();
     104            }
     105        },
    85106
    86107        dropdownInit: function() {
     
    563584
    564585            this.bind( 'ready', this._ready );
     586
     587            this.bind( 'ready', function ( data ) {
     588                if ( ! data || ! data.activeControls ) {
     589                    return;
     590                }
     591
     592                // Any controls not even registered on the previewed URL are not active either
     593                api.control.each( function ( control ) {
     594                    if ( typeof data.activeControls[ control.id ] === 'undefined' ) {
     595                        data.activeControls[ control.id ] = false;
     596                    }
     597                } );
     598
     599                $.each( data.activeControls, function ( id, active ) {
     600                    var control = api.control( id );
     601                    if ( control ) {
     602                        control.active( active );
     603                    }
     604                } );
     605            } );
    565606
    566607            this.request = $.ajax( this.previewUrl(), {
  • trunk/src/wp-admin/js/customize-widgets.js

    r29048 r29051  
    752752            } );
    753753
    754             // Update widget control to indicate whether it is currently rendered
    755             api.previewer.bind( 'rendered-widgets', function( renderedWidgets ) {
    756                 var isRendered = !! renderedWidgets[self.params.widget_id];
    757 
    758                 self.container.toggleClass( 'widget-rendered', isRendered );
    759             } );
    760 
    761754            formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
    762755            if ( formSyncHandler ) {
     
    767760                } );
    768761            }
     762        },
     763
     764        /**
     765         * Update widget control to indicate whether it is currently rendered.
     766         *
     767         * Overrides api.Control.toggle()
     768         *
     769         * @param {Boolean} active
     770         */
     771        toggle: function ( active ) {
     772            this.container.toggleClass( 'widget-rendered', active );
    769773        },
    770774
     
    14191423
    14201424            // Update the model with whether or not the sidebar is rendered
    1421             api.previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
    1422                 var isRendered = !! renderedSidebars[self.params.sidebar_id];
    1423 
    1424                 registeredSidebar.set( 'is_rendered', isRendered );
    1425             } );
    1426 
    1427             // Show the sidebar section when it becomes visible
    1428             registeredSidebar.on( 'change:is_rendered', function( ) {
    1429                 var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
    1430 
    1431                 $section = $( sectionSelector );
    1432                 if ( this.get( 'is_rendered' ) ) {
    1433                     $section.stop().slideDown( function() {
    1434                         $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
    1435                     } );
    1436 
    1437                 } else {
    1438                     // Make sure that hidden sections get closed first
    1439                     if ( $section.hasClass( 'open' ) ) {
    1440                         // it would be nice if accordionSwitch() in accordion.js was public
    1441                         $section.find( '.accordion-section-title' ).trigger( 'click' );
    1442                     }
    1443 
    1444                     $section.stop().slideUp();
    1445                 }
    1446             } );
     1425            self.active.bind( function ( active ) {
     1426                registeredSidebar.set( 'is_rendered', active );
     1427            } );
     1428        },
     1429
     1430        /**
     1431         * Show the sidebar section when it becomes visible.
     1432         *
     1433         * Overrides api.Control.toggle()
     1434         *
     1435         * @param {Boolean} active
     1436         */
     1437        toggle: function ( active ) {
     1438            var $section, sectionSelector;
     1439
     1440            sectionSelector = '#accordion-section-sidebar-widgets-' + this.params.sidebar_id;
     1441            $section = $( sectionSelector );
     1442
     1443            if ( active ) {
     1444                $section.stop().slideDown( function() {
     1445                    $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
     1446                } );
     1447
     1448            } else {
     1449                // Make sure that hidden sections get closed first
     1450                if ( $section.hasClass( 'open' ) ) {
     1451                    // it would be nice if accordionSwitch() in accordion.js was public
     1452                    $section.find( '.accordion-section-title' ).trigger( 'click' );
     1453                }
     1454
     1455                $section.stop().slideUp();
     1456            }
    14471457        },
    14481458
  • trunk/src/wp-includes/class-wp-customize-control.php

    r28980 r29051  
    8686    public $type = 'text';
    8787
     88    /**
     89     * Callback
     90     *
     91     * @since 4.0.0
     92     *
     93     * @access public
     94     * @see WP_Customize_Control::active()
     95     * @var callable  Callback is called with one argument, the instance of
     96     *                WP_Customize_Control, and returns bool to indicate whether
     97     *                the control is active (such as it relates to the URL
     98     *                currently being previewed).
     99     */
     100    public $active_callback = '';
    88101
    89102    /**
     
    103116        $keys = array_keys( get_object_vars( $this ) );
    104117        foreach ( $keys as $key ) {
    105             if ( isset( $args[ $key ] ) )
     118            if ( isset( $args[ $key ] ) ) {
    106119                $this->$key = $args[ $key ];
     120            }
    107121        }
    108122
    109123        $this->manager = $manager;
    110124        $this->id = $id;
     125        if ( empty( $this->active_callback ) ) {
     126            $this->active_callback = array( $this, 'active_callback' );
     127        }
    111128
    112129        // Process settings.
    113         if ( empty( $this->settings ) )
     130        if ( empty( $this->settings ) ) {
    114131            $this->settings = $id;
     132        }
    115133
    116134        $settings = array();
     
    133151    public function enqueue() {}
    134152
     153    /**
     154     * Check whether control is active to current customizer preview.
     155     *
     156     * @since 4.0.0
     157     *
     158     * @return bool
     159     */
     160    public final function active() {
     161        $control = $this;
     162        $active = call_user_func( $this->active_callback, $this );
     163
     164        /**
     165         * Filter response of WP_Customize_Control::active().
     166         *
     167         * @since 4.0.0
     168         *
     169         * @param bool $active
     170         * @param WP_Customize_Control $control
     171         */
     172        $active = apply_filters( 'customize_control_active', $active, $control );
     173
     174        return $active;
     175    }
     176
     177    /**
     178     * Default callback used when invoking WP_Customize_Control::active().
     179     *
     180     * Subclasses can override this with their specific logic, or they may
     181     * provide an 'active_callback' argument to the constructor.
     182     *
     183     * @return bool
     184     */
     185    public function active_callback() {
     186        return true;
     187    }
    135188
    136189    /**
     
    144197     */
    145198    public final function value( $setting_key = 'default' ) {
    146         if ( isset( $this->settings[ $setting_key ] ) )
     199        if ( isset( $this->settings[ $setting_key ] ) ) {
    147200            return $this->settings[ $setting_key ]->value();
     201        }
    148202    }
    149203
     
    160214
    161215        $this->json['type'] = $this->type;
     216        $this->json['active'] = $this->active();
    162217    }
    163218
     
    257312    }
    258313
    259     /**
     314    /**
    260315     * Render the custom attributes for the control's input element.
    261316     *
     
    9961051        <?php
    9971052    }
     1053
     1054    /**
     1055     * @return bool
     1056     */
     1057    function active_callback() {
     1058        return $this->manager->widgets->is_sidebar_rendered( $this->sidebar_id );
     1059    }
    9981060}
    9991061
     
    10361098        echo $this->manager->widgets->get_widget_control( $args );
    10371099    }
     1100
     1101    /**
     1102     * @return bool
     1103     */
     1104    function active_callback() {
     1105        return $this->manager->widgets->is_widget_rendered( $this->widget_id );
     1106    }
    10381107}
    10391108
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r28970 r29051  
    476476        $settings = array(
    477477            'values'  => array(),
    478             'channel' => esc_js( $_POST['customize_messenger_channel'] ),
     478            'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
     479            'activeControls' => array(),
    479480        );
    480481
     
    488489        foreach ( $this->settings as $id => $setting ) {
    489490            $settings['values'][ $id ] = $setting->js_value();
     491        }
     492        foreach ( $this->controls as $id => $control ) {
     493            $settings['activeControls'][ $id ] = $control->active();
    490494        }
    491495
  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r29028 r29051  
    10691069     */
    10701070    public function tally_rendered_widgets( $widget ) {
    1071         $this->rendered_widgets[$widget['id']] = true;
     1071        $this->rendered_widgets[ $widget['id'] ] = true;
     1072    }
     1073
     1074    /**
     1075     * Determine if a widget is rendered on the page.
     1076     *
     1077     * @since 4.0.0
     1078     * @access public
     1079     *
     1080     * @param string $widget_id
     1081     * @return bool
     1082     */
     1083    public function is_widget_rendered( $widget_id ) {
     1084        return in_array( $widget_id, $this->rendered_widgets );
     1085    }
     1086
     1087    /**
     1088     * Determine if a sidebar is rendered on the page.
     1089     *
     1090     * @since 4.0.0
     1091     * @access public
     1092     *
     1093     * @param string $sidebar_id
     1094     * @return bool
     1095     */
     1096    public function is_sidebar_rendered( $sidebar_id ) {
     1097        return in_array( $sidebar_id, $this->rendered_sidebars );
    10721098    }
    10731099
  • trunk/src/wp-includes/js/customize-preview-widgets.js

    r28100 r29051  
    2323            this.buildWidgetSelectors();
    2424            this.highlightControls();
    25 
    26             this.preview.bind( 'active', function() {
    27                 self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
    28                 self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
    29             } );
    3025
    3126            this.preview.bind( 'highlight-widget', self.highlightWidget );
  • trunk/src/wp-includes/js/customize-preview.js

    r27704 r29051  
    9696        });
    9797
    98         preview.send( 'ready' );
     98        preview.send( 'ready', {
     99            activeControls: api.settings.activeControls
     100        } );
    99101
    100102        /* Custom Backgrounds */
Note: See TracChangeset for help on using the changeset viewer.