← All changes | modules/plugin-search/plugin-search.js +243 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,243 @@
	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 );