jetpack-jitm.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. jQuery( document ).ready( function( $ ) {
  2. var templates = {
  3. 'default': function( envelope ) {
  4. var html = '<div class="jitm-card jitm-banner ' + (
  5. envelope.CTA.message ? 'has-call-to-action' : ''
  6. ) + ' is-upgrade-premium ' + envelope.content.classes + '" data-stats_url="' + envelope.jitm_stats_url + '">';
  7. html += '<div class="jitm-banner__icon-plan">' + envelope.content.icon + '</div>';
  8. html += '<div class="jitm-banner__content">';
  9. html += '<div class="jitm-banner__info">';
  10. html += '<div class="jitm-banner__title">' + envelope.content.message + '</div>';
  11. if ( envelope.content.description && envelope.content.description !== '' ) {
  12. html += '<div class="jitm-banner__description">' + envelope.content.description;
  13. if ( envelope.content.list.length > 0 ) {
  14. html += '<ul class="banner__list">';
  15. for ( var i = 0; i < envelope.content.list.length; i++ ) {
  16. var text = envelope.content.list[ i ].item;
  17. if ( envelope.content.list[ i ].url ) {
  18. text = '<a href="' + envelope.content.list[ i ].url + '" target="_blank" rel="noopener noreferrer" data-module="' + envelope.feature_class + '" data-jptracks-name="nudge_item_click" data-jptracks-prop="jitm-' + envelope.id + '">' +
  19. text + '</a>';
  20. }
  21. html += '<li>' +
  22. '<svg class="gridicon gridicons-checkmark" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g>' +
  23. '<path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414" /></g></svg>' +
  24. text +
  25. '</li>';
  26. }
  27. }
  28. html += '</div>';
  29. }
  30. html += '</div>';
  31. if ( envelope.CTA.message ) {
  32. html += '<div class="jitm-banner__action">';
  33. html += '<a href="' + envelope.url + '" target="' + ( envelope.CTA.newWindow === false ? '_self' : '_blank') + '" rel="noopener noreferrer" title="' + envelope.CTA.message + '" data-module="' + envelope.feature_class + '" type="button" class="jitm-button is-compact ' + ( envelope.CTA.primary ? 'is-primary' : '' ) + ' jptracks" data-jptracks-name="nudge_click" data-jptracks-prop="jitm-' + envelope.id + '">' + envelope.CTA.message + '</a>';
  34. html += '</div>';
  35. }
  36. html += '<a href="#" data-module="' + envelope.feature_class + '" class="jitm-banner__dismiss"></a>';
  37. html += '</div>';
  38. html += '</div>';
  39. return $( html );
  40. }
  41. };
  42. var setJITMContent = function( $el, response, redirect ) {
  43. var template;
  44. var render = function( $my_template ) {
  45. return function( e ) {
  46. e.preventDefault();
  47. $my_template.hide();
  48. $.ajax( {
  49. url: window.jitm_config.api_root + 'jetpack/v4/jitm',
  50. method: 'POST', // using DELETE without permalinks is broken in default nginx configuration
  51. data: {
  52. id: response.id,
  53. feature_class: response.feature_class
  54. }
  55. } );
  56. };
  57. };
  58. template = response.template;
  59. // if we don't have a template for this version, just use the default template
  60. if ( ! template || ! templates[ template ] ) {
  61. template = 'default';
  62. }
  63. response.url = response.url + '&redirect=' + redirect;
  64. var $template = templates[ template ]( response );
  65. $template.find( '.jitm-banner__dismiss' ).click( render( $template ) );
  66. $el.replaceWith( $template );
  67. // Add to Jetpack notices within the Jetpack settings app.
  68. $template.prependTo( $( '#jp-admin-notices' ) );
  69. };
  70. $( '.jetpack-jitm-message' ).each( function() {
  71. var $el = $( this );
  72. var message_path = $el.data( 'message-path' );
  73. var query = $el.data( 'query' );
  74. var redirect = $el.data( 'redirect' );
  75. $.get( window.jitm_config.api_root + 'jetpack/v4/jitm', {
  76. message_path: message_path,
  77. query: query,
  78. _wpnonce: $el.data( 'nonce' )
  79. } ).then( function( response ) {
  80. if ( 'object' === typeof response && response['1'] ) {
  81. response = [ response['1'] ];
  82. }
  83. // properly handle the case of an empty array or no content set
  84. if ( 0 === response.length || ! response[ 0 ].content ) {
  85. return;
  86. }
  87. // for now, always take the first response
  88. setJITMContent( $el, response[ 0 ], redirect );
  89. } );
  90. } );
  91. } );