Add upstream
This commit is contained in:
root
@@ -0,0 +1,273 @@
|
||||
/**
|
||||
* Handles the activation of a Jetpack feature, dismissing the card, and replacing the bottom row
|
||||
* of the card with customized content.
|
||||
*/
|
||||
|
||||
/* global jetpackPluginSearch, JSON, jpTracksAJAX */
|
||||
|
||||
var JetpackPSH = {};
|
||||
|
||||
( function( $, jpsh ) {
|
||||
JetpackPSH = {
|
||||
$pluginFilter: $( '#plugin-filter' ),
|
||||
|
||||
/**
|
||||
* Get parent search hint element.
|
||||
* @returns {Element | null}
|
||||
*/
|
||||
getCard: function() {
|
||||
return document.querySelector( '.plugin-card-jetpack-plugin-search' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Track user event such as a click on a button or a link.
|
||||
*
|
||||
* @param {string} eventName Event identifier.
|
||||
* @param {object} feature Identifier of feature involved in the event.
|
||||
* @param {object} target Object where action was performed.
|
||||
*/
|
||||
trackEvent: function( eventName, feature, target ) {
|
||||
jpTracksAJAX
|
||||
.record_ajax_event( eventName, 'click', { feature: feature } )
|
||||
.always( function() {
|
||||
if ( 'undefined' !== typeof target && !! target.getAttribute( 'href' ) ) {
|
||||
// If it has an href, follow it.
|
||||
window.location = target.getAttribute( 'href' );
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Update title of the card to add a mention that the result is from the Jetpack plugin.
|
||||
*/
|
||||
updateCardTitle: function() {
|
||||
var hint = JetpackPSH.getCard();
|
||||
|
||||
if ( 'object' === typeof hint && null !== hint ) {
|
||||
var title = hint.querySelector( '.column-name h3' );
|
||||
title.outerHTML =
|
||||
title.outerHTML + '<strong>' + jetpackPluginSearch.poweredBy + '</strong>';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Move action links below description.
|
||||
*/
|
||||
moveActionLinks: function() {
|
||||
var hint = JetpackPSH.getCard();
|
||||
if ( 'object' === typeof hint && null !== hint ) {
|
||||
var descriptionContainer = hint.querySelector( '.column-description' );
|
||||
// Keep only the first paragraph. The second is the plugin author.
|
||||
var descriptionText = descriptionContainer.querySelector( 'p:first-child' );
|
||||
var actionLinks = hint.querySelector( '.action-links' );
|
||||
|
||||
// Change the contents of the description, to keep the description text and the action links.
|
||||
descriptionContainer.innerHTML = descriptionText.outerHTML + actionLinks.outerHTML;
|
||||
|
||||
// Remove the action links from their default location.
|
||||
actionLinks.parentNode.removeChild( actionLinks );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Replace bottom row of the card to insert logo, text and link to dismiss the card.
|
||||
*/
|
||||
replaceCardBottom: function() {
|
||||
var hint = JetpackPSH.getCard();
|
||||
if ( 'object' === typeof hint && null !== hint ) {
|
||||
hint.querySelector( '.plugin-card-bottom' ).outerHTML =
|
||||
'<div class="jetpack-plugin-search__bottom"><img src="' +
|
||||
jetpackPluginSearch.logo +
|
||||
'" width="32" />' +
|
||||
'<p class="jetpack-plugin-search__text">' +
|
||||
jetpackPluginSearch.legend +
|
||||
' <a class="jetpack-plugin-search__support_link" href="' +
|
||||
jetpackPluginSearch.supportLink +
|
||||
'" target="_blank" rel="noopener noreferrer" data-track="support_link" >' +
|
||||
jetpackPluginSearch.supportText +
|
||||
'</a>' +
|
||||
'</p>' +
|
||||
'</div>';
|
||||
|
||||
// Remove link and parent li from action links and move it to bottom row
|
||||
var dismissLink = document.querySelector( '.jetpack-plugin-search__dismiss' );
|
||||
dismissLink.parentNode.parentNode.removeChild( dismissLink.parentNode );
|
||||
document.querySelector( '.jetpack-plugin-search__bottom' ).appendChild( dismissLink );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if plugin card list nodes changed. If there's a Jetpack PSH card, replace the title and the bottom row.
|
||||
* @param {array} mutationsList
|
||||
*/
|
||||
replaceOnNewResults: function( mutationsList ) {
|
||||
mutationsList.forEach( function( mutation ) {
|
||||
if (
|
||||
'childList' === mutation.type &&
|
||||
1 === document.querySelectorAll( '.plugin-card-jetpack-plugin-search' ).length
|
||||
) {
|
||||
JetpackPSH.updateCardTitle();
|
||||
JetpackPSH.moveActionLinks();
|
||||
JetpackPSH.replaceCardBottom();
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
dismiss: function( moduleName ) {
|
||||
document.getElementById( 'the-list' ).removeChild( JetpackPSH.getCard() );
|
||||
$.ajax( {
|
||||
url: jpsh.base_rest_url + '/hints',
|
||||
method: 'post',
|
||||
beforeSend: function( xhr ) {
|
||||
xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
|
||||
},
|
||||
data: JSON.stringify( {
|
||||
hint: moduleName,
|
||||
} ),
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
} ).done( function() {
|
||||
JetpackPSH.trackEvent( 'wpa_plugin_search_dismiss', moduleName );
|
||||
} );
|
||||
},
|
||||
|
||||
ajaxActivateModule: function( moduleName ) {
|
||||
var $moduleBtn = JetpackPSH.$pluginFilter.find( '#plugin-select-activate' );
|
||||
$moduleBtn.toggleClass( 'install-now updating-message' );
|
||||
$moduleBtn.prop( 'disabled', true );
|
||||
$moduleBtn.text( jpsh.activating );
|
||||
var data = {};
|
||||
data[ moduleName ] = true;
|
||||
$.ajax( {
|
||||
url: jpsh.base_rest_url + '/settings',
|
||||
method: 'post',
|
||||
beforeSend: function( xhr ) {
|
||||
xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
|
||||
},
|
||||
data: JSON.stringify( data ),
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
} )
|
||||
.done( function() {
|
||||
JetpackPSH.updateButton( moduleName );
|
||||
JetpackPSH.trackEvent( 'wpa_plugin_search_activate', moduleName );
|
||||
} )
|
||||
.error( function() {
|
||||
$moduleBtn.toggleClass( 'install-now updating-message' );
|
||||
} );
|
||||
},
|
||||
|
||||
// Remove onclick handler, disable loading spinner, update button to redirect to module settings.
|
||||
updateButton: function( moduleName ) {
|
||||
$.ajax( {
|
||||
url: jpsh.base_rest_url + '/module/' + moduleName,
|
||||
method: 'get',
|
||||
beforeSend: function( xhr ) {
|
||||
xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
|
||||
},
|
||||
dataType: 'json',
|
||||
} ).done( function( response ) {
|
||||
var $moduleBtn = JetpackPSH.$pluginFilter.find( '#plugin-select-activate' );
|
||||
$moduleBtn.prop( 'onclick', null ).off( 'click' );
|
||||
$moduleBtn.toggleClass( 'install-now updating-message' );
|
||||
$moduleBtn.text( jpsh.activated );
|
||||
setTimeout( function() {
|
||||
var url = 'https://jetpack.com/redirect/?source=plugin-hint-learn-' + moduleName,
|
||||
label = jpsh.getStarted,
|
||||
classes = 'jetpack-plugin-search__primary button',
|
||||
track = 'configure';
|
||||
|
||||
// If the feature has options in Jetpack admin UI, link to them.
|
||||
if ( response.options && 0 < Object.keys( response.options ).length ) {
|
||||
url = $moduleBtn.data( 'configure-url' );
|
||||
label = jpsh.manageSettings;
|
||||
classes += ' jetpack-plugin-search__configure';
|
||||
} else {
|
||||
// If it has no options, the Get started button will be displayed so remove the Learn more link if it's there.
|
||||
var learnMore = document.querySelector( '.jetpack-plugin-search__learn-more' );
|
||||
learnMore.parentNode.removeChild( learnMore );
|
||||
classes += ' jetpack-plugin-search__get-started';
|
||||
track = 'get_started';
|
||||
}
|
||||
$moduleBtn.replaceWith(
|
||||
'<a id="plugin-select-settings" class="' +
|
||||
classes +
|
||||
'" href="' +
|
||||
url +
|
||||
'" data-module="' +
|
||||
moduleName +
|
||||
'" data-track="' +
|
||||
track +
|
||||
'">' +
|
||||
label +
|
||||
'</a>'
|
||||
);
|
||||
}, 1000 );
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Start suggesting.
|
||||
*/
|
||||
init: function() {
|
||||
if ( JetpackPSH.$pluginFilter.length < 1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update title to show that the suggestion is from Jetpack.
|
||||
JetpackPSH.updateCardTitle();
|
||||
|
||||
// Update the description and action links.
|
||||
JetpackPSH.moveActionLinks();
|
||||
|
||||
// Replace PSH bottom row on page load
|
||||
JetpackPSH.replaceCardBottom();
|
||||
|
||||
// Listen for changes in plugin search results
|
||||
var resultsObserver = new MutationObserver( JetpackPSH.replaceOnNewResults );
|
||||
resultsObserver.observe( document.getElementById( 'plugin-filter' ), { childList: true } );
|
||||
|
||||
JetpackPSH.$pluginFilter
|
||||
.on( 'click', '.jetpack-plugin-search__dismiss', function( event ) {
|
||||
event.preventDefault();
|
||||
JetpackPSH.dismiss( $( this ).data( 'module' ) );
|
||||
} )
|
||||
.on( 'click', 'button#plugin-select-activate', function( event ) {
|
||||
event.preventDefault();
|
||||
JetpackPSH.ajaxActivateModule( $( this ).data( 'module' ) );
|
||||
} )
|
||||
.on( 'click', '.jetpack-plugin-search__primary', function( event ) {
|
||||
event.preventDefault();
|
||||
var $this = $( this );
|
||||
if ( $this.data( 'track' ) ) {
|
||||
// This catches Purchase, Configure, and Get started. Feature activation is tracked when it ends successfully, in its callback.
|
||||
JetpackPSH.trackEvent(
|
||||
'wpa_plugin_search_' + $this.data( 'track' ),
|
||||
$this.data( 'module' ),
|
||||
$this.get( 0 )
|
||||
);
|
||||
}
|
||||
} )
|
||||
.on( 'click', '.jetpack-plugin-search__learn-more', function( event ) {
|
||||
event.preventDefault();
|
||||
var $this = $( this );
|
||||
JetpackPSH.trackEvent(
|
||||
'wpa_plugin_search_learn_more',
|
||||
$this.data( 'module' ),
|
||||
$this.get( 0 )
|
||||
);
|
||||
} )
|
||||
.on( 'click', '.jetpack-plugin-search__support_link', function( event ) {
|
||||
event.preventDefault();
|
||||
var $this = $( this );
|
||||
JetpackPSH.trackEvent(
|
||||
'wpa_plugin_search_support_link',
|
||||
$this.data( 'module' ),
|
||||
$this.get( 0 )
|
||||
);
|
||||
} );
|
||||
},
|
||||
};
|
||||
|
||||
JetpackPSH.init();
|
||||
} )( jQuery, jetpackPluginSearch );
|
||||
Reference in New Issue
Block a user