cnt-sindikatua/views/templates/page-acerca-de-la-cnt.twig

{% extends 'layouts/base.twig' %}

{% block content %}
<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>

<div class="container mt-4">
    <div class="row">
        <!-- Columna izquierda: títulos -->
        <div class="col-md-4 border-end">
            <ul id="post-list" class="list-group">
                {% for pagina in SubpaginasAcercaCnt %}
                <li class="list-group-item {% if loop.first %}active-acerca{% endif %}" data-page-id="{{ pagina.id }}">
                    <a href="#" 
                       data-page-id="{{ pagina.id }}"
                       class="text-decoration-none d-block w-100 {% if loop.first %}text-white{% else %}text-black{% endif %}">
                        {{ pagina.title }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
       
        <!-- Columna derecha: contenido del post -->
        <div class="col-md-8">
            <div id="content-area">
                {% if SubpaginasAcercaCnt|length > 0 %}
                    {% set primera = SubpaginasAcercaCnt|first %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="card-title">{{ primera.title }}</h5>
                        </div>
                        <div class="card-body" style="padding-bottom: 60px;">
                            <div class="card-text">
                                {{ primera.content }}
                            </div>          
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
    // document.addEventListener('DOMContentLoaded', function() {
    //     const postList = document.getElementById('post-list');
    //     const contentArea = document.getElementById('content-area');
        
    //     postList.addEventListener('click', function(e) {
    //         const link = e.target.closest('a');
    //         if (!link) return;
            
    //         e.preventDefault();
            
    //         const pageId = link.getAttribute('data-page-id');
            
    //         // Remover clase active de todos
    //         postList.querySelectorAll('.list-group-item').forEach(item => {
    //             item.classList.remove('active-acerca');
    //             const a = item.querySelector('a');
    //             if (a) {
    //                 a.classList.remove('text-white');
    //                 a.classList.add('text-black');
    //             }
    //         });
            
    //         // Añadir clase active al clickeado
    //         const listItem = link.closest('.list-group-item');
    //         listItem.classList.add('active-acerca');
    //         link.classList.add('text-white');
    //         link.classList.remove('text-black');
            
    //         // Mostrar loader
    //         contentArea.innerHTML = '<div class="text-center p-5"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
            
    //         // Cargar contenido via AJAX
    //         fetch('{{ site.url }}/wp-admin/admin-ajax.php', {
    //             method: 'POST',
    //             headers: {
    //                 'Content-Type': 'application/x-www-form-urlencoded',
    //             },
    //             body: 'action=get_page_content&page_id=' + pageId
    //         })
    //         .then(response => response.json())
    //         .then(data => {
    //             if (data.success) {
    //                 contentArea.innerHTML = `
    //                     <div class="card mb-3">
    //                         <div class="card-header">
    //                             <h5 class="card-title">${data.data.title}</h5>
    //                         </div>
    //                         <div class="card-body" style="padding-bottom: 60px;">
    //                             <div class="card-text">
    //                                 ${data.data.content}
    //                             </div>          
    //                         </div>
    //                     </div>
    //                 `;

    //                 // Actualizar URL en el navegador
    //                 if (data.data.url) {
    //                     history.pushState({pageId: pageId}, data.data.title, data.data.url);
    //                     document.title = data.data.title + ' - {{ site.name }}';
    //                 }
    //             }
    //         })
    //         .catch(error => {
    //             contentArea.innerHTML = '<div class="alert alert-danger">Error al cargar el contenido</div>';
    //             console.error('Error:', error);
    //         });
    //     });
    // });

    document.addEventListener('DOMContentLoaded', function() {
        const postList = document.getElementById('post-list');
        const contentArea = document.getElementById('content-area');
        
        // Detectar si hay una subpágina en la URL
        const urlParams = new URLSearchParams(window.location.search);
        const subpageId = urlParams.get('subpage');
        
        if (subpageId) {
            // Buscar y hacer click en la subpágina correspondiente
            const link = document.querySelector(`a[data-page-id="${subpageId}"]`);
            if (link) {
                link.click();
            }
        }
        
        postList.addEventListener('click', function(e) {
            const link = e.target.closest('a');
            if (!link) return;
            
            e.preventDefault();
            
            const pageId = link.getAttribute('data-page-id');
            
            // Remover clase active de todos
            postList.querySelectorAll('.list-group-item').forEach(item => {
                item.classList.remove('active-acerca');
                const a = item.querySelector('a');
                if (a) {
                    a.classList.remove('text-white');
                    a.classList.add('text-black');
                }
            });
            
            // Añadir clase active al clickeado
            const listItem = link.closest('.list-group-item');
            listItem.classList.add('active-acerca');
            link.classList.add('text-white');
            link.classList.remove('text-black');
            
            // Mostrar loader
            contentArea.innerHTML = '<div class="text-center p-5"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
            
            // Cargar contenido via AJAX
            fetch('{{ site.url }}/wp-admin/admin-ajax.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=get_page_content&page_id=' + pageId
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    contentArea.innerHTML = `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">${data.data.title}</h5>
                            </div>
                            <div class="card-body" style="padding-bottom: 60px;">
                                <div class="card-text">
                                    ${data.data.content}
                                </div>          
                            </div>
                        </div>
                    `;
                    
                    // Actualizar URL en el navegador
                    if (data.data.url) {
                        const parentUrl = window.location.pathname;
                        const newUrl = parentUrl + '?subpage=' + pageId;
                        history.pushState({pageId: pageId}, data.data.title, newUrl);
                        document.title = data.data.title + ' - {{ site.name }}';
                    }
                }
            })
            .catch(error => {
                contentArea.innerHTML = '<div class="alert alert-danger">Error al cargar el contenido</div>';
                console.error('Error:', error);
            });
        });
    });

    // Manejar botones atrás/adelante del navegador
    window.addEventListener('popstate', function(e) {
        if (e.state && e.state.pageId) {
            // Simular click en el elemento correspondiente
            const link = document.querySelector(`a[data-page-id="${e.state.pageId}"]`);
            if (link) {
                link.click();
            }
        }
    });

</script>

{% endblock %}