king-addons / includes / admin / shared / page-shell.php

page-shell.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.82, at includes/admin/shared/page-shell.php

319 lines 10.8 KB

Raw Download Zip

1	<?php
2	/**
3	* Shared chrome for King Addons admin screens.
4	*
5	* The dashboard, settings and wishlist screens each hand-rolled the same
6	* header, stylesheet link and theme bootstrap, and the extension screens did
7	* none of it - which is why they rendered as bare WordPress tables. Everything
8	* goes through here instead.
9	*
10	* Usage:
11	* require_once KING_ADDONS_PATH . 'includes/admin/shared/page-shell.php';
12	* ka_admin_page_open([...]);
13	* ... cards ...
14	* ka_admin_page_close();
15	*
16	* @package King_Addons
17	*/
18
19	if (!defined('ABSPATH')) {
20	exit;
21	}
22
23	if (!function_exists('ka_admin_theme_mode')) {
24	/**
25	* The theme the current user picked for King Addons screens.
26	*
27	* @return string One of dark, light, auto.
28	*/
29	function ka_admin_theme_mode(): string
30	{
31	$mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
32
33	return in_array($mode, ['dark', 'light', 'auto'], true) ? $mode : 'auto';
34	}
35	}
36
37	if (!function_exists('ka_admin_theme_switch')) {
38	/**
39	* The Light / Dark / Auto control.
40	*
41	* The Settings screen had this in its own markup, so every other screen was
42	* stuck on whatever was chosen there. It lives in the shell now, which puts
43	* it on all of them.
44	*
45	* @param string $mode Current mode.
46	*
47	* @return void
48	*/
49	function ka_admin_theme_switch(string $mode): void
50	{
51	$options = [
52	'light' => ['☀︎', esc_html__('Light', 'king-addons')],
53	'dark' => ['☾', esc_html__('Dark', 'king-addons')],
54	'auto' => ['◐', esc_html__('Auto', 'king-addons')],
55	];
56	?>
57	<div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup"
58	aria-label="<?php esc_attr_e('Theme', 'king-addons'); ?>"
59	data-active="<?php echo esc_attr($mode); ?>"
60	data-nonce="<?php echo esc_attr(wp_create_nonce('king_addons_dashboard_ui')); ?>">
61	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
62	<?php foreach ($options as $value => $option) : ?>
63	<button type="button" class="ka-v3-segmented-btn" data-theme="<?php echo esc_attr($value); ?>"
64	aria-pressed="<?php echo $mode === $value ? 'true' : 'false'; ?>">
65	<span class="ka-v3-segmented-icon" aria-hidden="true"><?php echo esc_html($option[0]); ?></span>
66	<?php echo esc_html($option[1]); ?>
67	</button>
68	<?php endforeach; ?>
69	</div>
70
71	<script>
72	(function () {
73	var segment = document.getElementById('ka-v3-theme-segment');
74	if (!segment \|\| segment.dataset.kaReady === '1') {
75	return;
76	}
77	segment.dataset.kaReady = '1';
78
79	var mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
80
81	function paint(mode) {
82	var isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark';
83	document.body.classList.toggle('ka-v3-dark', isDark);
84	document.body.classList.toggle('ka-dark-theme', isDark);
85	document.documentElement.classList.toggle('ka-v3-dark', isDark);
86	}
87
88	segment.addEventListener('click', function (event) {
89	var button = event.target.closest('.ka-v3-segmented-btn');
90	if (!button) {
91	return;
92	}
93
94	var mode = button.dataset.theme \|\| 'dark';
95	segment.setAttribute('data-active', mode);
96	segment.querySelectorAll('.ka-v3-segmented-btn').forEach(function (btn) {
97	btn.setAttribute('aria-pressed', btn === button ? 'true' : 'false');
98	});
99	paint(mode);
100
101	var body = new URLSearchParams();
102	body.append('action', 'king_addons_save_dashboard_ui');
103	body.append('nonce', segment.dataset.nonce \|\| '');
104	body.append('key', 'theme_mode');
105	body.append('value', mode);
106
107	fetch(<?php echo wp_json_encode(admin_url('admin-ajax.php')); ?>, {
108	method: 'POST',
109	credentials: 'same-origin',
110	headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
111	body: body.toString()
112	});
113	});
114
115	// "Auto" has to keep following the operating system.
116	if (mql && mql.addEventListener) {
117	mql.addEventListener('change', function () {
118	if ('auto' === segment.getAttribute('data-active')) {
119	paint('auto');
120	}
121	});
122	}
123	})();
124	</script>
125	<?php
126	}
127	}
128
129	if (!function_exists('ka_admin_page_open')) {
130	/**
131	* Open a King Addons admin screen.
132	*
133	* @param array{
134	* title:string,
135	* subtitle?:string,
136	* icon?:string,
137	* icon_color?:string,
138	* saved?:bool,
139	* saved_message?:string,
140	* notices?:array<int,array{type:string,text:string}>,
141	* actions?:string
142	* } $args Screen options.
143	*
144	* @return void
145	*/
146	function ka_admin_page_open(array $args): void
147	{
148	$args = wp_parse_args($args, [
149	'title' => '',
150	'subtitle' => '',
151	'icon' => 'dashicons-admin-generic',
152	'icon_color' => 'purple',
153	'saved' => false,
154	'saved_message' => esc_html__('Settings saved.', 'king-addons'),
155	'notices' => [],
156	'actions' => '',
157	]);
158
159	$mode = ka_admin_theme_mode();
160	$css_path = KING_ADDONS_PATH . 'includes/admin/layouts/shared/admin-v3-styles.css';
161	$version = file_exists($css_path) ? filemtime($css_path) : KING_ADDONS_VERSION;
162
163	wp_enqueue_style(
164	'king-addons-admin-v3',
165	KING_ADDONS_URL . 'includes/admin/layouts/shared/admin-v3-styles.css',
166	[],
167	$version
168	);
169
170	$colors = ['purple', 'green', 'orange', 'pink', 'red'];
171	$icon_color = in_array($args['icon_color'], $colors, true) ? $args['icon_color'] : 'purple';
172	?>
173	<script>
174	(function () {
175	var mode = <?php echo wp_json_encode($mode); ?>;
176	var mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
177	var isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark';
178	function apply() {
179	document.body.classList.add('ka-admin-v3');
180	document.body.classList.toggle('ka-v3-dark', isDark);
181	document.body.classList.toggle('ka-dark-theme', isDark);
182	document.documentElement.classList.toggle('ka-v3-dark', isDark);
183	}
184	if (document.body) {
185	apply();
186	} else {
187	document.addEventListener('DOMContentLoaded', apply, { once: true });
188	}
189	})();
190	</script>
191
192	<div class="ka-admin-wrap">
193	<div class="ka-admin-header">
194	<div class="ka-admin-header-left">
195	<div class="ka-admin-header-icon <?php echo esc_attr($icon_color); ?>">
196	<span class="dashicons <?php echo esc_attr($args['icon']); ?>"></span>
197	</div>
198	<div>
199	<h1 class="ka-admin-title"><?php echo esc_html($args['title']); ?></h1>
200	<?php if ('' !== $args['subtitle']) : ?>
201	<p class="ka-admin-subtitle"><?php echo esc_html($args['subtitle']); ?></p>
202	<?php endif; ?>
203	</div>
204	</div>
205	<div class="ka-admin-header-actions">
206	<?php ka_admin_theme_switch($mode); ?>
207	<?php echo $args['actions']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- caller markup. ?>
208	</div>
209	</div>
210
211	<?php if ($args['saved']) : ?>
212	<div class="notice notice-success is-dismissible">
213	<p><?php echo esc_html($args['saved_message']); ?></p>
214	</div>
215	<?php endif; ?>
216
217	<?php foreach ((array) $args['notices'] as $notice) : ?>
218	<?php
219	$type = in_array(($notice['type'] ?? ''), ['error', 'warning', 'info', 'success'], true)
220	? $notice['type']
221	: 'info';
222	?>
223	<div class="notice notice-<?php echo esc_attr($type); ?>">
224	<p><?php echo wp_kses_post($notice['text'] ?? ''); ?></p>
225	</div>
226	<?php endforeach; ?>
227	<?php
228	}
229	}
230
231	if (!function_exists('ka_admin_page_close')) {
232	/**
233	* Close a King Addons admin screen.
234	*
235	* @return void
236	*/
237	function ka_admin_page_close(): void
238	{
239	echo '</div>';
240	}
241	}
242
243	if (!function_exists('ka_admin_card_open')) {
244	/**
245	* Open a settings card.
246	*
247	* @param string $title Card title.
248	* @param string $icon Dashicon class.
249	*
250	* @return void
251	*/
252	function ka_admin_card_open(string $title, string $icon = 'dashicons-admin-settings'): void
253	{
254	?>
255	<div class="ka-card">
256	<div class="ka-card-header">
257	<span class="dashicons <?php echo esc_attr($icon); ?>"></span>
258	<h2><?php echo esc_html($title); ?></h2>
259	</div>
260	<div class="ka-card-body">
261	<?php
262	}
263	}
264
265	if (!function_exists('ka_admin_card_close')) {
266	/**
267	* Close a settings card.
268	*
269	* @return void
270	*/
271	function ka_admin_card_close(): void
272	{
273	echo '</div></div>';
274	}
275	}
276
277	if (!function_exists('ka_admin_row_open')) {
278	/**
279	* Open one labelled row inside a card.
280	*
281	* @param string $label Row label.
282	* @param string $for Optional input id the label points at.
283	*
284	* @return void
285	*/
286	function ka_admin_row_open(string $label, string $for = ''): void
287	{
288	?>
289	<div class="ka-row">
290	<div class="ka-row-label">
291	<?php if ('' !== $for) : ?>
292	<label for="<?php echo esc_attr($for); ?>"><?php echo esc_html($label); ?></label>
293	<?php else : ?>
294	<?php echo esc_html($label); ?>
295	<?php endif; ?>
296	</div>
297	<div class="ka-row-field">
298	<?php
299	}
300	}
301
302	if (!function_exists('ka_admin_row_close')) {
303	/**
304	* Close a row.
305	*
306	* @param string $description Optional help text under the field.
307	*
308	* @return void
309	*/
310	function ka_admin_row_close(string $description = ''): void
311	{
312	if ('' !== $description) {
313	echo '<p class="ka-row-desc">' . wp_kses_post($description) . '</p>';
314	}
315
316	echo '</div></div>';
317	}
318	}
319