Tutorial: Highlight-Leak bei Step-Wechsel verhindern
Problem: Wenn der Nutzer waehrend einer laufenden Demo auf Weiter klickt, lief die async Demo im Hintergrund weiter und setzte Highlights auf Elemente des alten Steps (z.B. Beschreibungsfeld blieb umrahmt). Fix: - _exitStep setzt _demoRunning = false (bricht laufende Demo ab) - _highlightSub prueft _isActive bevor es Highlights setzt - _highlightSub schreibt nicht mehr in _cleanupFns (vereinfacht) - _clearSubHighlights entfernt zuverlaessig alle Highlights per querySelectorAll Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -764,7 +764,7 @@
|
|||||||
<script src="/static/js/api_network.js?v=20260316a"></script>
|
<script src="/static/js/api_network.js?v=20260316a"></script>
|
||||||
<script src="/static/js/network-graph.js?v=20260316a"></script>
|
<script src="/static/js/network-graph.js?v=20260316a"></script>
|
||||||
<script src="/static/js/app_network.js?v=20260316a"></script>
|
<script src="/static/js/app_network.js?v=20260316a"></script>
|
||||||
<script src="/static/js/tutorial.js?v=20260316u"></script>
|
<script src="/static/js/tutorial.js?v=20260316v"></script>
|
||||||
<script src="/static/js/chat.js?v=20260316f"></script>
|
<script src="/static/js/chat.js?v=20260316f"></script>
|
||||||
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
|
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ const Tutorial = {
|
|||||||
_keyHandler: null,
|
_keyHandler: null,
|
||||||
_resizeHandler: null,
|
_resizeHandler: null,
|
||||||
_demoRunning: false,
|
_demoRunning: false,
|
||||||
|
_lastExitedStep: -1,
|
||||||
_stepTimers: [], // setTimeout-IDs fuer den aktuellen Step
|
_stepTimers: [], // setTimeout-IDs fuer den aktuellen Step
|
||||||
_savedState: null, // Dashboard-Zustand vor dem Tutorial
|
_savedState: null, // Dashboard-Zustand vor dem Tutorial
|
||||||
|
|
||||||
@@ -465,12 +466,11 @@ const Tutorial = {
|
|||||||
// Highlight-Helfer: Einzelnes Sub-Element innerhalb einer Kachel markieren
|
// Highlight-Helfer: Einzelnes Sub-Element innerhalb einer Kachel markieren
|
||||||
// -----------------------------------------------------------------------
|
// -----------------------------------------------------------------------
|
||||||
_highlightSub(selector) {
|
_highlightSub(selector) {
|
||||||
|
// Ignorieren wenn der Step bereits verlassen wurde
|
||||||
|
if (!this._isActive) return;
|
||||||
var el = document.querySelector(selector);
|
var el = document.querySelector(selector);
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
el.classList.add('tutorial-sub-highlight');
|
el.classList.add('tutorial-sub-highlight');
|
||||||
this._cleanupFns.push(function() {
|
|
||||||
el.classList.remove('tutorial-sub-highlight');
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_clearSubHighlights() {
|
_clearSubHighlights() {
|
||||||
@@ -1291,6 +1291,10 @@ const Tutorial = {
|
|||||||
_exitStep(i) {
|
_exitStep(i) {
|
||||||
var step = this._steps[i];
|
var step = this._steps[i];
|
||||||
this._clearStepTimers();
|
this._clearStepTimers();
|
||||||
|
// Laufende Demo abbrechen
|
||||||
|
this._demoRunning = false;
|
||||||
|
// Step-Index merken um verspaetete Highlight-Aufrufe zu ignorieren
|
||||||
|
this._lastExitedStep = i;
|
||||||
if (step.onExit) {
|
if (step.onExit) {
|
||||||
step.onExit();
|
step.onExit();
|
||||||
}
|
}
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren