optimole-wp / inc / dashboard_widget.php

dashboard_widget.php in Optimole – Optimize Images | Convert WebP & AVIF | CDN & Lazy Load | Image Optimization 4.2.13, at inc/dashboard_widget.php

187 lines 5.4 KB

Raw Download Zip

1	<?php
2
3	/**
4	* Dashboard widget class.
5	*
6	* @package Optimole\Dashboard
7	*
8	* @since 4.0.0
9	*/
10	class Optml_Dashboard_Widget {
11
12	/**
13	* Handle for the widget & assets.
14	*
15	* @var string
16	*/
17	private $handle = OPTML_NAMESPACE . '-dashboard-widget';
18
19	/**
20	* Initialize the dashboard widget.
21	*/
22	public function init() {
23	if ( defined( 'OPTIOMLE_HIDE_ADMIN_AREA' ) && OPTIOMLE_HIDE_ADMIN_AREA ) {
24	return;
25	}
26	add_action( 'wp_dashboard_setup', [ $this, 'add_dashboard_widget' ] );
27	add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_widget' ] );
28	}
29
30	/**
31	* Add the dashboard widget.
32	*/
33	public function add_dashboard_widget() {
34	if ( ! $this->has_at_least_ten_visits() ) {
35	return;
36	}
37
38	wp_add_dashboard_widget( $this->handle, sprintf( 'Optimole - %s', __( 'Image Optimization Stats', 'optimole-wp' ) ), [ $this, 'render_widget' ] );
39	}
40
41	/**
42	* Enqueue the widget assets.
43	*/
44	public function enqueue_widget() {
45	if ( ! $this->is_main_dashboard_page() \|\| ! $this->has_at_least_ten_visits() ) {
46	return;
47	}
48
49	$asset_file = include OPTML_PATH . 'assets/build/widget/index.asset.php';
50
51	wp_register_script( $this->handle, OPTML_URL . 'assets/build/widget/index.js', $asset_file['dependencies'], $asset_file['version'], true );
52	wp_localize_script( $this->handle, 'optimoleDashboardWidget', $this->get_script_localization() );
53	wp_enqueue_script( $this->handle );
54	wp_enqueue_style( $this->handle, OPTML_URL . 'assets/build/widget/style-index.css', [], $asset_file['version'] );
55	}
56
57	/**
58	* Render the widget.
59	*/
60	public function render_widget() {
61	echo '<div id="optimole-dashboard-widget-root">' . $this->get_skeleton_loader() . '</div>';
62	}
63
64	/**
65	* Check if the current page is the main dashboard page.
66	*
67	* @return bool
68	*/
69	private function is_main_dashboard_page() {
70	global $pagenow;
71
72	return is_admin() && $pagenow === 'index.php';
73	}
74
75	/**
76	* Check if the user has at least 10 visits.
77	*
78	* @return bool
79	*/
80	private function has_at_least_ten_visits() {
81	$settings = new Optml_Settings();
82
83	if ( OPTML_DEBUG && $settings->is_connected() ) {
84	return true;
85	}
86
87	$service_data = $this->get_service_data();
88
89	if ( ! isset( $service_data['visitors'] ) ) {
90	return false;
91	}
92
93	$visits = $service_data['visitors'];
94
95	return $visits >= 10;
96	}
97
98	/**
99	* Get the script localization.
100	*
101	* @return array
102	*/
103	private function get_script_localization() {
104	return [
105	'i18n' => [
106	'averageCompression' => __( 'Average compression', 'optimole-wp' ),
107	'traffic' => __( 'Traffic', 'optimole-wp' ),
108	'duringLastMonth' => __( 'During last month', 'optimole-wp' ),
109	'viewAllStats' => __( 'View all stats', 'optimole-wp' ),
110	'monthlyVisitsQuota' => __( 'Monthly visits quota', 'optimole-wp' ),
111	'upgrade' => __( 'Upgrade', 'optimole-wp' ),
112	],
113	'skeletonLoader' => $this->get_skeleton_loader(),
114	'billingURL' => tsdk_translate_link( 'https://dashboard.optimole.com/settings/billing', 'query' ),
115	'serviceData' => $this->get_service_data(),
116	'assetsURL' => OPTML_URL . 'assets/',
117	'dashboardMetricsURL' => esc_url( 'https://dashboard.optimole.com/metrics' ),
118	'dashboardURL' => esc_url( tsdk_translate_link( 'https://dashboard.optimole.com' ) ),
119	];
120	}
121
122	/**
123	* Get the service data.
124	*
125	* @return array
126	*/
127	private function get_service_data() {
128	$settings = new Optml_Settings();
129
130	return $settings->get( 'service_data' );
131	}
132
133	/**
134	* Get the skeleton loader markup.
135	*
136	* @return string
137	*/
138	private function get_skeleton_loader() {
139	return '
140	<div class="antialiased">
141	<div class="p-4 flex flex-col gap-4 animate-pulse">
142	<div class="flex items-center gap-4 p-4 bg-light-blue border border-gray-300 rounded-md">
143	<div class="flex items-center">
144	<span class="w-12 h-12 bg-info/30 rounded-full"></span>
145	</div>
146	<div class="flex flex-col w-full gap-3">
147	<div class="flex items-center gap-2">
148	<div class="h-6 bg-gray-300 rounded w-24"></div>
149	<div class="h-4 bg-gray-300 rounded w-32"></div>
150	</div>
151	<div class="w-full relative flex items-center gap-2">
152	<div class="w-full h-3 rounded-md bg-gray-300 relative overflow-hidden"></div>
153	<div class="h-5 bg-gray-300 rounded w-10"></div>
154	</div>
155	</div>
156	</div>
157	<div class="grid grid-cols-2 gap-4">
158	<div class="flex bg-light-blue border border-gray-300 rounded-md basis-1/4 flex-col items-start p-4">
159	<div class="w-12 h-12 bg-info/30 rounded-full mb-2"></div>
160	<div class="flex w-full flex-col">
161	<div class="h-6 bg-gray-300 rounded w-24 my-3"></div>
162	<div class="h-4 bg-gray-300 rounded w-40 mb-1"></div>
163	<div class="h-3 bg-gray-300 rounded w-32"></div>
164	</div>
165	</div>
166	<div class="flex bg-light-blue border border-gray-300 rounded-md basis-1/4 flex-col items-start p-4">
167	<div class="w-12 h-12 bg-info/30 rounded-full mb-2"></div>
168	<div class="flex w-full flex-col">
169	<div class="h-6 bg-gray-300 rounded w-24 my-3"></div>
170	<div class="h-4 bg-gray-300 rounded w-20 mb-1"></div>
171	<div class="h-3 bg-gray-300 rounded w-36"></div>
172	</div>
173	</div>
174	</div>
175	</div>
176	<hr class="border-gray-200 m-0 border-0 border-b" />
177	<div class="flex justify-between gap-4 items-center px-4 py-2 bg-gray-50">
178	<div class="flex items-center gap-2">
179	<div class="w-8 h-8 bg-gray-200 rounded"></div>
180	<div class="h-5 bg-gray-200 rounded w-20"></div>
181	</div>
182	<div class="h-4 bg-gray-200 rounded w-24"></div>
183	</div>
184	</div>';
185	}
186	}
187