customize-preview.js (1677B)
1 /** 2 * File customize-preview.js. 3 * 4 * Theme Customizer enhancements for a better user experience. 5 * 6 * Contains handlers to make Theme Customizer preview reload changes asynchronously. 7 */ 8 9 (function( $ ) { 10 11 // Primary color. 12 wp.customize( 'primary_color', function( value ) { 13 value.bind( function( to ) { 14 // Update custom color CSS. 15 var style = $( '#custom-theme-colors' ), 16 hue = style.data( 'hue' ), 17 css = style.html(), 18 color; 19 20 if( 'custom' === to ){ 21 // If a custom primary color is selected, use the currently set primary_color_hue. 22 color = wp.customize.get().primary_color_hue; 23 } else { 24 // If the "default" option is selected, get the default primary_color_hue. 25 color = 199; 26 } 27 28 // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. 29 css = css.split( hue + ',' ).join( color + ',' ); 30 style.html( css ).data( 'hue', color ); 31 }); 32 }); 33 34 // Primary color hue. 35 wp.customize( 'primary_color_hue', function( value ) { 36 value.bind( function( to ) { 37 38 // Update custom color CSS. 39 var style = $( '#custom-theme-colors' ), 40 hue = style.data( 'hue' ), 41 css = style.html(); 42 43 // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. 44 css = css.split( hue + ',' ).join( to + ',' ); 45 style.html( css ).data( 'hue', to ); 46 }); 47 }); 48 49 // Image filter. 50 wp.customize( 'image_filter', function( value ) { 51 value.bind( function( to ) { 52 if ( to ) { 53 $( 'body' ).addClass( 'image-filters-enabled' ); 54 } else { 55 $( 'body' ).removeClass( 'image-filters-enabled' ); 56 } 57 } ); 58 } ); 59 60 })( jQuery );