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.

git-svn-id: https://develop.svn.wordpress.org/trunk@29051 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
2014-07-09 23:57:29 +00:00
parent ccef0ae5f0
commit 1477277b53
7 changed files with 186 additions and 39 deletions
+41
View File
@@ -37,6 +37,7 @@
this.id = id;
this.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
this.container = $( this.selector );
this.active = new api.Value( this.params.active );
settings = $.map( this.params.settings, function( value ) {
return value;
@@ -79,10 +80,30 @@
element.set( setting() );
});
});
control.active.bind( function ( active ) {
control.toggle( active );
} );
control.toggle( control.active() );
},
ready: function() {},
/**
* Callback for change to the control's active state.
*
* Override function for custom behavior for the control being active/inactive.
*
* @param {Boolean} active
*/
toggle: function ( active ) {
if ( active ) {
this.container.slideDown();
} else {
this.container.slideUp();
}
},
dropdownInit: function() {
var control = this,
statuses = this.container.find('.dropdown-status'),
@@ -563,6 +584,26 @@
this.bind( 'ready', this._ready );
this.bind( 'ready', function ( data ) {
if ( ! data || ! data.activeControls ) {
return;
}
// Any controls not even registered on the previewed URL are not active either
api.control.each( function ( control ) {
if ( typeof data.activeControls[ control.id ] === 'undefined' ) {
data.activeControls[ control.id ] = false;
}
} );
$.each( data.activeControls, function ( id, active ) {
var control = api.control( id );
if ( control ) {
control.active( active );
}
} );
} );
this.request = $.ajax( this.previewUrl(), {
type: 'POST',
data: this.query,
+37 -27
View File
@@ -751,13 +751,6 @@
}
} );
// Update widget control to indicate whether it is currently rendered
api.previewer.bind( 'rendered-widgets', function( renderedWidgets ) {
var isRendered = !! renderedWidgets[self.params.widget_id];
self.container.toggleClass( 'widget-rendered', isRendered );
} );
formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
if ( formSyncHandler ) {
$( document ).on( 'widget-synced', function( e, widget ) {
@@ -768,6 +761,17 @@
}
},
/**
* Update widget control to indicate whether it is currently rendered.
*
* Overrides api.Control.toggle()
*
* @param {Boolean} active
*/
toggle: function ( active ) {
this.container.toggleClass( 'widget-rendered', active );
},
/**
* Set up event handlers for widget removal
*/
@@ -1418,32 +1422,38 @@
} );
// Update the model with whether or not the sidebar is rendered
api.previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
var isRendered = !! renderedSidebars[self.params.sidebar_id];
registeredSidebar.set( 'is_rendered', isRendered );
self.active.bind( function ( active ) {
registeredSidebar.set( 'is_rendered', active );
} );
},
// Show the sidebar section when it becomes visible
registeredSidebar.on( 'change:is_rendered', function( ) {
var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
/**
* Show the sidebar section when it becomes visible.
*
* Overrides api.Control.toggle()
*
* @param {Boolean} active
*/
toggle: function ( active ) {
var $section, sectionSelector;
$section = $( sectionSelector );
if ( this.get( 'is_rendered' ) ) {
$section.stop().slideDown( function() {
$( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
} );
sectionSelector = '#accordion-section-sidebar-widgets-' + this.params.sidebar_id;
$section = $( sectionSelector );
} else {
// Make sure that hidden sections get closed first
if ( $section.hasClass( 'open' ) ) {
// it would be nice if accordionSwitch() in accordion.js was public
$section.find( '.accordion-section-title' ).trigger( 'click' );
}
if ( active ) {
$section.stop().slideDown( function() {
$( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
} );
$section.stop().slideUp();
} else {
// Make sure that hidden sections get closed first
if ( $section.hasClass( 'open' ) ) {
// it would be nice if accordionSwitch() in accordion.js was public
$section.find( '.accordion-section-title' ).trigger( 'click' );
}
} );
$section.stop().slideUp();
}
},
/**