← All changes
|
includes/extensions/Docs_KB/templates/admin-page.php
+359
-903
51.1.44
→
51.1.86
View file →
| @@ -1,1031 +1,487 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | /** |
| 3 | - * Docs & Knowledge Base admin page template. | |
| 3 | + * Template: Admin Settings Page – Docs & Knowledge Base | |
| 4 | 4 | * |
| 5 | + * Uses the shared ka-admin-v3 styling framework. | |
| 6 | + * | |
| 5 | 7 | * @package King_Addons |
| 6 | - * @var array $options Current options | |
| 7 | - * @var bool $is_premium Whether premium is active | |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -if (!defined('ABSPATH')) { | |
| 11 | - exit; | |
| 12 | -} | |
| 10 | +defined('ABSPATH') || exit; | |
| 13 | 11 | |
| 14 | -$saved = isset($_GET['saved']) && $_GET['saved'] === '1'; | |
| 15 | -$pages = get_pages(['post_status' => 'publish']); | |
| 16 | -$roles = wp_roles()->get_names(); | |
| 12 | +$ext = \King_Addons\Docs_KB::instance(); | |
| 13 | +$options = $ext->get_options(); | |
| 14 | +$notices = []; | |
| 17 | 15 | |
| 18 | -// Theme mode is per-user | |
| 19 | -$theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true); | |
| 20 | -$allowed_theme_modes = ['dark', 'light', 'auto']; | |
| 21 | -if (!in_array($theme_mode, $allowed_theme_modes, true)) { | |
| 22 | - $theme_mode = 'dark'; | |
| 16 | +if (isset($_GET['saved']) && $_GET['saved'] === '1') { | |
| 17 | + $notices[] = __('Settings saved.', 'king-addons'); | |
| 23 | 18 | } |
| 24 | -?> | |
| 25 | -<style> | |
| 26 | -/* Page specific styles */ | |
| 27 | -.ka-docs-kb-page .ka-admin-wrap { | |
| 28 | - --ka-accent: #0066ff; | |
| 29 | - --ka-accent-hover: #0052cc; | |
| 30 | -} | |
| 31 | 19 | |
| 32 | -/* Layout Preview */ | |
| 33 | -.ka-layout-preview { | |
| 34 | - display: grid; | |
| 35 | - grid-template-columns: repeat(3, 1fr); | |
| 36 | - gap: 16px; | |
| 37 | - margin-top: 16px; | |
| 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']); | |
| 38 | 24 | } |
| 25 | +?> | |
| 39 | 26 | |
| 40 | -.ka-layout-option { | |
| 41 | - position: relative; | |
| 42 | - border: 2px solid #e5e5ea; | |
| 43 | - border-radius: 16px; | |
| 44 | - overflow: hidden; | |
| 45 | - cursor: pointer; | |
| 46 | - transition: all 0.2s ease; | |
| 47 | -} | |
| 27 | +<script> | |
| 28 | +(function() { | |
| 29 | + var stored = document.cookie.match('(^|;)\\s*ka_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> | |
| 48 | 37 | |
| 49 | -.ka-layout-option:hover { | |
| 50 | - border-color: #c5c5ca; | |
| 51 | -} | |
| 52 | - | |
| 53 | -.ka-layout-option.active { | |
| 54 | - border-color: var(--ka-accent); | |
| 55 | -} | |
| 56 | - | |
| 57 | -.ka-layout-option input { | |
| 58 | - position: absolute; | |
| 59 | - opacity: 0; | |
| 60 | - cursor: pointer; | |
| 61 | -} | |
| 62 | - | |
| 63 | -.ka-layout-preview-img { | |
| 64 | - width: 100%; | |
| 65 | - height: 120px; | |
| 66 | - background: #f5f5f7; | |
| 67 | - display: flex; | |
| 68 | - align-items: center; | |
| 69 | - justify-content: center; | |
| 70 | - padding: 16px; | |
| 71 | -} | |
| 72 | - | |
| 73 | -.ka-layout-preview-img svg { | |
| 74 | - width: 100%; | |
| 75 | - height: 100%; | |
| 76 | - max-width: 160px; | |
| 77 | -} | |
| 78 | - | |
| 79 | -.ka-layout-preview-label { | |
| 80 | - padding: 12px; | |
| 81 | - text-align: center; | |
| 82 | - font-weight: 500; | |
| 83 | - color: #1d1d1f; | |
| 84 | - background: #fff; | |
| 85 | - border-top: 1px solid #f1f1f4; | |
| 86 | -} | |
| 87 | - | |
| 88 | -.ka-layout-option.active .ka-layout-preview-label { | |
| 89 | - color: var(--ka-accent); | |
| 90 | -} | |
| 91 | - | |
| 92 | -/* Box Layout Preview */ | |
| 93 | -.ka-layout-box-preview { | |
| 94 | - display: grid; | |
| 95 | - grid-template-columns: 1fr 1fr; | |
| 96 | - gap: 8px; | |
| 97 | -} | |
| 98 | - | |
| 99 | -.ka-layout-box-item { | |
| 100 | - background: #fff; | |
| 101 | - border: 1px solid #e5e5ea; | |
| 102 | - border-radius: 8px; | |
| 103 | - padding: 10px; | |
| 104 | -} | |
| 105 | - | |
| 106 | -.ka-layout-box-item-header { | |
| 107 | - display: flex; | |
| 108 | - align-items: center; | |
| 109 | - gap: 6px; | |
| 110 | - margin-bottom: 6px; | |
| 111 | -} | |
| 112 | - | |
| 113 | -.ka-layout-box-icon { | |
| 114 | - width: 16px; | |
| 115 | - height: 16px; | |
| 116 | - background: var(--ka-accent); | |
| 117 | - border-radius: 4px; | |
| 118 | -} | |
| 119 | - | |
| 120 | -.ka-layout-box-title { | |
| 121 | - height: 6px; | |
| 122 | - width: 50px; | |
| 123 | - background: #1d1d1f; | |
| 124 | - border-radius: 3px; | |
| 125 | -} | |
| 126 | - | |
| 127 | -.ka-layout-box-line { | |
| 128 | - height: 4px; | |
| 129 | - background: #e5e5ea; | |
| 130 | - border-radius: 2px; | |
| 131 | - margin-bottom: 4px; | |
| 132 | -} | |
| 133 | - | |
| 134 | -.ka-layout-box-line:last-child { | |
| 135 | - width: 70%; | |
| 136 | -} | |
| 137 | - | |
| 138 | -/* Card Layout Preview */ | |
| 139 | -.ka-layout-card-preview { | |
| 140 | - display: grid; | |
| 141 | - grid-template-columns: 1fr 1fr; | |
| 142 | - gap: 8px; | |
| 143 | -} | |
| 144 | - | |
| 145 | -.ka-layout-card-item { | |
| 146 | - background: #fff; | |
| 147 | - border-radius: 12px; | |
| 148 | - box-shadow: 0 2px 8px rgba(0,0,0,0.06); | |
| 149 | - padding: 12px; | |
| 150 | - text-align: center; | |
| 151 | -} | |
| 152 | - | |
| 153 | -.ka-layout-card-icon { | |
| 154 | - width: 32px; | |
| 155 | - height: 32px; | |
| 156 | - background: linear-gradient(135deg, var(--ka-accent), #5ac8fa); | |
| 157 | - border-radius: 10px; | |
| 158 | - margin: 0 auto 8px; | |
| 159 | -} | |
| 160 | - | |
| 161 | -.ka-layout-card-title { | |
| 162 | - height: 6px; | |
| 163 | - width: 60%; | |
| 164 | - background: #1d1d1f; | |
| 165 | - border-radius: 3px; | |
| 166 | - margin: 0 auto 6px; | |
| 167 | -} | |
| 168 | - | |
| 169 | -.ka-layout-card-count { | |
| 170 | - height: 4px; | |
| 171 | - width: 30px; | |
| 172 | - background: #86868b; | |
| 173 | - border-radius: 2px; | |
| 174 | - margin: 0 auto; | |
| 175 | -} | |
| 176 | - | |
| 177 | -/* Modern Layout Preview */ | |
| 178 | -.ka-layout-modern-preview { | |
| 179 | - display: flex; | |
| 180 | - flex-direction: column; | |
| 181 | - gap: 8px; | |
| 182 | -} | |
| 183 | - | |
| 184 | -.ka-layout-modern-item { | |
| 185 | - display: flex; | |
| 186 | - align-items: center; | |
| 187 | - gap: 10px; | |
| 188 | - background: #fff; | |
| 189 | - border-radius: 12px; | |
| 190 | - padding: 10px 12px; | |
| 191 | - box-shadow: 0 1px 4px rgba(0,0,0,0.04); | |
| 192 | -} | |
| 193 | - | |
| 194 | -.ka-layout-modern-icon { | |
| 195 | - width: 36px; | |
| 196 | - height: 36px; | |
| 197 | - background: linear-gradient(135deg, var(--ka-accent), #5ac8fa); | |
| 198 | - border-radius: 10px; | |
| 199 | - flex-shrink: 0; | |
| 200 | -} | |
| 201 | - | |
| 202 | -.ka-layout-modern-content { | |
| 203 | - flex: 1; | |
| 204 | -} | |
| 205 | - | |
| 206 | -.ka-layout-modern-title { | |
| 207 | - height: 6px; | |
| 208 | - width: 80px; | |
| 209 | - background: #1d1d1f; | |
| 210 | - border-radius: 3px; | |
| 211 | - margin-bottom: 4px; | |
| 212 | -} | |
| 213 | - | |
| 214 | -.ka-layout-modern-desc { | |
| 215 | - height: 4px; | |
| 216 | - width: 120px; | |
| 217 | - background: #e5e5ea; | |
| 218 | - border-radius: 2px; | |
| 219 | -} | |
| 220 | - | |
| 221 | -.ka-layout-modern-arrow { | |
| 222 | - width: 16px; | |
| 223 | - height: 16px; | |
| 224 | - color: #86868b; | |
| 225 | -} | |
| 226 | - | |
| 227 | -/* Pro Badge */ | |
| 228 | -.ka-pro-badge-inline { | |
| 229 | - display: inline-flex; | |
| 230 | - align-items: center; | |
| 231 | - gap: 4px; | |
| 232 | - background: linear-gradient(135deg, #f59e0b, #f97316); | |
| 233 | - color: #fff; | |
| 234 | - font-size: 10px; | |
| 235 | - font-weight: 600; | |
| 236 | - padding: 2px 8px; | |
| 237 | - border-radius: 10px; | |
| 238 | - margin-left: 8px; | |
| 239 | - text-transform: uppercase; | |
| 240 | -} | |
| 241 | - | |
| 242 | -/* Stats Cards */ | |
| 243 | -.ka-stats-grid { | |
| 244 | - display: grid; | |
| 245 | - grid-template-columns: repeat(4, 1fr); | |
| 246 | - gap: 16px; | |
| 247 | - margin-bottom: 24px; | |
| 248 | -} | |
| 249 | - | |
| 250 | -.ka-stat-card { | |
| 251 | - background: #fff; | |
| 252 | - border-radius: 16px; | |
| 253 | - padding: 20px; | |
| 254 | - box-shadow: 0 2px 12px rgba(0,0,0,0.04); | |
| 255 | -} | |
| 256 | - | |
| 257 | -.ka-stat-value { | |
| 258 | - font-size: 32px; | |
| 259 | - font-weight: 700; | |
| 260 | - color: #1d1d1f; | |
| 261 | - margin-bottom: 4px; | |
| 262 | -} | |
| 263 | - | |
| 264 | -.ka-stat-label { | |
| 265 | - font-size: 13px; | |
| 266 | - color: #6e6e73; | |
| 267 | -} | |
| 268 | - | |
| 269 | -.ka-stat-card--accent .ka-stat-value { | |
| 270 | - color: var(--ka-accent); | |
| 271 | -} | |
| 272 | - | |
| 273 | -/* Dark Mode */ | |
| 274 | -.ka-v3-dark .ka-layout-option { | |
| 275 | - border-color: #3a3a3a; | |
| 276 | - background: #1e1e1e; | |
| 277 | -} | |
| 278 | - | |
| 279 | -.ka-v3-dark .ka-layout-option:hover { | |
| 280 | - border-color: #4a4a4a; | |
| 281 | -} | |
| 282 | - | |
| 283 | -.ka-v3-dark .ka-layout-option.active { | |
| 284 | - border-color: var(--ka-accent); | |
| 285 | -} | |
| 286 | - | |
| 287 | -.ka-v3-dark .ka-layout-preview-img { | |
| 288 | - background: #141414; | |
| 289 | -} | |
| 290 | - | |
| 291 | -.ka-v3-dark .ka-layout-preview-label { | |
| 292 | - background: #1e1e1e; | |
| 293 | - color: #f5f5f7; | |
| 294 | - border-color: #2a2a2a; | |
| 295 | -} | |
| 296 | - | |
| 297 | -.ka-v3-dark .ka-layout-box-item, | |
| 298 | -.ka-v3-dark .ka-layout-card-item, | |
| 299 | -.ka-v3-dark .ka-layout-modern-item { | |
| 300 | - background: #2a2a2a; | |
| 301 | - border-color: #3a3a3a; | |
| 302 | -} | |
| 303 | - | |
| 304 | -.ka-v3-dark .ka-layout-box-title, | |
| 305 | -.ka-v3-dark .ka-layout-card-title, | |
| 306 | -.ka-v3-dark .ka-layout-modern-title { | |
| 307 | - background: #f5f5f7; | |
| 308 | -} | |
| 309 | - | |
| 310 | -.ka-v3-dark .ka-layout-box-line, | |
| 311 | -.ka-v3-dark .ka-layout-modern-desc { | |
| 312 | - background: #4a4a4a; | |
| 313 | -} | |
| 314 | - | |
| 315 | -.ka-v3-dark .ka-stat-card { | |
| 316 | - background: #1e1e1e; | |
| 317 | -} | |
| 318 | - | |
| 319 | -.ka-v3-dark .ka-stat-value { | |
| 320 | - color: #f5f5f7; | |
| 321 | -} | |
| 322 | - | |
| 323 | -/* Save Button */ | |
| 324 | -.ka-save-btn { | |
| 325 | - display: inline-flex; | |
| 326 | - align-items: center; | |
| 327 | - gap: 8px; | |
| 328 | - padding: 14px 28px; | |
| 329 | - background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%); | |
| 330 | - color: #fff; | |
| 331 | - border: none; | |
| 332 | - border-radius: 12px; | |
| 333 | - font-size: 15px; | |
| 334 | - font-weight: 600; | |
| 335 | - cursor: pointer; | |
| 336 | - transition: all 0.2s ease; | |
| 337 | - box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25); | |
| 338 | -} | |
| 339 | - | |
| 340 | -.ka-save-btn:hover { | |
| 341 | - transform: translateY(-2px); | |
| 342 | - box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35); | |
| 343 | -} | |
| 344 | - | |
| 345 | -.ka-save-btn .dashicons { | |
| 346 | - font-size: 18px; | |
| 347 | - width: 18px; | |
| 348 | - height: 18px; | |
| 349 | -} | |
| 350 | - | |
| 351 | -.ka-card-footer { | |
| 352 | - background: transparent; | |
| 353 | - box-shadow: none; | |
| 354 | - padding: 24px 0; | |
| 355 | -} | |
| 356 | -</style> | |
| 357 | - | |
| 358 | -<div class="wrap ka-docs-kb-page"> | |
| 359 | - <script> | |
| 360 | - (function() { | |
| 361 | - const mode = '<?php echo esc_js($theme_mode); ?>'; | |
| 362 | - const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 363 | - const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark'; | |
| 364 | - document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 365 | - document.body.classList.toggle('ka-v3-dark', isDark); | |
| 366 | - })(); | |
| 367 | - </script> | |
| 368 | - | |
| 369 | - <div class="ka-admin-wrap"> | |
| 370 | - <!-- Header --> | |
| 371 | - <div class="ka-admin-header"> | |
| 372 | - <div class="ka-admin-header-left"> | |
| 373 | - <div class="ka-admin-header-icon" style="background: linear-gradient(135deg, #0066ff 0%, #5ac8fa 100%);"> | |
| 374 | - <span class="dashicons dashicons-book-alt"></span> | |
| 375 | - </div> | |
| 376 | - <div> | |
| 377 | - <h1 class="ka-admin-title"><?php esc_html_e('Docs & Knowledge Base', 'king-addons'); ?></h1> | |
| 378 | - <p class="ka-admin-subtitle"><?php esc_html_e('Create beautiful documentation for your website', 'king-addons'); ?></p> | |
| 379 | - </div> | |
| 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> | |
| 380 | 44 | </div> |
| 381 | - <div class="ka-admin-header-actions"> | |
| 382 | - <?php if (!empty($options['enabled'])): ?> | |
| 383 | - <span class="ka-status-badge enabled"> | |
| 384 | - <span class="ka-status-badge-dot"></span> | |
| 385 | - <?php esc_html_e('Enabled', 'king-addons'); ?> | |
| 386 | - </span> | |
| 387 | - <?php else: ?> | |
| 388 | - <span class="ka-status-badge disabled"> | |
| 389 | - <span class="ka-status-badge-dot"></span> | |
| 390 | - <?php esc_html_e('Disabled', 'king-addons'); ?> | |
| 391 | - </span> | |
| 392 | - <?php endif; ?> | |
| 393 | - <a href="<?php echo esc_url(admin_url('edit.php?post_type=' . \King_Addons\Docs_KB::POST_TYPE)); ?>" class="ka-btn ka-btn-secondary"> | |
| 394 | - <span class="dashicons dashicons-admin-page"></span> | |
| 395 | - <?php esc_html_e('All Docs', 'king-addons'); ?> | |
| 396 | - </a> | |
| 397 | - <a href="<?php echo esc_url(admin_url('post-new.php?post_type=' . \King_Addons\Docs_KB::POST_TYPE)); ?>" class="ka-btn ka-btn-primary"> | |
| 398 | - <span class="dashicons dashicons-plus-alt"></span> | |
| 399 | - <?php esc_html_e('Add New Doc', 'king-addons'); ?> | |
| 400 | - </a> | |
| 401 | - <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="<?php echo esc_attr(esc_html__('Theme', 'king-addons')); ?>" data-active="<?php echo esc_attr($theme_mode); ?>"> | |
| 402 | - <span class="ka-v3-segmented-indicator" aria-hidden="true"></span> | |
| 403 | - <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>"> | |
| 404 | - <span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span> | |
| 405 | - <?php esc_html_e('Light', 'king-addons'); ?> | |
| 406 | - </button> | |
| 407 | - <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>"> | |
| 408 | - <span class="ka-v3-segmented-icon" aria-hidden="true">☾</span> | |
| 409 | - <?php esc_html_e('Dark', 'king-addons'); ?> | |
| 410 | - </button> | |
| 411 | - <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>"> | |
| 412 | - <?php esc_html_e('Auto', 'king-addons'); ?> | |
| 413 | - </button> | |
| 414 | - </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> | |
| 415 | 48 | </div> |
| 416 | 49 | </div> |
| 417 | - | |
| 418 | - <?php if ($saved): ?> | |
| 419 | - <div class="notice notice-success is-dismissible" style="margin: 20px 0;"> | |
| 420 | - <p><?php esc_html_e('Settings saved successfully.', 'king-addons'); ?></p> | |
| 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> | |
| 421 | 73 | </div> |
| 422 | - <?php endif; ?> | |
| 74 | + </div> | |
| 423 | 75 | |
| 424 | - <!-- Quick Stats --> | |
| 425 | - <?php | |
| 426 | - $total_docs = wp_count_posts(\King_Addons\Docs_KB::POST_TYPE)->publish ?? 0; | |
| 427 | - $total_categories = wp_count_terms(['taxonomy' => \King_Addons\Docs_KB::TAXONOMY, 'hide_empty' => false]); | |
| 428 | - $total_views = 0; | |
| 429 | - $total_feedback = 0; | |
| 430 | - | |
| 431 | - if ($is_premium && !empty($options['analytics_enabled'])) { | |
| 432 | - global $wpdb; | |
| 433 | - $total_views = $wpdb->get_var($wpdb->prepare( | |
| 434 | - "SELECT SUM(meta_value) FROM {$wpdb->postmeta} WHERE meta_key = %s", | |
| 435 | - '_kng_doc_views' | |
| 436 | - )) ?: 0; | |
| 437 | - } | |
| 438 | - ?> | |
| 439 | - <div class="ka-stats-grid"> | |
| 440 | - <div class="ka-stat-card"> | |
| 441 | - <div class="ka-stat-value"><?php echo esc_html(number_format_i18n($total_docs)); ?></div> | |
| 442 | - <div class="ka-stat-label"><?php esc_html_e('Total Articles', 'king-addons'); ?></div> | |
| 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> | |
| 443 | 82 | </div> |
| 444 | - <div class="ka-stat-card"> | |
| 445 | - <div class="ka-stat-value"><?php echo esc_html(number_format_i18n($total_categories)); ?></div> | |
| 446 | - <div class="ka-stat-label"><?php esc_html_e('Categories', 'king-addons'); ?></div> | |
| 447 | - </div> | |
| 448 | - <div class="ka-stat-card ka-stat-card--accent"> | |
| 449 | - <div class="ka-stat-value"><?php echo $is_premium ? esc_html(number_format_i18n($total_views)) : '—'; ?></div> | |
| 450 | - <div class="ka-stat-label"><?php esc_html_e('Total Views', 'king-addons'); ?> <?php if (!$is_premium): ?><span class="ka-pro-badge-inline">PRO</span><?php endif; ?></div> | |
| 451 | - </div> | |
| 452 | - <div class="ka-stat-card"> | |
| 453 | - <div class="ka-stat-value"><?php echo $is_premium && !empty($options['search_enabled']) ? esc_html(count(get_option('king_addons_docs_search_logs', []))) : '—'; ?></div> | |
| 454 | - <div class="ka-stat-label"><?php esc_html_e('Searches', 'king-addons'); ?> <?php if (!$is_premium): ?><span class="ka-pro-badge-inline">PRO</span><?php endif; ?></div> | |
| 455 | - </div> | |
| 456 | 83 | </div> |
| 84 | + <?php endforeach; ?> | |
| 457 | 85 | |
| 458 | - <!-- Settings Form --> | |
| 459 | - <form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post"> | |
| 460 | - <input type="hidden" name="action" value="king_addons_docs_kb_save"> | |
| 461 | - <?php wp_nonce_field('king_addons_docs_kb_save', 'king_docs_kb_nonce'); ?> | |
| 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> | |
| 462 | 94 | |
| 463 | - <!-- General Settings --> | |
| 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 --> | |
| 464 | 105 | <div class="ka-card"> |
| 465 | 106 | <div class="ka-card-header"> |
| 466 | - <span class="dashicons dashicons-admin-settings"></span> | |
| 467 | - <h2><?php esc_html_e('General Settings', 'king-addons'); ?></h2> | |
| 107 | + <span class="dashicons dashicons-admin-plugins"></span> | |
| 108 | + <h2><?php esc_html_e('Extension Status', 'king-addons'); ?></h2> | |
| 468 | 109 | </div> |
| 469 | 110 | <div class="ka-card-body"> |
| 470 | 111 | <div class="ka-row"> |
| 471 | - <div class="ka-row-label"><?php esc_html_e('Enable Documentation', 'king-addons'); ?></div> | |
| 112 | + <div class="ka-row-label"><?php esc_html_e('Enable Docs & KB', 'king-addons'); ?></div> | |
| 472 | 113 | <div class="ka-row-field"> |
| 473 | 114 | <label class="ka-toggle"> |
| 474 | 115 | <input type="checkbox" name="enabled" value="1" <?php checked(!empty($options['enabled'])); ?>> |
| 475 | 116 | <span class="ka-toggle-slider"></span> |
| 476 | - <span class="ka-toggle-label"><?php esc_html_e('Show docs section on your site', 'king-addons'); ?></span> | |
| 117 | + <span class="ka-toggle-label"><?php esc_html_e('Enable the documentation system on the frontend', 'king-addons'); ?></span> | |
| 477 | 118 | </label> |
| 478 | 119 | </div> |
| 479 | 120 | </div> |
| 480 | - <div class="ka-grid-2"> | |
| 481 | - <div class="ka-row"> | |
| 482 | - <div class="ka-row-label"><?php esc_html_e('Documentation Slug', 'king-addons'); ?></div> | |
| 483 | - <div class="ka-row-field"> | |
| 484 | - <div style="display: flex; align-items: center; gap: 8px;"> | |
| 485 | - <span style="color: #6e6e73;"><?php echo esc_html(home_url('/')); ?></span> | |
| 486 | - <input type="text" name="docs_slug" value="<?php echo esc_attr($options['docs_slug']); ?>" style="width: 120px;"> | |
| 487 | - </div> | |
| 488 | - <p class="ka-row-desc"><?php esc_html_e('URL slug for your documentation', 'king-addons'); ?></p> | |
| 489 | - </div> | |
| 490 | - </div> | |
| 491 | - <div class="ka-row"> | |
| 492 | - <div class="ka-row-label"><?php esc_html_e('Main Docs Page', 'king-addons'); ?></div> | |
| 493 | - <div class="ka-row-field"> | |
| 494 | - <select name="main_page_id"> | |
| 495 | - <option value="0"><?php esc_html_e('— Use Archive Template —', 'king-addons'); ?></option> | |
| 496 | - <?php foreach ($pages as $page): ?> | |
| 497 | - <option value="<?php echo esc_attr($page->ID); ?>" <?php selected($options['main_page_id'], $page->ID); ?>> | |
| 498 | - <?php echo esc_html($page->post_title); ?> | |
| 499 | - </option> | |
| 500 | - <?php endforeach; ?> | |
| 501 | - </select> | |
| 502 | - </div> | |
| 503 | - </div> | |
| 504 | - </div> | |
| 505 | - <div class="ka-row"> | |
| 506 | - <div class="ka-row-label"><?php esc_html_e('Articles Per Page', 'king-addons'); ?></div> | |
| 507 | - <div class="ka-row-field"> | |
| 508 | - <input type="number" name="docs_per_page" value="<?php echo esc_attr($options['docs_per_page']); ?>" min="1" max="50" style="width: 80px;"> | |
| 509 | - </div> | |
| 510 | - </div> | |
| 511 | 121 | </div> |
| 512 | 122 | </div> |
| 513 | 123 | |
| 514 | - <!-- Layout Settings --> | |
| 124 | + <!-- Archive Settings --> | |
| 515 | 125 | <div class="ka-card"> |
| 516 | 126 | <div class="ka-card-header"> |
| 517 | - <span class="dashicons dashicons-layout"></span> | |
| 518 | - <h2><?php esc_html_e('Layout & Appearance', 'king-addons'); ?></h2> | |
| 127 | + <span class="dashicons dashicons-admin-home"></span> | |
| 128 | + <h2><?php esc_html_e('Archive Page', 'king-addons'); ?></h2> | |
| 519 | 129 | </div> |
| 520 | 130 | <div class="ka-card-body"> |
| 521 | 131 | <div class="ka-row"> |
| 522 | - <div class="ka-row-label"><?php esc_html_e('Category Layout', 'king-addons'); ?></div> | |
| 132 | + <div class="ka-row-label"><?php esc_html_e('Title', 'king-addons'); ?></div> | |
| 523 | 133 | <div class="ka-row-field"> |
| 524 | - <div class="ka-layout-preview"> | |
| 525 | - <!-- Box Layout --> | |
| 526 | - <label class="ka-layout-option <?php echo $options['layout'] === 'box' ? 'active' : ''; ?>"> | |
| 527 | - <input type="radio" name="layout" value="box" <?php checked($options['layout'], 'box'); ?>> | |
| 528 | - <div class="ka-layout-preview-img"> | |
| 529 | - <div class="ka-layout-box-preview"> | |
| 530 | - <div class="ka-layout-box-item"> | |
| 531 | - <div class="ka-layout-box-item-header"> | |
| 532 | - <div class="ka-layout-box-icon"></div> | |
| 533 | - <div class="ka-layout-box-title"></div> | |
| 534 | - </div> | |
| 535 | - <div class="ka-layout-box-line"></div> | |
| 536 | - <div class="ka-layout-box-line"></div> | |
| 537 | - <div class="ka-layout-box-line"></div> | |
| 538 | - </div> | |
| 539 | - <div class="ka-layout-box-item"> | |
| 540 | - <div class="ka-layout-box-item-header"> | |
| 541 | - <div class="ka-layout-box-icon"></div> | |
| 542 | - <div class="ka-layout-box-title"></div> | |
| 543 | - </div> | |
| 544 | - <div class="ka-layout-box-line"></div> | |
| 545 | - <div class="ka-layout-box-line"></div> | |
| 546 | - <div class="ka-layout-box-line"></div> | |
| 547 | - </div> | |
| 548 | - </div> | |
| 549 | - </div> | |
| 550 | - <div class="ka-layout-preview-label"><?php esc_html_e('Box', 'king-addons'); ?></div> | |
| 551 | - </label> | |
| 552 | - | |
| 553 | - <!-- Card Layout --> | |
| 554 | - <label class="ka-layout-option <?php echo $options['layout'] === 'card' ? 'active' : ''; ?>"> | |
| 555 | - <input type="radio" name="layout" value="card" <?php checked($options['layout'], 'card'); ?>> | |
| 556 | - <div class="ka-layout-preview-img"> | |
| 557 | - <div class="ka-layout-card-preview"> | |
| 558 | - <div class="ka-layout-card-item"> | |
| 559 | - <div class="ka-layout-card-icon"></div> | |
| 560 | - <div class="ka-layout-card-title"></div> | |
| 561 | - <div class="ka-layout-card-count"></div> | |
| 562 | - </div> | |
| 563 | - <div class="ka-layout-card-item"> | |
| 564 | - <div class="ka-layout-card-icon"></div> | |
| 565 | - <div class="ka-layout-card-title"></div> | |
| 566 | - <div class="ka-layout-card-count"></div> | |
| 567 | - </div> | |
| 568 | - </div> | |
| 569 | - </div> | |
| 570 | - <div class="ka-layout-preview-label"><?php esc_html_e('Card', 'king-addons'); ?></div> | |
| 571 | - </label> | |
| 572 | - | |
| 573 | - <!-- Modern Layout --> | |
| 574 | - <label class="ka-layout-option <?php echo $options['layout'] === 'modern' ? 'active' : ''; ?>"> | |
| 575 | - <input type="radio" name="layout" value="modern" <?php checked($options['layout'], 'modern'); ?>> | |
| 576 | - <div class="ka-layout-preview-img"> | |
| 577 | - <div class="ka-layout-modern-preview"> | |
| 578 | - <div class="ka-layout-modern-item"> | |
| 579 | - <div class="ka-layout-modern-icon"></div> | |
| 580 | - <div class="ka-layout-modern-content"> | |
| 581 | - <div class="ka-layout-modern-title"></div> | |
| 582 | - <div class="ka-layout-modern-desc"></div> | |
| 583 | - </div> | |
| 584 | - <svg class="ka-layout-modern-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> | |
| 585 | - </div> | |
| 586 | - <div class="ka-layout-modern-item"> | |
| 587 | - <div class="ka-layout-modern-icon"></div> | |
| 588 | - <div class="ka-layout-modern-content"> | |
| 589 | - <div class="ka-layout-modern-title"></div> | |
| 590 | - <div class="ka-layout-modern-desc"></div> | |
| 591 | - </div> | |
| 592 | - <svg class="ka-layout-modern-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> | |
| 593 | - </div> | |
| 594 | - </div> | |
| 595 | - </div> | |
| 596 | - <div class="ka-layout-preview-label"><?php esc_html_e('Modern', 'king-addons'); ?></div> | |
| 597 | - </label> | |
| 598 | - </div> | |
| 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'); ?>"> | |
| 599 | 139 | </div> |
| 600 | 140 | </div> |
| 601 | - | |
| 602 | - <div class="ka-grid-2"> | |
| 603 | - <div class="ka-row"> | |
| 604 | - <div class="ka-row-label"><?php esc_html_e('Columns', 'king-addons'); ?></div> | |
| 605 | - <div class="ka-row-field"> | |
| 606 | - <select name="columns"> | |
| 607 | - <option value="2" <?php selected($options['columns'], 2); ?>>2</option> | |
| 608 | - <option value="3" <?php selected($options['columns'], 3); ?>>3</option> | |
| 609 | - <option value="4" <?php selected($options['columns'], 4); ?>>4</option> | |
| 610 | - </select> | |
| 611 | - </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'); ?>"> | |
| 612 | 149 | </div> |
| 613 | - <div class="ka-row"> | |
| 614 | - <div class="ka-row-label"><?php esc_html_e('Show Article Count', 'king-addons'); ?></div> | |
| 615 | - <div class="ka-row-field"> | |
| 616 | - <label class="ka-toggle"> | |
| 617 | - <input type="checkbox" name="show_article_count" value="1" <?php checked(!empty($options['show_article_count'])); ?>> | |
| 618 | - <span class="ka-toggle-slider"></span> | |
| 619 | - </label> | |
| 620 | - </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> | |
| 621 | 160 | </div> |
| 622 | - <div class="ka-row"> | |
| 623 | - <div class="ka-row-label"><?php esc_html_e('Show Category Icon', 'king-addons'); ?></div> | |
| 624 | - <div class="ka-row-field"> | |
| 625 | - <label class="ka-toggle"> | |
| 626 | - <input type="checkbox" name="show_category_icon" value="1" <?php checked(!empty($options['show_category_icon'])); ?>> | |
| 627 | - <span class="ka-toggle-slider"></span> | |
| 628 | - </label> | |
| 629 | - </div> | |
| 630 | - </div> | |
| 631 | 161 | </div> |
| 632 | - | |
| 633 | - <h4 style="margin: 24px 0 16px; color: #6e6e73; font-size: 13px; text-transform: uppercase;"><?php esc_html_e('Colors', 'king-addons'); ?></h4> | |
| 634 | - <div class="ka-grid-3"> | |
| 635 | - <div class="ka-row"> | |
| 636 | - <div class="ka-row-label"><?php esc_html_e('Primary Color', 'king-addons'); ?></div> | |
| 637 | - <div class="ka-row-field"> | |
| 638 | - <input type="text" name="primary_color" value="<?php echo esc_attr($options['primary_color']); ?>" class="ka-color-picker"> | |
| 639 | - </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;"> | |
| 640 | 172 | </div> |
| 641 | - <div class="ka-row"> | |
| 642 | - <div class="ka-row-label"><?php esc_html_e('Icon Color', 'king-addons'); ?></div> | |
| 643 | - <div class="ka-row-field"> | |
| 644 | - <input type="text" name="category_icon_color" value="<?php echo esc_attr($options['category_icon_color']); ?>" class="ka-color-picker"> | |
| 645 | - </div> | |
| 646 | - </div> | |
| 647 | - <div class="ka-row"> | |
| 648 | - <div class="ka-row-label"><?php esc_html_e('Link Color', 'king-addons'); ?></div> | |
| 649 | - <div class="ka-row-field"> | |
| 650 | - <input type="text" name="link_color" value="<?php echo esc_attr($options['link_color']); ?>" class="ka-color-picker"> | |
| 651 | - </div> | |
| 652 | - </div> | |
| 653 | 173 | </div> |
| 654 | 174 | </div> |
| 655 | 175 | </div> |
| 656 | 176 | |
| 657 | - <!-- Single Article Settings --> | |
| 177 | + </div> | |
| 178 | + | |
| 179 | + <!-- ══════════════════════════════════════ | |
| 180 | + TAB: Content | |
| 181 | + ══════════════════════════════════════ --> | |
| 182 | + <div class="ka-tab-content" data-tab="content"> | |
| 183 | + | |
| 658 | 184 | <div class="ka-card"> |
| 659 | 185 | <div class="ka-card-header"> |
| 660 | - <span class="dashicons dashicons-media-document"></span> | |
| 661 | - <h2><?php esc_html_e('Single Article', 'king-addons'); ?></h2> | |
| 186 | + <span class="dashicons dashicons-edit"></span> | |
| 187 | + <h2><?php esc_html_e('Content Settings', 'king-addons'); ?></h2> | |
| 662 | 188 | </div> |
| 663 | 189 | <div class="ka-card-body"> |
| 664 | - <div class="ka-grid-2"> | |
| 665 | - <div class="ka-row"> | |
| 666 | - <div class="ka-row-label"><?php esc_html_e('Table of Contents', 'king-addons'); ?></div> | |
| 667 | - <div class="ka-row-field"> | |
| 668 | - <label class="ka-toggle"> | |
| 669 | - <input type="checkbox" name="toc_enabled" value="1" <?php checked(!empty($options['toc_enabled'])); ?>> | |
| 670 | - <span class="ka-toggle-slider"></span> | |
| 671 | - <span class="ka-toggle-label"><?php esc_html_e('Auto-generate TOC from headings', 'king-addons'); ?></span> | |
| 672 | - </label> | |
| 673 | - </div> | |
| 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'); ?>"> | |
| 674 | 198 | </div> |
| 675 | - <div class="ka-row"> | |
| 676 | - <div class="ka-row-label"><?php esc_html_e('Sticky TOC', 'king-addons'); ?></div> | |
| 677 | - <div class="ka-row-field"> | |
| 678 | - <label class="ka-toggle"> | |
| 679 | - <input type="checkbox" name="toc_sticky" value="1" <?php checked(!empty($options['toc_sticky'])); ?>> | |
| 680 | - <span class="ka-toggle-slider"></span> | |
| 681 | - <span class="ka-toggle-label"><?php esc_html_e('Keep TOC visible on scroll', 'king-addons'); ?></span> | |
| 682 | - </label> | |
| 683 | - </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'); ?>"> | |
| 684 | 208 | </div> |
| 685 | - <div class="ka-row"> | |
| 686 | - <div class="ka-row-label"><?php esc_html_e('TOC Headings', 'king-addons'); ?></div> | |
| 687 | - <div class="ka-row-field"> | |
| 688 | - <select name="toc_headings"> | |
| 689 | - <option value="h2" <?php selected($options['toc_headings'], 'h2'); ?>>H2 only</option> | |
| 690 | - <option value="h2,h3" <?php selected($options['toc_headings'], 'h2,h3'); ?>>H2, H3</option> | |
| 691 | - <option value="h2,h3,h4" <?php selected($options['toc_headings'], 'h2,h3,h4'); ?>>H2, H3, H4</option> | |
| 692 | - </select> | |
| 693 | - </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')); ?>"> | |
| 694 | 217 | </div> |
| 695 | - <div class="ka-row"> | |
| 696 | - <div class="ka-row-label"><?php esc_html_e('Sidebar', 'king-addons'); ?></div> | |
| 697 | - <div class="ka-row-field"> | |
| 698 | - <label class="ka-toggle"> | |
| 699 | - <input type="checkbox" name="sidebar_enabled" value="1" <?php checked(!empty($options['sidebar_enabled'])); ?>> | |
| 700 | - <span class="ka-toggle-slider"></span> | |
| 701 | - <span class="ka-toggle-label"><?php esc_html_e('Show category navigation sidebar', 'king-addons'); ?></span> | |
| 702 | - </label> | |
| 703 | - </div> | |
| 704 | - </div> | |
| 705 | - <div class="ka-row"> | |
| 706 | - <div class="ka-row-label"><?php esc_html_e('Prev/Next Navigation', 'king-addons'); ?></div> | |
| 707 | - <div class="ka-row-field"> | |
| 708 | - <label class="ka-toggle"> | |
| 709 | - <input type="checkbox" name="navigation_enabled" value="1" <?php checked(!empty($options['navigation_enabled'])); ?>> | |
| 710 | - <span class="ka-toggle-slider"></span> | |
| 711 | - </label> | |
| 712 | - </div> | |
| 713 | - </div> | |
| 714 | - <div class="ka-row"> | |
| 715 | - <div class="ka-row-label"><?php esc_html_e('Print Button', 'king-addons'); ?></div> | |
| 716 | - <div class="ka-row-field"> | |
| 717 | - <label class="ka-toggle"> | |
| 718 | - <input type="checkbox" name="print_button" value="1" <?php checked(!empty($options['print_button'])); ?>> | |
| 719 | - <span class="ka-toggle-slider"></span> | |
| 720 | - </label> | |
| 721 | - </div> | |
| 722 | - </div> | |
| 723 | 218 | </div> |
| 724 | 219 | </div> |
| 725 | 220 | </div> |
| 726 | 221 | |
| 727 | - <!-- Search Settings --> | |
| 222 | + </div> | |
| 223 | + | |
| 224 | + <!-- ══════════════════════════════════════ | |
| 225 | + TAB: Design | |
| 226 | + ══════════════════════════════════════ --> | |
| 227 | + <div class="ka-tab-content" data-tab="design"> | |
| 228 | + | |
| 728 | 229 | <div class="ka-card"> |
| 729 | 230 | <div class="ka-card-header"> |
| 730 | - <span class="dashicons dashicons-search"></span> | |
| 731 | - <h2><?php esc_html_e('Search', 'king-addons'); ?></h2> | |
| 231 | + <span class="dashicons dashicons-art"></span> | |
| 232 | + <h2><?php esc_html_e('Appearance', 'king-addons'); ?></h2> | |
| 732 | 233 | </div> |
| 733 | 234 | <div class="ka-card-body"> |
| 235 | + | |
| 236 | + <!-- Layout --> | |
| 734 | 237 | <div class="ka-row"> |
| 735 | - <div class="ka-row-label"><?php esc_html_e('Enable Search', 'king-addons'); ?></div> | |
| 238 | + <div class="ka-row-label"><?php esc_html_e('Layout', 'king-addons'); ?></div> | |
| 736 | 239 | <div class="ka-row-field"> |
| 737 | - <label class="ka-toggle"> | |
| 738 | - <input type="checkbox" name="search_enabled" value="1" <?php checked(!empty($options['search_enabled'])); ?>> | |
| 739 | - <span class="ka-toggle-slider"></span> | |
| 740 | - <span class="ka-toggle-label"><?php esc_html_e('Show live search on docs pages', 'king-addons'); ?></span> | |
| 741 | - </label> | |
| 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); ?>"> | |
| 742 | 260 | </div> |
| 743 | 261 | </div> |
| 744 | - <div class="ka-grid-2"> | |
| 745 | - <div class="ka-row"> | |
| 746 | - <div class="ka-row-label"><?php esc_html_e('Search Placeholder', 'king-addons'); ?></div> | |
| 747 | - <div class="ka-row-field"> | |
| 748 | - <input type="text" name="search_placeholder" value="<?php echo esc_attr($options['search_placeholder']); ?>"> | |
| 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> | |
| 749 | 277 | </div> |
| 750 | 278 | </div> |
| 751 | - <div class="ka-row"> | |
| 752 | - <div class="ka-row-label"><?php esc_html_e('Minimum Characters', 'king-addons'); ?></div> | |
| 753 | - <div class="ka-row-field"> | |
| 754 | - <input type="number" name="search_min_chars" value="<?php echo esc_attr($options['search_min_chars']); ?>" min="1" max="5" style="width: 80px;"> | |
| 755 | - </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> | |
| 756 | 290 | </div> |
| 757 | 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 | + | |
| 758 | 306 | </div> |
| 759 | 307 | </div> |
| 760 | 308 | |
| 761 | - <!-- Pro: Internal Docs --> | |
| 762 | - <div class="ka-card <?php echo !$is_premium ? 'ka-card-pro' : ''; ?>"> | |
| 309 | + </div> | |
| 310 | + | |
| 311 | + <!-- ══════════════════════════════════════ | |
| 312 | + TAB: Features | |
| 313 | + ══════════════════════════════════════ --> | |
| 314 | + <div class="ka-tab-content" data-tab="features"> | |
| 315 | + | |
| 316 | + <div class="ka-card"> | |
| 763 | 317 | <div class="ka-card-header"> |
| 764 | - <span class="dashicons dashicons-lock"></span> | |
| 765 | - <h2><?php esc_html_e('Internal Documentation', 'king-addons'); ?> <span class="ka-pro-badge-inline">PRO</span></h2> | |
| 318 | + <span class="dashicons dashicons-admin-generic"></span> | |
| 319 | + <h2><?php esc_html_e('Article Features', 'king-addons'); ?></h2> | |
| 766 | 320 | </div> |
| 767 | 321 | <div class="ka-card-body"> |
| 768 | - <?php if (!$is_premium): ?> | |
| 769 | - <div class="ka-pro-overlay"> | |
| 770 | - <p><?php esc_html_e('Create private documentation visible only to specific user roles.', 'king-addons'); ?></p> | |
| 771 | - <a href="#" class="ka-btn ka-btn-primary"><?php esc_html_e('Upgrade to Pro', 'king-addons'); ?></a> | |
| 772 | - </div> | |
| 773 | - <?php endif; ?> | |
| 322 | + | |
| 323 | + <!-- Table of Contents --> | |
| 774 | 324 | <div class="ka-row"> |
| 775 | - <div class="ka-row-label"><?php esc_html_e('Enable Internal Docs', 'king-addons'); ?></div> | |
| 325 | + <div class="ka-row-label"><?php esc_html_e('Table of Contents', 'king-addons'); ?></div> | |
| 776 | 326 | <div class="ka-row-field"> |
| 777 | 327 | <label class="ka-toggle"> |
| 778 | - <input type="checkbox" name="internal_docs_enabled" value="1" <?php checked(!empty($options['internal_docs_enabled'])); ?> <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 328 | + <input type="checkbox" name="toc_enabled" value="1" <?php checked(!empty($options['toc_enabled'])); ?>> | |
| 779 | 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> | |
| 780 | 331 | </label> |
| 781 | 332 | </div> |
| 782 | 333 | </div> |
| 334 | + | |
| 335 | + <!-- Reading Time --> | |
| 783 | 336 | <div class="ka-row"> |
| 784 | - <div class="ka-row-label"><?php esc_html_e('Allowed Roles', 'king-addons'); ?></div> | |
| 337 | + <div class="ka-row-label"><?php esc_html_e('Reading Time', 'king-addons'); ?></div> | |
| 785 | 338 | <div class="ka-row-field"> |
| 786 | - <?php foreach ($roles as $role_key => $role_name): ?> | |
| 787 | - <label style="display: inline-flex; align-items: center; margin-right: 16px; margin-bottom: 8px;"> | |
| 788 | - <input type="checkbox" name="internal_docs_roles[]" value="<?php echo esc_attr($role_key); ?>" | |
| 789 | - <?php checked(in_array($role_key, $options['internal_docs_roles'] ?? [])); ?> | |
| 790 | - <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 791 | - <span style="margin-left: 6px;"><?php echo esc_html($role_name); ?></span> | |
| 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> | |
| 792 | 343 | </label> |
| 793 | - <?php endforeach; ?> | |
| 794 | 344 | </div> |
| 795 | 345 | </div> |
| 796 | - </div> | |
| 797 | - </div> | |
| 798 | 346 | |
| 799 | - <!-- Pro: Feedback --> | |
| 800 | - <div class="ka-card <?php echo !$is_premium ? 'ka-card-pro' : ''; ?>"> | |
| 801 | - <div class="ka-card-header"> | |
| 802 | - <span class="dashicons dashicons-thumbs-up"></span> | |
| 803 | - <h2><?php esc_html_e('Article Feedback', 'king-addons'); ?> <span class="ka-pro-badge-inline">PRO</span></h2> | |
| 804 | - </div> | |
| 805 | - <div class="ka-card-body"> | |
| 806 | - <?php if (!$is_premium): ?> | |
| 807 | - <div class="ka-pro-overlay"> | |
| 808 | - <p><?php esc_html_e('Let readers rate your articles with helpful/not helpful feedback.', 'king-addons'); ?></p> | |
| 809 | - <a href="#" class="ka-btn ka-btn-primary"><?php esc_html_e('Upgrade to Pro', 'king-addons'); ?></a> | |
| 810 | - </div> | |
| 811 | - <?php endif; ?> | |
| 347 | + <!-- Reactions --> | |
| 812 | 348 | <div class="ka-row"> |
| 813 | - <div class="ka-row-label"><?php esc_html_e('Enable Feedback', 'king-addons'); ?></div> | |
| 349 | + <div class="ka-row-label"><?php esc_html_e('Reactions', 'king-addons'); ?></div> | |
| 814 | 350 | <div class="ka-row-field"> |
| 815 | 351 | <label class="ka-toggle"> |
| 816 | - <input type="checkbox" name="feedback_enabled" value="1" <?php checked(!empty($options['feedback_enabled'])); ?> <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 352 | + <input type="checkbox" name="reactions_enabled" value="1" <?php checked(!empty($options['reactions_enabled'])); ?>> | |
| 817 | 353 | <span class="ka-toggle-slider"></span> |
| 354 | + <span class="ka-toggle-label"><?php esc_html_e('Emoji reactions (😊 😐 😞)', 'king-addons'); ?></span> | |
| 818 | 355 | </label> |
| 819 | 356 | </div> |
| 820 | 357 | </div> |
| 358 | + | |
| 359 | + <!-- Social Share --> | |
| 821 | 360 | <div class="ka-row"> |
| 822 | - <div class="ka-row-label"><?php esc_html_e('Feedback Question', 'king-addons'); ?></div> | |
| 361 | + <div class="ka-row-label"><?php esc_html_e('Social Share', 'king-addons'); ?></div> | |
| 823 | 362 | <div class="ka-row-field"> |
| 824 | - <input type="text" name="feedback_question" value="<?php echo esc_attr($options['feedback_question']); ?>" <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 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> | |
| 825 | 368 | </div> |
| 826 | 369 | </div> |
| 370 | + | |
| 827 | 371 | </div> |
| 828 | 372 | </div> |
| 829 | 373 | |
| 830 | - <!-- Pro: Related Docs --> | |
| 831 | - <div class="ka-card <?php echo !$is_premium ? 'ka-card-pro' : ''; ?>"> | |
| 374 | + </div> | |
| 375 | + | |
| 376 | + <!-- ══════════════════════════════════════ | |
| 377 | + TAB: Manage | |
| 378 | + ══════════════════════════════════════ --> | |
| 379 | + <div class="ka-tab-content" data-tab="manage"> | |
| 380 | + <div class="ka-card"> | |
| 832 | 381 | <div class="ka-card-header"> |
| 833 | - <span class="dashicons dashicons-admin-links"></span> | |
| 834 | - <h2><?php esc_html_e('Related Articles', 'king-addons'); ?> <span class="ka-pro-badge-inline">PRO</span></h2> | |
| 382 | + <span class="dashicons dashicons-welcome-write-blog"></span> | |
| 383 | + <h2><?php esc_html_e('Create & Manage Content', 'king-addons'); ?></h2> | |
| 835 | 384 | </div> |
| 836 | 385 | <div class="ka-card-body"> |
| 837 | - <?php if (!$is_premium): ?> | |
| 838 | - <div class="ka-pro-overlay"> | |
| 839 | - <p><?php esc_html_e('Show related articles at the end of each doc to keep readers engaged.', 'king-addons'); ?></p> | |
| 840 | - <a href="#" class="ka-btn ka-btn-primary"><?php esc_html_e('Upgrade to Pro', 'king-addons'); ?></a> | |
| 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> | |
| 841 | 403 | </div> |
| 842 | - <?php endif; ?> | |
| 843 | - <div class="ka-grid-2"> | |
| 844 | - <div class="ka-row"> | |
| 845 | - <div class="ka-row-label"><?php esc_html_e('Show Related Articles', 'king-addons'); ?></div> | |
| 846 | - <div class="ka-row-field"> | |
| 847 | - <label class="ka-toggle"> | |
| 848 | - <input type="checkbox" name="related_enabled" value="1" <?php checked(!empty($options['related_enabled'])); ?> <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 849 | - <span class="ka-toggle-slider"></span> | |
| 850 | - </label> | |
| 851 | - </div> | |
| 852 | - </div> | |
| 853 | - <div class="ka-row"> | |
| 854 | - <div class="ka-row-label"><?php esc_html_e('Number of Articles', 'king-addons'); ?></div> | |
| 855 | - <div class="ka-row-field"> | |
| 856 | - <input type="number" name="related_count" value="<?php echo esc_attr($options['related_count']); ?>" min="1" max="6" style="width: 80px;" <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 857 | - </div> | |
| 858 | - </div> | |
| 859 | - </div> | |
| 860 | - </div> | |
| 861 | - </div> | |
| 862 | 404 | |
| 863 | - <!-- Pro: Analytics --> | |
| 864 | - <div class="ka-card <?php echo !$is_premium ? 'ka-card-pro' : ''; ?>"> | |
| 865 | - <div class="ka-card-header"> | |
| 866 | - <span class="dashicons dashicons-chart-area"></span> | |
| 867 | - <h2><?php esc_html_e('Analytics & Reports', 'king-addons'); ?> <span class="ka-pro-badge-inline">PRO</span></h2> | |
| 868 | - </div> | |
| 869 | - <div class="ka-card-body"> | |
| 870 | - <?php if (!$is_premium): ?> | |
| 871 | - <div class="ka-pro-overlay"> | |
| 872 | - <p><?php esc_html_e('Track views, search analytics, and get email reports.', 'king-addons'); ?></p> | |
| 873 | - <a href="#" class="ka-btn ka-btn-primary"><?php esc_html_e('Upgrade to Pro', 'king-addons'); ?></a> | |
| 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'); ?> | |
| 874 | 408 | </div> |
| 875 | - <?php endif; ?> | |
| 876 | - <div class="ka-row"> | |
| 877 | - <div class="ka-row-label"><?php esc_html_e('Enable Analytics', 'king-addons'); ?></div> | |
| 878 | - <div class="ka-row-field"> | |
| 879 | - <label class="ka-toggle"> | |
| 880 | - <input type="checkbox" name="analytics_enabled" value="1" <?php checked(!empty($options['analytics_enabled'])); ?> <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 881 | - <span class="ka-toggle-slider"></span> | |
| 882 | - <span class="ka-toggle-label"><?php esc_html_e('Track article views and search queries', 'king-addons'); ?></span> | |
| 883 | - </label> | |
| 884 | - </div> | |
| 885 | - </div> | |
| 886 | - <div class="ka-grid-2"> | |
| 887 | - <div class="ka-row"> | |
| 888 | - <div class="ka-row-label"><?php esc_html_e('Email Reports', 'king-addons'); ?></div> | |
| 889 | - <div class="ka-row-field"> | |
| 890 | - <label class="ka-toggle"> | |
| 891 | - <input type="checkbox" name="analytics_email_report" value="1" <?php checked(!empty($options['analytics_email_report'])); ?> <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 892 | - <span class="ka-toggle-slider"></span> | |
| 893 | - <span class="ka-toggle-label"><?php esc_html_e('Weekly analytics summary', 'king-addons'); ?></span> | |
| 894 | - </label> | |
| 895 | - </div> | |
| 896 | - </div> | |
| 897 | - <div class="ka-row"> | |
| 898 | - <div class="ka-row-label"><?php esc_html_e('Report Email', 'king-addons'); ?></div> | |
| 899 | - <div class="ka-row-field"> | |
| 900 | - <input type="email" name="analytics_email" value="<?php echo esc_attr($options['analytics_email']); ?>" <?php echo !$is_premium ? 'disabled' : ''; ?>> | |
| 901 | - </div> | |
| 902 | - </div> | |
| 903 | - </div> | |
| 904 | 409 | </div> |
| 905 | 410 | </div> |
| 411 | + </div> | |
| 906 | 412 | |
| 907 | - <!-- Save Button --> | |
| 908 | - <div class="ka-card ka-card-footer"> | |
| 909 | - <button type="submit" class="ka-save-btn"> | |
| 910 | - <span class="dashicons dashicons-saved"></span> | |
| 911 | - <?php esc_html_e('Save Settings', 'king-addons'); ?> | |
| 912 | - </button> | |
| 913 | - </div> | |
| 914 | - </form> | |
| 915 | - </div> | |
| 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> | |
| 916 | 420 | |
| 917 | - <script> | |
| 918 | - (function() { | |
| 919 | - const segment = document.getElementById('ka-v3-theme-segment'); | |
| 920 | - if (!segment) { | |
| 921 | - return; | |
| 922 | - } | |
| 421 | + </form> | |
| 422 | +</div> | |
| 923 | 423 | |
| 924 | - const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'; | |
| 925 | - const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>'; | |
| 926 | - const buttons = segment.querySelectorAll('.ka-v3-segmented-btn'); | |
| 927 | - const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 928 | - let mode = (segment.getAttribute('data-active') || 'dark').toString(); | |
| 929 | - let mqlHandler = null; | |
| 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 | + }); | |
| 930 | 440 | |
| 931 | - function setPressedState(activeMode) { | |
| 932 | - segment.setAttribute('data-active', activeMode); | |
| 933 | - buttons.forEach((btn) => { | |
| 934 | - const theme = btn.getAttribute('data-theme'); | |
| 935 | - btn.setAttribute('aria-pressed', theme === activeMode ? 'true' : 'false'); | |
| 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'); | |
| 936 | 447 | }); |
| 937 | - } | |
| 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 | + }); | |
| 938 | 455 | |
| 939 | - function saveUISetting(key, value) { | |
| 940 | - try { | |
| 941 | - const body = new URLSearchParams(); | |
| 942 | - body.set('action', 'king_addons_save_dashboard_ui'); | |
| 943 | - body.set('nonce', nonce); | |
| 944 | - body.set('key', key); | |
| 945 | - body.set('value', value); | |
| 946 | - | |
| 947 | - fetch(ajaxUrl, { | |
| 948 | - method: 'POST', | |
| 949 | - headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, | |
| 950 | - body: body.toString(), | |
| 951 | - credentials: 'same-origin' | |
| 952 | - }); | |
| 953 | - } catch (e) {} | |
| 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"]'); | |
| 954 | 462 | } |
| 955 | - | |
| 956 | - function applyTheme(isDark) { | |
| 957 | - document.body.classList.toggle('ka-v3-dark', isDark); | |
| 958 | - document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 959 | - } | |
| 960 | - | |
| 961 | - function setThemeMode(nextMode, save) { | |
| 962 | - mode = nextMode; | |
| 963 | - setPressedState(nextMode); | |
| 964 | - | |
| 965 | - if (mqlHandler && mql) { | |
| 966 | - if (mql.removeEventListener) { | |
| 967 | - mql.removeEventListener('change', mqlHandler); | |
| 968 | - } else if (mql.removeListener) { | |
| 969 | - mql.removeListener(mqlHandler); | |
| 970 | - } | |
| 971 | - mqlHandler = null; | |
| 972 | - } | |
| 973 | - | |
| 974 | - if (nextMode === 'auto') { | |
| 975 | - applyTheme(!!(mql && mql.matches)); | |
| 976 | - mqlHandler = (e) => { | |
| 977 | - if (mode !== 'auto') { | |
| 978 | - return; | |
| 979 | - } | |
| 980 | - applyTheme(!!e.matches); | |
| 981 | - }; | |
| 982 | - if (mql) { | |
| 983 | - if (mql.addEventListener) { | |
| 984 | - mql.addEventListener('change', mqlHandler); | |
| 985 | - } else if (mql.addListener) { | |
| 986 | - mql.addListener(mqlHandler); | |
| 987 | - } | |
| 988 | - } | |
| 989 | - } else { | |
| 990 | - applyTheme(nextMode === 'dark'); | |
| 991 | - } | |
| 992 | - | |
| 993 | - if (save) { | |
| 994 | - saveUISetting('theme_mode', nextMode); | |
| 995 | - } | |
| 996 | - } | |
| 997 | - | |
| 998 | - window.kaV3ToggleDark = function() { | |
| 999 | - const isDark = document.body.classList.contains('ka-v3-dark'); | |
| 1000 | - setThemeMode(isDark ? 'light' : 'dark', true); | |
| 1001 | - }; | |
| 1002 | - | |
| 1003 | - segment.addEventListener('click', (e) => { | |
| 1004 | - const btn = e.target && e.target.closest ? e.target.closest('.ka-v3-segmented-btn') : null; | |
| 1005 | - if (!btn) { | |
| 1006 | - return; | |
| 1007 | - } | |
| 1008 | - e.preventDefault(); | |
| 1009 | - const theme = (btn.getAttribute('data-theme') || 'dark').toString(); | |
| 1010 | - setThemeMode(theme, true); | |
| 463 | + colorInput.addEventListener('input', function () { | |
| 464 | + if (textDisplay) textDisplay.value = this.value; | |
| 1011 | 465 | }); |
| 466 | + } | |
| 1012 | 467 | |
| 1013 | - setThemeMode(mode, false); | |
| 1014 | - })(); | |
| 1015 | - | |
| 1016 | - // Layout option selection | |
| 1017 | - document.querySelectorAll('.ka-layout-option input').forEach(function(input) { | |
| 1018 | - input.addEventListener('change', function() { | |
| 1019 | - document.querySelectorAll('.ka-layout-option').forEach(function(opt) { | |
| 1020 | - opt.classList.remove('active'); | |
| 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'; | |
| 1021 | 483 | }); |
| 1022 | - this.closest('.ka-layout-option').classList.add('active'); | |
| 1023 | 484 | }); |
| 1024 | - }); | |
| 1025 | - | |
| 1026 | - // Color picker init | |
| 1027 | - jQuery(document).ready(function($) { | |
| 1028 | - $('.ka-color-picker').wpColorPicker(); | |
| 1029 | - }); | |
| 1030 | - </script> | |
| 1031 | -</div> | |
| 485 | + } | |
| 486 | +})(); | |
| 487 | +</script> | |