Release new version 1.8.0

= 1.8.0 - 2022/01/22 = * This release has a new Google Fonts API Validation feature plus compatibility with WordPress 5.9 and WooCommerce 6.1.1 * Feature - Add Ajax Validate button for Google Fonts API, for quick and easy Validation of API key. * Dev - Add dynamic help text to Google Font API field * Tweak - Test for compatibility with WooCommerce 6.1 * Tweak - Test for compatibility with WordPress 5.9 * Framework - Update a3rev Plugin Framework to version 2.5.0
a3rev · Jan 22, 2022 · 88358c8 · 88358c8
1 parent 4663638
commit 88358c8
Show file tree

Hide file tree

Showing 8 changed files with 220 additions and 71 deletions.
diff --git a/admin/admin-interface.php b/admin/admin-interface.php
@@ -235,6 +235,49 @@ public function a3_admin_ui_event() {
 					);
 					echo json_encode( $response_data );
 					break;
+
+				case 'validate_google_api_key':
+					$g_key      = sanitize_text_field( $_REQUEST['g_key'] );
+					$g_key_type = sanitize_text_field( $_REQUEST['g_key_type'] );
+
+					$is_valid = false;
+					if ( ! empty( $g_key ) ) {
+						if ( 'font' == $g_key_type ) {
+							$response_fonts = $GLOBALS[$this->plugin_prefix.'fonts_face']->validate_google_api_key( $g_key );
+							if ( ! isset( $response_fonts['error'] ) ) {
+								$is_valid = true;
+							}
+
+							if ( $is_valid ) {
+								$google_api_key_status = 'valid';
+							} else {
+								$google_api_key_status = 'invalid';
+							}
+
+							//caching google api status for 24 hours
+							set_transient( $this->google_api_key_option . '_status', $google_api_key_status, 86400 );
+
+							update_option( $this->google_api_key_option . '_enable', 1 );
+							update_option( $this->google_api_key_option, trim( $g_key ) );
+						} else {
+							$is_valid = $this->validate_google_map_api_key( $g_key );
+							update_option( $this->google_map_api_key_option . '_enable', 1 );
+							update_option( $this->google_map_api_key_option, trim( $g_key ) );
+						}
+					}
+
+					if ( $is_valid ) {
+						$is_valid = 1;
+					} else {
+						$is_valid = 0;
+					}
+
+					$response_data = array(
+						'is_valid' => $is_valid,
+					);
+					echo json_encode( $response_data );
+
+					break;
 			}
 
 		}
@@ -1458,7 +1501,7 @@ public function admin_forms( $options, $form_key, $option_name = '', $form_messa
 				$description = $tip = '';
 			}
 
