feat: added compatibility notices for lazy loading

assets/src/dashboard/parts/connected/conflicts/ConflictItem.js

@@ -31,19 +31,36 @@ const ConflictItem = ({ conflict }) => {
 		);
 	};
 
+	const getBorderColor = () => {
+		if ( 'high' === conflict.severity ) {
+			return '#E77777';
+		} else if ( 'medium' === conflict.severity ) {
+			return '#577BF9';
+		}
+		return '#5F9D61';
+	};
+
+	const noticeStyles = {
+		border: '1px solid #c3c4c7',
+		borderLeftWidth: '4px',
+		borderLeftColor: getBorderColor(),
+		margin: '5px 0 15px',
+		padding: '12px',
+		paddingRight: '38px',
+		position: 'relative'
+	};
+
+	const messageStyles = {
+		margin: '0',
+		padding: '2px',
+		lineHeight: '1.5',
+		fontSize: '15px'
+	};
+
 	return (
-		<div
-			className={ classnames(
-				'flex gap-2 text-white rounded relative px-6 py-5 mb-5',
-				{
-					'bg-danger': 'high' === conflict.severity,
-					'bg-info': 'medium' === conflict.severity,
-					'bg-success': 'high' !== conflict.severity && 'medium' !== conflict.severity
-				}
-			) }
-		>
+		<div style={ noticeStyles }>
 			<p
-				className="m-0 text-white"
+				style={ messageStyles }
 				dangerouslySetInnerHTML={ { __html: conflict.message } }
 			/>
 
@@ -52,12 +69,17 @@ const ConflictItem = ({ conflict }) => {
 				label={ optimoleDashboardApp.strings.conflicts.conflict_close }
 				disabled={ isLoading }
 				className={ classnames(
-					'text-white hover:text-white',
+					'text-black hover:text-black',
 					{
 						'animate-spin': isLoading
 					}
 				) }
 				onClick={ dismiss }
+				style={{
+					position: 'absolute',
+					top: '8px',
+					right: '8px'
+				}}
 			/>
 		</div>
 	);

inc/admin.php

@@ -1141,7 +1141,29 @@ public function add_dashboard_page() {
 	 * @return void
 	 */
 	public function menu_icon_style() {
-		echo '<style>#toplevel_page_optimole img{ max-width:22px;padding-top:6px!important;opacity:.9!important;} #toplevel_page_optimole li.wp-first-item{ display:none }</style>';
+		$conflicts_count = $this->get_active_notices_count();
+		$badge_html = '';
+
+		if ( $conflicts_count > 0 ) {
+			$badge_html = sprintf(
+				'<style>
+				#toplevel_page_optimole .wp-menu-name::after { 
+					content: "%d";
+					background: #d63638;
+					border-radius: 10px;
+					padding: 1.5px 1px;
+					font-size: 11px;
+					margin-left: 5px; 
+					min-width: 18px;
+					display: inline-block;
+					text-align: center;
+				}
+				</style>',
+				$conflicts_count
+			);
+		}
+
+		echo '<style>#toplevel_page_optimole img{ max-width:22px;padding-top:6px!important;opacity:.9!important;} #toplevel_page_optimole li.wp-first-item{ display:none }</style>' . $badge_html;
 	}
 
 	/**
@@ -2265,4 +2287,36 @@ public function should_show_exceed_quota_warning() {
 
 		return true;
 	}
+
+	/**
+	 * Get the number of active notices (not dismissed).
+	 *
+	 * @return int - Number of active notices
+	 */
+	private function get_active_notices_count() {
+		$conflicting_plugins = $this->conflicting_plugins->get_conflicting_plugins();
+		$conflicts_count = 0;
+
+		foreach ( $conflicting_plugins as $key => $plugin ) {
+			$key = str_replace( 'wp-', '', $key );
+			$class_name = 'Optml_' . ucfirst( $key );
+
+			if ( ! class_exists( $class_name ) ) {
+				continue;
+			}
+			$conflict_instance = new $class_name();
+
+			if ( ! is_a( $conflict_instance, 'Optml_Abstract_Conflict' ) ) {
+				continue;
+			}
+
+			if ( $conflict_instance->is_conflict_valid() ) {
+				++$conflicts_count;
+			}
+		}
+
+		$dismissed_notices = get_option( 'optml_dismissed_conflicts', [] );
+
+		return $conflicts_count - count( $dismissed_notices );
+	}
 }

