customizer-utils.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /* global wp, gapi, FB, twttr, PaypalExpressCheckout */
  2. /**
  3. * Utilities to work with widgets in Customizer.
  4. */
  5. /**
  6. * Checks whether this Customizer supports partial widget refresh.
  7. * @returns {boolean}
  8. */
  9. wp.customizerHasPartialWidgetRefresh = function() {
  10. return 'object' === typeof wp && 'function' === typeof wp.customize && 'object' === typeof wp.customize.selectiveRefresh && 'object' === typeof wp.customize.widgetsPreview && 'function' === typeof wp.customize.widgetsPreview.WidgetPartial;
  11. };
  12. /**
  13. * Verifies that the placed widget ID contains the widget name.
  14. * @param {object} placement
  15. * @param {string} widgetName
  16. * @returns {*|boolean}
  17. */
  18. wp.isJetpackWidgetPlaced = function( placement, widgetName ) {
  19. return placement.partial.widgetId && 0 === placement.partial.widgetId.indexOf( widgetName );
  20. };
  21. /**
  22. * Bind events for selective refresh in Customizer.
  23. */
  24. (function($){
  25. $( document ).ready( function() {
  26. if ( wp && wp.customize && wp.customizerHasPartialWidgetRefresh() ) {
  27. // Refresh widget contents when a partial is rendered.
  28. wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) {
  29. if ( placement.container ) {
  30. // Refresh Google+
  31. if ( wp.isJetpackWidgetPlaced( placement, 'googleplus-badge' ) && 'object' === typeof gapi && gapi.person && 'function' === typeof gapi.person.go ) {
  32. gapi.person.go( placement.container[0] );
  33. }
  34. // Refresh Facebook XFBML
  35. else if ( wp.isJetpackWidgetPlaced( placement, 'facebook-likebox' ) && 'object' === typeof FB && 'object' === typeof FB.XFBML && 'function' === typeof FB.XFBML.parse ) {
  36. FB.XFBML.parse( placement.container[0], function() {
  37. var $fbContainer = $( placement.container[0] ).find( '.fb_iframe_widget' ),
  38. fbWidth = $fbContainer.data( 'width' ),
  39. fbHeight = $fbContainer.data( 'height' );
  40. $fbContainer.find( 'span' ).css( { 'width': fbWidth, 'height': fbHeight } );
  41. setTimeout( function() {
  42. $fbContainer.find( 'iframe' ).css( { 'width': fbWidth, 'height': fbHeight, 'position': 'relative' } );
  43. }, 1 );
  44. } );
  45. }
  46. // Refresh Twitter
  47. else if ( wp.isJetpackWidgetPlaced( placement, 'twitter_timeline' ) && 'object' === typeof twttr && 'object' === typeof twttr.widgets && 'function' === typeof twttr.widgets.load ) {
  48. twttr.widgets.load( placement.container[0] );
  49. } else if ( wp.isJetpackWidgetPlaced( placement, 'eu_cookie_law_widget' ) ) {
  50. // Refresh EU Cookie Law
  51. if ( $( '#eu-cookie-law' ).hasClass( 'top' ) ) {
  52. $( '.widget_eu_cookie_law_widget' ).addClass( 'top' );
  53. } else {
  54. $( '.widget_eu_cookie_law_widget' ).removeClass( 'top' );
  55. }
  56. placement.container.fadeIn();
  57. } else if ( wp.isJetpackWidgetPlaced( placement, 'jetpack_simple_payments_widget' ) ) {
  58. // Refresh Simple Payments Widget
  59. try {
  60. var buttonId = $( '.jetpack-simple-payments-button', placement.container ).attr( 'id' ).replace( '_button', '' );
  61. PaypalExpressCheckout.renderButton( null, null, buttonId, null );
  62. } catch ( e ) {
  63. // PaypalExpressCheckout may fail.
  64. // For the same usage, see also:
  65. // https://github.com/Automattic/jetpack/blob/6c1971e6bed7d3df793392a7a58ffe0afaeeb5fe/modules/simple-payments/simple-payments.php#L111
  66. }
  67. }
  68. }
  69. } );
  70. // Refresh widgets when they're moved.
  71. wp.customize.selectiveRefresh.bind( 'partial-content-moved', function( placement ) {
  72. if ( placement.container ) {
  73. // Refresh Twitter timeline iframe, since it has to be re-built.
  74. if ( wp.isJetpackWidgetPlaced( placement, 'twitter_timeline' ) && placement.container.find( 'iframe.twitter-timeline:not([src]):first' ).length ) {
  75. placement.partial.refresh();
  76. } else if ( wp.isJetpackWidgetPlaced( placement, 'jetpack_simple_payments_widget' ) ) {
  77. // Refresh Simple Payments Widget
  78. placement.partial.refresh();
  79. }
  80. }
  81. } );
  82. }
  83. } );
  84. } )( jQuery );