site-logo.js 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. /**
  2. * JS for handling the Site Logo real-time display in the Customizer preview frame.
  3. */
  4. (function($){
  5. var api = wp.customize,
  6. $body, $anchor, $logo, size;
  7. function cacheSelectors() {
  8. $body = $( 'body' );
  9. $anchor = $( '.site-logo-link' );
  10. $logo = $( '.site-logo' );
  11. size = $logo.attr( 'data-size' );
  12. }
  13. api( 'site_logo', function( value ){
  14. value.bind( function( newVal ){
  15. // grab selectors the first time through
  16. if ( ! $body ) {
  17. cacheSelectors();
  18. }
  19. // Let's update our preview logo.
  20. if ( newVal && newVal.url ) {
  21. // If the source was smaller than the size required by the theme, give the biggest we've got.
  22. if ( ! newVal.sizes[ size ] ) {
  23. size = 'full';
  24. }
  25. $logo.attr({
  26. height: newVal.sizes[ size ].height,
  27. width: newVal.sizes[ size ].width,
  28. src: newVal.sizes[ size ].url
  29. });
  30. $anchor.show();
  31. $body.addClass( 'has-site-logo' );
  32. } else {
  33. $anchor.hide();
  34. $body.removeClass( 'has-site-logo' );
  35. }
  36. });
  37. });
  38. })(jQuery);