70 lines
2.2 KiB
PHP
70 lines
2.2 KiB
PHP
<?php
|
|
/**
|
|
* IGNY8 Table of Contents
|
|
* Displays clickable list of H2 headings with smooth scroll
|
|
*
|
|
* @package Igny8Bridge
|
|
*/
|
|
|
|
// Exit if accessed directly
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// Generate TOC from content
|
|
$toc_items = igny8_generate_table_of_contents($content);
|
|
|
|
// Only show if we have at least 3 headings (configurable via settings)
|
|
$min_headings = get_option('igny8_toc_min_headings', 3);
|
|
|
|
if (count($toc_items) < $min_headings) {
|
|
return;
|
|
}
|
|
?>
|
|
|
|
<nav class="igny8-table-of-contents">
|
|
<div class="igny8-toc-header">
|
|
<svg class="igny8-toc-icon" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/>
|
|
</svg>
|
|
<h3>Table of Contents</h3>
|
|
</div>
|
|
<ol class="igny8-toc-list">
|
|
<?php foreach ($toc_items as $item): ?>
|
|
<li class="igny8-toc-item">
|
|
<a href="#<?php echo esc_attr($item['id']); ?>" class="igny8-toc-link">
|
|
<span class="igny8-toc-number"><?php echo $item['number']; ?></span>
|
|
<span class="igny8-toc-text"><?php echo esc_html($item['text']); ?></span>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</nav>
|
|
|
|
<script>
|
|
// Smooth scroll for TOC links
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tocLinks = document.querySelectorAll('.igny8-toc-link');
|
|
|
|
tocLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href').substring(1);
|
|
const targetElement = document.getElementById(targetId);
|
|
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
|
|
// Update URL without jumping
|
|
if (history.pushState) {
|
|
history.pushState(null, null, '#' + targetId);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|