king-addons / includes / extensions / Docs_KB / templates / admin-page.php

admin-page.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.83, at includes/extensions/Docs_KB/templates/admin-page.php

488 lines 26.4 KB

Raw Download Zip

1	<?php
2	/**
3	* Template: Admin Settings Page – Docs & Knowledge Base
4	*
5	* Uses the shared ka-admin-v3 styling framework.
6	*
7	* @package King_Addons
8	*/
9
10	defined('ABSPATH') \|\| exit;
11
12	$ext = \King_Addons\Docs_KB::instance();
13	$options = $ext->get_options();
14	$notices = [];
15
16	if (isset($_GET['saved']) && $_GET['saved'] === '1') {
17	$notices[] = __('Settings saved.', 'king-addons');
18	}
19
20	/* Admin theme mode */
21	$theme_mode = 'auto';
22	if (isset($_COOKIE['ka_admin_theme'])) {
23	$theme_mode = sanitize_text_field($_COOKIE['ka_admin_theme']);
24	}
25	?>
26
27	<script>
28	(function() {
29	var stored = document.cookie.match('(^\|;)\\ska_admin_theme=([^;])');
30	var mode = stored ? stored[2] : 'auto';
31	var isDark = mode === 'dark' \|\| (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
32	document.documentElement.classList.toggle('ka-v3-dark', isDark);
33	document.body && document.body.classList.add('ka-admin-v3');
34	document.body && document.body.classList.toggle('ka-v3-dark', isDark);
35	})();
36	</script>
37
38	<div class="ka-admin-wrap">
39	<!-- Header -->
40	<div class="ka-admin-header">
41	<div class="ka-admin-header-left">
42	<div class="ka-admin-header-icon blue">
43	<span class="dashicons dashicons-book"></span>
44	</div>
45	<div>
46	<h1 class="ka-admin-title"><?php esc_html_e('Docs & Knowledge Base', 'king-addons'); ?></h1>
47	<p class="ka-admin-subtitle"><?php esc_html_e('Apple-inspired documentation center for your site', 'king-addons'); ?></p>
48	</div>
49	</div>
50	<div class="ka-admin-header-actions">
51	<a href="<?php echo esc_url(get_post_type_archive_link('kng_doc')); ?>"
52	target="_blank"
53	class="ka-btn ka-btn-secondary"
54	style="text-decoration:none;">
55	<span class="dashicons dashicons-external" style="margin-top:3px;"></span>
56	<?php esc_html_e('View Docs', 'king-addons'); ?>
57	</a>
58	<div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="Theme" data-active="<?php echo esc_attr($theme_mode); ?>">
59	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
60	<button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>">
61	<span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
62	<?php esc_html_e('Light', 'king-addons'); ?>
63	</button>
64	<button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>">
65	<span class="ka-v3-segmented-icon" aria-hidden="true">☾</span>
66	<?php esc_html_e('Dark', 'king-addons'); ?>
67	</button>
68	<button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>">
69	<span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
70	<?php esc_html_e('Auto', 'king-addons'); ?>
71	</button>
72	</div>
73	</div>
74	</div>
75
76	<!-- Notices -->
77	<?php foreach ($notices as $notice): ?>
78	<div class="ka-card" style="background: rgba(52, 199, 89, 0.1); border: 1px solid rgba(52, 199, 89, 0.3); margin-bottom: 20px;">
79	<div class="ka-card-body" style="padding: 16px 24px; display: flex; align-items: center; gap: 12px;">
80	<span class="dashicons dashicons-yes-alt" style="color: #34c759;"></span>
81	<span style="color: #34c759; font-weight: 500;"><?php echo esc_html($notice); ?></span>
82	</div>
83	</div>
84	<?php endforeach; ?>
85
86	<!-- Tabs -->
87	<div class="ka-tabs">
88	<button type="button" class="ka-tab active" data-tab="general"><?php esc_html_e('General', 'king-addons'); ?></button>
89	<button type="button" class="ka-tab" data-tab="content"><?php esc_html_e('Content', 'king-addons'); ?></button>
90	<button type="button" class="ka-tab" data-tab="design"><?php esc_html_e('Design', 'king-addons'); ?></button>
91	<button type="button" class="ka-tab" data-tab="features"><?php esc_html_e('Features', 'king-addons'); ?></button>
92	<button type="button" class="ka-tab" data-tab="manage"><?php esc_html_e('Manage', 'king-addons'); ?></button>
93	</div>
94
95	<form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
96	<?php wp_nonce_field('king_addons_docs_kb_save', 'king_docs_kb_nonce'); ?>
97	<input type="hidden" name="action" value="king_addons_docs_kb_save">
98
99	<!-- ══════════════════════════════════════
100	TAB: General
101	══════════════════════════════════════ -->
102	<div class="ka-tab-content active" data-tab="general">
103
104	<!-- Enable Extension -->
105	<div class="ka-card">
106	<div class="ka-card-header">
107	<span class="dashicons dashicons-admin-plugins"></span>
108	<h2><?php esc_html_e('Extension Status', 'king-addons'); ?></h2>
109	</div>
110	<div class="ka-card-body">
111	<div class="ka-row">
112	<div class="ka-row-label"><?php esc_html_e('Enable Docs & KB', 'king-addons'); ?></div>
113	<div class="ka-row-field">
114	<label class="ka-toggle">
115	<input type="checkbox" name="enabled" value="1" <?php checked(!empty($options['enabled'])); ?>>
116	<span class="ka-toggle-slider"></span>
117	<span class="ka-toggle-label"><?php esc_html_e('Enable the documentation system on the frontend', 'king-addons'); ?></span>
118	</label>
119	</div>
120	</div>
121	</div>
122	</div>
123
124	<!-- Archive Settings -->
125	<div class="ka-card">
126	<div class="ka-card-header">
127	<span class="dashicons dashicons-admin-home"></span>
128	<h2><?php esc_html_e('Archive Page', 'king-addons'); ?></h2>
129	</div>
130	<div class="ka-card-body">
131	<div class="ka-row">
132	<div class="ka-row-label"><?php esc_html_e('Title', 'king-addons'); ?></div>
133	<div class="ka-row-field">
134	<input type="text"
135	name="archive_title"
136	class="ka-input"
137	value="<?php echo esc_attr($options['archive_title'] ?? __('How can we help?', 'king-addons')); ?>"
138	placeholder="<?php esc_attr_e('How can we help?', 'king-addons'); ?>">
139	</div>
140	</div>
141	<div class="ka-row">
142	<div class="ka-row-label"><?php esc_html_e('Subtitle', 'king-addons'); ?></div>
143	<div class="ka-row-field">
144	<input type="text"
145	name="archive_subtitle"
146	class="ka-input"
147	value="<?php echo esc_attr($options['archive_subtitle'] ?? __('Find guides, tutorials and answers to your questions.', 'king-addons')); ?>"
148	placeholder="<?php esc_attr_e('Find guides, tutorials...', 'king-addons'); ?>">
149	</div>
150	</div>
151	<div class="ka-row">
152	<div class="ka-row-label"><?php esc_html_e('URL Slug', 'king-addons'); ?></div>
153	<div class="ka-row-field">
154	<input type="text"
155	name="docs_slug"
156	class="ka-input"
157	value="<?php echo esc_attr($options['docs_slug'] ?? 'docs'); ?>"
158	placeholder="docs">
159	<p class="ka-field-hint"><?php esc_html_e('After changing, go to Settings → Permalinks and click Save to flush rewrite rules.', 'king-addons'); ?></p>
160	</div>
161	</div>
162	<div class="ka-row">
163	<div class="ka-row-label"><?php esc_html_e('Articles per page', 'king-addons'); ?></div>
164	<div class="ka-row-field">
165	<input type="number"
166	name="docs_per_page"
167	class="ka-input"
168	min="1"
169	max="100"
170	value="<?php echo esc_attr($options['docs_per_page'] ?? 12); ?>"
171	style="width:100px;">
172	</div>
173	</div>
174	</div>
175	</div>
176
177	</div>
178
179	<!-- ══════════════════════════════════════
180	TAB: Content
181	══════════════════════════════════════ -->
182	<div class="ka-tab-content" data-tab="content">
183
184	<div class="ka-card">
185	<div class="ka-card-header">
186	<span class="dashicons dashicons-edit"></span>
187	<h2><?php esc_html_e('Content Settings', 'king-addons'); ?></h2>
188	</div>
189	<div class="ka-card-body">
190	<div class="ka-row">
191	<div class="ka-row-label"><?php esc_html_e('Feedback question', 'king-addons'); ?></div>
192	<div class="ka-row-field">
193	<input type="text"
194	name="feedback_question"
195	class="ka-input"
196	value="<?php echo esc_attr($options['feedback_question'] ?? __('Was this article helpful?', 'king-addons')); ?>"
197	placeholder="<?php esc_attr_e('Was this article helpful?', 'king-addons'); ?>">
198	</div>
199	</div>
200	<div class="ka-row">
201	<div class="ka-row-label"><?php esc_html_e('Thank you message', 'king-addons'); ?></div>
202	<div class="ka-row-field">
203	<input type="text"
204	name="feedback_thanks"
205	class="ka-input"
206	value="<?php echo esc_attr($options['feedback_thanks'] ?? __('Thank you for your feedback!', 'king-addons')); ?>"
207	placeholder="<?php esc_attr_e('Thank you for your feedback!', 'king-addons'); ?>">
208	</div>
209	</div>
210	<div class="ka-row">
211	<div class="ka-row-label"><?php esc_html_e('Empty state text', 'king-addons'); ?></div>
212	<div class="ka-row-field">
213	<input type="text"
214	name="empty_text"
215	class="ka-input"
216	value="<?php echo esc_attr($options['empty_text'] ?? __('No articles yet', 'king-addons')); ?>">
217	</div>
218	</div>
219	</div>
220	</div>
221
222	</div>
223
224	<!-- ══════════════════════════════════════
225	TAB: Design
226	══════════════════════════════════════ -->
227	<div class="ka-tab-content" data-tab="design">
228
229	<div class="ka-card">
230	<div class="ka-card-header">
231	<span class="dashicons dashicons-art"></span>
232	<h2><?php esc_html_e('Appearance', 'king-addons'); ?></h2>
233	</div>
234	<div class="ka-card-body">
235
236	<!-- Layout -->
237	<div class="ka-row">
238	<div class="ka-row-label"><?php esc_html_e('Layout', 'king-addons'); ?></div>
239	<div class="ka-row-field">
240	<?php
241	$layouts = [
242	'glass-card' => __('Glass Card', 'king-addons'),
243	'glass-list' => __('Glass List', 'king-addons'),
244	'glass-grid' => __('Glass Grid', 'king-addons'),
245	];
246	$current_layout = $options['layout'] ?? 'glass-card';
247	?>
248	<div class="ka-v3-segmented" id="ka-docs-layout-segment" data-active="<?php echo esc_attr($current_layout); ?>" style="max-width:400px;" role="radiogroup" aria-label="Layout">
249	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
250	<?php foreach ($layouts as $key => $label) : ?>
251	<button type="button"
252	class="ka-v3-segmented-btn <?php echo $current_layout === $key ? 'active' : ''; ?>"
253	data-layout="<?php echo esc_attr($key); ?>"
254	aria-pressed="<?php echo $current_layout === $key ? 'true' : 'false'; ?>">
255	<?php echo esc_html($label); ?>
256	</button>
257	<?php endforeach; ?>
258	</div>
259	<input type="hidden" name="layout" id="ka-docs-layout" value="<?php echo esc_attr($current_layout); ?>">
260	</div>
261	</div>
262
263	<!-- Primary Color -->
264	<div class="ka-row">
265	<div class="ka-row-label"><?php esc_html_e('Primary Color', 'king-addons'); ?></div>
266	<div class="ka-row-field">
267	<div style="display:flex; align-items:center; gap:12px;">
268	<input type="color"
269	name="primary_color"
270	value="<?php echo esc_attr($options['primary_color'] ?? '#0071e3'); ?>"
271	style="width:48px; height:36px; border:1px solid rgba(0,0,0,0.1); border-radius:8px; cursor:pointer;">
272	<input type="text"
273	class="ka-input"
274	value="<?php echo esc_attr($options['primary_color'] ?? '#0071e3'); ?>"
275	style="width:100px; font-family:monospace;"
276	readonly>
277	</div>
278	</div>
279	</div>
280
281	<!-- Dark Mode -->
282	<div class="ka-row">
283	<div class="ka-row-label"><?php esc_html_e('Color Scheme', 'king-addons'); ?></div>
284	<div class="ka-row-field">
285	<select name="dark_mode" class="ka-select">
286	<option value="light" <?php selected($options['dark_mode'] ?? 'auto', 'light'); ?>><?php esc_html_e('Light', 'king-addons'); ?></option>
287	<option value="dark" <?php selected($options['dark_mode'] ?? 'auto', 'dark'); ?>><?php esc_html_e('Dark', 'king-addons'); ?></option>
288	<option value="auto" <?php selected($options['dark_mode'] ?? 'auto', 'auto'); ?>><?php esc_html_e('Auto (system preference)', 'king-addons'); ?></option>
289	</select>
290	</div>
291	</div>
292
293	<!-- Columns -->
294	<div class="ka-row">
295	<div class="ka-row-label"><?php esc_html_e('Columns', 'king-addons'); ?></div>
296	<div class="ka-row-field">
297	<select name="columns" class="ka-select" style="width:100px;">
298	<option value="2" <?php selected($options['columns'] ?? 3, 2); ?>>2</option>
299	<option value="3" <?php selected($options['columns'] ?? 3, 3); ?>>3</option>
300	<option value="4" <?php selected($options['columns'] ?? 3, 4); ?>>4</option>
301	</select>
302	<p class="ka-field-hint"><?php esc_html_e('Number of columns on desktop.', 'king-addons'); ?></p>
303	</div>
304	</div>
305
306	</div>
307	</div>
308
309	</div>
310
311	<!-- ══════════════════════════════════════
312	TAB: Features
313	══════════════════════════════════════ -->
314	<div class="ka-tab-content" data-tab="features">
315
316	<div class="ka-card">
317	<div class="ka-card-header">
318	<span class="dashicons dashicons-admin-generic"></span>
319	<h2><?php esc_html_e('Article Features', 'king-addons'); ?></h2>
320	</div>
321	<div class="ka-card-body">
322
323	<!-- Table of Contents -->
324	<div class="ka-row">
325	<div class="ka-row-label"><?php esc_html_e('Table of Contents', 'king-addons'); ?></div>
326	<div class="ka-row-field">
327	<label class="ka-toggle">
328	<input type="checkbox" name="toc_enabled" value="1" <?php checked(!empty($options['toc_enabled'])); ?>>
329	<span class="ka-toggle-slider"></span>
330	<span class="ka-toggle-label"><?php esc_html_e('Auto-generate TOC from headings', 'king-addons'); ?></span>
331	</label>
332	</div>
333	</div>
334
335	<!-- Reading Time -->
336	<div class="ka-row">
337	<div class="ka-row-label"><?php esc_html_e('Reading Time', 'king-addons'); ?></div>
338	<div class="ka-row-field">
339	<label class="ka-toggle">
340	<input type="checkbox" name="reading_time" value="1" <?php checked(!empty($options['reading_time'])); ?>>
341	<span class="ka-toggle-slider"></span>
342	<span class="ka-toggle-label"><?php esc_html_e('Show estimated reading time', 'king-addons'); ?></span>
343	</label>
344	</div>
345	</div>
346
347	<!-- Reactions -->
348	<div class="ka-row">
349	<div class="ka-row-label"><?php esc_html_e('Reactions', 'king-addons'); ?></div>
350	<div class="ka-row-field">
351	<label class="ka-toggle">
352	<input type="checkbox" name="reactions_enabled" value="1" <?php checked(!empty($options['reactions_enabled'])); ?>>
353	<span class="ka-toggle-slider"></span>
354	<span class="ka-toggle-label"><?php esc_html_e('Emoji reactions (😊 😐 😞)', 'king-addons'); ?></span>
355	</label>
356	</div>
357	</div>
358
359	<!-- Social Share -->
360	<div class="ka-row">
361	<div class="ka-row-label"><?php esc_html_e('Social Share', 'king-addons'); ?></div>
362	<div class="ka-row-field">
363	<label class="ka-toggle">
364	<input type="checkbox" name="social_share" value="1" <?php checked(!empty($options['social_share'])); ?>>
365	<span class="ka-toggle-slider"></span>
366	<span class="ka-toggle-label"><?php esc_html_e('Show share buttons (Copy, Twitter, Facebook, LinkedIn)', 'king-addons'); ?></span>
367	</label>
368	</div>
369	</div>
370
371	</div>
372	</div>
373
374	</div>
375
376	<!-- ══════════════════════════════════════
377	TAB: Manage
378	══════════════════════════════════════ -->
379	<div class="ka-tab-content" data-tab="manage">
380	<div class="ka-card">
381	<div class="ka-card-header">
382	<span class="dashicons dashicons-welcome-write-blog"></span>
383	<h2><?php esc_html_e('Create & Manage Content', 'king-addons'); ?></h2>
384	</div>
385	<div class="ka-card-body">
386	<p style="margin:0 0 12px; color:rgba(0,0,0,.65);">
387	<?php esc_html_e('All Docs KB content is managed from here. Use these shortcuts to create articles and organize them with categories/tags.', 'king-addons'); ?>
388	</p>
389
390	<div style="display:flex; flex-wrap:wrap; gap:12px;">
391	<a class="ka-btn ka-btn-primary" style="text-decoration:none;" href="<?php echo esc_url(admin_url('edit.php?post_type=kng_doc')); ?>">
392	<?php esc_html_e('All Docs', 'king-addons'); ?>
393	</a>
394	<a class="ka-btn ka-btn-secondary" style="text-decoration:none;" href="<?php echo esc_url(admin_url('post-new.php?post_type=kng_doc')); ?>">
395	<?php esc_html_e('Add New Doc', 'king-addons'); ?>
396	</a>
397	<a class="ka-btn ka-btn-secondary" style="text-decoration:none;" href="<?php echo esc_url(admin_url('edit-tags.php?taxonomy=kng_doc_category&post_type=kng_doc')); ?>">
398	<?php esc_html_e('Doc Categories', 'king-addons'); ?>
399	</a>
400	<a class="ka-btn ka-btn-secondary" style="text-decoration:none;" href="<?php echo esc_url(admin_url('edit-tags.php?taxonomy=kng_doc_tag&post_type=kng_doc')); ?>">
401	<?php esc_html_e('Doc Tags', 'king-addons'); ?>
402	</a>
403	</div>
404
405	<div style="margin-top:14px; color:rgba(0,0,0,.65);">
406	<strong><?php esc_html_e('Tip:', 'king-addons'); ?></strong>
407	<?php esc_html_e('Create a category first, then assign it to your docs so they appear on the Docs page.', 'king-addons'); ?>
408	</div>
409	</div>
410	</div>
411	</div>
412
413	<!-- Save -->
414	<div class="ka-save-bar">
415	<button type="submit" class="ka-btn ka-btn-primary">
416	<span class="dashicons dashicons-saved" style="margin-top:3px;"></span>
417	<?php esc_html_e('Save Settings', 'king-addons'); ?>
418	</button>
419	</div>
420
421	</form>
422	</div>
423
424	<style>
425	#ka-docs-layout-segment[data-active="glass-list"] .ka-v3-segmented-indicator { transform: translateX(100%); }
426	#ka-docs-layout-segment[data-active="glass-grid"] .ka-v3-segmented-indicator { transform: translateX(200%); }
427	</style>
428	<script>
429	(function () {
430	/* Tabs */
431	document.querySelectorAll('.ka-tab').forEach(function (tab) {
432	tab.addEventListener('click', function () {
433	var target = this.dataset.tab;
434	document.querySelectorAll('.ka-tab').forEach(function (t) { t.classList.remove('active'); });
435	document.querySelectorAll('.ka-tab-content').forEach(function (c) { c.classList.remove('active'); });
436	this.classList.add('active');
437	document.querySelector('.ka-tab-content[data-tab="' + target + '"]').classList.add('active');
438	});
439	});
440
441	/* Layout selector */
442	document.querySelectorAll('[data-layout]').forEach(function (btn) {
443	btn.addEventListener('click', function () {
444	document.querySelectorAll('[data-layout]').forEach(function (b) {
445	b.classList.remove('active');
446	b.setAttribute('aria-pressed', 'false');
447	});
448	this.classList.add('active');
449	this.setAttribute('aria-pressed', 'true');
450	document.getElementById('ka-docs-layout').value = this.dataset.layout;
451	var seg = document.getElementById('ka-docs-layout-segment');
452	if (seg) seg.dataset.active = this.dataset.layout;
453	});
454	});
455
456	/* Color picker sync */
457	var colorInput = document.querySelector('input[name="primary_color"]');
458	if (colorInput) {
459	var textDisplay = colorInput.nextElementSibling;
460	if (!textDisplay) {
461	textDisplay = colorInput.parentElement.querySelector('input[type="text"]');
462	}
463	colorInput.addEventListener('input', function () {
464	if (textDisplay) textDisplay.value = this.value;
465	});
466	}
467
468	/* Admin theme toggle */
469	var seg = document.getElementById('ka-v3-theme-segment');
470	if (seg) {
471	seg.querySelectorAll('.ka-v3-segmented-btn').forEach(function(btn) {
472	btn.addEventListener('click', function() {
473	var mode = this.dataset.theme;
474	seg.dataset.active = mode;
475	seg.querySelectorAll('.ka-v3-segmented-btn').forEach(function(b) {
476	b.setAttribute('aria-pressed', 'false');
477	});
478	this.setAttribute('aria-pressed', 'true');
479	var isDark = mode === 'dark' \|\| (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
480	document.documentElement.classList.toggle('ka-v3-dark', isDark);
481	document.body.classList.toggle('ka-v3-dark', isDark);
482	document.cookie = 'ka_admin_theme=' + mode + ';path=/;max-age=31536000;SameSite=Lax';
483	});
484	});
485	}
486	})();
487	</script>
488