diff options
Diffstat (limited to 'themes/twentynineteen/js/customize-preview.js')
-rw-r--r-- | themes/twentynineteen/js/customize-preview.js | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/themes/twentynineteen/js/customize-preview.js b/themes/twentynineteen/js/customize-preview.js new file mode 100644 index 00000000..60dfa6fc --- /dev/null +++ b/themes/twentynineteen/js/customize-preview.js @@ -0,0 +1,60 @@ +/** + * File customizer.js. + * + * Theme Customizer enhancements for a better user experience. + * + * Contains handlers to make Theme Customizer preview reload changes asynchronously. + */ + +(function( $ ) { + + // Primary color. + wp.customize( 'primary_color', function( value ) { + value.bind( function( to ) { + // Update custom color CSS. + var style = $( '#custom-theme-colors' ), + hue = style.data( 'hue' ), + css = style.html(), + color; + + if( 'custom' === to ){ + // If a custom primary color is selected, use the currently set primary_color_hue + color = wp.customize.get().primary_color_hue; + } else { + // If the "default" option is selected, get the default primary_color_hue + color = _TwentyNineteenPreviewData.default_hue; + } + + // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. + css = css.split( hue + ',' ).join( color + ',' ); + style.html( css ).data( 'hue', color ); + }); + }); + + // Primary color hue. + wp.customize( 'primary_color_hue', function( value ) { + value.bind( function( to ) { + + // Update custom color CSS. + var style = $( '#custom-theme-colors' ), + hue = style.data( 'hue' ), + css = style.html(); + + // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. + css = css.split( hue + ',' ).join( to + ',' ); + style.html( css ).data( 'hue', to ); + }); + }); + + // Image filter. + wp.customize( 'image_filter', function( value ) { + value.bind( function( to ) { + if ( to ) { + $( 'body' ).addClass( 'image-filters-enabled' ); + } else { + $( 'body' ).removeClass( 'image-filters-enabled' ); + } + } ); + } ); + +})( jQuery ); |