customizer.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /**
  2. * Theme Customizer enhancements for a better user experience.
  3. *
  4. * Contains handlers to make Theme Customizer preview reload changes asynchronously.
  5. */
  6. ( function( $ ) {
  7. /**
  8. * Create function to check length of site description
  9. * if displayed instead of slideshow or static front page
  10. *
  11. * We want to add/remove a class to show/hide decorative elements
  12. * to make the Customizer preview correctly.
  13. */
  14. function checkDescLength() {
  15. var descLength = $.trim( $( '.entry-title.site-description' ).text() ).length;
  16. if ( descLength === 0 ) {
  17. $( '.banner-description' ).addClass( 'hide-deco' );
  18. } else {
  19. $( '.banner-description' ).removeClass( 'hide-deco' );
  20. }
  21. }
  22. checkDescLength();
  23. // Fire the above function if featured content is edited
  24. wp.customize( 'featured-content[tag-name]', function( value ) {
  25. value.bind( function() {
  26. checkDescLength();
  27. } );
  28. } );
  29. // Site title and description.
  30. wp.customize( 'blogname', function( value ) {
  31. value.bind( function( to ) {
  32. $( '.site-title a' ).text( to );
  33. } );
  34. } );
  35. wp.customize( 'blogdescription', function( value ) {
  36. value.bind( function( to ) {
  37. $( '.site-description' ).text( to );
  38. checkDescLength();
  39. } );
  40. } );
  41. // Header text color.
  42. wp.customize( 'header_textcolor', function( value ) {
  43. value.bind( function( to ) {
  44. if ( 'blank' === to ) {
  45. $( '.site-title, .site-branding .site-description' ).css( {
  46. 'clip': 'rect(1px, 1px, 1px, 1px)',
  47. 'position': 'absolute'
  48. } );
  49. } else {
  50. $( '.site-title, .site-branding .site-description' ).css( {
  51. 'clip': 'auto',
  52. 'color': to,
  53. 'position': 'relative'
  54. } );
  55. }
  56. } );
  57. } );
  58. } )( jQuery );