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

Tutorial: Quellenverwaltung in zwei Steps aufteilen mit manuellem Weiterklick

Quellcode durchsuchen 
Step 28 (Quellendetails): Cursor faehrt zum Info-Icon, Tooltip wird
angezeigt und bleibt stehen bis der Nutzer manuell auf Weiter klickt.
So hat der Nutzer Zeit, den Tooltip in Ruhe zu lesen.

Step 29 (Quellen verwalten): Cursor zeigt + Quelle Button und
Ausschliessen Button nacheinander, mit Erklaerungen in der Bubble.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 16:24:05 +01:00
Ursprung 6c72190f86
Commit 4aaf0c1d5e
2 geänderte Dateien mit 61 neuen und 32 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

91
src/static/js/tutorial.js
Datei anzeigen

@@ -964,17 +964,14 @@ const Tutorial = {
}
},
},
// 22 - Quellen Modal (mit Cursor-Demo)
// 22 - Quellen Modal: Info-Icon + Tooltip
{
id: 'sources-modal',
target: '#modal-sources .modal',
title: 'Quellen verwalten',
text: 'Die Quellenverwaltung zeigt alle konfigurierten Nachrichtenquellen.<br><br>'
+ '<strong>Info-Symbol (i)</strong> - Zeigt Typ, Sprache und Ausrichtung der Quelle<br>'
+ '<strong>Kategorie-Badge</strong> - Farbige Kennzeichnung der Quellkategorie<br>'
+ '<strong>Ausschlie\u00dfen</strong> - Quelle f\u00fcr einzelne Lagen sperren<br>'
+ '<strong>+ Quelle</strong> - Neue Quellen per URL hinzuf\u00fcgen<br><br>'
+ 'Beobachten Sie, wie die Quellendetails angezeigt werden:',
title: 'Quellendetails anzeigen',
text: 'Jede Quelle hat ein <strong>Info-Symbol (i)</strong>, das Details wie Typ, Sprache und '
+ 'Ausrichtung anzeigt. Beobachten Sie den Tooltip:<br><br>'
+ 'Klicken Sie auf <strong>Weiter</strong>, wenn Sie den Tooltip gelesen haben.',
position: 'left',
disableNav: true,
onEnter: function() {
@@ -985,21 +982,48 @@ const Tutorial = {
}
}
if (overlay) overlay.style.zIndex = '9002';
// Warten bis Quellen geladen, dann Demo starten
Tutorial._stepTimeout(function() {
Tutorial._simulateSourcesDemo();
Tutorial._simulateSourcesInfoIcon();
}, 1500);
},
onExit: function() {
var tip = document.getElementById('tutorial-tooltip');
if (tip) tip.remove();
Tutorial._clearSubHighlights();
Tutorial._hideCursor();
},
},
// 23 - Quellen Modal: Aktionen
{
id: 'sources-modal-actions',
target: '#modal-sources .modal',
title: 'Quellen verwalten',
text: '<strong>+ Quelle</strong> - Neue Quellen per URL oder Domain hinzuf\u00fcgen. '
+ 'Der Monitor erkennt RSS-Feeds automatisch.<br><br>'
+ '<strong>Ausschlie\u00dfen</strong> - Sperrt eine Quelle f\u00fcr einzelne Lagen, '
+ 'ohne sie global zu deaktivieren.<br><br>'
+ '<strong>Kategorie-Badge</strong> - Farbige Kennzeichnung der Quellkategorie '
+ '(Nachrichtenagentur, \u00d6ffentlich-Rechtlich, etc.)',
position: 'left',
disableNav: true,
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';
Tutorial._simulateSourcesActions();
},
onExit: function() {
var overlay = document.getElementById('modal-sources');
if (overlay) {
overlay.classList.remove('active');
overlay.style.zIndex = '';
}
// Tooltip entfernen falls manuell erzeugt
var tip = document.getElementById('tutorial-tooltip');
if (tip) tip.remove();
Tutorial._clearSubHighlights();
Tutorial._hideCursor();
},
},
// 23 - Chat
@@ -1951,7 +1975,8 @@ const Tutorial = {
// -----------------------------------------------------------------------
// Quellenverwaltung-Demo: Info-Icon hover + Tooltip zeigen
// -----------------------------------------------------------------------
async _simulateSourcesDemo() {
// Quellen-Demo Teil 1: Info-Icon + Tooltip, dann Weiter-Button
async _simulateSourcesInfoIcon() {
this._demoRunning = true;
// Warten bis Quellen geladen sind
@@ -1970,7 +1995,7 @@ const Tutorial = {
return;
}
// 1. Cursor zum ersten Info-Icon
// Cursor zum Info-Icon
var rect = infoIcon.getBoundingClientRect();
var targetX = rect.left + rect.width / 2;
var targetY = rect.top + rect.height / 2;
@@ -1980,10 +2005,10 @@ const Tutorial = {
await this._animateCursor(targetX - 80, targetY - 60, targetX, targetY, 600);
await this._wait(200);
// 2. Info-Icon highlighten
// Info-Icon highlighten
this._highlightSub('#sources-list .info-icon');
// 3. Tooltip manuell anzeigen (da pointer-events blockiert sind)
// Tooltip manuell anzeigen
var tooltipText = infoIcon.getAttribute('data-tooltip') || '';
if (tooltipText) {
var tooltip = document.createElement('div');
@@ -1994,38 +2019,42 @@ const Tutorial = {
+ 'pointer-events:none;';
tooltip.textContent = tooltipText;
document.body.appendChild(tooltip);
// Tooltip unter dem Icon positionieren
tooltip.style.left = Math.max(8, rect.left - 20) + 'px';
tooltip.style.top = (rect.bottom + 8) + 'px';
}
await this._wait(3000);
// Demo fertig - Weiter-Button einblenden, Tooltip bleibt stehen
this._demoRunning = false;
this._enableNavAfterDemo();
},
// 4. Tooltip entfernen
var tip = document.getElementById('tutorial-tooltip');
if (tip) tip.remove();
this._clearSubHighlights();
// Quellen-Demo Teil 2: + Quelle und Ausschlie\u00dfen Buttons
async _simulateSourcesActions() {
this._demoRunning = true;
// 5. Zum "+ Quelle" Button
// Zum "+ Quelle" Button
var addBtn = document.querySelector('.sources-toolbar-actions .btn-primary');
if (addBtn) {
var addRect = addBtn.getBoundingClientRect();
await this._animateCursor(targetX, targetY, addRect.left + addRect.width / 2, addRect.top + addRect.height / 2, 500);
this._showCursor(addRect.left - 40, addRect.top - 30, 'default');
await this._wait(300);
await this._animateCursor(addRect.left - 40, addRect.top - 30,
addRect.left + addRect.width / 2, addRect.top + addRect.height / 2, 500);
this._highlightSub('.sources-toolbar-actions .btn-primary');
await this._wait(2000);
await this._wait(2500);
this._clearSubHighlights();
}
// 6. Zum "Ausschlie\u00dfen" Button der ersten Quelle
// Zum "Ausschlie\u00dfen" Button der ersten Quelle
var excludeBtn = document.querySelector('#sources-list .source-group-actions .btn-secondary');
if (excludeBtn) {
var exRect = excludeBtn.getBoundingClientRect();
var prevRect = addBtn ? addBtn.getBoundingClientRect() : rect;
await this._animateCursor(prevRect.left + prevRect.width / 2, prevRect.top + prevRect.height / 2,
var prevX = addBtn ? addBtn.getBoundingClientRect().left + addBtn.getBoundingClientRect().width / 2 : exRect.left;
var prevY = addBtn ? addBtn.getBoundingClientRect().top + addBtn.getBoundingClientRect().height / 2 : exRect.top;
await this._animateCursor(prevX, prevY,
exRect.left + exRect.width / 2, exRect.top + exRect.height / 2, 500);
this._highlightSub('#sources-list .source-group-actions .btn-secondary');
await this._wait(2000);
await this._wait(2500);
this._clearSubHighlights();
}