customize-preview.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. /**
  2. * File customizer.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. (function( $ ) {
  9. // Primary color.
  10. wp.customize( 'primary_color', function( value ) {
  11. value.bind( function( to ) {
  12. // Update custom color CSS.
  13. var style = $( '#custom-theme-colors' ),
  14. hue = style.data( 'hue' ),
  15. css = style.html(),
  16. color;
  17. if( 'custom' === to ){
  18. // If a custom primary color is selected, use the currently set primary_color_hue
  19. color = wp.customize.get().primary_color_hue;
  20. } else {
  21. // If the "default" option is selected, get the default primary_color_hue
  22. color = VariaPreviewData.default_hue;
  23. }
  24. // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
  25. css = css.split( hue + ',' ).join( color + ',' );
  26. style.html( css ).data( 'hue', color );
  27. });
  28. });
  29. // Primary color hue.
  30. wp.customize( 'primary_color_hue', function( value ) {
  31. value.bind( function( to ) {
  32. // Update custom color CSS.
  33. var style = $( '#custom-theme-colors' ),
  34. hue = style.data( 'hue' ),
  35. css = style.html();
  36. // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
  37. css = css.split( hue + ',' ).join( to + ',' );
  38. style.html( css ).data( 'hue', to );
  39. });
  40. });
  41. })( jQuery );