Jetpack – WP Security, Backup, Speed, & Growth / 16.2

Jetpack – WP Security, Backup, Speed, & Growth v16.2

jetpack / modules / plugin-search / plugin-search.js

plugin-search.js in Jetpack – WP Security, Backup, Speed, & Growth 16.2, at modules/plugin-search/plugin-search.js

244 lines 7.9 KB

Raw Download Zip

1	/**
2	* Handles the activation of a Jetpack feature, dismissing the card, and replacing the bottom row
3	* of the card with customized content.
4	*/
5
6	/* global jetpackPluginSearch, jpTracksAJAX */
7
8	var JetpackPSH = {};
9
10	( function ( $, jpsh ) {
11	JetpackPSH = {
12	$pluginFilter: $( '#plugin-filter' ),
13
14	/**
15	* Get parent search hint element.
16	* @return {Element \| null}
17	*/
18	getCard: function () {
19	return document.querySelector( '.plugin-card-jetpack-plugin-search' );
20	},
21
22	/**
23	* Track user event such as a click on a button or a link.
24	*
25	* @param {string} eventName Event identifier.
26	* @param {object} feature Identifier of feature involved in the event.
27	* @param {object} target Object where action was performed.
28	*/
29	trackEvent: function ( eventName, feature, target ) {
30	jpTracksAJAX
31	.record_ajax_event( eventName, 'click', { feature: feature } )
32	.always( function () {
33	if ( 'undefined' !== typeof target && !! target.getAttribute( 'href' ) ) {
34	// If it has an href, follow it.
35	window.location = target.getAttribute( 'href' );
36	}
37	} );
38	},
39
40	/**
41	* Replace bottom row of the card to insert logo, text and link to dismiss the card.
42	*/
43	replaceCardBottom: function () {
44	var hint = JetpackPSH.getCard();
45	if ( 'object' === typeof hint && null !== hint ) {
46	hint.querySelector( '.plugin-card-bottom' ).outerHTML =
47	'<div class="jetpack-plugin-search__bottom"><img src="' +
48	jetpackPluginSearch.logo +
49	'" width="32" />' +
50	'<p class="jetpack-plugin-search__text">' +
51	jetpackPluginSearch.legend +
52	' <a class="jetpack-plugin-search__support_link" href="' +
53	jetpackPluginSearch.supportLink +
54	'" target="_blank" rel="noopener noreferrer" data-track="support_link" >' +
55	jetpackPluginSearch.supportText +
56	'</a>' +
57	'</p>' +
58	'</div>';
59
60	// Remove link and parent li from action links and move it to bottom row
61	var dismissLink = document.querySelector( '.jetpack-plugin-search__dismiss' );
62	dismissLink.parentNode.parentNode.removeChild( dismissLink.parentNode );
63	document.querySelector( '.jetpack-plugin-search__bottom' ).appendChild( dismissLink );
64	}
65	},
66
67	/**
68	* Check if plugin card list nodes changed. If there's a Jetpack PSH card, replace the bottom row.
69	* @param {array} mutationsList
70	*/
71	replaceOnNewResults: function ( mutationsList ) {
72	mutationsList.forEach( function ( mutation ) {
73	if (
74	'childList' === mutation.type &&
75	1 === document.querySelectorAll( '.plugin-card-jetpack-plugin-search' ).length
76	) {
77	JetpackPSH.replaceCardBottom();
78	}
79	} );
80	},
81
82	dismiss: function ( moduleName ) {
83	document.getElementById( 'the-list' ).removeChild( JetpackPSH.getCard() );
84	$.ajax( {
85	url: jpsh.base_rest_url + '/hints',
86	method: 'post',
87	beforeSend: function ( xhr ) {
88	xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
89	},
90	data: JSON.stringify( {
91	hint: moduleName,
92	} ),
93	contentType: 'application/json',
94	dataType: 'json',
95	} ).done( function () {
96	JetpackPSH.trackEvent( 'wpa_plugin_search_dismiss', moduleName );
97	} );
98	},
99
100	ajaxActivateModule: function ( moduleName ) {
101	var $moduleBtn = JetpackPSH.$pluginFilter.find( '#plugin-select-activate' );
102	$moduleBtn.toggleClass( 'install-now updating-message' );
103	$moduleBtn.prop( 'disabled', true );
104	$moduleBtn.text( jpsh.activating );
105	var data = {};
106	data[ moduleName ] = true;
107	$.ajax( {
108	url: jpsh.base_rest_url + '/settings',
109	method: 'post',
110	beforeSend: function ( xhr ) {
111	xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
112	},
113	data: JSON.stringify( data ),
114	contentType: 'application/json',
115	dataType: 'json',
116	} )
117	.done( function () {
118	JetpackPSH.updateButton( moduleName );
119	JetpackPSH.trackEvent( 'wpa_plugin_search_activate', moduleName );
120	} )
121	.error( function () {
122	$moduleBtn.toggleClass( 'install-now updating-message' );
123	} );
124	},
125
126	// Remove onclick handler, disable loading spinner, update button to redirect to module settings.
127	updateButton: function ( moduleName ) {
128	$.ajax( {
129	url: jpsh.base_rest_url + '/module/' + moduleName,
130	method: 'get',
131	beforeSend: function ( xhr ) {
132	xhr.setRequestHeader( 'X-WP-Nonce', jpsh.nonce );
133	},
134	dataType: 'json',
135	} ).done( function ( response ) {
136	var $moduleBtn = JetpackPSH.$pluginFilter.find( '#plugin-select-activate' );
137	$moduleBtn.prop( 'onclick', null ).off( 'click' );
138	$moduleBtn.toggleClass( 'install-now updating-message' );
139	$moduleBtn.text( jpsh.activated );
140	setTimeout( function () {
141	var url = 'https://jetpack.com/redirect/?source=plugin-hint-learn-' + moduleName,
142	label = jpsh.getStarted,
143	classes = 'jetpack-plugin-search__primary button',
144	track = 'configure';
145
146	// If the feature has options in Jetpack admin UI, link to them.
147	if ( response.options && 0 < Object.keys( response.options ).length ) {
148	url = $moduleBtn.data( 'configure-url' );
149	label = jpsh.manageSettings;
150	classes += ' jetpack-plugin-search__configure';
151	} else {
152	// If it has no options, the Get started button will be displayed so remove the Learn more link if it's there.
153	var learnMore = document.querySelector( '.jetpack-plugin-search__learn-more' );
154	learnMore.parentNode.removeChild( learnMore );
155	classes += ' jetpack-plugin-search__get-started';
156	track = 'get_started';
157	}
158	$moduleBtn.replaceWith(
159	'<a id="plugin-select-settings" class="' +
160	classes +
161	'" href="' +
162	url +
163	'" data-module="' +
164	moduleName +
165	'" data-track="' +
166	track +
167	'">' +
168	label +
169	'</a>'
170	);
171	}, 1000 );
172	} );
173	},
174
175	/**
176	* Start suggesting.
177	*/
178	init: function () {
179	if ( JetpackPSH.$pluginFilter.length < 1 ) {
180	return;
181	}
182
183	// Replace PSH bottom row on page load
184	JetpackPSH.replaceCardBottom();
185
186	// Listen for changes in plugin search results
187	var resultsObserver = new MutationObserver( JetpackPSH.replaceOnNewResults );
188	resultsObserver.observe( document.getElementById( 'plugin-filter' ), { childList: true } );
189
190	JetpackPSH.$pluginFilter
191	.on( 'click', '.jetpack-plugin-search__dismiss', function ( event ) {
192	event.preventDefault();
193	JetpackPSH.dismiss( $( this ).data( 'module' ) );
194	} )
195	.on( 'click', 'button#plugin-select-activate', function ( event ) {
196	event.preventDefault();
197	JetpackPSH.ajaxActivateModule( $( this ).data( 'module' ) );
198	} )
199	.on( 'click', '.jetpack-plugin-search__primary', function ( event ) {
200	var $this = $( this );
201	var opensInNewTab = '_blank' === $this.attr( 'target' );
202	if ( ! opensInNewTab ) {
203	event.preventDefault();
204	}
205	if ( $this.data( 'track' ) ) {
206	// This catches Purchase, Configure, and Get started. Feature activation is tracked when it ends successfully, in its callback.
207	JetpackPSH.trackEvent(
208	'wpa_plugin_search_' + $this.data( 'track' ),
209	$this.data( 'module' ),
210	// only redirect if not opening in a new tab
211	opensInNewTab ? undefined : $this.get( 0 )
212	);
213	}
214	} )
215	.on( 'click', '.jetpack-plugin-search__learn-more', function ( event ) {
216	var $this = $( this );
217	var opensInNewTab = '_blank' === $this.attr( 'target' );
218	if ( ! opensInNewTab ) {
219	event.preventDefault();
220	}
221	JetpackPSH.trackEvent(
222	'wpa_plugin_search_learn_more',
223	$this.data( 'module' ),
224	opensInNewTab ? undefined : $this.get( 0 )
225	);
226	} )
227	.on( 'click', '.jetpack-plugin-search__support_link', function ( event ) {
228	var $this = $( this );
229	var opensInNewTab = '_blank' === $this.attr( 'target' );
230	if ( ! opensInNewTab ) {
231	event.preventDefault();
232	}
233	JetpackPSH.trackEvent(
234	'wpa_plugin_search_support_link',
235	$this.data( 'module' ),
236	opensInNewTab ? undefined : $this.get( 0 )
237	);
238	} );
239	},
240	};
241
242	JetpackPSH.init();
243	} )( jQuery, jetpackPluginSearch );
244