← All changes
|
includes/extensions/Docs_KB/templates/single-doc.php
+222
-275
51.1.44
→
51.1.86
View file →
| @@ -1,338 +1,285 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | /** |
| 3 | - * Single Doc Template | |
| 3 | + * Template: Single Doc Article | |
| 4 | 4 | * |
| 5 | + * Apple Liquid-Glass design – breadcrumbs, sidebar, sticky TOC, content, | |
| 6 | + * reactions, related articles, prev/next navigation. | |
| 7 | + * | |
| 5 | 8 | * @package King_Addons |
| 6 | 9 | */ |
| 7 | 10 | |
| 8 | -if (!defined('ABSPATH')) { | |
| 9 | - exit; | |
| 10 | -} | |
| 11 | +defined('ABSPATH') || exit; | |
| 11 | 12 | |
| 12 | -$options = \King_Addons\Docs_KB::instance()->get_options(); | |
| 13 | -$docs_kb = \King_Addons\Docs_KB::instance(); | |
| 13 | +$ext = \King_Addons\Docs_KB::instance(); | |
| 14 | +$options = $ext->get_options(); | |
| 15 | +$mode = $options['dark_mode'] ?? 'auto'; | |
| 16 | +$primary = $options['primary_color'] ?? '#0071e3'; | |
| 14 | 17 | |
| 15 | -// Get current doc | |
| 16 | -$doc_id = get_the_ID(); | |
| 18 | +$show_toc = !empty($options['toc_enabled']); | |
| 19 | +$show_reading = !empty($options['reading_time']); | |
| 20 | +$show_share = !empty($options['social_share']); | |
| 21 | +$show_reactions = !empty($options['reactions_enabled']); | |
| 17 | 22 | |
| 18 | -// Track view (Pro) | |
| 19 | -if (!empty($options['analytics_enabled'])) { | |
| 20 | - $docs_kb->track_view($doc_id); | |
| 23 | +/* ── Current article ── */ | |
| 24 | +$post_id = get_the_ID(); | |
| 25 | +$terms = get_the_terms($post_id, 'kng_doc_category'); | |
| 26 | +$cat = ($terms && !is_wp_error($terms)) ? $terms[0] : null; | |
| 27 | +$tags = get_the_terms($post_id, 'kng_doc_tag'); | |
| 28 | + | |
| 29 | +/* ── Sidebar: articles in same category ── */ | |
| 30 | +$sidebar_posts = []; | |
| 31 | +if ($cat) { | |
| 32 | + $sidebar_posts = get_posts([ | |
| 33 | + 'post_type' => 'kng_doc', | |
| 34 | + 'posts_per_page' => 40, | |
| 35 | + 'tax_query' => [[ | |
| 36 | + 'taxonomy' => 'kng_doc_category', | |
| 37 | + 'terms' => $cat->term_id, | |
| 38 | + ]], | |
| 39 | + 'orderby' => 'menu_order', | |
| 40 | + 'order' => 'ASC', | |
| 41 | + ]); | |
| 21 | 42 | } |
| 22 | 43 | |
| 23 | -// Get category | |
| 24 | -$categories = get_the_terms($doc_id, \King_Addons\Docs_KB::TAXONOMY); | |
| 25 | -$current_category = !empty($categories) ? $categories[0] : null; | |
| 44 | +/* ── Meta ── */ | |
| 45 | +$views = (int) get_post_meta($post_id, '_kng_doc_views', true); | |
| 46 | +$reading_time = $ext::estimate_reading_time(get_the_content()); | |
| 26 | 47 | |
| 27 | -// Get navigation | |
| 28 | -$navigation = !empty($options['navigation_enabled']) ? $docs_kb->get_article_navigation($doc_id) : null; | |
| 48 | +/* ── Related ── */ | |
| 49 | +$related = $ext->get_related_docs($post_id, 3); | |
| 29 | 50 | |
| 30 | -// Get related docs (Pro) | |
| 31 | -$related_docs = !empty($options['related_enabled']) ? $docs_kb->get_related_docs($doc_id, $options['related_count'] ?? 3) : []; | |
| 51 | +/* ── Prev / Next ── */ | |
| 52 | +$nav = $ext->get_article_navigation($post_id); | |
| 32 | 53 | |
| 33 | -// Settings | |
| 34 | -$toc_enabled = !empty($options['toc_enabled']); | |
| 35 | -$sidebar_enabled = !empty($options['sidebar_enabled']); | |
| 36 | -$print_button = !empty($options['print_button']); | |
| 37 | -$feedback_enabled = !empty($options['feedback_enabled']); | |
| 38 | -$primary_color = $options['primary_color'] ?? '#0066ff'; | |
| 39 | - | |
| 40 | 54 | get_header(); |
| 41 | 55 | ?> |
| 42 | 56 | |
| 43 | -<div class="kng-docs-page kng-docs-single" style="--kng-docs-primary: <?php echo esc_attr($primary_color); ?>;"> | |
| 57 | +<div class="kng-docs-page" | |
| 58 | + data-kng-theme-mode="<?php echo esc_attr($mode); ?>" | |
| 59 | + style="--kng-docs-primary:<?php echo esc_attr($primary); ?>; --kng-docs-icon-color:<?php echo esc_attr($primary); ?>;"> | |
| 60 | + | |
| 44 | 61 | <div class="kng-docs-container"> |
| 45 | - | |
| 46 | - <!-- Breadcrumbs --> | |
| 62 | + | |
| 63 | + <!-- ══════════════════════════════════════ | |
| 64 | + BREADCRUMBS | |
| 65 | + ══════════════════════════════════════ --> | |
| 47 | 66 | <nav class="kng-docs-breadcrumbs" aria-label="<?php esc_attr_e('Breadcrumb', 'king-addons'); ?>"> |
| 48 | - <a href="<?php echo esc_url(get_post_type_archive_link(\King_Addons\Docs_KB::POST_TYPE)); ?>" class="kng-docs-breadcrumb-item"> | |
| 49 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 50 | - <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/> | |
| 51 | - </svg> | |
| 67 | + <a href="<?php echo esc_url(get_post_type_archive_link('kng_doc')); ?>" class="kng-docs-breadcrumb-item"> | |
| 68 | + <?php echo $ext->get_icon_svg('home'); ?> | |
| 52 | 69 | <?php esc_html_e('Docs', 'king-addons'); ?> |
| 53 | 70 | </a> |
| 54 | - <?php if ($current_category): ?> | |
| 55 | - <span class="kng-docs-breadcrumb-sep">/</span> | |
| 56 | - <a href="<?php echo esc_url(get_term_link($current_category)); ?>" class="kng-docs-breadcrumb-item"> | |
| 57 | - <?php echo esc_html($current_category->name); ?> | |
| 58 | - </a> | |
| 71 | + | |
| 72 | + <?php if ($cat) : ?> | |
| 73 | + <span class="kng-docs-breadcrumb-sep">/</span> | |
| 74 | + <a href="<?php echo esc_url(get_term_link($cat)); ?>" class="kng-docs-breadcrumb-item"> | |
| 75 | + <?php echo esc_html($cat->name); ?> | |
| 76 | + </a> | |
| 59 | 77 | <?php endif; ?> |
| 78 | + | |
| 60 | 79 | <span class="kng-docs-breadcrumb-sep">/</span> |
| 61 | 80 | <span class="kng-docs-breadcrumb-current"><?php the_title(); ?></span> |
| 62 | 81 | </nav> |
| 63 | 82 | |
| 64 | - <div class="kng-docs-single-layout <?php echo $sidebar_enabled ? 'has-sidebar' : ''; ?>"> | |
| 65 | - | |
| 66 | - <?php if ($sidebar_enabled): ?> | |
| 67 | - <!-- Sidebar --> | |
| 68 | - <aside class="kng-docs-sidebar <?php echo !empty($options['toc_sticky']) ? 'is-sticky' : ''; ?>"> | |
| 69 | - <div class="kng-docs-sidebar-inner"> | |
| 70 | - <?php if ($current_category): ?> | |
| 71 | - <h4 class="kng-docs-sidebar-title"> | |
| 72 | - <?php echo esc_html($current_category->name); ?> | |
| 73 | - </h4> | |
| 74 | - <?php | |
| 75 | - $category_docs = get_posts([ | |
| 76 | - 'post_type' => \King_Addons\Docs_KB::POST_TYPE, | |
| 77 | - 'posts_per_page' => -1, | |
| 78 | - 'tax_query' => [ | |
| 79 | - [ | |
| 80 | - 'taxonomy' => \King_Addons\Docs_KB::TAXONOMY, | |
| 81 | - 'field' => 'term_id', | |
| 82 | - 'terms' => $current_category->term_id, | |
| 83 | - ], | |
| 84 | - ], | |
| 85 | - 'orderby' => 'menu_order', | |
| 86 | - 'order' => 'ASC', | |
| 87 | - ]); | |
| 88 | - ?> | |
| 89 | - <ul class="kng-docs-sidebar-list"> | |
| 90 | - <?php foreach ($category_docs as $cat_doc): ?> | |
| 91 | - <li class="<?php echo $cat_doc->ID === $doc_id ? 'is-current' : ''; ?>"> | |
| 92 | - <a href="<?php echo esc_url(get_permalink($cat_doc)); ?>"> | |
| 93 | - <?php echo esc_html($cat_doc->post_title); ?> | |
| 94 | - </a> | |
| 95 | - </li> | |
| 96 | - <?php endforeach; ?> | |
| 97 | - </ul> | |
| 98 | - <?php else: ?> | |
| 99 | - <!-- No category - show all categories --> | |
| 100 | - <h4 class="kng-docs-sidebar-title"> | |
| 101 | - <?php esc_html_e('Categories', 'king-addons'); ?> | |
| 102 | - </h4> | |
| 103 | - <?php | |
| 104 | - $all_categories = get_terms([ | |
| 105 | - 'taxonomy' => \King_Addons\Docs_KB::TAXONOMY, | |
| 106 | - 'hide_empty' => true, | |
| 107 | - 'parent' => 0, | |
| 108 | - ]); | |
| 109 | - ?> | |
| 110 | - <?php if (!empty($all_categories) && !is_wp_error($all_categories)): ?> | |
| 111 | - <ul class="kng-docs-sidebar-list"> | |
| 112 | - <?php foreach ($all_categories as $cat): ?> | |
| 113 | - <li> | |
| 114 | - <a href="<?php echo esc_url(get_term_link($cat)); ?>"> | |
| 115 | - <?php echo esc_html($cat->name); ?> | |
| 116 | - <span class="kng-docs-sidebar-count"><?php echo esc_html($cat->count); ?></span> | |
| 117 | - </a> | |
| 118 | - </li> | |
| 119 | - <?php endforeach; ?> | |
| 120 | - </ul> | |
| 121 | - <?php endif; ?> | |
| 122 | - <?php endif; ?> | |
| 123 | - </div> | |
| 124 | - </aside> | |
| 83 | + <!-- ══════════════════════════════════════ | |
| 84 | + 3-COLUMN LAYOUT | |
| 85 | + ══════════════════════════════════════ --> | |
| 86 | + <div class="kng-docs-single-layout <?php echo !empty($sidebar_posts) ? 'has-sidebar' : ''; ?> <?php echo $show_toc ? 'has-toc-aside' : ''; ?>"> | |
| 87 | + | |
| 88 | + <!-- ── Sidebar ── --> | |
| 89 | + <?php if (!empty($sidebar_posts)) : ?> | |
| 90 | + <aside class="kng-docs-sidebar is-sticky"> | |
| 91 | + <div class="kng-docs-sidebar-inner"> | |
| 92 | + <?php if ($cat) : ?> | |
| 93 | + <h4 class="kng-docs-sidebar-title"><?php echo esc_html($cat->name); ?></h4> | |
| 94 | + <?php endif; ?> | |
| 95 | + | |
| 96 | + <ul class="kng-docs-sidebar-list"> | |
| 97 | + <?php foreach ($sidebar_posts as $sp) : ?> | |
| 98 | + <li class="<?php echo $sp->ID === $post_id ? 'is-current' : ''; ?>"> | |
| 99 | + <a href="<?php echo get_permalink($sp); ?>"> | |
| 100 | + <?php echo esc_html($sp->post_title); ?> | |
| 101 | + </a> | |
| 102 | + </li> | |
| 103 | + <?php endforeach; wp_reset_postdata(); ?> | |
| 104 | + </ul> | |
| 105 | + </div> | |
| 106 | + </aside> | |
| 125 | 107 | <?php endif; ?> |
| 126 | 108 | |
| 127 | - <!-- Main Content --> | |
| 109 | + <!-- ── Main Article ── --> | |
| 128 | 110 | <article class="kng-docs-article"> |
| 129 | - <?php if ($print_button): ?> | |
| 111 | + | |
| 112 | + <!-- Actions bar --> | |
| 130 | 113 | <div class="kng-docs-article-actions"> |
| 131 | - <button type="button" class="kng-docs-print-btn" onclick="window.print();"> | |
| 132 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 133 | - <path d="M6 9V2h12v7"/> | |
| 134 | - <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/> | |
| 135 | - <rect x="6" y="14" width="12" height="8"/> | |
| 136 | - </svg> | |
| 137 | - <?php esc_html_e('Print', 'king-addons'); ?> | |
| 114 | + <button class="kng-docs-action-btn" onclick="window.print()" title="<?php esc_attr_e('Print', 'king-addons'); ?>"> | |
| 115 | + <?php echo $ext->get_icon_svg('printer'); ?> | |
| 138 | 116 | </button> |
| 139 | 117 | </div> |
| 140 | - <?php endif; ?> | |
| 141 | 118 | |
| 142 | - <header class="kng-docs-article-header"> | |
| 119 | + <!-- Header --> | |
| 120 | + <header class="kng-docs-article-header kng-docs-reveal"> | |
| 143 | 121 | <h1 class="kng-docs-article-title"><?php the_title(); ?></h1> |
| 122 | + | |
| 144 | 123 | <div class="kng-docs-article-meta"> |
| 145 | - <span class="kng-docs-article-date"> | |
| 146 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 147 | - <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/> | |
| 148 | - <line x1="16" y1="2" x2="16" y2="6"/> | |
| 149 | - <line x1="8" y1="2" x2="8" y2="6"/> | |
| 150 | - <line x1="3" y1="10" x2="21" y2="10"/> | |
| 151 | - </svg> | |
| 124 | + <span> | |
| 125 | + <?php echo $ext->get_icon_svg('calendar'); ?> | |
| 152 | 126 | <?php echo get_the_modified_date(); ?> |
| 153 | 127 | </span> |
| 154 | - <?php | |
| 155 | - $reading_time = ceil(str_word_count(strip_tags(get_the_content())) / 200); | |
| 156 | - ?> | |
| 157 | - <span class="kng-docs-article-reading"> | |
| 158 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 159 | - <circle cx="12" cy="12" r="10"/> | |
| 160 | - <polyline points="12 6 12 12 16 14"/> | |
| 161 | - </svg> | |
| 162 | - <?php printf(esc_html(_n('%d min read', '%d min read', $reading_time, 'king-addons')), $reading_time); ?> | |
| 163 | - </span> | |
| 128 | + | |
| 129 | + <?php if ($show_reading && $reading_time) : ?> | |
| 130 | + <span> | |
| 131 | + <?php echo $ext->get_icon_svg('clock'); ?> | |
| 132 | + <?php echo esc_html($reading_time); ?> | |
| 133 | + </span> | |
| 134 | + <?php endif; ?> | |
| 135 | + | |
| 136 | + <?php if ($views) : ?> | |
| 137 | + <span> | |
| 138 | + <?php echo $ext->get_icon_svg('eye'); ?> | |
| 139 | + <?php printf( | |
| 140 | + esc_html(_n('%d view', '%d views', $views, 'king-addons')), | |
| 141 | + $views | |
| 142 | + ); ?> | |
| 143 | + </span> | |
| 144 | + <?php endif; ?> | |
| 164 | 145 | </div> |
| 146 | + | |
| 147 | + <?php if ($tags && !is_wp_error($tags)) : ?> | |
| 148 | + <div class="kng-docs-article-tags"> | |
| 149 | + <?php foreach ($tags as $tag) : ?> | |
| 150 | + <a href="<?php echo esc_url(get_term_link($tag)); ?>" class="kng-docs-tag"> | |
| 151 | + <?php echo esc_html($tag->name); ?> | |
| 152 | + </a> | |
| 153 | + <?php endforeach; ?> | |
| 154 | + </div> | |
| 155 | + <?php endif; ?> | |
| 165 | 156 | </header> |
| 166 | 157 | |
| 167 | - <?php if ($toc_enabled): ?> | |
| 168 | - <!-- Table of Contents (generated by JS) --> | |
| 169 | - <nav class="kng-docs-toc" id="kng-docs-toc" style="display: none;"> | |
| 170 | - <h4 class="kng-docs-toc-title"> | |
| 171 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 172 | - <line x1="3" y1="6" x2="21" y2="6"/> | |
| 173 | - <line x1="3" y1="12" x2="21" y2="12"/> | |
| 174 | - <line x1="3" y1="18" x2="21" y2="18"/> | |
| 175 | - </svg> | |
| 176 | - <?php esc_html_e('On this page', 'king-addons'); ?> | |
| 177 | - </h4> | |
| 178 | - <ul class="kng-docs-toc-list"></ul> | |
| 179 | - </nav> | |
| 158 | + <!-- TOC (inline, above content) --> | |
| 159 | + <?php if ($show_toc) : ?> | |
| 160 | + <div class="kng-docs-toc kng-docs-reveal"> | |
| 161 | + <h4 class="kng-docs-toc-title"> | |
| 162 | + <?php echo $ext->get_icon_svg('list'); ?> | |
| 163 | + <?php esc_html_e('Table of Contents', 'king-addons'); ?> | |
| 164 | + </h4> | |
| 165 | + <ul class="kng-docs-toc-list"> | |
| 166 | + <!-- populated by JS --> | |
| 167 | + </ul> | |
| 168 | + </div> | |
| 180 | 169 | <?php endif; ?> |
| 181 | 170 | |
| 182 | - <div class="kng-docs-article-content" data-toc-headings="<?php echo esc_attr($options['toc_headings'] ?? 'h2,h3'); ?>"> | |
| 171 | + <!-- Content --> | |
| 172 | + <div class="kng-docs-article-content kng-docs-reveal"> | |
| 183 | 173 | <?php the_content(); ?> |
| 184 | 174 | </div> |
| 185 | 175 | |
| 186 | - <?php if ($feedback_enabled): ?> | |
| 187 | - <!-- Feedback Section --> | |
| 188 | - <div class="kng-docs-feedback" data-doc-id="<?php echo esc_attr($doc_id); ?>"> | |
| 189 | - <p class="kng-docs-feedback-question"> | |
| 190 | - <?php echo esc_html($options['feedback_question'] ?? __('Was this article helpful?', 'king-addons')); ?> | |
| 191 | - </p> | |
| 192 | - <div class="kng-docs-feedback-buttons"> | |
| 193 | - <button type="button" class="kng-docs-feedback-btn kng-docs-feedback-yes" data-value="helpful"> | |
| 194 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 195 | - <path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"/> | |
| 196 | - </svg> | |
| 197 | - <?php esc_html_e('Yes', 'king-addons'); ?> | |
| 176 | + <!-- Social Share --> | |
| 177 | + <?php if ($show_share) : ?> | |
| 178 | + <div class="kng-docs-share"> | |
| 179 | + <span class="kng-docs-share-label"><?php esc_html_e('Share', 'king-addons'); ?></span> | |
| 180 | + | |
| 181 | + <button class="kng-docs-share-btn" data-share="copy" title="<?php esc_attr_e('Copy link', 'king-addons'); ?>"> | |
| 182 | + <?php echo $ext->get_icon_svg('link'); ?> | |
| 198 | 183 | </button> |
| 199 | - <button type="button" class="kng-docs-feedback-btn kng-docs-feedback-no" data-value="not_helpful"> | |
| 200 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 201 | - <path d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3zm7-13h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17"/> | |
| 202 | - </svg> | |
| 203 | - <?php esc_html_e('No', 'king-addons'); ?> | |
| 184 | + <button class="kng-docs-share-btn" data-share="twitter" title="Twitter"> | |
| 185 | + <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> | |
| 204 | 186 | </button> |
| 187 | + <button class="kng-docs-share-btn" data-share="facebook" title="Facebook"> | |
| 188 | + <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> | |
| 189 | + </button> | |
| 190 | + <button class="kng-docs-share-btn" data-share="linkedin" title="LinkedIn"> | |
| 191 | + <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> | |
| 192 | + </button> | |
| 205 | 193 | </div> |
| 206 | - <div class="kng-docs-feedback-thanks" style="display: none;"> | |
| 207 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 208 | - <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/> | |
| 209 | - <polyline points="22 4 12 14.01 9 11.01"/> | |
| 210 | - </svg> | |
| 211 | - <?php esc_html_e('Thank you for your feedback!', 'king-addons'); ?> | |
| 194 | + <?php endif; ?> | |
| 195 | + | |
| 196 | + <!-- Reactions --> | |
| 197 | + <?php if ($show_reactions) : ?> | |
| 198 | + <div class="kng-docs-reactions" data-post-id="<?php echo esc_attr($post_id); ?>"> | |
| 199 | + <p class="kng-docs-reactions-question"> | |
| 200 | + <?php esc_html_e('Was this article helpful?', 'king-addons'); ?> | |
| 201 | + </p> | |
| 202 | + <div class="kng-docs-reactions-buttons"> | |
| 203 | + <button class="kng-docs-reaction-btn" data-reaction="happy"> | |
| 204 | + <span class="kng-docs-reaction-emoji">😊</span> | |
| 205 | + <?php esc_html_e('Helpful', 'king-addons'); ?> | |
| 206 | + </button> | |
| 207 | + <button class="kng-docs-reaction-btn" data-reaction="neutral"> | |
| 208 | + <span class="kng-docs-reaction-emoji">😐</span> | |
| 209 | + <?php esc_html_e('Somewhat', 'king-addons'); ?> | |
| 210 | + </button> | |
| 211 | + <button class="kng-docs-reaction-btn" data-reaction="sad"> | |
| 212 | + <span class="kng-docs-reaction-emoji">😞</span> | |
| 213 | + <?php esc_html_e('Not helpful', 'king-addons'); ?> | |
| 214 | + </button> | |
| 215 | + </div> | |
| 216 | + <span class="kng-docs-reactions-thanks"> | |
| 217 | + <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| 218 | + <?php esc_html_e('Thank you for your feedback!', 'king-addons'); ?> | |
| 219 | + </span> | |
| 212 | 220 | </div> |
| 213 | - </div> | |
| 214 | 221 | <?php endif; ?> |
| 215 | 222 | |
| 216 | - <?php if (!empty($related_docs)): ?> | |
| 217 | - <!-- Related Articles --> | |
| 218 | - <div class="kng-docs-related"> | |
| 219 | - <h3 class="kng-docs-related-title"><?php esc_html_e('Related Articles', 'king-addons'); ?></h3> | |
| 220 | - <div class="kng-docs-related-grid"> | |
| 221 | - <?php foreach ($related_docs as $related): ?> | |
| 222 | - <a href="<?php echo esc_url(get_permalink($related)); ?>" class="kng-docs-related-item"> | |
| 223 | - <span class="kng-docs-related-item-title"><?php echo esc_html($related->post_title); ?></span> | |
| 224 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg> | |
| 225 | - </a> | |
| 226 | - <?php endforeach; ?> | |
| 223 | + <!-- Related articles --> | |
| 224 | + <?php if (!empty($related)) : ?> | |
| 225 | + <div class="kng-docs-related kng-docs-reveal"> | |
| 226 | + <h3 class="kng-docs-related-title"><?php esc_html_e('Related Articles', 'king-addons'); ?></h3> | |
| 227 | + <div class="kng-docs-related-grid"> | |
| 228 | + <?php foreach ($related as $rel) : ?> | |
| 229 | + <a href="<?php echo esc_url($rel['url']); ?>" class="kng-docs-related-item"> | |
| 230 | + <?php echo esc_html($rel['title']); ?> | |
| 231 | + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg> | |
| 232 | + </a> | |
| 233 | + <?php endforeach; ?> | |
| 234 | + </div> | |
| 227 | 235 | </div> |
| 228 | - </div> | |
| 229 | 236 | <?php endif; ?> |
| 230 | 237 | |
| 231 | - <?php if (!empty($navigation)): ?> | |
| 232 | - <!-- Article Navigation --> | |
| 233 | - <nav class="kng-docs-navigation"> | |
| 234 | - <?php if (!empty($navigation['prev'])): ?> | |
| 235 | - <a href="<?php echo esc_url(get_permalink($navigation['prev'])); ?>" class="kng-docs-nav-item kng-docs-nav-prev"> | |
| 236 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg> | |
| 237 | - <span> | |
| 238 | - <span class="kng-docs-nav-label"><?php esc_html_e('Previous', 'king-addons'); ?></span> | |
| 239 | - <span class="kng-docs-nav-title"><?php echo esc_html($navigation['prev']->post_title); ?></span> | |
| 240 | - </span> | |
| 241 | - </a> | |
| 242 | - <?php else: ?> | |
| 243 | - <span></span> | |
| 244 | - <?php endif; ?> | |
| 245 | - | |
| 246 | - <?php if (!empty($navigation['next'])): ?> | |
| 247 | - <a href="<?php echo esc_url(get_permalink($navigation['next'])); ?>" class="kng-docs-nav-item kng-docs-nav-next"> | |
| 248 | - <span> | |
| 249 | - <span class="kng-docs-nav-label"><?php esc_html_e('Next', 'king-addons'); ?></span> | |
| 250 | - <span class="kng-docs-nav-title"><?php echo esc_html($navigation['next']->post_title); ?></span> | |
| 251 | - </span> | |
| 252 | - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg> | |
| 253 | - </a> | |
| 254 | - <?php endif; ?> | |
| 255 | - </nav> | |
| 238 | + <!-- Prev / Next --> | |
| 239 | + <?php if ($nav['prev'] || $nav['next']) : ?> | |
| 240 | + <nav class="kng-docs-navigation kng-docs-reveal"> | |
| 241 | + <?php if ($nav['prev']) : ?> | |
| 242 | + <a href="<?php echo esc_url($nav['prev']['url']); ?>" class="kng-docs-nav-item kng-docs-nav-prev"> | |
| 243 | + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg> | |
| 244 | + <span> | |
| 245 | + <span class="kng-docs-nav-label"><?php esc_html_e('Previous', 'king-addons'); ?></span> | |
| 246 | + <span class="kng-docs-nav-title"><?php echo esc_html($nav['prev']['title']); ?></span> | |
| 247 | + </span> | |
| 248 | + </a> | |
| 249 | + <?php else : ?> | |
| 250 | + <span></span> | |
| 251 | + <?php endif; ?> | |
| 252 | + | |
| 253 | + <?php if ($nav['next']) : ?> | |
| 254 | + <a href="<?php echo esc_url($nav['next']['url']); ?>" class="kng-docs-nav-item kng-docs-nav-next"> | |
| 255 | + <span> | |
| 256 | + <span class="kng-docs-nav-label"><?php esc_html_e('Next', 'king-addons'); ?></span> | |
| 257 | + <span class="kng-docs-nav-title"><?php echo esc_html($nav['next']['title']); ?></span> | |
| 258 | + </span> | |
| 259 | + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg> | |
| 260 | + </a> | |
| 261 | + <?php endif; ?> | |
| 262 | + </nav> | |
| 256 | 263 | <?php endif; ?> |
| 264 | + | |
| 257 | 265 | </article> |
| 258 | 266 | |
| 259 | - <?php if ($toc_enabled && !$sidebar_enabled && !empty($options['toc_sticky'])): ?> | |
| 260 | - <!-- Floating TOC (when no sidebar) --> | |
| 261 | - <aside class="kng-docs-toc-floating is-sticky"> | |
| 262 | - <div class="kng-docs-toc-floating-inner"> | |
| 263 | - <h4 class="kng-docs-toc-title"><?php esc_html_e('On this page', 'king-addons'); ?></h4> | |
| 264 | - <ul class="kng-docs-toc-list kng-docs-toc-floating-list"></ul> | |
| 265 | - </div> | |
| 266 | - </aside> | |
| 267 | + <!-- ── Floating TOC aside (right column) ── --> | |
| 268 | + <?php if ($show_toc) : ?> | |
| 269 | + <aside class="kng-docs-toc-floating is-sticky"> | |
| 270 | + <div class="kng-docs-toc-floating-inner"> | |
| 271 | + <h4 class="kng-docs-toc-title"> | |
| 272 | + <?php esc_html_e('On this page', 'king-addons'); ?> | |
| 273 | + </h4> | |
| 274 | + <ul class="kng-docs-toc-list kng-docs-toc-floating-list"> | |
| 275 | + <!-- populated by JS --> | |
| 276 | + </ul> | |
| 277 | + </div> | |
| 278 | + </aside> | |
| 267 | 279 | <?php endif; ?> |
| 280 | + | |
| 268 | 281 | </div> |
| 269 | 282 | </div> |
| 270 | 283 | </div> |
| 271 | - | |
| 272 | -<script> | |
| 273 | -(function() { | |
| 274 | - // TOC generation | |
| 275 | - var content = document.querySelector('.kng-docs-article-content'); | |
| 276 | - var toc = document.getElementById('kng-docs-toc'); | |
| 277 | - var floatingToc = document.querySelector('.kng-docs-toc-floating-list'); | |
| 278 | - | |
| 279 | - if (content && (toc || floatingToc)) { | |
| 280 | - var headings = content.dataset.tocHeadings || 'h2,h3'; | |
| 281 | - var elements = content.querySelectorAll(headings); | |
| 282 | - | |
| 283 | - if (elements.length > 0) { | |
| 284 | - var list = ''; | |
| 285 | - elements.forEach(function(el, index) { | |
| 286 | - var id = 'toc-' + index; | |
| 287 | - el.id = id; | |
| 288 | - var level = el.tagName.toLowerCase(); | |
| 289 | - list += '<li class="kng-docs-toc-item kng-docs-toc-' + level + '">'; | |
| 290 | - list += '<a href="#' + id + '">' + el.textContent + '</a>'; | |
| 291 | - list += '</li>'; | |
| 292 | - }); | |
| 293 | - | |
| 294 | - if (toc) { | |
| 295 | - toc.querySelector('.kng-docs-toc-list').innerHTML = list; | |
| 296 | - toc.style.display = ''; | |
| 297 | - } | |
| 298 | - if (floatingToc) { | |
| 299 | - floatingToc.innerHTML = list; | |
| 300 | - } | |
| 301 | - } | |
| 302 | - } | |
| 303 | - | |
| 304 | - // Smooth scroll | |
| 305 | - document.querySelectorAll('.kng-docs-toc-list a').forEach(function(link) { | |
| 306 | - link.addEventListener('click', function(e) { | |
| 307 | - e.preventDefault(); | |
| 308 | - var target = document.querySelector(this.getAttribute('href')); | |
| 309 | - if (target) { | |
| 310 | - target.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| 311 | - } | |
| 312 | - }); | |
| 313 | - }); | |
| 314 | - | |
| 315 | - // Feedback | |
| 316 | - var feedback = document.querySelector('.kng-docs-feedback'); | |
| 317 | - if (feedback) { | |
| 318 | - feedback.querySelectorAll('.kng-docs-feedback-btn').forEach(function(btn) { | |
| 319 | - btn.addEventListener('click', function() { | |
| 320 | - var docId = feedback.dataset.docId; | |
| 321 | - var value = this.dataset.value; | |
| 322 | - | |
| 323 | - fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', { | |
| 324 | - method: 'POST', | |
| 325 | - headers: {'Content-Type': 'application/x-www-form-urlencoded'}, | |
| 326 | - body: 'action=king_addons_docs_feedback&doc_id=' + docId + '&feedback=' + value + '&nonce=<?php echo wp_create_nonce('king_addons_docs_feedback'); ?>' | |
| 327 | - }); | |
| 328 | - | |
| 329 | - feedback.querySelector('.kng-docs-feedback-buttons').style.display = 'none'; | |
| 330 | - feedback.querySelector('.kng-docs-feedback-question').style.display = 'none'; | |
| 331 | - feedback.querySelector('.kng-docs-feedback-thanks').style.display = ''; | |
| 332 | - }); | |
| 333 | - }); | |
| 334 | - } | |
| 335 | -})(); | |
| 336 | -</script> | |
| 337 | 284 | |
| 338 | 285 | <?php get_footer(); ?> |