jetpack-connection-banner.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /* global jQuery, jp_banner */
  2. ( function( $ ) {
  3. var nav = $( '.jp-wpcom-connect__vertical-nav-container' ),
  4. contentContainer = $( '.jp-wpcom-connect__content-container' ),
  5. nextFeatureButtons = $( '.jp-banner__button-container .next-feature' ),
  6. fullScreenContainer = $( '.jp-connect-full__container' ),
  7. fullScreenDismiss = $( '.jp-connect-full__dismiss, .jp-connect-full__dismiss-paragraph' ),
  8. wpWelcomeNotice = $( '#welcome-panel' ),
  9. connectionBanner = $( '#message' ),
  10. connectionBannerDismiss = $( '.connection-banner-dismiss' );
  11. // Move the banner below the WP Welcome notice on the dashboard
  12. $( window ).on( 'load', function() {
  13. wpWelcomeNotice.insertBefore( connectionBanner );
  14. } );
  15. // Dismiss the connection banner via AJAX
  16. connectionBannerDismiss.on( 'click', function() {
  17. $( connectionBanner ).hide();
  18. var data = {
  19. action: 'jetpack_connection_banner',
  20. nonce: jp_banner.connectionBannerNonce,
  21. dismissBanner: true
  22. };
  23. $.post( jp_banner.ajax_url, data, function( response ) {
  24. if ( true !== response.success ) {
  25. $( connectionBanner ).show();
  26. }
  27. } );
  28. } );
  29. nav.on( 'click', '.vertical-menu__feature-item:not( .vertical-menu__feature-item-is-selected )', function() {
  30. transitionSlideToIndex( $( this ).index() );
  31. } );
  32. nextFeatureButtons.on( 'click', function( e ) {
  33. e.preventDefault();
  34. var slideIndex = $( this )
  35. .closest( '.jp-wpcom-connect__slide' )
  36. .index();
  37. transitionSlideToIndex( slideIndex + 1 );
  38. } );
  39. function transitionSlideToIndex( index ) {
  40. // Remove classes from previously selected menu item and content
  41. nav
  42. .find( '.vertical-menu__feature-item-is-selected' )
  43. .removeClass( 'vertical-menu__feature-item-is-selected' );
  44. contentContainer
  45. .find( '.jp__slide-is-active' )
  46. .removeClass( 'jp__slide-is-active' );
  47. // Add classes to selected menu item and content
  48. nav
  49. .children()
  50. .eq( index )
  51. .addClass( 'vertical-menu__feature-item-is-selected' );
  52. contentContainer
  53. .children()
  54. .eq( index )
  55. .addClass( 'jp__slide-is-active' );
  56. }
  57. /**
  58. * Full-screen connection prompt
  59. */
  60. fullScreenDismiss.on( 'click', function() {
  61. $( fullScreenContainer ).hide();
  62. } );
  63. $( document ).keyup( function( e ) {
  64. if ( 27 === e.keyCode ) {
  65. $( fullScreenDismiss ).click();
  66. }
  67. } );
  68. } )( jQuery );