Skip to content

Instantly share code, notes, and snippets.

@lourfield lourfield/customizer-control.js Secret
Created Sep 23, 2016

Embed
What would you like to do?
Basic examples to use the Customizer JavaScript API
( function( $ ) {
wp.customize.bind( 'ready', function() {
var customize = this;
wp.customize.section( 'colors' ).collapse({
duration: 0
});
customize( 'display_blogname', function( value ) {
var siteTitleInput = customize.control( 'blogname' ).container.find( 'input' );
siteTitleInput.prop( 'disabled', !value.get() );
value.bind( function( to ) {
siteTitleInput.prop( 'disabled', !to );
} );
// 1. Control Toggles
var colorControls = [
'header_textcolor',
'header_textcolor_hover'
];
$.each( colorControls, function( index, id ) {
customize.control( id, function( control ) {
var toggle = function( to ) {
control.toggle( to );
};
toggle( value.get() );
value.bind( toggle );
} );
} );
// 1.b
function toggleSection( section, to ) {
if ( to ) {
customize.section( 'colors' ).deactivate({
duration: 0
});
} else {
customize.section( 'colors' ).activate({
duration: 0
});
}
}
toggleSection( 'colors', !value.get() );
value.bind( function( to ) {
toggleSection( 'colors', !to );
} );
//3. Handling Colors
customize( 'header_textcolor', function( value ) {
function shadeColor( color, percent ) {
var f = parseInt( color.slice( 1 ), 16 ),
t = percent < 0 ? 0 : 255,
p = percent < 0 ? percent * -1 : percent,
R = f >> 16,
G = f >> 8 & 0x00FF,
B = f & 0x0000FF;
return "#" + ( 0x1000000 + ( Math.round( ( t - R ) * p ) + R ) * 0x10000 + ( Math.round( ( t - G ) * p ) + G ) * 0x100 + ( Math.round( ( t - B ) * p ) + B ) ).toString( 16 ).slice( 1 );
}
value.bind( function( value ) {
var color = shadeColor( value, -0.2 ); // Set the 'hover' color value.
customize( 'header_textcolor_hover' ).set( color );
customize
.control( 'header_textcolor_hover' )
.container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
} );
} );
} );
} );
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.