d5022f0d6f
Kompletter Umbau des Tutorial-Systems: - Tutorial funktioniert jetzt ohne bestehende Lagen - Injiziert Demo-Lage (Explosion Hamburger Hafen) mit realistischen Platzhaltern in Sidebar, Lagebild, Faktencheck, Timeline, Quellen und Karte - 25 Steps statt 20: Neue Lage vs Recherche erklaert, jede Kachel detailliert - ScrollIntoView vor jedem Step (wichtig fuer Karte etc.) - Sub-Element-Highlighting: Markiert spezifische Funktionen innerhalb der Kacheln (Quellenverweise, Filter, Buttons, Kartensteuerung) - Sauberes Aufraumen: Demo-Daten werden nach Tutorial entfernt, Dashboard-Zustand wird vollstaendig wiederhergestellt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1210 Zeilen
57 KiB
JavaScript
1210 Zeilen
57 KiB
JavaScript
/**
|
|
* AegisSight Tutorial - Interaktiver Rundgang durch den Monitor.
|
|
* Erzeugt eine Demo-Lage mit Platzhalter-Inhalten, sodass der Rundgang
|
|
* auch ohne bestehende Lagen funktioniert.
|
|
*/
|
|
const Tutorial = {
|
|
_steps: [],
|
|
_currentStep: -1,
|
|
_isActive: false,
|
|
_resizeTimer: null,
|
|
_keyHandler: null,
|
|
_resizeHandler: null,
|
|
_demoRunning: false,
|
|
_savedState: null, // Dashboard-Zustand vor dem Tutorial
|
|
|
|
// DOM-Referenzen
|
|
_els: {
|
|
overlay: null,
|
|
spotlight: null,
|
|
bubble: null,
|
|
cursor: null,
|
|
},
|
|
|
|
init() {
|
|
this._defineSteps();
|
|
this._els.overlay = document.getElementById('tutorial-overlay');
|
|
this._els.spotlight = document.getElementById('tutorial-spotlight');
|
|
this._els.bubble = document.getElementById('tutorial-bubble');
|
|
this._els.cursor = document.getElementById('tutorial-cursor');
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Demo-Daten
|
|
// -----------------------------------------------------------------------
|
|
_DEMO_SIDEBAR_ITEM: '<div class="incident-item active tutorial-demo" data-id="demo">'
|
|
+ '<span class="incident-dot active" aria-hidden="true"></span>'
|
|
+ '<div style="flex:1;min-width:0;">'
|
|
+ '<div class="incident-name">Explosion in Hamburger Hafen</div>'
|
|
+ '<div class="incident-meta">14 Artikel · demo-user</div>'
|
|
+ '</div>'
|
|
+ '<span class="badge badge-auto" role="img" aria-label="Auto-Refresh aktiv">↻</span>'
|
|
+ '</div>',
|
|
|
|
_DEMO_SIDEBAR_RESEARCH: '<div class="incident-item tutorial-demo" data-id="demo-research">'
|
|
+ '<span class="incident-dot active" aria-hidden="true"></span>'
|
|
+ '<div style="flex:1;min-width:0;">'
|
|
+ '<div class="incident-name">Analyse: Cyberangriffe auf Kritische Infrastruktur 2026</div>'
|
|
+ '<div class="incident-meta">8 Artikel · demo-user</div>'
|
|
+ '</div>'
|
|
+ '</div>',
|
|
|
|
_DEMO_SUMMARY: '<p>Am Morgen des 16. März 2026 kam es im Hamburger Hafen zu einer schweren Explosion '
|
|
+ 'in einem Containerterminal am Burchardkai. Nach übereinstimmenden Berichten von '
|
|
+ '<span class="source-ref" data-index="1" title="dpa">dpa [1]</span>, '
|
|
+ '<span class="source-ref" data-index="2" title="Reuters">Reuters [2]</span> und '
|
|
+ '<span class="source-ref" data-index="3" title="NDR">NDR [3]</span> '
|
|
+ 'ereignete sich die Detonation gegen 06:45 Uhr Ortszeit in einem Lagerbereich für Gefahrgut.</p>'
|
|
+ '<p>Die Hamburger Feuerwehr ist mit einem Großaufgebot vor Ort. Laut '
|
|
+ '<span class="source-ref" data-index="4" title="Hamburger Abendblatt">Hamburger Abendblatt [4]</span> '
|
|
+ 'wurden mindestens 12 Personen verletzt, davon 3 schwer. Die Ursache der Explosion ist noch unklar. '
|
|
+ 'Die Polizei Hamburg hat den Bereich weiträumig abgesperrt.</p>'
|
|
+ '<p>Der Hamburger Hafen, Europas drittgrößter Seehafen, hat den Betrieb im betroffenen Terminal vorübergehend '
|
|
+ 'eingestellt. Auswirkungen auf den Schiffsverkehr werden derzeit geprüft '
|
|
+ '<span class="source-ref" data-index="5" title="Hamburg Port Authority">HPA [5]</span>.</p>',
|
|
|
|
_DEMO_FACTCHECKS: [
|
|
{ status: 'confirmed', icon: '✓', claim: 'Eine Explosion ereignete sich am 16.03.2026 gegen 06:45 Uhr im Hamburger Hafen.', sources: 5 },
|
|
{ status: 'confirmed', icon: '✓', claim: 'Mindestens 12 Personen wurden bei dem Vorfall verletzt.', sources: 3 },
|
|
{ status: 'established', icon: '✓', claim: 'Die Explosion fand im Bereich des Burchardkai-Terminals statt.', sources: 4 },
|
|
{ status: 'unconfirmed', icon: '?', claim: 'Es soll sich um eine Fehlfunktion in einem Gefahrgutcontainer handeln.', sources: 1 },
|
|
{ status: 'disputed', icon: '⚠', claim: 'Die Rauchwolke soll gesundheitsgefährdende Stoffe enthalten.', sources: 2 },
|
|
{ status: 'contradicted', icon: '✗', claim: 'Der gesamte Hamburger Hafen wurde geschlossen.', sources: 2 },
|
|
],
|
|
|
|
_DEMO_SOURCES_STATS: '5 Kategorien · 14 Quellen · 14 Artikel',
|
|
|
|
_DEMO_TIMELINE: [
|
|
{ time: '06:45', title: 'Explosion im Containerterminal Burchardkai', source: 'dpa', type: 'article' },
|
|
{ time: '07:02', title: 'Hamburger Feuerwehr rückt mit Großaufgebot aus', source: 'NDR', type: 'article' },
|
|
{ time: '07:15', title: 'Polizei sperrt Hafengebiet weiträumig ab', source: 'Hamburger Abendblatt', type: 'article' },
|
|
{ time: '07:30', title: 'Erste Meldungen über Verletzte', source: 'Reuters', type: 'article' },
|
|
{ time: '08:00', title: 'Hamburg Port Authority stoppt Betrieb im Terminal', source: 'HPA', type: 'article' },
|
|
{ time: '08:22', title: 'Lagebericht: Erster Überblick zum Vorfall', source: 'AegisSight', type: 'snapshot' },
|
|
{ time: '09:10', title: 'Gefahrgut-Spezialisten am Einsatzort eingetroffen', source: 'tagesschau.de', type: 'article' },
|
|
],
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Demo-View injizieren / entfernen
|
|
// -----------------------------------------------------------------------
|
|
_injectDemoView() {
|
|
// Zustand sichern
|
|
var incidentView = document.getElementById('incident-view');
|
|
var emptyState = document.getElementById('empty-state');
|
|
this._savedState = {
|
|
incidentViewDisplay: incidentView ? incidentView.style.display : 'none',
|
|
emptyStateDisplay: emptyState ? emptyState.style.display : '',
|
|
incidentTitle: document.getElementById('incident-title') ? document.getElementById('incident-title').textContent : '',
|
|
summaryText: document.getElementById('summary-text') ? document.getElementById('summary-text').innerHTML : '',
|
|
factcheckList: document.getElementById('factcheck-list') ? document.getElementById('factcheck-list').innerHTML : '',
|
|
sourceStats: document.getElementById('source-overview-header-stats') ? document.getElementById('source-overview-header-stats').innerHTML : '',
|
|
timeline: document.getElementById('timeline') ? document.getElementById('timeline').innerHTML : '',
|
|
mapEmpty: document.getElementById('map-empty') ? document.getElementById('map-empty').style.display : '',
|
|
layoutToolbar: document.getElementById('layout-toolbar') ? document.getElementById('layout-toolbar').style.display : 'none',
|
|
typeBadge: document.getElementById('incident-type-badge') ? document.getElementById('incident-type-badge').innerHTML : '',
|
|
refreshMode: document.getElementById('meta-refresh-mode') ? document.getElementById('meta-refresh-mode').innerHTML : '',
|
|
headerStrip: document.getElementById('incident-header-strip') ? document.getElementById('incident-header-strip').style.display : '',
|
|
fcFilters: document.getElementById('fc-filters') ? document.getElementById('fc-filters').innerHTML : '',
|
|
mapStats: document.getElementById('map-stats') ? document.getElementById('map-stats').innerHTML : '',
|
|
sidebarItems: null,
|
|
};
|
|
|
|
// Sidebar: Demo-Einträge hinzufügen
|
|
var activeList = document.getElementById('active-incidents');
|
|
if (activeList) {
|
|
this._savedState.sidebarItems = activeList.innerHTML;
|
|
activeList.insertAdjacentHTML('afterbegin', this._DEMO_SIDEBAR_ITEM);
|
|
}
|
|
|
|
// Empty-State verstecken, Incident-View anzeigen
|
|
if (emptyState) emptyState.style.display = 'none';
|
|
if (incidentView) incidentView.style.display = '';
|
|
|
|
// Header
|
|
var title = document.getElementById('incident-title');
|
|
if (title) title.textContent = 'Explosion in Hamburger Hafen';
|
|
var badge = document.getElementById('incident-type-badge');
|
|
if (badge) { badge.textContent = 'Live-Monitoring'; badge.className = 'incident-type-badge type-adhoc'; }
|
|
var refreshMode = document.getElementById('meta-refresh-mode');
|
|
if (refreshMode) refreshMode.innerHTML = '<span class="auto-badge">Auto-Refresh: 15 Min</span>';
|
|
var creator = document.getElementById('incident-creator');
|
|
if (creator) creator.textContent = 'demo-user';
|
|
var desc = document.getElementById('incident-description');
|
|
if (desc) desc.textContent = 'Schwere Explosion im Hamburger Hafengebiet, Burchardkai-Terminal';
|
|
|
|
// Layout-Toolbar
|
|
var toolbar = document.getElementById('layout-toolbar');
|
|
if (toolbar) toolbar.style.display = '';
|
|
|
|
// Lagebild
|
|
var summaryText = document.getElementById('summary-text');
|
|
if (summaryText) summaryText.innerHTML = this._DEMO_SUMMARY;
|
|
|
|
// Timestamp
|
|
var ts = document.getElementById('lagebild-timestamp');
|
|
if (ts) ts.textContent = '16.03.2026, 08:22';
|
|
|
|
// Faktencheck
|
|
var fcList = document.getElementById('factcheck-list');
|
|
if (fcList) {
|
|
var fcHtml = '';
|
|
this._DEMO_FACTCHECKS.forEach(function(fc) {
|
|
fcHtml += '<div class="factcheck-item" data-fc-status="' + fc.status + '">'
|
|
+ '<div class="factcheck-icon ' + fc.status + '" aria-hidden="true">' + fc.icon + '</div>'
|
|
+ '<div style="flex:1;">'
|
|
+ '<div class="factcheck-claim">' + fc.claim + '</div>'
|
|
+ '<div style="display:flex;align-items:center;gap:6px;margin-top:2px;">'
|
|
+ '<span class="factcheck-sources">' + fc.sources + ' Quelle' + (fc.sources !== 1 ? 'n' : '') + '</span>'
|
|
+ '</div></div></div>';
|
|
});
|
|
fcList.innerHTML = fcHtml;
|
|
}
|
|
|
|
// Faktencheck-Filter
|
|
var fcFilters = document.getElementById('fc-filters');
|
|
if (fcFilters) {
|
|
fcFilters.innerHTML = '<button class="fc-dropdown-toggle" style="pointer-events:none;">Filter</button>';
|
|
}
|
|
|
|
// Quellenübersicht
|
|
var sourceStats = document.getElementById('source-overview-header-stats');
|
|
if (sourceStats) sourceStats.innerHTML = this._DEMO_SOURCES_STATS;
|
|
|
|
// Timeline
|
|
var timeline = document.getElementById('timeline');
|
|
if (timeline) {
|
|
var tlHtml = '<div class="ht-timeline">';
|
|
this._DEMO_TIMELINE.forEach(function(ev) {
|
|
var cls = ev.type === 'snapshot' ? 'ht-entry ht-snapshot' : 'ht-entry';
|
|
tlHtml += '<div class="' + cls + '">'
|
|
+ '<div class="ht-time">' + ev.time + '</div>'
|
|
+ '<div class="ht-dot"></div>'
|
|
+ '<div class="ht-content">'
|
|
+ '<div class="ht-title">' + ev.title + '</div>'
|
|
+ '<div class="ht-source">' + ev.source + '</div>'
|
|
+ '</div></div>';
|
|
});
|
|
tlHtml += '</div>';
|
|
timeline.innerHTML = tlHtml;
|
|
}
|
|
|
|
// Karte: "Keine Orte" ausblenden, Platzhalter einsetzen
|
|
var mapEmpty = document.getElementById('map-empty');
|
|
if (mapEmpty) mapEmpty.style.display = 'none';
|
|
var mapContainer = document.getElementById('map-container');
|
|
if (mapContainer) {
|
|
var mapPlaceholder = document.createElement('div');
|
|
mapPlaceholder.className = 'tutorial-demo tutorial-map-placeholder';
|
|
mapPlaceholder.style.cssText = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;'
|
|
+ 'background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;';
|
|
mapPlaceholder.innerHTML = '<div style="text-align:center;">'
|
|
+ '<div style="font-size:32px;margin-bottom:8px;opacity:0.5;">🌎</div>'
|
|
+ '<div>3 Orte erkannt: Hamburg, Burchardkai, Elbe</div></div>';
|
|
mapContainer.appendChild(mapPlaceholder);
|
|
}
|
|
var mapStats = document.getElementById('map-stats');
|
|
if (mapStats) mapStats.textContent = '3 Orte';
|
|
|
|
// Meta
|
|
var metaUpdated = document.getElementById('meta-updated');
|
|
if (metaUpdated) metaUpdated.textContent = 'Aktualisiert: 16.03.2026, 09:10';
|
|
},
|
|
|
|
_removeDemoView() {
|
|
if (!this._savedState) return;
|
|
var s = this._savedState;
|
|
|
|
// Sidebar Demo-Einträge entfernen
|
|
document.querySelectorAll('.tutorial-demo').forEach(function(el) { el.remove(); });
|
|
|
|
// Sidebar wiederherstellen
|
|
var activeList = document.getElementById('active-incidents');
|
|
if (activeList && s.sidebarItems !== null) activeList.innerHTML = s.sidebarItems;
|
|
|
|
// Views wiederherstellen
|
|
var incidentView = document.getElementById('incident-view');
|
|
if (incidentView) incidentView.style.display = s.incidentViewDisplay;
|
|
var emptyState = document.getElementById('empty-state');
|
|
if (emptyState) emptyState.style.display = s.emptyStateDisplay;
|
|
|
|
// Inhalte wiederherstellen
|
|
var title = document.getElementById('incident-title');
|
|
if (title) title.textContent = s.incidentTitle;
|
|
var summaryText = document.getElementById('summary-text');
|
|
if (summaryText) summaryText.innerHTML = s.summaryText;
|
|
var fcList = document.getElementById('factcheck-list');
|
|
if (fcList) fcList.innerHTML = s.factcheckList;
|
|
var sourceStats = document.getElementById('source-overview-header-stats');
|
|
if (sourceStats) sourceStats.innerHTML = s.sourceStats;
|
|
var timeline = document.getElementById('timeline');
|
|
if (timeline) timeline.innerHTML = s.timeline;
|
|
var mapEmpty = document.getElementById('map-empty');
|
|
if (mapEmpty) mapEmpty.style.display = s.mapEmpty;
|
|
var toolbar = document.getElementById('layout-toolbar');
|
|
if (toolbar) toolbar.style.display = s.layoutToolbar;
|
|
var badge = document.getElementById('incident-type-badge');
|
|
if (badge) badge.innerHTML = s.typeBadge;
|
|
var refreshMode = document.getElementById('meta-refresh-mode');
|
|
if (refreshMode) refreshMode.innerHTML = s.refreshMode;
|
|
var fcFilters = document.getElementById('fc-filters');
|
|
if (fcFilters) fcFilters.innerHTML = s.fcFilters;
|
|
var mapStats = document.getElementById('map-stats');
|
|
if (mapStats) mapStats.innerHTML = s.mapStats;
|
|
|
|
// Map-Platzhalter entfernen
|
|
var mapPlaceholder = document.querySelector('.tutorial-map-placeholder');
|
|
if (mapPlaceholder) mapPlaceholder.remove();
|
|
|
|
// Meta
|
|
var metaUpdated = document.getElementById('meta-updated');
|
|
if (metaUpdated) metaUpdated.textContent = '';
|
|
var creator = document.getElementById('incident-creator');
|
|
if (creator) creator.textContent = '';
|
|
var desc = document.getElementById('incident-description');
|
|
if (desc) desc.textContent = '';
|
|
var ts = document.getElementById('lagebild-timestamp');
|
|
if (ts) ts.textContent = '';
|
|
|
|
this._savedState = null;
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Highlight-Helfer: Einzelnes Sub-Element innerhalb einer Kachel markieren
|
|
// -----------------------------------------------------------------------
|
|
_highlightSub(selector) {
|
|
var el = document.querySelector(selector);
|
|
if (!el) return;
|
|
el.classList.add('tutorial-sub-highlight');
|
|
this._cleanupFns.push(function() {
|
|
el.classList.remove('tutorial-sub-highlight');
|
|
});
|
|
},
|
|
|
|
_clearSubHighlights() {
|
|
document.querySelectorAll('.tutorial-sub-highlight').forEach(function(el) {
|
|
el.classList.remove('tutorial-sub-highlight');
|
|
});
|
|
},
|
|
|
|
_cleanupFns: [],
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Scroll-Helfer: Element in den sichtbaren Bereich scrollen
|
|
// -----------------------------------------------------------------------
|
|
_scrollToTarget(selector) {
|
|
return new Promise(function(resolve) {
|
|
var el = document.querySelector(selector);
|
|
if (!el) { resolve(); return; }
|
|
var rect = el.getBoundingClientRect();
|
|
var vh = window.innerHeight;
|
|
if (rect.top >= 0 && rect.bottom <= vh) {
|
|
resolve();
|
|
return;
|
|
}
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
setTimeout(resolve, 500);
|
|
});
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Step-Definitionen
|
|
// -----------------------------------------------------------------------
|
|
_defineSteps() {
|
|
this._steps = [
|
|
// 0 - Welcome
|
|
{
|
|
id: 'welcome',
|
|
target: '#main-content',
|
|
title: 'Willkommen im AegisSight Monitor',
|
|
text: 'Dieser interaktive Rundgang führt Sie durch alle Funktionen des OSINT-Monitors. '
|
|
+ 'Wir werden gemeinsam eine Demo-Lage anlegen und alle Bereiche des Dashboards erkunden.<br><br>'
|
|
+ 'Navigieren Sie mit den Pfeiltasten oder den Buttons. Mit Escape können Sie jederzeit abbrechen.',
|
|
position: 'center',
|
|
},
|
|
// 1 - Sidebar
|
|
{
|
|
id: 'sidebar',
|
|
target: '.sidebar',
|
|
title: 'Seitenleiste: Ihre Lagen',
|
|
text: 'Die Seitenleiste zeigt all Ihre Lagen in drei Bereichen:<br><br>'
|
|
+ '<strong>Live-Monitoring</strong> - Laufende Ereignisbeobachtung mit automatischer Aktualisierung<br>'
|
|
+ '<strong>Recherchen</strong> - Themenanalysen ohne Echtzeit-Updates<br>'
|
|
+ '<strong>Archiv</strong> - Abgeschlossene Lagen zur späteren Einsicht<br><br>'
|
|
+ 'Klicken Sie auf eine Lage, um sie im Hauptbereich zu öffnen.',
|
|
position: 'right',
|
|
},
|
|
// 2 - Neue Lage Button
|
|
{
|
|
id: 'new-incident-btn',
|
|
target: '#new-incident-btn',
|
|
title: 'Neue Lage anlegen',
|
|
text: 'Hier starten Sie die Erstellung einer neuen Lage. Im nächsten Schritt zeigen wir Ihnen das Formular dazu.',
|
|
position: 'right',
|
|
onEnter: function() {
|
|
setTimeout(function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay && !overlay.classList.contains('active')) {
|
|
overlay.classList.add('active');
|
|
}
|
|
}, 1500);
|
|
},
|
|
onExit: function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay) overlay.classList.remove('active');
|
|
},
|
|
},
|
|
// 3 - Neue Lage Modal: Überblick
|
|
{
|
|
id: 'new-incident-modal',
|
|
target: '#modal-new .modal',
|
|
title: 'Lage konfigurieren',
|
|
text: 'Das Formular zur Lage-Erstellung. Hier legen Sie fest:<br><br>'
|
|
+ '<strong>Titel</strong> - Kurze Bezeichnung des Vorfalls<br>'
|
|
+ '<strong>Beschreibung</strong> - Kontext und Hintergrundinformationen<br>'
|
|
+ '<strong>Art der Lage</strong> - Live-Monitoring oder Analyse/Recherche<br>'
|
|
+ '<strong>Quellen</strong> - Internationale und Telegram-Quellen ein/aus<br>'
|
|
+ '<strong>Sichtbarkeit</strong> - Öffentlich oder privat für Ihr Team<br>'
|
|
+ '<strong>Aktualisierung</strong> - Manuell oder automatisch mit Intervall',
|
|
position: 'left',
|
|
onEnter: function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay && !overlay.classList.contains('active')) {
|
|
overlay.classList.add('active');
|
|
}
|
|
if (overlay) overlay.style.zIndex = '9002';
|
|
// Demo: Titel vorausfüllen
|
|
var titleInput = document.getElementById('inc-title');
|
|
if (titleInput) titleInput.value = 'Explosion in Hamburger Hafen';
|
|
var descInput = document.getElementById('inc-description');
|
|
if (descInput) descInput.value = 'Schwere Explosion im Hamburger Hafengebiet, Burchardkai-Terminal';
|
|
},
|
|
onExit: function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay) {
|
|
overlay.classList.remove('active');
|
|
overlay.style.zIndex = '';
|
|
}
|
|
var titleInput = document.getElementById('inc-title');
|
|
if (titleInput) titleInput.value = '';
|
|
var descInput = document.getElementById('inc-description');
|
|
if (descInput) descInput.value = '';
|
|
},
|
|
},
|
|
// 4 - Lage-Typ: Live vs Recherche
|
|
{
|
|
id: 'incident-type',
|
|
target: '#modal-new .modal',
|
|
title: 'Live-Monitoring vs. Recherche',
|
|
text: '<strong>Live-Monitoring</strong> beobachtet ein Ereignis in Echtzeit. '
|
|
+ 'Hunderte Nachrichtenquellen werden automatisch durchsucht. '
|
|
+ 'Ideal für aktuelle Vorfälle, Krisen oder sich entwickelnde Lagen.<br><br>'
|
|
+ '<strong>Analyse/Recherche</strong> untersucht ein Thema tiefergehend. '
|
|
+ 'Keine automatischen Updates, stattdessen gezielte Recherche mit eigenen Suchbegriffen. '
|
|
+ 'Ideal für Hintergrundanalysen und Lageberichte.',
|
|
position: 'left',
|
|
onEnter: function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay && !overlay.classList.contains('active')) {
|
|
overlay.classList.add('active');
|
|
}
|
|
if (overlay) overlay.style.zIndex = '9002';
|
|
Tutorial._highlightSub('#inc-type');
|
|
},
|
|
onExit: function() {
|
|
var overlay = document.getElementById('modal-new');
|
|
if (overlay) {
|
|
overlay.classList.remove('active');
|
|
overlay.style.zIndex = '';
|
|
}
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 5 - Sidebar Filter
|
|
{
|
|
id: 'sidebar-filters',
|
|
target: '.sidebar-filter',
|
|
title: 'Lagen filtern',
|
|
text: 'Mit diesen Filtern steuern Sie, welche Lagen angezeigt werden:<br><br>'
|
|
+ '<strong>Alle</strong> - Zeigt sämtliche Lagen Ihrer Organisation<br>'
|
|
+ '<strong>Eigene</strong> - Nur Lagen, die Sie selbst erstellt haben<br><br>'
|
|
+ 'Bei vielen Lagen hilft dies, den Überblick zu behalten.',
|
|
position: 'right',
|
|
},
|
|
// 6 - Demo-Lage einführen
|
|
{
|
|
id: 'demo-intro',
|
|
target: '.incident-item.active.tutorial-demo',
|
|
title: 'Unsere Demo-Lage',
|
|
text: 'Für diesen Rundgang haben wir eine Demo-Lage erstellt: '
|
|
+ '"Explosion in Hamburger Hafen". Sie sehen sie hier in der Seitenleiste '
|
|
+ 'als aktive Lage mit Auto-Refresh.<br><br>'
|
|
+ 'In den folgenden Schritten erkunden wir alle Bereiche, '
|
|
+ 'die nach dem Öffnen einer Lage im Hauptbereich erscheinen.',
|
|
position: 'right',
|
|
onEnter: function() {
|
|
Tutorial._injectDemoView();
|
|
},
|
|
},
|
|
// 7 - Header-Bereich
|
|
{
|
|
id: 'incident-header',
|
|
target: '#incident-header-strip',
|
|
title: 'Lage-Kopfbereich',
|
|
text: 'Der Kopfbereich zeigt alle wichtigen Informationen auf einen Blick:<br><br>'
|
|
+ '<strong>Typ-Badge</strong> - Live-Monitoring oder Recherche<br>'
|
|
+ '<strong>Auto-Refresh</strong> - Zeigt das Aktualisierungsintervall<br>'
|
|
+ '<strong>Aktionsleiste</strong> - Aktualisieren, Bearbeiten, Exportieren, Archivieren und Löschen<br><br>'
|
|
+ 'Der Zeitstempel zeigt, wann die letzte Aktualisierung stattfand.',
|
|
position: 'bottom',
|
|
},
|
|
// 8 - Refresh-Button
|
|
{
|
|
id: 'refresh',
|
|
target: '#refresh-btn',
|
|
title: 'Manuelle Aktualisierung',
|
|
text: 'Mit diesem Button starten Sie eine sofortige Aktualisierung der Lage. '
|
|
+ 'Der Monitor durchsucht dann alle konfigurierten Quellen nach neuen Meldungen, '
|
|
+ 'erstellt ein aktualisiertes Lagebild und führt einen neuen Faktencheck durch.<br><br>'
|
|
+ 'Bei Live-Monitoring-Lagen mit Auto-Refresh geschieht dies zusätzlich automatisch im eingestellten Intervall.',
|
|
position: 'bottom',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('#refresh-btn');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 9 - Export
|
|
{
|
|
id: 'export',
|
|
target: '#export-dropdown',
|
|
title: 'Lagebericht exportieren',
|
|
text: 'Exportieren Sie Ihre Lage in verschiedenen Formaten:<br><br>'
|
|
+ '<strong>Lagebericht (Markdown/JSON)</strong> - Kompakte Zusammenfassung mit Faktencheck<br>'
|
|
+ '<strong>Vollexport</strong> - Alle Daten inklusive Artikel und Quellen<br>'
|
|
+ '<strong>Drucken / PDF</strong> - Druckoptimierte Ansicht für Berichte<br><br>'
|
|
+ 'Ideal, um Ergebnisse mit Kollegen zu teilen, die keinen Monitor-Zugang haben.',
|
|
position: 'bottom',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('#export-dropdown');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 10 - Layout Toolbar
|
|
{
|
|
id: 'layout-toolbar',
|
|
target: '#layout-toolbar',
|
|
title: 'Layout-Steuerung',
|
|
text: 'Mit der Layout-Steuerung passen Sie Ihr Dashboard individuell an:<br><br>'
|
|
+ 'Jeder Button steht für eine Kachel: <strong>Lagebild</strong>, <strong>Faktencheck</strong>, '
|
|
+ '<strong>Quellen</strong>, <strong>Timeline</strong> und <strong>Karte</strong>.<br><br>'
|
|
+ 'Klicken Sie auf einen Button, um die entsprechende Kachel ein- oder auszublenden. '
|
|
+ 'Mit "Layout zurücksetzen" stellen Sie die Standardansicht wieder her.',
|
|
position: 'bottom',
|
|
},
|
|
// 11 - Lagebild (detailliert)
|
|
{
|
|
id: 'lagebild',
|
|
target: '[gs-id="lagebild"]',
|
|
title: 'Lagebild',
|
|
text: 'Das Lagebild ist das Herzstück jeder Lage. Es wird automatisch aus allen gesammelten '
|
|
+ 'Quellen erstellt und bei jeder Aktualisierung neu generiert.<br><br>'
|
|
+ '<strong>Quellenverweise</strong> - Die nummerierten Verweise [1], [2] etc. verlinken '
|
|
+ 'direkt zu den Originalartikeln. So können Sie jede Aussage nachprüfen.<br>'
|
|
+ '<strong>Vollansicht</strong> - Klicken Sie auf "Lagebild" in der Kopfzeile für eine '
|
|
+ 'große Darstellung mit mehr Platz zum Lesen.<br>'
|
|
+ '<strong>Zeitstempel</strong> - Zeigt, wann dieses Lagebild zuletzt generiert wurde.',
|
|
position: 'right',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('[gs-id="lagebild"] .card-title');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 12 - Quellenverweise im Lagebild
|
|
{
|
|
id: 'lagebild-sources',
|
|
target: '#summary-text',
|
|
title: 'Quellenverweise im Detail',
|
|
text: 'Die farbigen Nummern im Text sind Quellenverweise. Wenn Sie mit der Maus darüberfahren, '
|
|
+ 'sehen Sie den Namen der Quelle. Ein Klick öffnet den Originalartikel.<br><br>'
|
|
+ 'So können Sie jede Behauptung im Lagebild direkt an der Originalquelle überprüfen. '
|
|
+ 'Je mehr unabhängige Quellen eine Information stützen, desto verlässlicher ist sie.',
|
|
position: 'right',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('.source-ref[data-index="1"]');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 13 - Faktencheck (detailliert)
|
|
{
|
|
id: 'faktencheck',
|
|
target: '[gs-id="faktencheck"]',
|
|
title: 'Faktencheck',
|
|
text: 'Der Faktencheck prüft automatisch die wichtigsten Behauptungen anhand aller verfügbaren Quellen. '
|
|
+ 'Jeder Eintrag erhält einen Status:<br><br>'
|
|
+ '<strong style="color:var(--success);">✓ Bestätigt/Gesichert</strong> - Durch mehrere unabhängige Quellen belegt<br>'
|
|
+ '<strong style="color:var(--warning);">? Unbestätigt</strong> - Nur aus einer Quelle bekannt<br>'
|
|
+ '<strong style="color:var(--warning);">⚠ Umstritten</strong> - Quellen widersprechen sich<br>'
|
|
+ '<strong style="color:var(--error);">✗ Widerlegt</strong> - Zuverlässige Quellen widersprechen',
|
|
position: 'left',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('#factcheck-card');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 14 - Faktencheck: Einzelner Eintrag
|
|
{
|
|
id: 'faktencheck-detail',
|
|
target: '.factcheck-item[data-fc-status="confirmed"]',
|
|
title: 'Faktencheck-Eintrag',
|
|
text: 'Jeder Faktencheck-Eintrag besteht aus:<br><br>'
|
|
+ '<strong>Status-Symbol</strong> - Farbcodiert für schnelle Einordnung (links)<br>'
|
|
+ '<strong>Behauptung</strong> - Die geprüfte Aussage<br>'
|
|
+ '<strong>Quellenanzahl</strong> - Wie viele Quellen diese Behauptung stützen<br><br>'
|
|
+ 'Die Filterfunktion oben rechts ermöglicht es, nach Status zu filtern, '
|
|
+ 'z.B. nur unbestätigte Meldungen anzeigen.',
|
|
position: 'left',
|
|
onEnter: function() {
|
|
var item = document.querySelector('.factcheck-item[data-fc-status="confirmed"]');
|
|
if (item) item.classList.add('tutorial-sub-highlight');
|
|
Tutorial._cleanupFns.push(function() {
|
|
if (item) item.classList.remove('tutorial-sub-highlight');
|
|
});
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 15 - Quellen
|
|
{
|
|
id: 'quellen',
|
|
target: '[gs-id="quellen"]',
|
|
title: 'Quellenübersicht',
|
|
text: 'Die Quellenübersicht zeigt alle für diese Lage verwendeten Quellen, gruppiert nach Kategorie:<br><br>'
|
|
+ '<strong>Nachrichtenagenturen</strong> - dpa, Reuters, AFP<br>'
|
|
+ '<strong>Öffentlich-Rechtlich</strong> - tagesschau, ZDF, NDR<br>'
|
|
+ '<strong>Qualitätszeitungen</strong> - FAZ, SZ, ZEIT<br>'
|
|
+ '<strong>Behörden</strong> - Offizielle Stellen und Pressemitteilungen<br><br>'
|
|
+ 'Klicken Sie auf die Kopfzeile, um die Gruppen aufzuklappen. '
|
|
+ 'Die "Detailansicht" zeigt alle Quellen mit einzelnen Artikeln.',
|
|
position: 'top',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('.source-overview-header-toggle');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 16 - Timeline
|
|
{
|
|
id: 'timeline',
|
|
target: '[gs-id="timeline"]',
|
|
title: 'Ereignis-Timeline',
|
|
text: 'Die Timeline zeigt den chronologischen Verlauf aller Ereignisse:<br><br>'
|
|
+ '<strong>Meldungen</strong> - Einzelne Artikel und Nachrichten aus den Quellen<br>'
|
|
+ '<strong>Lageberichte</strong> - Automatisch erstellte Zusammenfassungen (hervorgehoben)<br><br>'
|
|
+ 'Nutzen Sie die Filter oben:<br>'
|
|
+ '<strong>Alle/Meldungen/Lageberichte</strong> - Typ-Filter<br>'
|
|
+ '<strong>24h/7T/Alles</strong> - Zeitraum eingrenzen<br>'
|
|
+ '<strong>Suchfeld</strong> - Freitextsuche in allen Einträgen',
|
|
position: 'top',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('.ht-controls');
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 17 - Karte
|
|
{
|
|
id: 'karte',
|
|
target: '[gs-id="karte"]',
|
|
title: 'Geografische Verteilung',
|
|
text: 'Die Karte zeigt automatisch erkannte Orte aus den gesammelten Artikeln (Geoparsing).<br><br>'
|
|
+ '<strong>Marker</strong> - Klicken Sie auf einen Marker für Details zum Ort und verknüpfte Artikel<br>'
|
|
+ '<strong>Cluster</strong> - Bei vielen Markern werden nahe Orte gruppiert<br>'
|
|
+ '<strong>Orte einlesen</strong> - Startet das Geoparsing manuell neu<br>'
|
|
+ '<strong>Vollbild</strong> - Vergrößert die Karte auf den gesamten Bildschirm<br><br>'
|
|
+ 'Besonders bei internationalen Lagen bietet die Karte einen schnellen Überblick über die räumliche Verteilung.',
|
|
position: 'top',
|
|
onEnter: function() {
|
|
Tutorial._highlightSub('#geoparse-btn');
|
|
setTimeout(function() {
|
|
Tutorial._clearSubHighlights();
|
|
Tutorial._highlightSub('#map-expand-btn');
|
|
}, 3000);
|
|
},
|
|
onExit: function() {
|
|
Tutorial._clearSubHighlights();
|
|
},
|
|
},
|
|
// 18 - Drag Demo
|
|
{
|
|
id: 'drag-demo',
|
|
target: '[gs-id="lagebild"] .card-header',
|
|
title: 'Kacheln verschieben',
|
|
text: 'Alle Kacheln im Dashboard lassen sich frei per Drag-and-Drop verschieben. '
|
|
+ 'Greifen Sie dazu die Kopfzeile einer Kachel und ziehen Sie sie an die gewünschte Position.<br><br>'
|
|
+ 'Beobachten Sie die virtuelle Maus-Demo:',
|
|
position: 'right',
|
|
disableNav: true,
|
|
onEnter: function() {
|
|
Tutorial._simulateDrag();
|
|
},
|
|
},
|
|
// 19 - Resize Demo
|
|
{
|
|
id: 'resize-demo',
|
|
target: '[gs-id="faktencheck"]',
|
|
title: 'Kacheln in der Größe anpassen',
|
|
text: 'Ziehen Sie am rechten unteren Rand einer Kachel, um ihre Größe zu verändern. '
|
|
+ 'So können Sie wichtigen Inhalten wie dem Faktencheck mehr Platz einräumen.<br><br>'
|
|
+ 'Beobachten Sie die virtuelle Maus-Demo:',
|
|
position: 'left',
|
|
disableNav: true,
|
|
onEnter: function() {
|
|
Tutorial._simulateResize();
|
|
},
|
|
},
|
|
// 20 - Theme
|
|
{
|
|
id: 'theme',
|
|
target: '#theme-toggle',
|
|
title: 'Design umschalten',
|
|
text: 'Wechseln Sie zwischen dem dunklen und hellen Design. '
|
|
+ 'Ihre Auswahl wird automatisch gespeichert und beim nächsten Besuch beibehalten.',
|
|
position: 'bottom',
|
|
},
|
|
// 21 - Quellen verwalten
|
|
{
|
|
id: 'sources-btn',
|
|
target: '.sidebar-sources-link button:first-child',
|
|
title: 'Quellenverwaltung öffnen',
|
|
text: 'In der Seitenleiste ganz unten finden Sie den Zugang zur Quellenverwaltung. '
|
|
+ 'Hier können Sie:<br><br>'
|
|
+ '<strong>Neue Quellen hinzufügen</strong> - URL eingeben oder automatisch erkennen lassen<br>'
|
|
+ '<strong>Bestehende Quellen bearbeiten</strong> - Kategorie, Sprache, Notizen anpassen<br>'
|
|
+ '<strong>Quellen deaktivieren</strong> - Temporär oder dauerhaft ausschließen',
|
|
position: 'right',
|
|
onEnter: function() {
|
|
setTimeout(function() {
|
|
var overlay = document.getElementById('modal-sources');
|
|
if (overlay && !overlay.classList.contains('active')) {
|
|
if (typeof App !== 'undefined' && App.openSourceManagement) {
|
|
App.openSourceManagement();
|
|
}
|
|
}
|
|
}, 1500);
|
|
},
|
|
},
|
|
// 22 - Quellen Modal
|
|
{
|
|
id: 'sources-modal',
|
|
target: '#modal-sources .modal',
|
|
title: 'Quellen verwalten',
|
|
text: 'Die Quellenverwaltung zeigt alle konfigurierten Nachrichtenquellen. '
|
|
+ 'Hier sehen Sie für jede Quelle:<br><br>'
|
|
+ '<strong>Name und URL</strong> - Die Quellbezeichnung und Adresse<br>'
|
|
+ '<strong>Kategorie</strong> - Nachrichtenagentur, Qualitätszeitung, etc.<br>'
|
|
+ '<strong>Sprache</strong> - Deutsch, Englisch oder Mehrsprachig<br>'
|
|
+ '<strong>Status</strong> - Aktiv oder deaktiviert<br><br>'
|
|
+ 'Sie können Quellen auch für einzelne Lagen ausschließen, ohne sie global zu deaktivieren.',
|
|
position: 'left',
|
|
onEnter: function() {
|
|
var overlay = document.getElementById('modal-sources');
|
|
if (overlay && !overlay.classList.contains('active')) {
|
|
if (typeof App !== 'undefined' && App.openSourceManagement) {
|
|
App.openSourceManagement();
|
|
}
|
|
}
|
|
if (overlay) overlay.style.zIndex = '9002';
|
|
},
|
|
onExit: function() {
|
|
var overlay = document.getElementById('modal-sources');
|
|
if (overlay) {
|
|
overlay.classList.remove('active');
|
|
overlay.style.zIndex = '';
|
|
}
|
|
},
|
|
},
|
|
// 23 - Chat
|
|
{
|
|
id: 'chat',
|
|
target: '#chat-toggle-btn',
|
|
title: 'Chat-Assistent',
|
|
text: 'Der Chat-Assistent steht Ihnen jederzeit zur Verfügung. '
|
|
+ 'Stellen Sie Fragen zur Bedienung des Monitors und erhalten Sie sofort eine Antwort.<br><br>'
|
|
+ 'Beispiele:<br>'
|
|
+ '"Wie erstelle ich eine neue Lage?"<br>'
|
|
+ '"Was bedeuten die Faktencheck-Status?"<br>'
|
|
+ '"Wie exportiere ich einen Lagebericht?"',
|
|
position: 'left',
|
|
},
|
|
// 24 - Ende
|
|
{
|
|
id: 'end',
|
|
target: null,
|
|
title: 'Rundgang abgeschlossen',
|
|
text: 'Sie kennen jetzt alle wichtigen Funktionen des AegisSight Monitors.<br><br>'
|
|
+ 'Die Demo-Daten werden nach dem Schließen entfernt. '
|
|
+ 'Erstellen Sie Ihre erste eigene Lage über den Button "+ Neue Lage" in der Seitenleiste.<br><br>'
|
|
+ 'Bei weiteren Fragen steht Ihnen der Chat-Assistent '
|
|
+ 'oder unser Support unter support@aegis-sight.de zur Verfügung.',
|
|
position: 'center',
|
|
},
|
|
];
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Lifecycle
|
|
// -----------------------------------------------------------------------
|
|
start() {
|
|
if (this._isActive) return;
|
|
this._isActive = true;
|
|
this._currentStep = -1;
|
|
|
|
// Chat schließen falls offen
|
|
if (typeof Chat !== 'undefined' && Chat._isOpen) Chat.close();
|
|
|
|
// Overlay einblenden
|
|
this._els.overlay.classList.add('active');
|
|
|
|
// Keyboard
|
|
this._keyHandler = this._onKey.bind(this);
|
|
document.addEventListener('keydown', this._keyHandler);
|
|
|
|
// Resize
|
|
this._resizeHandler = this._onResize.bind(this);
|
|
window.addEventListener('resize', this._resizeHandler);
|
|
|
|
this.next();
|
|
},
|
|
|
|
stop() {
|
|
if (!this._isActive) return;
|
|
|
|
// Aktuellen Step aufräumen
|
|
if (this._currentStep >= 0) this._exitStep(this._currentStep);
|
|
|
|
this._isActive = false;
|
|
this._currentStep = -1;
|
|
this._demoRunning = false;
|
|
|
|
// Overlay ausblenden
|
|
this._els.overlay.classList.remove('active');
|
|
this._els.spotlight.style.opacity = '0';
|
|
this._els.bubble.classList.remove('visible');
|
|
this._hideCursor();
|
|
this._clearSubHighlights();
|
|
|
|
// Cleanup-Callbacks
|
|
this._cleanupFns.forEach(function(fn) { try { fn(); } catch(e) {} });
|
|
this._cleanupFns = [];
|
|
|
|
// Demo-View entfernen
|
|
this._removeDemoView();
|
|
|
|
// Events entfernen
|
|
if (this._keyHandler) {
|
|
document.removeEventListener('keydown', this._keyHandler);
|
|
this._keyHandler = null;
|
|
}
|
|
if (this._resizeHandler) {
|
|
window.removeEventListener('resize', this._resizeHandler);
|
|
this._resizeHandler = null;
|
|
}
|
|
|
|
this._markSeen();
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Navigation
|
|
// -----------------------------------------------------------------------
|
|
next() {
|
|
if (!this._isActive || this._demoRunning) return;
|
|
var nextIdx = this._currentStep + 1;
|
|
if (nextIdx >= this._steps.length) {
|
|
this.stop();
|
|
return;
|
|
}
|
|
this.goToStep(nextIdx);
|
|
},
|
|
|
|
prev() {
|
|
if (!this._isActive || this._demoRunning) return;
|
|
var prevIdx = this._currentStep - 1;
|
|
if (prevIdx < 0) return;
|
|
this.goToStep(prevIdx);
|
|
},
|
|
|
|
goToStep(index) {
|
|
if (index < 0 || index >= this._steps.length) return;
|
|
|
|
if (this._currentStep >= 0) this._exitStep(this._currentStep);
|
|
this._currentStep = index;
|
|
this._enterStep(index);
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Step Enter/Exit
|
|
// -----------------------------------------------------------------------
|
|
async _enterStep(i) {
|
|
var step = this._steps[i];
|
|
|
|
// Erst scrollen, dann spotlighten
|
|
if (step.target && step.position !== 'center') {
|
|
await this._scrollToTarget(step.target);
|
|
this._spotlightElement(step.target);
|
|
} else {
|
|
this._els.spotlight.style.opacity = '0';
|
|
}
|
|
|
|
// Bubble konfigurieren und anzeigen
|
|
this._showBubble(step, i);
|
|
|
|
// onEnter-Callback
|
|
if (step.onEnter) {
|
|
step.onEnter();
|
|
}
|
|
},
|
|
|
|
_exitStep(i) {
|
|
var step = this._steps[i];
|
|
if (step.onExit) {
|
|
step.onExit();
|
|
}
|
|
this._hideCursor();
|
|
this._clearSubHighlights();
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Spotlight
|
|
// -----------------------------------------------------------------------
|
|
_spotlightElement(selector) {
|
|
var el = document.querySelector(selector);
|
|
if (!el) {
|
|
this._els.spotlight.style.opacity = '0';
|
|
return;
|
|
}
|
|
|
|
var rect = el.getBoundingClientRect();
|
|
var pad = 8;
|
|
var s = this._els.spotlight.style;
|
|
|
|
s.top = (rect.top - pad) + 'px';
|
|
s.left = (rect.left - pad) + 'px';
|
|
s.width = (rect.width + pad * 2) + 'px';
|
|
s.height = (rect.height + pad * 2) + 'px';
|
|
s.borderRadius = '8px';
|
|
s.opacity = '1';
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Bubble
|
|
// -----------------------------------------------------------------------
|
|
_showBubble(step, index) {
|
|
var bubble = this._els.bubble;
|
|
var total = this._steps.length;
|
|
|
|
// Inhalt
|
|
var counterHtml = '<div class="tutorial-bubble-counter">Schritt ' + (index + 1) + ' von ' + total + '</div>';
|
|
var titleHtml = '<div class="tutorial-bubble-title">' + step.title + '</div>';
|
|
var textHtml = '<div class="tutorial-bubble-text">' + step.text + '</div>';
|
|
|
|
// Fortschrittspunkte
|
|
var dotsHtml = '<div class="tutorial-bubble-dots">';
|
|
for (var d = 0; d < total; d++) {
|
|
dotsHtml += '<span class="tutorial-dot' + (d === index ? ' active' : '') + (d < index ? ' done' : '') + '"></span>';
|
|
}
|
|
dotsHtml += '</div>';
|
|
|
|
// Navigation
|
|
var navHtml = '<div class="tutorial-bubble-nav">';
|
|
if (index > 0 && !step.disableNav) {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-back" onclick="Tutorial.prev()">Zurück</button>';
|
|
} else {
|
|
navHtml += '<span></span>';
|
|
}
|
|
if (index < total - 1 && !step.disableNav) {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.next()">Weiter</button>';
|
|
} else if (index === total - 1) {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.stop()">Fertig</button>';
|
|
} else {
|
|
navHtml += '<span></span>';
|
|
}
|
|
navHtml += '</div>';
|
|
|
|
// Close-Button
|
|
var closeHtml = '<button class="tutorial-bubble-close" onclick="Tutorial.stop()" title="Rundgang beenden">×</button>';
|
|
|
|
bubble.innerHTML = closeHtml + counterHtml + titleHtml + textHtml + dotsHtml + navHtml;
|
|
|
|
// Positionierung
|
|
this._positionBubble(step);
|
|
|
|
// Sichtbar machen
|
|
bubble.classList.add('visible');
|
|
},
|
|
|
|
_positionBubble(step) {
|
|
var bubble = this._els.bubble;
|
|
var bw = 360;
|
|
|
|
// Zentriert (Welcome / End)
|
|
if (step.position === 'center' || !step.target) {
|
|
bubble.className = 'tutorial-bubble visible tutorial-pos-center';
|
|
bubble.style.top = '50%';
|
|
bubble.style.left = '50%';
|
|
bubble.style.transform = 'translate(-50%, -50%)';
|
|
bubble.style.width = bw + 'px';
|
|
return;
|
|
}
|
|
|
|
var el = document.querySelector(step.target);
|
|
if (!el) {
|
|
bubble.className = 'tutorial-bubble visible tutorial-pos-center';
|
|
bubble.style.top = '50%';
|
|
bubble.style.left = '50%';
|
|
bubble.style.transform = 'translate(-50%, -50%)';
|
|
bubble.style.width = bw + 'px';
|
|
return;
|
|
}
|
|
|
|
var rect = el.getBoundingClientRect();
|
|
var vw = window.innerWidth;
|
|
var vh = window.innerHeight;
|
|
var gap = 16;
|
|
|
|
// Reset transform
|
|
bubble.style.transform = '';
|
|
bubble.style.width = bw + 'px';
|
|
|
|
// Automatische Positionswahl falls nicht genug Platz
|
|
var pos = step.position || 'bottom';
|
|
var bubbleHeight = 300;
|
|
|
|
if (pos === 'bottom' && (rect.bottom + gap + bubbleHeight > vh)) pos = 'top';
|
|
if (pos === 'top' && (rect.top - gap - bubbleHeight < 0)) pos = 'bottom';
|
|
if (pos === 'right' && (rect.right + gap + bw > vw)) pos = 'left';
|
|
if (pos === 'left' && (rect.left - gap - bw < 0)) pos = 'right';
|
|
|
|
bubble.className = 'tutorial-bubble visible tutorial-pos-' + pos;
|
|
|
|
switch (pos) {
|
|
case 'bottom':
|
|
bubble.style.top = (rect.bottom + gap) + 'px';
|
|
bubble.style.left = Math.max(8, Math.min(rect.left + rect.width / 2 - bw / 2, vw - bw - 8)) + 'px';
|
|
break;
|
|
case 'top':
|
|
bubble.style.top = (rect.top - gap) + 'px';
|
|
bubble.style.left = Math.max(8, Math.min(rect.left + rect.width / 2 - bw / 2, vw - bw - 8)) + 'px';
|
|
bubble.style.transform = 'translateY(-100%)';
|
|
break;
|
|
case 'right':
|
|
bubble.style.top = Math.max(8, rect.top + rect.height / 2 - bubbleHeight / 2) + 'px';
|
|
bubble.style.left = (rect.right + gap) + 'px';
|
|
break;
|
|
case 'left':
|
|
bubble.style.top = Math.max(8, rect.top + rect.height / 2 - bubbleHeight / 2) + 'px';
|
|
bubble.style.left = (rect.left - gap - bw) + 'px';
|
|
break;
|
|
}
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Cursor (virtuelle Maus)
|
|
// -----------------------------------------------------------------------
|
|
_showCursor(x, y, type) {
|
|
var c = this._els.cursor;
|
|
c.className = 'tutorial-cursor';
|
|
if (type) c.classList.add('tutorial-cursor-' + type);
|
|
c.style.left = x + 'px';
|
|
c.style.top = y + 'px';
|
|
c.classList.add('visible');
|
|
},
|
|
|
|
_hideCursor() {
|
|
this._els.cursor.classList.remove('visible');
|
|
},
|
|
|
|
_animateCursor(fromX, fromY, toX, toY, ms) {
|
|
var self = this;
|
|
return new Promise(function(resolve) {
|
|
var c = self._els.cursor;
|
|
var start = null;
|
|
|
|
function easeInOutCubic(t) {
|
|
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
}
|
|
|
|
function frame(timestamp) {
|
|
if (!self._isActive) { resolve(); return; }
|
|
if (!start) start = timestamp;
|
|
var elapsed = timestamp - start;
|
|
var progress = Math.min(elapsed / ms, 1);
|
|
var eased = easeInOutCubic(progress);
|
|
|
|
var cx = fromX + (toX - fromX) * eased;
|
|
var cy = fromY + (toY - fromY) * eased;
|
|
c.style.left = cx + 'px';
|
|
c.style.top = cy + 'px';
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(frame);
|
|
} else {
|
|
resolve();
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(frame);
|
|
});
|
|
},
|
|
|
|
_wait(ms) {
|
|
return new Promise(function(resolve) {
|
|
setTimeout(resolve, ms);
|
|
});
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Drag-Demo
|
|
// -----------------------------------------------------------------------
|
|
async _simulateDrag() {
|
|
this._demoRunning = true;
|
|
var el = document.querySelector('[gs-id="lagebild"] .card-header');
|
|
if (!el) { this._demoRunning = false; this._enableNavAfterDemo(); return; }
|
|
|
|
var rect = el.getBoundingClientRect();
|
|
var startX = rect.left + rect.width / 2;
|
|
var startY = rect.top + rect.height / 2;
|
|
var endX = startX + 200;
|
|
var endY = startY;
|
|
|
|
this._showCursor(startX, startY, 'default');
|
|
await this._wait(500);
|
|
|
|
this._els.cursor.classList.remove('tutorial-cursor-default');
|
|
this._els.cursor.classList.add('tutorial-cursor-grabbing');
|
|
await this._wait(300);
|
|
|
|
await this._animateCursor(startX, startY, endX, endY, 1500);
|
|
await this._wait(200);
|
|
|
|
this._els.cursor.classList.remove('tutorial-cursor-grabbing');
|
|
this._els.cursor.classList.add('tutorial-cursor-default');
|
|
await this._animateCursor(endX, endY, startX, startY, 800);
|
|
await this._wait(300);
|
|
|
|
this._hideCursor();
|
|
this._demoRunning = false;
|
|
this._enableNavAfterDemo();
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Resize-Demo
|
|
// -----------------------------------------------------------------------
|
|
async _simulateResize() {
|
|
this._demoRunning = true;
|
|
var el = document.querySelector('[gs-id="faktencheck"]');
|
|
if (!el) { this._demoRunning = false; this._enableNavAfterDemo(); return; }
|
|
|
|
var rect = el.getBoundingClientRect();
|
|
var startX = rect.right - 4;
|
|
var startY = rect.bottom - 4;
|
|
var endX = startX + 100;
|
|
var endY = startY + 60;
|
|
|
|
this._showCursor(startX, startY, 'resize');
|
|
await this._wait(500);
|
|
|
|
await this._animateCursor(startX, startY, endX, endY, 1200);
|
|
await this._wait(200);
|
|
|
|
await this._animateCursor(endX, endY, startX, startY, 800);
|
|
await this._wait(300);
|
|
|
|
this._hideCursor();
|
|
this._demoRunning = false;
|
|
this._enableNavAfterDemo();
|
|
},
|
|
|
|
_enableNavAfterDemo() {
|
|
var bubble = this._els.bubble;
|
|
var nav = bubble.querySelector('.tutorial-bubble-nav');
|
|
if (!nav) return;
|
|
var index = this._currentStep;
|
|
var total = this._steps.length;
|
|
|
|
var navHtml = '';
|
|
if (index > 0) {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-back" onclick="Tutorial.prev()">Zurück</button>';
|
|
} else {
|
|
navHtml += '<span></span>';
|
|
}
|
|
if (index < total - 1) {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.next()">Weiter</button>';
|
|
} else {
|
|
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.stop()">Fertig</button>';
|
|
}
|
|
nav.innerHTML = navHtml;
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Keyboard
|
|
// -----------------------------------------------------------------------
|
|
_onKey(e) {
|
|
if (!this._isActive) return;
|
|
switch (e.key) {
|
|
case 'Escape':
|
|
e.preventDefault();
|
|
this.stop();
|
|
break;
|
|
case 'ArrowRight':
|
|
case 'Enter':
|
|
e.preventDefault();
|
|
this.next();
|
|
break;
|
|
case 'ArrowLeft':
|
|
e.preventDefault();
|
|
this.prev();
|
|
break;
|
|
}
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Resize
|
|
// -----------------------------------------------------------------------
|
|
_onResize() {
|
|
if (!this._isActive) return;
|
|
clearTimeout(this._resizeTimer);
|
|
var self = this;
|
|
this._resizeTimer = setTimeout(function() {
|
|
if (!self._isActive || self._currentStep < 0) return;
|
|
var step = self._steps[self._currentStep];
|
|
if (step.target && step.position !== 'center') {
|
|
self._spotlightElement(step.target);
|
|
}
|
|
self._positionBubble(step);
|
|
}, 150);
|
|
},
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Persistenz
|
|
// -----------------------------------------------------------------------
|
|
_markSeen() {
|
|
try { localStorage.setItem('osint_tutorial_seen', '1'); } catch(e) {}
|
|
},
|
|
|
|
_hasSeen() {
|
|
try { return localStorage.getItem('osint_tutorial_seen') === '1'; } catch(e) { return false; }
|
|
},
|
|
};
|