213 lines
8.8 KiB
HTML
213 lines
8.8 KiB
HTML
<ul class="noticias-list">
|
||
{% for n in noticias %}
|
||
{% if n.traduccion_id %}
|
||
{% set detalle_url = url_for('noticia', tr_id=n.traduccion_id) %}
|
||
{% else %}
|
||
{% set detalle_url = url_for('noticia', id=n.id) %}
|
||
{% endif %}
|
||
<li class="noticia-item" data-item>
|
||
{% if n.imagen_url %}
|
||
<div class="noticia-imagen">
|
||
<a href="{{ detalle_url }}">
|
||
<img
|
||
src="{{ n.imagen_url }}"
|
||
alt="Imagen para {{ n.titulo }}"
|
||
loading="lazy"
|
||
onerror="this.closest('.noticia-imagen').style.display='none';"
|
||
>
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="noticia-texto">
|
||
<div class="tabs">
|
||
<div class="tabs-header" role="tablist">
|
||
<button class="tab-btn {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-tab="trad" {% if not n.tiene_traduccion %}disabled{% endif %}>
|
||
Traducido
|
||
</button>
|
||
<button class="tab-btn {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-tab="orig">
|
||
Original
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tabs-body">
|
||
<div class="tab-panel {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-panel="trad">
|
||
<h3 class="m0">
|
||
<a href="{{ detalle_url }}">
|
||
{{ n.titulo_traducido or n.titulo }}
|
||
</a>
|
||
{% if n.tiene_traduccion %}
|
||
<span class="badge" title="Mostrando traducción">{{ (lang or 'es')|upper }}</span>
|
||
{% if n.traduccion_id %}
|
||
<a class="mini-link" href="{{ detalle_url }}">ver detalle</a>
|
||
{% endif %}
|
||
{% endif %}
|
||
</h3>
|
||
|
||
<div class="noticia-meta">
|
||
<span><i class="far fa-calendar-alt"></i>
|
||
{% if n.fecha %}
|
||
{% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
|
||
{% else %}N/D{% endif %}
|
||
</span>
|
||
{% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
|
||
{% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
|
||
{% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
|
||
</div>
|
||
|
||
<div class="resumen-container">
|
||
{% set resumen_txt = (n.resumen_traducido or n.resumen) | safe_html %}
|
||
<div class="resumen-corto">{{ resumen_txt | truncate(280, True) }}</div>
|
||
<div class="resumen-completo" style="display:none;">{{ resumen_txt }}</div>
|
||
{% if (n.resumen_traducido or n.resumen) and (n.resumen_traducido or n.resumen)|length > 280 %}
|
||
<button class="ver-mas-btn" type="button">Ver más</button>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% set chips = (tags_por_tr.get(n.traduccion_id) if (n.traduccion_id and tags_por_tr) else None) %}
|
||
{% if chips %}
|
||
<div class="noticia-tags" style="margin-top:8px;" aria-label="Etiquetas">
|
||
{% for valor, tipo in chips %}
|
||
<span class="badge" title="{{ (tipo or '')|capitalize }}">{{ valor }}</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if n.url %}
|
||
<div style="margin-top:8px;">
|
||
<a href="{{ n.url }}" class="mini-link" target="_blank" rel="noopener noreferrer">
|
||
Ver fuente original
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="tab-panel {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-panel="orig">
|
||
<h3 class="m0">
|
||
<a href="{{ detalle_url }}">
|
||
{{ n.titulo_original or n.titulo }}
|
||
</a>
|
||
<span class="badge badge-secondary">ORIG</span>
|
||
</h3>
|
||
|
||
<div class="noticia-meta">
|
||
<span><i class="far fa-calendar-alt"></i>
|
||
{% if n.fecha %}
|
||
{% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
|
||
{% else %}N/D{% endif %}
|
||
</span>
|
||
{% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
|
||
{% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
|
||
{% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
|
||
</div>
|
||
|
||
<div class="resumen-container">
|
||
{% set resumen_orig = (n.resumen_original or n.resumen) | safe_html %}
|
||
<div class="resumen-corto">{{ resumen_orig | truncate(280, True) }}</div>
|
||
<div class="resumen-completo" style="display:none;">{{ resumen_orig }}</div>
|
||
{% if (n.resumen_original or n.resumen) and (n.resumen_original or n.resumen)|length > 280 %}
|
||
<button class="ver-mas-btn" type="button">Ver más</button>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if n.url %}
|
||
<div style="margin-top:8px;">
|
||
<a href="{{ n.url }}" class="mini-link" target="_blank" rel="noopener noreferrer">
|
||
Ver fuente original
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
{% else %}
|
||
<li class="text-center p-4">
|
||
<i class="fas fa-info-circle"></i> No hay noticias que mostrar con los filtros seleccionados.
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
{% if total_results and total_results > 0 %}
|
||
<div style="text-align:center; margin-top:10px; color: var(--text-color-light);">
|
||
{% set start_i = (page - 1) * per_page + 1 %}
|
||
{% set end_i = (page - 1) * per_page + (noticias|length) %}
|
||
Mostrando {{ start_i }}–{{ end_i }} de {{ total_results }}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if total_pages and total_pages > 1 %}
|
||
<nav class="pagination" aria-label="Paginación de noticias" style="margin-top:15px;">
|
||
{% set current = page %}
|
||
{% if current > 1 %}<a href="#" class="page-link" data-page="{{ current - 1 }}">« Anterior</a>{% endif %}
|
||
{% set start = 1 if current - 2 < 1 else current - 2 %}
|
||
{% set end = total_pages if current + 2 > total_pages else current + 2 %}
|
||
{% if start > 1 %}
|
||
<a href="#" class="page-link" data-page="1">1</a>
|
||
{% if start > 2 %}<span class="page-link">…</span>{% endif %}
|
||
{% endif %}
|
||
{% for p in range(start, end + 1) %}
|
||
{% if p == current %}<span class="page-link active">{{ p }}</span>
|
||
{% else %}<a href="#" class="page-link" data-page="{{ p }}">{{ p }}</a>{% endif %}
|
||
{% endfor %}
|
||
{% if end < total_pages %}
|
||
{% if end < total_pages - 1 %}<span class="page-link">…</span>{% endif %}
|
||
<a href="#" class="page-link" data-page="{{ total_pages }}">{{ total_pages }}</a>
|
||
{% endif %}
|
||
{% if current < total_pages %}<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente »</a>{% endif %}
|
||
</nav>
|
||
{% endif %}
|
||
|
||
<script>
|
||
(function () {
|
||
if (window.__noticiasHandlersBound) return;
|
||
window.__noticiasHandlersBound = true;
|
||
|
||
const root = document.getElementById('noticias-container') || document;
|
||
|
||
root.addEventListener('click', function(e){
|
||
const t = e.target;
|
||
|
||
const verMasBtn = t.closest('.ver-mas-btn');
|
||
if (verMasBtn) {
|
||
const wrap = verMasBtn.closest('.resumen-container');
|
||
if (!wrap) return;
|
||
const corto = wrap.querySelector('.resumen-corto');
|
||
const completo = wrap.querySelector('.resumen-completo');
|
||
const expanded = completo.style.display === 'block';
|
||
completo.style.display = expanded ? 'none' : 'block';
|
||
corto.style.display = expanded ? 'block' : 'none';
|
||
verMasBtn.textContent = expanded ? 'Ver más' : 'Ver menos';
|
||
return;
|
||
}
|
||
|
||
const tabBtn = t.closest('.tab-btn');
|
||
if (tabBtn && !tabBtn.disabled) {
|
||
const li = tabBtn.closest('[data-item]');
|
||
const header = tabBtn.parentElement;
|
||
header.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
tabBtn.classList.add('active');
|
||
|
||
const wanted = tabBtn.getAttribute('data-tab');
|
||
li.querySelectorAll('.tab-panel').forEach(p => {
|
||
p.classList.toggle('active', p.getAttribute('data-panel') === wanted);
|
||
});
|
||
}
|
||
|
||
const pageLink = t.closest('.page-link[data-page]');
|
||
if (pageLink) {
|
||
e.preventDefault();
|
||
const url = new URL(window.location.href);
|
||
url.searchParams.set('page', pageLink.dataset.page);
|
||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
|
||
.then(r => r.text())
|
||
.then(html => {
|
||
(document.getElementById('noticias-container') || document).innerHTML = html;
|
||
})
|
||
.catch(console.error);
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
|