inc/conflicts/autoptimize.php

@@ -0,0 +1,59 @@
+<?php
+
+/**
+ * Class Optml_Autoptimize
+ *
+ * Handles conflicts with Autoptimize plugin.
+ */
+class Optml_Autoptimize extends Optml_Abstract_Conflict {
+
+	/**
+	 * Optml_Autoptimize constructor.
+	 */
+	public function __construct() {
+		$this->severity = self::SEVERITY_MEDIUM;
+		parent::__construct();
+	}
+
+	/**
+	 * Set the message property
+	 *
+	 * @since   4.1.0
+	 * @access  public
+	 * @return  void
+	 */
+	public function define_message() {
+		$this->message = sprintf(
+			/* translators: 1 is the settings path link */
+			__( 'Autoptimize has <strong>Lazy loading</strong> enabled. Optimole already provides its own lazy loading mechanism, which may conflict with Autoptimize\'s. To continue using Optimole\'s lazy loading feature, please disable lazy loading in %1$s.', 'optimole-wp' ),
+			'<a href="' . admin_url( 'admin.php?page=autoptimize_imgopt' ) . '">Autoptimize → Image Optimization</a>'
+		);
+	}
+
+	/**
+	 * Determine if conflict is applicable.
+	 *
+	 * @return bool
+	 * @since   2.0.6
+	 * @access  public
+	 */
+	public function is_conflict_valid() {
+		if ( ! is_plugin_active( 'autoptimize/autoptimize.php' ) ) {
+			return false;
+		}
+
+		if ( ! Optml_Main::instance()->admin->settings->use_lazyload() ) {
+			return false;
+		}
+
+		$autoptimize_imgopt_settings = get_option( 'autoptimize_imgopt_settings', '' );
+		if ( ! empty( $autoptimize_imgopt_settings ) ) {
+			$settings = maybe_unserialize( $autoptimize_imgopt_settings );
+			if ( is_array( $settings ) && isset( $settings['autoptimize_imgopt_checkbox_field_3'] ) ) {
+				return (bool) $settings['autoptimize_imgopt_checkbox_field_3'];
+			}
+		}
+
+		return false;
+	}
+}

inc/conflicts/conflicting_plugins.php

@@ -51,6 +51,10 @@ private function defined_plugins() {
 			'ewww-cloud'   => 'ewww-image-optimizer-cloud/ewww-image-optimizer-cloud.php',
 			'imagerecycle' => 'imagerecycle-pdf-image-compression/wp-image-recycle.php',
 			'imagify'      => 'imagify/imagify.php',
+			'litespeed'    => 'litespeed-cache/litespeed-cache.php',
+			'autoptimize'  => 'autoptimize/autoptimize.php',
+			'perfmatters'  => 'perfmatters/perfmatters.php',
+			'jetpack_Photon'      => 'jetpack/jetpack.php',
 			// 'plugin-slug' => 'plugin-folder/plugin-file.php'
 		];
 

inc/conflicts/litespeed.php

