AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Lagebild: Tab-Navigation wiederhergestellt (Revert Scroll-Narrative)

Quellcode durchsuchen 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-07 16:05:00 +01:00
Ursprung 06c99fe4db
Commit 15f076b06f
3 geänderte Dateien mit 301 neuen und 164 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

139
lagebild/lagebild.js
Datei anzeigen

@@ -1,6 +1,6 @@
/**
* AegisSight Lagebild Page - Dark Theme / Scroll-Narrative
* Count-Up, Timeline, Scroll-Spy, Scroll-Reveal, Favicons
* AegisSight Lagebild Page - Dark Theme Design Refresh
* Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons
*/
/** Feste Zeitzone fuer alle Anzeigen - NIEMALS aendern. */
@@ -12,7 +12,6 @@ var Lagebild = {
currentView: null,
map: null,
timelineGroups: null,
articlesShowAll: false,
/* ===== Inline SVG Icons ===== */
icons: {
@@ -39,6 +38,7 @@ var Lagebild = {
fact_checks: this.data.fact_checks
};
this.render();
this.initTabs();
this.initLangToggle();
this.initScrollReveal();
this.initFloatingCta();
@@ -51,7 +51,7 @@ var Lagebild = {
render: function() {
this.renderHero();
this.renderTimeline();
this.renderSectionBadges();
this.renderTabBadges();
this.renderCurrentView();
},
@@ -60,7 +60,7 @@ var Lagebild = {
var d = this.data;
document.getElementById('incident-title').innerHTML =
this.esc(this.fixUmlauts(d.incident.title)) +
' <span class="hero-date-info">\u2013 Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
' <span class="hero-date-info">- Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
// Stat Cards (3: Artikel, Quellen, Faktenchecks)
var statsHtml = '';
@@ -204,7 +204,7 @@ var Lagebild = {
}
});
// Click handler for dropdown snapshot items (delegated)
// Click handler for dropdown snapshot items (delegated, set up once)
var dropdown = document.getElementById('timeline-dropdown');
dropdown.addEventListener('click', function(e) {
var item = e.target.closest('.timeline-snap-item');
@@ -249,7 +249,7 @@ var Lagebild = {
var d = new Date(dateKey + 'T12:00:00Z');
var dateLabel = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });
var h = '<div class="timeline-dropdown-header">' + dateLabel + ' \u2013 ' + snaps.length + ' Updates</div>';
var h = '<div class="timeline-dropdown-header">' + dateLabel + ' - ' + snaps.length + ' Updates</div>';
h += '<div class="timeline-snap-list">';
for (var i = 0; i < snaps.length; i++) {
var snap = snaps[i];
@@ -272,11 +272,11 @@ var Lagebild = {
return d.toLocaleDateString('en-CA', { timeZone: TIMEZONE });
},
/* ===== SECTION BADGES ===== */
renderSectionBadges: function() {
var artikelBadge = document.getElementById('badge-artikel');
var fcBadge = document.getElementById('badge-faktenchecks');
if (artikelBadge) artikelBadge.textContent = this.data.incident.article_count;
/* ===== TAB BADGES ===== */
renderTabBadges: function() {
var quellenBadge = document.getElementById('tab-badge-quellen');
var fcBadge = document.getElementById('tab-badge-faktenchecks');
if (quellenBadge) quellenBadge.textContent = this.data.incident.source_count;
if (fcBadge) fcBadge.textContent = this.data.incident.factcheck_count;
},
@@ -308,12 +308,15 @@ var Lagebild = {
renderCurrentView: function() {
this.renderSummary();
this.renderInlineSources();
this.renderArtikelSection();
this.renderSourcesTab();
this.renderArticlesTab();
this.renderFactChecksTab();
if (!this.map) this.renderMap();
if (document.getElementById('panel-karte').classList.contains('active')) {
this.renderMap();
}
},
/* ===== SECTION: LAGEBILD ===== */
/* ===== TAB: LAGEBILD ===== */
renderSummary: function() {
var v = this.currentView;
document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at);
@@ -342,18 +345,32 @@ var Lagebild = {
document.getElementById('inline-sources').innerHTML = '';
},
/* ===== SECTION: ARTIKEL ===== */
renderArtikelSection: function() {
/* ===== TAB: QUELLEN ===== */
renderSourcesTab: function() {
var sources = this.currentView.sources_json || [];
var articles = this.currentView.articles || [];
var limit = 20;
var showAll = this.articlesShowAll || articles.length <= limit;
var displayArticles = showAll ? articles : articles.slice(0, limit);
var h = '';
document.getElementById('articles-heading').textContent = 'Artikel (' + articles.length + ')';
h += '<div class="sources-section"><h3>Im Lagebild zitierte Quellen (' + sources.length + ')</h3>';
if (sources.length) {
h += '<ol class="sources-list">';
for (var i = 0; i < sources.length; i++) {
var s = sources[i];
if (s.url) {
h += '<li><a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a></li>';
} else {
h += '<li><span class="source-name">' + this.esc(s.name || '') + '</span></li>';
}
}
h += '</ol>';
}
h += '</div>';
document.getElementById('sources-cited').innerHTML = h;
document.getElementById('articles-heading').textContent = 'Alle gesammelten Artikel (' + articles.length + ')';
var ah = '';
for (var i = 0; i < displayArticles.length; i++) {
var a = displayArticles[i];
for (var i = 0; i < articles.length; i++) {
var a = articles[i];
var dt = a.published_at || a.collected_at || '';
var dObj = dt ? new Date(this.toUTC(dt)) : null;
var hl = this.fixUmlauts(a.headline_de || a.headline || '');
@@ -381,25 +398,12 @@ var Lagebild = {
if (a.source_url) ah += '<a class="article-link" href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener">Artikel lesen ' + this.icons.externalLink + '</a>';
ah += '</div></div></div>';
}
if (!showAll) {
ah += '<div class="show-all-wrapper">';
ah += '<button class="show-all-btn" id="show-all-articles">Alle ' + articles.length + ' Artikel anzeigen</button>';
ah += '</div>';
}
document.getElementById('articles-content').innerHTML = ah;
if (!showAll) {
var self = this;
document.getElementById('show-all-articles').addEventListener('click', function() {
self.articlesShowAll = true;
self.renderArtikelSection();
});
}
},
/* ===== SECTION: KARTE ===== */
renderArticlesTab: function() {},
/* ===== TAB: KARTE ===== */
renderMap: function() {
if (this.map) { this.map.remove(); this.map = null; }
this.map = L.map('map-container').setView([33.0, 48.0], 5);
@@ -428,12 +432,12 @@ var Lagebild = {
});
var locs = [
{n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschl\u00e4ge. \u00dcber 1.000 Tote nach f\u00fcnf Tagen Krieg.',ic:redIcon},
{n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschl\u00e4ge auf Beirut und Teheran [6].',ic:redIcon},
{n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis \u2013 Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon},
{n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenst\u00fctzpunkt \u2013 Ziel iranischer Gegenangriffe.',ic:orangeIcon},
{n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis f\u00fcr israelische Angriffe auf den Iran.',ic:blueIcon},
{n:'Ankara, T\u00fcrkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf T\u00fcrkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon},
{n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschläge. Über 1.000 Tote nach fünf Tagen Krieg.',ic:redIcon},
{n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschläge auf Beirut und Teheran [6].',ic:redIcon},
{n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis - Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon},
{n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt - Ziel iranischer Gegenangriffe.',ic:orangeIcon},
{n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis für israelische Angriffe auf den Iran.',ic:blueIcon},
{n:'Ankara, Türkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf Türkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon},
{n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',ic:blueIcon},
{n:'Persischer Golf',lat:27.0,lng:51.5,d:'Iran greift Energieinfrastruktur und diplomatische Einrichtungen in der Golfregion an.',ic:orangeIcon},
{n:'Dubai, VAE',lat:25.2048,lng:55.2708,d:'US-Botschaft in Dubai durch iranischen Angriff getroffen.',ic:redIcon},
@@ -471,11 +475,11 @@ var Lagebild = {
setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300);
},
/* ===== SECTION: FAKTENCHECKS ===== */
/* ===== TAB: FAKTENCHECKS ===== */
renderFactChecksTab: function() {
var checks = this.currentView.fact_checks || [];
if (!checks.length) {
document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">Keine Faktenchecks verf\u00fcgbar.</p>';
document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">Keine Faktenchecks verfügbar.</p>';
return;
}
@@ -487,7 +491,7 @@ var Lagebild = {
var h = '<div class="fc-stats">';
h += '<div class="fc-stat"><span class="fc-stat-num">' + checks.length + '</span><span class="fc-stat-label">Gesamt</span></div>';
h += '<div class="fc-stat confirmed"><span class="fc-stat-num">' + (stats.confirmed + stats.established) + '</span><span class="fc-stat-label">Best\u00e4tigt</span></div>';
h += '<div class="fc-stat confirmed"><span class="fc-stat-num">' + (stats.confirmed + stats.established) + '</span><span class="fc-stat-label">Bestätigt</span></div>';
h += '<div class="fc-stat unconfirmed"><span class="fc-stat-num">' + (stats.unconfirmed + stats.developing) + '</span><span class="fc-stat-label">Offen</span></div>';
if (stats.contradicted + stats.disputed > 0)
h += '<div class="fc-stat contradicted"><span class="fc-stat-num">' + (stats.contradicted + stats.disputed) + '</span><span class="fc-stat-label">Widerlegt</span></div>';
@@ -508,7 +512,7 @@ var Lagebild = {
h += '<div class="factcheck-card' + (hasProg ? ' highlight' : '') + '" data-status="' + status + '">';
h += '<div class="factcheck-header">';
h += '<span class="status-badge ' + status + '">' + this.stLabel(status) + '</span>';
h += '<span class="factcheck-sources">' + (fc.sources_count || 0) + ' unabh\u00e4ngige Quellen</span>';
h += '<span class="factcheck-sources">' + (fc.sources_count || 0) + ' unabhängige Quellen</span>';
h += '</div>';
h += '<p class="factcheck-claim">' + this.esc(this.fixUmlauts(fc.claim || '')) + '</p>';
@@ -536,7 +540,30 @@ var Lagebild = {
document.getElementById('factchecks-content').innerHTML = h;
},
/* ===== TABS ===== */
initTabs: function() {
var btns = document.querySelectorAll('.tab-btn');
var self = this;
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
var tab = this.getAttribute('data-tab');
for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active');
this.classList.add('active');
var panels = document.querySelectorAll('.tab-panel');
for (var j = 0; j < panels.length; j++) panels[j].classList.remove('active');
var activePanel = document.getElementById('panel-' + tab);
activePanel.classList.add('active');
// Trigger reveal for cards in newly active panel
var revealCards = activePanel.querySelectorAll('.reveal:not(.revealed)');
for (var k = 0; k < revealCards.length; k++) {
revealCards[k].classList.add('revealed');
}
if (tab === 'karte') self.renderMap();
});
}
},
initLangToggle: function() {
var btn = document.querySelector('.lang-toggle');
@@ -579,7 +606,7 @@ var Lagebild = {
/* ===== SCROLL REVEAL ===== */
initScrollReveal: function() {
var cards = document.querySelectorAll('.content-card, .section-karte');
var cards = document.querySelectorAll('.content-card, .lagebild-cta');
if (!('IntersectionObserver' in window)) {
for (var i = 0; i < cards.length; i++) cards[i].classList.add('revealed');
return;
@@ -595,7 +622,13 @@ var Lagebild = {
for (var i = 0; i < cards.length; i++) {
cards[i].classList.add('reveal');
observer.observe(cards[i]);
// Immediately reveal cards in the active (visible) tab panel
var panel = cards[i].closest('.tab-panel');
if (!panel || panel.classList.contains('active')) {
cards[i].classList.add('revealed');
} else {
observer.observe(cards[i]);
}
}
},
@@ -624,7 +657,7 @@ var Lagebild = {
},
stLabel: function(s) {
return { confirmed: 'Best\u00e4tigt', unconfirmed: 'Unbest\u00e4tigt', established: 'Gesichert',
return { confirmed: 'Bestätigt', unconfirmed: 'Unbestätigt', established: 'Gesichert',
unverified: 'Nicht verifiziert', contradicted: 'Widerlegt', disputed: 'Umstritten',
developing: 'In Entwicklung', 'false': 'Falsch' }[s] || s;
},
@@ -696,7 +729,7 @@ var Lagebild = {
showError: function() {
document.getElementById('summary-content').innerHTML =
'<div class="lagebild-error"><p>Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es sp\u00e4ter erneut.</p></div>';
'<div class="lagebild-error"><p>Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es später erneut.</p></div>';
}
};