Add ability to install plugins from the Integrations page.

Author: kagg-design

assets/css/integrations.css

@@ -23,6 +23,7 @@
 	transition: all 1.5s;
 }
 
+.hcaptcha-integrations table tr.install:before,
 .hcaptcha-integrations table tr.on:before,
 .hcaptcha-integrations table tr.off:before {
 	visibility: visible;
@@ -46,6 +47,7 @@
 	background-image: url( '../images/spinner-white.svg' );
 }
 
+.hcaptcha-integrations table tr.install:after,
 .hcaptcha-integrations table tr.on:after,
 .hcaptcha-integrations table tr.off:after {
 	visibility: visible;
@@ -56,6 +58,10 @@
 	background-size: auto 80%;
 }
 
+.hcaptcha-integrations table tr.install:after {
+	background-image: url( '../images/spinner-gold.svg' );
+}
+
 .hcaptcha-integrations table tr.on:after {
 	background-image: url( '../images/spinner-green.svg' );
 }
@@ -113,7 +119,7 @@
 	background-color: #d63638;
 }
 
-.hcaptcha-integrations > table ~ table tr th .hcaptcha-integrations-logo[data-installed="0"]:hover::before {
+.hcaptcha-integrations > table ~ table tr th .hcaptcha-integrations-logo[data-installed="false"]:hover::before {
 	background-color: #dba617;
 }
 

assets/images/spinner-gold.svg

@@ -1,21 +1,22 @@
 /* global jQuery, HCaptchaIntegrationsObject, kaggDialog */
 
 /**
- * @param HCaptchaIntegrationsObject.ajaxUrl
+ * @param HCaptchaIntegrationsObject.CancelBtnText
+ * @param HCaptchaIntegrationsObject.OKBtnText
  * @param HCaptchaIntegrationsObject.action
- * @param HCaptchaIntegrationsObject.nonce
- * @param HCaptchaIntegrationsObject.activateMsg
- * @param HCaptchaIntegrationsObject.deactivateMsg
- * @param HCaptchaIntegrationsObject.installMsg
+ * @param HCaptchaIntegrationsObject.activatePluginMsg
  * @param HCaptchaIntegrationsObject.activateThemeMsg
+ * @param HCaptchaIntegrationsObject.ajaxUrl
+ * @param HCaptchaIntegrationsObject.deactivatePluginMsg
  * @param HCaptchaIntegrationsObject.deactivateThemeMsg
- * @param HCaptchaIntegrationsObject.selectThemeMsg
+ * @param HCaptchaIntegrationsObject.defaultTheme
+ * @param HCaptchaIntegrationsObject.installPluginMsg
+ * @param HCaptchaIntegrationsObject.installThemeMsg
+ * @param HCaptchaIntegrationsObject.nonce
  * @param HCaptchaIntegrationsObject.onlyOneThemeMsg
- * @param HCaptchaIntegrationsObject.unexpectedErrorMsg
- * @param HCaptchaIntegrationsObject.OKBtnText
- * @param HCaptchaIntegrationsObject.CancelBtnText
+ * @param HCaptchaIntegrationsObject.selectThemeMsg
  * @param HCaptchaIntegrationsObject.themes
- * @param HCaptchaIntegrationsObject.defaultTheme
+ * @param HCaptchaIntegrationsObject.unexpectedErrorMsg
  */
 
 /**
@@ -162,6 +163,14 @@ const integrations = function( $ ) {
 	}
 
 	$( '.form-table img' ).on( 'click', function( event ) {
+		function maybeInstallEntity( confirmation ) {
+			if ( ! confirmation ) {
+				return;
+			}
+
+			installEntity();
+		}
+
 		function maybeToggleActivation( confirmation ) {
 			if ( ! confirmation ) {
 				return;
@@ -188,32 +197,43 @@ const integrations = function( $ ) {
 
 			for ( const [ key, status ] of Object.entries( stati ) ) {
 				const statusClass = 'hcaptcha-integrations-' + key.replace( /_/g, '-' );
-
 				const $tr = $( `tr.${ statusClass }` );
+				const $logo = $tr.find( '.hcaptcha-integrations-logo' );
 				const currStatus = isActiveTable( $tr.closest( '.form-table' ) );
 
+				if ( status ) {
+					$logo.attr( 'data-installed', true );
+				}
+
 				if ( currStatus !== status ) {
 					const $toTable = $tables.eq( status ? 0 : 1 );
-					const alt = $tr.find( '.hcaptcha-integrations-logo img' ).attr( 'alt' );
+					const alt = $logo.find( 'img' ).attr( 'alt' );
 
 					insertIntoTable( $toTable, alt, $tr );
 				}
 			}
 		}
 
-		function toggleActivation() {
-			const activateClass = activate ? 'on' : 'off';
+		function installEntity() {
+			toggleActivation( true );
+		}
+
+		function toggleActivation( install = false ) {
+			let actionClass = activate ? 'on' : 'off';
+			actionClass = install ? 'install' : actionClass;
+
 			const newTheme = getSelectedTheme();
 			const data = {
 				action: HCaptchaIntegrationsObject.action,
 				nonce: HCaptchaIntegrationsObject.nonce,
+				install,
 				activate,
 				entity,
 				status,
 				newTheme,
 			};
 
-			$tr.addClass( activateClass );
+			$tr.addClass( actionClass );
 
 			// noinspection JSVoidFunctionReturnValueUsed
 			$.post( {
@@ -271,7 +291,7 @@ const integrations = function( $ ) {
 					}
 				)
 				.always( function() {
-					$tr.removeClass( 'on off' );
+					$tr.removeClass( 'install on off' );
 				} );
 		}
 
@@ -307,12 +327,12 @@ const integrations = function( $ ) {
 
 		if ( $fieldset.attr( 'disabled' ) ) {
 			title = entity === 'plugin'
-				? HCaptchaIntegrationsObject.activateMsg
+				? HCaptchaIntegrationsObject.activatePluginMsg
 				: HCaptchaIntegrationsObject.activateThemeMsg;
 			activate = true;
 		} else {
 			if ( entity === 'plugin' ) {
-				title = HCaptchaIntegrationsObject.deactivateMsg;
+				title = HCaptchaIntegrationsObject.deactivatePluginMsg;
 			} else {
 				title = HCaptchaIntegrationsObject.deactivateThemeMsg;
 				content = '<p>' + HCaptchaIntegrationsObject.selectThemeMsg + '</p>';
@@ -352,8 +372,17 @@ const integrations = function( $ ) {
 
 		const $logo = $tr.find( '.hcaptcha-integrations-logo' );
 
-		if ( ! $logo.data( 'installed' ) ) {
-			title = HCaptchaIntegrationsObject.installMsg;
+		if ( $logo.attr( 'data-installed' ) === 'false' ) {
+			if ( event.ctrlKey ) {
+				installEntity();
+
+				return;
+			}
+
+			title = entity === 'plugin'
+				? HCaptchaIntegrationsObject.installPluginMsg
+				: HCaptchaIntegrationsObject.installThemeMsg;
+
 			title = title.replace( '%s', alt );
 
 			kaggDialog.confirm( {
@@ -364,7 +393,11 @@ const integrations = function( $ ) {
 					ok: {
 						text: HCaptchaIntegrationsObject.OKBtnText,
 					},
+					cancel: {
+						text: HCaptchaIntegrationsObject.CancelBtnText,
+					},
 				},
+				onAction: maybeInstallEntity,
 			} );
 
 			return;

assets/js/integrations.js

@@ -600,6 +600,7 @@ Instructions for popular native integrations are below:
 
 = 4.9.0 =
 * Added compatibility with Ninja Forms v3.8.22.
+* Added ability to install plugins from the Integrations page.
 * Fixed layout of a modern Jetpack form in outlined and animated styles.
 * Fixed fatal error as a consequence of a bug in the TutorLMS.