-			if ( $description && in_array( $value['type'], array( 'manual_check_version', 'ajax_submit', 'ajax_multi_submit', 'textarea', 'radio', 'onoff_radio', 'typography', 'border', 'border_styles', 'array_textfields', 'wp_editor', 'upload' ) ) ) {
+			if ( $description && in_array( $value['type'], array( 'manual_check_version', 'ajax_submit', 'ajax_multi_submit', 'textarea', 'radio', 'onoff_radio', 'typography', 'border', 'border_styles', 'array_textfields', 'wp_editor', 'upload', 'google_api_key', 'google_map_api_key' ) ) ) {
 				$description = '<div class="desc" style="margin-bottom:5px;">' . wptexturize( $description ) . '</div>';
 			} elseif ( $description ) {
 				$description = '<span class="description" style="margin-left:5px;">' . wptexturize( $description ) . '</span>';
@@ -1882,7 +1925,13 @@ class="a3rev-ui-onoff_checkbox a3rev-ui-onoff_google_api_key_enable"
 
 							<div>&nbsp;</div>
 							<div class="a3rev-ui-google-api-key-container" style="<?php if( 1 != $google_api_key_enable ) { echo 'display: none;'; } ?>">
-								<div class="a3rev-ui-google-api-key-description"><?php echo sprintf( __( "Enter your existing Google Fonts API Key below. Don't have a key? Visit <a href='%s' target='_blank'>Google Developer API</a> to create a key", 'woo-widget-product-slideshow' ), 'https://developers.google.com/fonts/docs/developer_api#APIKey' ); ?></div>
+								<?php 
+									if ( ! empty( $description ) ) { 
+										echo $description; /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ 
+									} else {
+								?>
+								<div class="a3rev-ui-google-api-key-description"><?php echo sprintf( __( "Enter your existing Google Fonts API Key below. Don't have a key? Visit <a href='%s' target='_blank'>Google Developer API</a> to create a key" ), 'https://developers.google.com/fonts/docs/developer_api#APIKey' ); ?></div>
+								<?php } ?>
 								<div class="a3rev-ui-google-api-key-inside 
 									<?php
 									if ( $GLOBALS[$this->plugin_prefix.'fonts_face']->is_valid_google_api_key() ) {
@@ -1893,17 +1942,23 @@ class="a3rev-ui-onoff_checkbox a3rev-ui-onoff_google_api_key_enable"
 									?>
 									">
 									<input
+										data-type="font"
 										name="<?php echo esc_attr( $this->google_api_key_option ); ?>"
 										id="<?php echo esc_attr( $this->google_api_key_option ); ?>"
 										type="text"
 										style="<?php echo esc_attr( $value['css'] ); ?>"
 										value="<?php echo esc_attr( $google_api_key ); ?>"
-										class="a3rev-ui-text a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?> <?php echo esc_attr( $value['class'] ); ?>"
-		                                placeholder="<?php echo __( 'Google Fonts API Key', 'woo-widget-product-slideshow' ); ?>"
+										class="a3rev-ui-text a3rev-ui-google-api-key a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?> <?php echo esc_attr( $value['class'] ); ?>"
+		                                placeholder="<?php echo __( 'Google Fonts API Key' ); ?>"
 										<?php echo implode( ' ', $custom_attributes );	// XSS ok ?>
 										/>
-									<p class="a3rev-ui-google-valid-key-message"><?php echo __( 'Your Google API Key is valid and automatic font updates are enabled.', 'woo-widget-product-slideshow' ); ?></p>
-									<p class="a3rev-ui-google-unvalid-key-message"><?php echo __( 'Please enter a valid Google API Key.', 'woo-widget-product-slideshow' ); ?></p>
+									<button
+									name="<?php echo esc_attr( $this->google_api_key_option ); ?>_validate_bt"
+									id="<?php echo esc_attr( $this->google_api_key_option ); ?>_validate_bt"
+									type="button"
+									class="a3rev-ui-google-api-key-validate-button a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?>-button"><?php echo __( 'Validate' ); ?></button>
+									<p class="a3rev-ui-google-valid-key-message"><?php echo __( 'Your Google API Key is valid and automatic font updates are enabled.' ); ?></p>
+									<p class="a3rev-ui-google-unvalid-key-message"><?php echo __( 'Please enter a valid Google API Key.' ); ?></p>
 								</div>
 							</div>
 						</td>
@@ -1938,7 +1993,13 @@ class="a3rev-ui-onoff_checkbox a3rev-ui-onoff_google_api_key_enable"
 
 							<div>&nbsp;</div>
 							<div class="a3rev-ui-google-api-key-container" style="<?php if( 1 != $google_map_api_key_enable ) { echo 'display: none;'; } ?>">
-								<div class="a3rev-ui-google-api-key-description"><?php echo sprintf( __( "Enter your existing Google Map API Key below. Don't have a key? Visit <a href='%s' target='_blank'>Google Maps API</a> to create a key", 'woo-widget-product-slideshow' ), 'https://developers.google.com/maps/documentation/javascript/get-api-key' ); ?></div>
+							<?php 
+								if ( ! empty( $description ) ) { 
+									echo $description; /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ 
+								} else {
+							?>
+								<div class="a3rev-ui-google-api-key-description" style="margin-bottom:5px;"><?php echo sprintf( __( "Enter your Google Maps API Key and save changes, or go to <a href='%s' target='_blank'>Google Maps API</a> to create a new key. The key must have the Geocoding API, Maps Embed API and Maps JavaScript API as a minimum." ), 'https://developers.google.com/maps/documentation/javascript/get-api-key' ); ?></div>
+							<?php } ?>
 								<div class="a3rev-ui-google-api-key-inside 
 									<?php
 									if ( $this->is_valid_google_map_api_key() ) {
@@ -1949,17 +2010,23 @@ class="a3rev-ui-onoff_checkbox a3rev-ui-onoff_google_api_key_enable"
 									?>
 									">
 									<input
+										data-type="map"
 										name="<?php echo esc_attr( $this->google_map_api_key_option ); ?>"
 										id="<?php echo esc_attr( $this->google_map_api_key_option ); ?>"
 										type="text"
 										style="<?php echo esc_attr( $value['css'] ); ?>"
 										value="<?php echo esc_attr( $google_map_api_key ); ?>"
-										class="a3rev-ui-text a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?> <?php echo esc_attr( $value['class'] ); ?>"
-		                                placeholder="<?php echo __( 'Google Map API Key', 'woo-widget-product-slideshow' ); ?>"
+										class="a3rev-ui-text a3rev-ui-google-api-key a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?> <?php echo esc_attr( $value['class'] ); ?>"
+		                                placeholder="<?php echo __( 'Google Map API Key' ); ?>"
 										<?php echo implode( ' ', $custom_attributes );	// XSS ok ?>
 										/>
-									<p class="a3rev-ui-google-valid-key-message"><?php echo __( 'Your Google API Key is valid and automatic font updates are enabled.', 'woo-widget-product-slideshow' ); ?></p>
-									<p class="a3rev-ui-google-unvalid-key-message"><?php echo __( 'Please enter a valid Google API Key.', 'woo-widget-product-slideshow' ); ?></p>
+									<button
+									name="<?php echo esc_attr( $this->google_map_api_key_option ); ?>_validate_bt"
+									id="<?php echo esc_attr( $this->google_map_api_key_option ); ?>_validate_bt"
+									type="button"
+									class="a3rev-ui-google-api-key-validate-button a3rev-ui-<?php echo esc_attr( sanitize_title( $value['type'] ) ); ?>-button"><?php echo __( 'Validate' ); ?></button>
+									<p class="a3rev-ui-google-valid-key-message"><?php echo __( 'Your Google API Key is valid.' ); ?></p>
+									<p class="a3rev-ui-google-unvalid-key-message"><?php echo __( 'Please enter a valid Google API Key.' ); ?></p>
 								</div>
 							</div>
 						</td>

diff --git a/admin/admin-ui.php b/admin/admin-ui.php
@@ -33,7 +33,7 @@ class Admin_UI
 	 * You must change to correct plugin name that you are working
 	 */
 
-	public $framework_version      = '2.4.1';
+	public $framework_version      = '2.5.0';
 	public $plugin_name            = WC_PRODUCT_SLIDER_KEY;
 	public $plugin_path            = WC_PRODUCT_SLIDER_NAME;
 	public $google_api_key_option  = '';
@@ -132,40 +132,50 @@ public function is_valid_google_map_api_key( $cache=true ) {
 			}
 
 			if ( ! $google_map_api_key_status ) {
-				$respone_api = wp_remote_get( "https://maps.googleapis.com/maps/api/geocode/json?address=Australia&key=" . trim( $this->google_map_api_key ),
-					array(
-						'sslverify' => false,
-						'timeout'   => 45
-					)
-				);
-
-				$response_map = array();
-
-				// Check it is a valid request
-				if ( ! is_wp_error( $respone_api ) ) {
-
-					$json_string = version_compare( PHP_VERSION, '7.4', '>=' ) || get_magic_quotes_gpc() ? stripslashes( $respone_api['body'] ) : $respone_api['body']; // @codingStandardsIgnoreLine // phpcs:ignore
-					$response_map = json_decode( $json_string, true );
-
-					// Make sure that the valid response from google is not an error message
-					if ( ! isset( $response_map['error_message'] ) ) {
-						$google_map_api_key_status = 'valid';
-					} else {
-						$google_map_api_key_status = 'invalid';
-					}
-
-				} else {
-					$google_map_api_key_status = 'invalid';
-				}
+				$is_valid = $this->validate_google_map_api_key( $this->google_map_api_key );
+			} elseif ( 'valid' == $google_map_api_key_status ) {
+				$is_valid = true;
+			}
 
-				//caching google map api status for 24 hours
-				set_transient( $this->google_map_api_key_option . '_status', $google_map_api_key_status, 86400 );
+		}
+
+		return $is_valid;
+	}
+
+	public function validate_google_map_api_key( $g_key = '' ) {
+		$g_key = trim( $g_key );
+		$is_valid = false;
+
+		if ( ! empty( $g_key ) ) {
+			$respone_api = wp_remote_get( "https://maps.googleapis.com/maps/api/geocode/json?address=Australia&key=" . $g_key,
+				array(
+					'sslverify' => false,
+					'timeout'   => 45
+				)
+			);
+
+			$response_map = array();
+
+			// Check it is a valid request
+			if ( ! is_wp_error( $respone_api ) ) {
+
+				$json_string = version_compare( PHP_VERSION, '7.4', '>=' ) || get_magic_quotes_gpc() ? stripslashes( $respone_api['body'] ) : $respone_api['body']; // @codingStandardsIgnoreLine // phpcs:ignore
+				$response_map = json_decode( $json_string, true );
+
+				// Make sure that the valid response from google is not an error message
+				if ( ! isset( $response_map['error_message'] ) ) {
+					$is_valid = true;
+				}
 			}
 
-			if ( 'valid' == $google_map_api_key_status ) {
-				$is_valid = true;
+			if ( $is_valid ) {
+				$google_map_api_key_status = 'valid';
+			} else {
+				$google_map_api_key_status = 'invalid';
 			}
 
+			//caching google map api status for 24 hours
+			set_transient( $this->google_map_api_key_option . '_status', $google_map_api_key_status, 86400 );
 		}
 
 		return $is_valid;
@@ -179,12 +189,9 @@ public function update_google_map_api_key() {
 			update_option( $this->google_map_api_key_option . '_enable', 1 );
 
 			$option_value = trim( sanitize_text_field( $_POST[ $this->google_map_api_key_option ] ) );
+			update_option( $this->google_map_api_key_option, $option_value );
 
-			$old_google_map_api_key_option = get_option( $this->google_map_api_key_option );
-
-			if ( 1 != $old_google_map_api_key_enable || $option_value != $old_google_map_api_key_option ) {
-
-				update_option( $this->google_map_api_key_option, $option_value );
+			if ( 1 != $old_google_map_api_key_enable ) {
 
 				// Clear cached of google map api key status
 				delete_transient( $this->google_map_api_key_option . '_status' );

diff --git a/admin/assets/css/admin-ui-style.css b/admin/assets/css/admin-ui-style.css
@@ -260,6 +260,16 @@
 .a3rev_panel_container .a3rev-ui-google-valid-key .a3rev-ui-google-valid-key-message,
 .a3rev_panel_container .a3rev-ui-google-unvalid-key .a3rev-ui-google-unvalid-key-message { display: block; }
 
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.validating,
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.validating:hover {
+	animation: progress-bar 1s infinite linear;
+    -ms-animation: progress-bar 1s infinite linear;
+    -moz-animation: progress-bar 1s infinite linear;
+    -webkit-animation: progress-bar 1s infinite linear;
+    background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #0077ff, #0077ff 10px, #c3defd 10px, #c3defd 24px) repeat scroll 0 0 / 68px 68px;
+    transition: width 2s ease 0.1s;
+}
+
 /* Manual Check New Version Control */
 .a3rev_panel_container .a3rev-ui-version-checking { display: none; margin-top: 6px; background-image: url('../images/loading-bottom.gif'); background-repeat: no-repeat; background-size: 100% auto; width: 16px; height: 16px; }
 .a3rev_panel_container .a3rev-ui-check-version-message { font-size: 13px; }
@@ -274,6 +284,7 @@
 	margin-bottom: 6px;
 	position: relative;
 }
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button {
 	border-radius: 5px;
@@ -288,10 +299,12 @@
 	box-sizing: border-box;
 	margin-bottom: 5px;
 }
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button:hover,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button:hover,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button:hover {
 	background: #f4741b;
 }
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.disabled,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button.disabled,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button.disabled {
 	background: #999;

diff --git a/admin/assets/css/admin-ui-style.min.css b/admin/assets/css/admin-ui-style.min.css
@@ -105,6 +105,9 @@
 .a3rev_panel_container .a3rev-ui-google-valid-key .a3rev-ui-google-valid-key-message,
 .a3rev_panel_container .a3rev-ui-google-unvalid-key .a3rev-ui-google-unvalid-key-message{display:block;}
 
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.validating,
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.validating:hover{animation: progress-bar 1s infinite linear;-ms-animation: progress-bar 1s infinite linear;-moz-animation: progress-bar 1s infinite linear;-webkit-animation: progress-bar 1s infinite linear;background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #0077ff, #0077ff 10px, #c3defd 10px, #c3defd 24px) repeat scroll 0 0 / 68px 68px;transition: width 2s ease 0.1s;}
+
 /* Manual Check New Version Control */
 .a3rev_panel_container .a3rev-ui-version-checking{display:none;margin-top:6px;background-image:url('../images/loading-bottom.gif');background-repeat:no-repeat;background-size:100% auto;width:16px;height:16px;}
 .a3rev_panel_container .a3rev-ui-check-version-message{font-size:13px;}
@@ -116,10 +119,13 @@
 /* Ajax Submit Control */
 .a3rev_panel_container .a3rev-ui-ajax_submit-control,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control{margin-bottom:6px;position:relative;}
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button{border-radius:5px;border:none;background:#2186fa;color:#fff;font-size:16px;padding:8px 15px;transition:all 0.5s ease 0.1s;cursor:pointer;height:40px;box-sizing:border-box;margin-bottom:5px;}
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button:hover,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button:hover,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button:hover{background:#f4741b;}
+.a3rev_panel_container .a3rev-ui-google-api-key-container .a3rev-ui-google-api-key-validate-button.disabled,
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-button.disabled,
 .a3rev_panel_container .a3rev-ui-ajax_multi_submit-control .a3rev-ui-ajax_multi_submit-button.disabled{background:#999;cursor:default;}
 .a3rev_panel_container .a3rev-ui-ajax_submit-control .a3rev-ui-ajax_submit-successed,

diff --git a/admin/assets/js/admin-ui-script.js b/admin/assets/js/admin-ui-script.js
@@ -350,6 +350,41 @@
 			}
 		});
 
+		/* Apply Validate Google API Key Submit */
+		$(document).on( 'click', '.a3rev-ui-google-api-key-validate-button', function(){
+			var bt_validate = $(this);
+			var g_api_key_container = $(this).parents('.a3rev-ui-google-api-key-inside');
+			var g_api_key_field = g_api_key_container.children('.a3rev-ui-google-api-key');
+			var g_api_key = g_api_key_field.val();
+			var g_api_key_type = g_api_key_field.data('type');
+			if ( ! bt_validate.hasClass('validating') && '' != g_api_key ) {
+				bt_validate.addClass('validating');
+				g_api_key_container.removeClass('a3rev-ui-google-valid-key a3rev-ui-google-unvalid-key');
+
+				var check_data = {
+					action:			a3_admin_ui_script_params.plugin + '_a3_admin_ui_event',
+					type: 			'validate_google_api_key',
+					g_key:          g_api_key,
+					g_key_type:     g_api_key_type, 
+					security:		a3_admin_ui_script_params.security
+				};
+
+				$.post( a3_admin_ui_script_params.ajax_url, check_data, function(response){
+					bt_validate.removeClass('validating');
+
+					// Get response
+					data = JSON.parse( response );
+					if ( 0 == data.is_valid ) {
+						g_api_key_container.removeClass('a3rev-ui-google-valid-key');
+						g_api_key_container.addClass('a3rev-ui-google-unvalid-key');
+					} else {
+						g_api_key_container.addClass('a3rev-ui-google-valid-key');
+						g_api_key_container.removeClass('a3rev-ui-google-unvalid-key');
+					}
+				});
+			}
+		});
+
 		/* Apply Ajax Submit */
 		$(document).on( 'click', '.a3rev-ui-ajax_submit-button', function(){
 			var bt_ajax_submit = $(this);