← All changes | modules/core/components/not-connected-modal.php +26 -13 1.6.4 → trunk View file →

		@@ -20,11 +20,16 @@
20	20	id="<?php echo esc_html( self::NOT_CONNECTED_MODAL_SLUG ); ?>"
21	21	style="display:none;"
22	22	>
23	23	<div class="image-optimizer__modal image-optimizer__modal--not-connected" data-modal-slug="<?php echo esc_attr( self::NOT_CONNECTED_MODAL_SLUG ); ?>">
24		- <img src="<?php echo esc_url( plugins_url( 'assets/static/connect.jpg', dirname( __FILE__, 3 ) ) ); ?>" alt="<?php esc_html_e( 'Connect now', 'image-optimization' ); ?>">
	24	+ <button class="image-optimizer__modal--not-connected-close">
	25	+ <svg viewBox="0 0 24 24" width="24" height="24">
	26	+ <path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z"></path>
	27	+ </svg>
	28	+ </button>
	29	+ <img src="<?php echo esc_url( plugins_url( 'assets/static/connect.jpg', dirname( __DIR__, 2 ) ) ); ?>" alt="<?php esc_html_e( 'Connect now', 'image-optimization' ); ?>">
25	30	<h2><?php esc_html_e( 'Let\'s start optimizing your images!', 'image-optimization' ); ?></h2>
26		- <p><?php esc_html_e( 'Connect the Image Optimizer plugin to speed up your site. We\'ll handle the rest.', 'image-optimization' ); ?></p>
	31	+ <p><?php esc_html_e( 'Connect the Image Optimization plugin to speed up your site. We\'ll handle the rest.', 'image-optimization' ); ?></p>
27	32	<ul>
28	33	<li><?php esc_html_e( 'Boost site speed and compress images', 'image-optimization' ); ?></li>
29	34	<li><?php esc_html_e( 'Bulk optimization for faster processing', 'image-optimization' ); ?></li>
30	35	<li><?php esc_html_e( 'Convert to AVIF and WebP formats', 'image-optimization' ); ?></li>
		@@ -29,9 +34,12 @@
29	34	<li><?php esc_html_e( 'Bulk optimization for faster processing', 'image-optimization' ); ?></li>
30	35	<li><?php esc_html_e( 'Convert to AVIF and WebP formats', 'image-optimization' ); ?></li>
31	36	<li><?php esc_html_e( 'Works across unlimited websites', 'image-optimization' ); ?></li>
32	37	</ul>
33		- <a href="<?php echo admin_url( 'admin.php?page=' . Module::SETTING_BASE_SLUG . '&action=connect' ); ?>">
	38	+ <a
	39	+ href="<?php echo esc_url( admin_url( 'admin.php?page=' . Module::SETTING_BASE_SLUG . '&action=connect' ) ); ?>"
	40	+ class="image-optimizer__modal--not-connected-connect"
	41	+ >
34	42	<?php esc_html_e( 'Connect to start', 'image-optimization' ); ?>
35	43	</a>
36	44	</div>
37	45	</div>
		@@ -40,9 +48,9 @@
40	48	setTimeout(() => {
41	49	const TB_WIDTH = 630;
42	50	const TB_HEIGHT = 620;
43	51	const msInOneDay = 24 * 60 * 60 * 1000;
44		- const time_dismissed = localStorage.getItem('<?php echo self::NOT_CONNECTED_MODAL_SLUG; ?>');
	52	+ const time_dismissed = localStorage.getItem('<?php echo esc_js( self::NOT_CONNECTED_MODAL_SLUG ); ?>');
45	53	const show_notice = !time_dismissed || Date.now() - time_dismissed >= msInOneDay;
46	54	const $modal = $( '[data-modal-slug="<?php echo esc_js( self::NOT_CONNECTED_MODAL_SLUG ); ?>"]' );
47	55
48	56	if (show_notice) {
		@@ -52,15 +60,24 @@
52	60	.height(TB_HEIGHT)
53	61	.css('margin-left', - TB_WIDTH / 2)
54	62	.css('margin-top', - TB_HEIGHT / 2)
55	63	.css('top', '50%');
56		- const $closeButton = $modal.find( 'a' );
57		- $closeButton.on( 'click', function (e) {
	64	+
	65	+ const hideModal = (e) => {
58	66	e.preventDefault();
59	67	localStorage.setItem('<?php echo esc_js( self::NOT_CONNECTED_MODAL_SLUG ); ?>', Date.now().toString());
60	68	tb_remove();
61		- window.open( $( this ).attr( 'href' ), '_blank' ).focus();
	69	+ }
	70	+ const $connectButton = $modal.find( '.image-optimizer__modal--not-connected-connect' );
	71	+ const $closeButton = $modal.find( '.image-optimizer__modal--not-connected-close' );
	72	+
	73	+ $connectButton.on( 'click', function (e) {
	74	+ hideModal(e);
	75	+ window.open( $( this ).attr( 'href' ), '_self' ).focus();
62	76	} );
	77	+ $closeButton.on( 'click', function (e) {
	78	+ hideModal(e);
	79	+ } );
63	80	} else {
64	81	$modal.remove();
65	82	}
66	83	}, 0);
		@@ -80,14 +97,10 @@
80	97	return;
81	98	}
82	99
83	100	if (
84		- Utils::is_media_page() ||
85		- Utils::is_plugin_page() ||
86		- Utils::is_single_attachment_page() ||
87		- Utils::is_media_upload_page() ||
88		- Utils::is_wp_dashboard_page() ||
89		- Utils::is_wp_updates_page()
	101	+ Utils::is_plugin_settings_page() ||
	102	+ Utils::is_bulk_optimization_page()
90	103	) {
91	104	add_action( 'admin_notices', [ $this, 'render_not_connected_modal' ] );
92	105	}
93	106	});