git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[COMPONENTE 11] Implementar Sidebar TOC con ScrollSpy custom - Issue #121

Browse Source 
- CREAR: template-parts/content-toc.php
  * Función PHP apu_generate_toc() para generar TOC automáticamente
  * Regex para buscar H2 con atributo ID
  * Solo se muestra en is_single()

- MODIFICAR: single.php (sidebar)
  * Agregar div.sidebar-sticky wrapper
  * Integrar get_template_part('template-parts/content', 'toc')
  * Preparar espacio para CTA Box (componente 12)

- MODIFICAR: style.css (+87 líneas)
  * 9 selectores CSS + 4 pseudo-elementos scrollbar
  * Sticky positioning (top: 85px)
  * Max-height calculado con calc()
  * Scroll interno con overflow-y: auto
  * Min-height: 0 (crítico para scroll en flexbox)
  * Border-left indicator (navy, NO naranja)
  * Scrollbar personalizado 6px (solo Webkit)

- MODIFICAR: main.js (+66 líneas)
  * Función updateActiveSection() para ScrollSpy
  * Algoritmo SIMPLE: verifica si pasaste el top
  * Offset scroll: navbarHeight + 100
  * Smooth scroll: navbarHeight + 40
  * Selector .toc-container a (NO .toc-link)
  * NO tiene auto-scroll del TOC
  * NO actualiza URL con history.pushState()

Características:
✅ Generación automática desde H2 con ID
✅ ScrollSpy custom (JavaScript vanilla, NO Bootstrap)
✅ Sticky positioning con flexbox
✅ Scroll interno solo en lista
✅ Border-left indicator activo
✅ Scrollbar delgado personalizado

Selectores REALES usados:
- .toc-container a (NO .toc-link)
- .toc-container h4 (NO .toc-title)
- .toc-container li (NO .toc-list li)

🎨 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-07 09:55:56 -06:00
parent f0d245de26
commit c5ce5eb06d
4 changed files with 223 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
wp-content/themes/apus-theme/assets/css/style.css
View File

@@ -918,3 +918,90 @@ img {
.post-content a:hover {
color: var(--color-orange-hover);
}
/* === SIDEBAR TOC === */
.sidebar-sticky {
position: sticky;
top: 85px;
display: flex;
flex-direction: column;
}
.toc-container {
margin-bottom: 13px;
background: #ffffff;
border: 1px solid var(--color-neutral-100);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 12px 16px;
max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
display: flex;
flex-direction: column;
}
.toc-container h4 {
color: var(--color-navy-primary);
padding-bottom: 8px;
border-bottom: 2px solid var(--color-neutral-100);
margin-bottom: 0.75rem;
font-weight: 600;
text-align: left;
font-size: 1rem;
font-style: normal;
}
.toc-list {
overflow-y: auto;
padding-right: 0.5rem;
list-style: none;
flex: 1;
min-height: 0;
}
.toc-container li {
margin-bottom: 0.15rem;
}
.toc-container a {
display: block;
padding: 0.3rem 0.85rem;
color: var(--color-neutral-600);
text-decoration: none;
border-left: 3px solid transparent;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 0.9rem;
line-height: 1.3;
}
.toc-container a:hover {
background: var(--color-neutral-50);
border-left-color: var(--color-navy-primary);
color: var(--color-navy-primary);
}
.toc-container a.active {
background: var(--color-neutral-50);
border-left-color: var(--color-navy-primary);
color: var(--color-navy-primary);
font-weight: 600;
}
.toc-list::-webkit-scrollbar {
width: 6px;
}
.toc-list::-webkit-scrollbar-track {
background: var(--color-neutral-50);
border-radius: 3px;
}
.toc-list::-webkit-scrollbar-thumb {
background: var(--color-neutral-600);
border-radius: 3px;
}
.toc-list::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-700);
}

66
wp-content/themes/apus-theme/assets/js/main.js
View File

@@ -265,3 +265,69 @@ document.addEventListener('DOMContentLoaded', function() {
});
console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');
// === SIDEBAR TOC - ScrollSpy ===
// Table of Contents - ScrollSpy
function updateActiveSection() {
const tocLinks = document.querySelectorAll('.toc-container a');
if (!tocLinks.length) return;
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar ? navbar.offsetHeight : 0;
const sectionIds = Array.from(tocLinks).map(link => {
const href = link.getAttribute('href');
return href ? href.substring(1) : null;
}).filter(id => id !== null);
const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
const scrollPosition = window.scrollY + navbarHeight + 100;
let activeSection = null;
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const sectionTop = section.offsetTop;
if (scrollPosition >= sectionTop) {
activeSection = section.getAttribute('id');
} else {
break;
}
}
tocLinks.forEach(link => {
link.classList.remove('active');
const href = link.getAttribute('href');
if (href === '#' + activeSection) {
link.classList.add('active');
}
});
}
// Smooth scroll for TOC links
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.toc-container a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar ? navbar.offsetHeight : 0;
const offsetTop = targetElement.offsetTop - navbarHeight - 40;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
updateActiveSection();
});
window.addEventListener('scroll', updateActiveSection);

6
wp-content/themes/apus-theme/single.php
View File

@@ -195,7 +195,11 @@ get_header();
<!-- Sidebar Column (col-lg-3) -->
<div class="col-lg-3">
<?php get_sidebar(); ?>
<div class="sidebar-sticky">
<?php get_template_part('template-parts/content', 'toc'); ?>
<!-- Aquí irá el CTA Box (componente 12) -->
</div>
</div>
</div><!-- .row -->

65
wp-content/themes/apus-theme/template-parts/content-toc.php Normal file
View File

@@ -0,0 +1,65 @@
<?php
/**
* Template Part: Table of Contents (TOC)
*
* Genera automáticamente TOC desde los H2 del post
* Usa JavaScript custom para ScrollSpy
*
* @package APUs_Theme
* @since 1.0.0
*/
// Solo mostrar TOC si estamos en single post
if (!is_single()) {
return;
}
/**
* Función: Generar TOC desde el contenido del post
*
* Busca todos los H2 que tengan ID
* Retorna HTML de la tabla de contenidos
*/
function apu_generate_toc($content) {
// Buscar todos los H2 con ID en el contenido
// Regex: <h2[^>]*id=["']([^"']*) ["'][^>]*>(.*?)</h2>
preg_match_all('/<h2[^>]*id=["\']([^"\']*)["\'][^>]*>(.*?)<\/h2>/i', $content, $matches);
// Si no hay H2 con ID, no mostrar TOC
if (empty($matches[1])) {
return '';
}
// Iniciar construcción del TOC
$toc = '<div class="toc-container">';
$toc .= '<h4 class="toc-title">Tabla de Contenido</h4>';
$toc .= '<ol class="list-unstyled toc-list">';
// Iterar sobre cada H2 encontrado
foreach ($matches[1] as $index => $id) {
// Limpiar el título (eliminar tags HTML internos)
$title = strip_tags($matches[2][$index]);
// Crear el elemento de la lista
$toc .= sprintf(
'<li><a href="#%s" class="toc-link">%s</a></li>',
esc_attr($id),
esc_html($title)
);
}
$toc .= '</ol>';
$toc .= '</div>';
return $toc;
}
// Obtener el contenido del post actual
global $post;
$post_content = $post->post_content;
// Aplicar filtros de WordPress al contenido (shortcodes, etc.)
$post_content = apply_filters('the_content', $post_content);
// Generar y mostrar el TOC
echo apu_generate_toc($post_content);