@@ -0,0 +1,69 @@
+<?php
+
+/**
+ * Class Optml_Litespeed
+ *
+ * Handles conflict with LiteSpeed Cache lazy loading feature.
+ */
+class Optml_Litespeed extends Optml_Abstract_Conflict {
+
+	/**
+	 * Optml_Litespeed constructor.
+	 */
+	public function __construct() {
+		$this->severity = self::SEVERITY_MEDIUM;
+		parent::__construct();
+	}
+
+	/**
+	 * Set the message property
+	 *
+	 * @since   4.1.0
+	 * @access  public
+	 * @return  void
+	 */
+	public function define_message() {
+		$this->message = sprintf(
+			/* translators: 1 is the settings path link */
+			__( 'LiteSpeed Cache has <strong>Lazy Loading</strong> enabled. Optimole already provides its own lazy loading mechanism, which may conflict with LiteSpeed Cache\'s. To continue using Optimole\'s lazy loading feature, please disable lazy loading in %1$s.', 'optimole-wp' ),
+			'<a href="' . admin_url( 'admin.php?page=litespeed-page_optm#settings_media' ) . '">LiteSpeed Cache → Page Optimization → Media Settings</a>'
+		);
+	}
+
+	/**
+	 * Determine if conflict is applicable.
+	 *
+	 * @return bool
+	 * @since   2.0.6
+	 * @access  public
+	 */
+	public function is_conflict_valid() {
+		if ( ! is_plugin_active( 'litespeed-cache/litespeed-cache.php' ) ) {
+			return false;
+		}
+
+		if ( ! Optml_Main::instance()->admin->settings->use_lazyload() ) {
+			return false;
+		}
+
+		if ( ! class_exists( 'LiteSpeed\Conf', false ) || ! class_exists( 'LiteSpeed\Base', false ) ) {
+			return false;
+		}
+
+		$conf_instance = \LiteSpeed\Conf::cls();
+		$lazy_setting = $conf_instance->conf( \LiteSpeed\Base::O_MEDIA_LAZY );
+
+		if ( ! $lazy_setting ) {
+			return false;
+		}
+
+		if ( class_exists( 'LiteSpeed\Metabox', false ) ) {
+			$metabox = \LiteSpeed\Metabox::cls();
+			$no_lazy_setting = $metabox->setting( 'litespeed_no_image_lazy' );
+
+			return ! $no_lazy_setting;
+		}
+
+		return false;
+	}
+}

inc/conflicts/perfmatters.php

@@ -0,0 +1,59 @@
+<?php
+
+/**
+ * Class Optml_Perfmatters
+ *
+ * Handles conflicts with Perfmatters plugin.
+ */
+class Optml_Perfmatters extends Optml_Abstract_Conflict {
+
+	/**
+	 * Optml_Perfmatters constructor.
+	 */
+	public function __construct() {
+		$this->severity = self::SEVERITY_MEDIUM;
+		parent::__construct();
+	}
+
+	/**
+	 * Set the message property
+	 *
+	 * @since   4.1.0
+	 * @access  public
+	 * @return  void
+	 */
+	public function define_message() {
+		$this->message = sprintf(
+			/* translators: 1 is the settings path link */
+			__( 'Perfmatters has <strong>Lazy loading</strong> enabled. Optimole already provides its own lazy loading mechanism, which may conflict with Perfmatters\'. To continue using Optimole\'s lazy loading feature, please disable lazy loading in %1$s.', 'optimole-wp' ),
+			'<a href="' . admin_url( 'admin.php?page=perfmatters&tab=lazyload#lazyload' ) . '">Perfmatters → Lazy Load</a>'
+		);
+	}
+
+	/**
+	 * Determine if conflict is applicable.
+	 *
+	 * @return bool
+	 * @since   2.0.6
+	 * @access  public
+	 */
+	public function is_conflict_valid() {
+		if ( ! is_plugin_active( 'perfmatters/perfmatters.php' ) ) {
+			return false;
+		}
+
+		if ( ! Optml_Main::instance()->admin->settings->use_lazyload() ) {
+			return false;
+		}
+
+		$perfmatters_options = get_option( 'perfmatters_options', [] );
+		if ( ! empty( $perfmatters_options ) && isset( $perfmatters_options['lazyload'] ) ) {
+			$lazyload_settings = $perfmatters_options['lazyload'];
+			if ( is_array( $lazyload_settings ) && isset( $lazyload_settings['lazy_loading'] ) ) {
+				return (bool) $lazyload_settings['lazy_loading'];
+			}
+		}
+
+		return false;
+	}
+}