fix(tutorial): Maussimulation fuer Toggle-Schieberegler in Schritt 6+7

Cursor bewegt sich jetzt zum sichtbaren Toggle-Switch statt zum
versteckten Checkbox-Input. Klick-Animation (Scale-Pulse) zeigt
die Betaetigung visuell an.

Neue Hilfsmethoden: _clickAtCursor() und _cursorToToggle()

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-25 18:16:13 +01:00
Ursprung 77c89aa13a
Commit 0aa2cd09a1
2 geänderte Dateien mit 69 neuen und 11 gelöschten Zeilen

Datei anzeigen

@@ -1720,6 +1720,40 @@ const Tutorial = {
this._els.cursor.classList.remove('visible');
},
_clickAtCursor() {
var c = this._els.cursor;
c.classList.remove('clicking');
void c.offsetWidth;
c.classList.add('clicking');
var self = this;
return new Promise(function(resolve) {
setTimeout(function() {
c.classList.remove('clicking');
resolve();
}, 300);
});
},
_cursorToToggle(checkboxSelector, fromX, fromY) {
var cb = document.querySelector(checkboxSelector);
if (!cb) return this._cursorToElement(checkboxSelector, fromX, fromY);
var toggle = cb.parentElement ? cb.parentElement.querySelector('.toggle-switch') : null;
if (!toggle) return this._cursorToElement(checkboxSelector, fromX, fromY);
var rect = toggle.getBoundingClientRect();
if (!rect.width && !rect.height) return this._cursorToElement(checkboxSelector, fromX, fromY);
var tx = rect.left + rect.width / 2;
var ty = rect.top + rect.height / 2;
var self = this;
if (fromX !== undefined && fromY !== undefined) {
return this._animateCursor(fromX, fromY, tx, ty, 500).then(function() {
return self._wait(200).then(function() { return { x: tx, y: ty }; });
});
} else {
this._showCursor(tx, ty, 'default');
return this._wait(200).then(function() { return { x: tx, y: ty }; });
}
},
_animateCursor(fromX, fromY, toX, toY, ms) {
var self = this;
return new Promise(function(resolve) {
@@ -2094,18 +2128,31 @@ const Tutorial = {
var intlLabel = intlCheckbox ? intlCheckbox.closest('.toggle-label') : null;
if (intlLabel) {
this._highlightSub('#inc-international');
var pos = await this._cursorToElement('#inc-international');
await this._wait(1500);
var pos = await this._cursorToToggle('#inc-international');
await this._wait(600);
// Klick simulieren: International deaktivieren
await this._clickAtCursor();
intlCheckbox.checked = false;
await this._wait(1200);
// Wieder aktivieren
await this._clickAtCursor();
intlCheckbox.checked = true;
await this._wait(800);
this._clearSubHighlights();
// Telegram-Toggle
var telegramCheckbox = document.getElementById('inc-telegram');
if (telegramCheckbox) {
this._highlightSub('#inc-telegram');
pos = await this._cursorToElement('#inc-telegram', pos.x, pos.y);
// Aktivieren
pos = await this._cursorToToggle('#inc-telegram', pos.x, pos.y);
await this._wait(600);
// Klick simulieren: Telegram aktivieren
await this._clickAtCursor();
telegramCheckbox.checked = true;
await this._wait(1500);
await this._wait(1200);
this._clearSubHighlights();
}
}
@@ -2126,18 +2173,20 @@ const Tutorial = {
var checkbox = document.getElementById('inc-visibility');
if (checkbox) {
this._highlightSub('#inc-visibility');
var pos = await this._cursorToElement('#inc-visibility');
await this._wait(1000);
var pos = await this._cursorToToggle('#inc-visibility');
await this._wait(600);
// Umschalten auf Privat
// Klick simulieren: Umschalten auf Privat
await this._clickAtCursor();
checkbox.checked = false;
var textEl = document.getElementById('visibility-text');
if (textEl) textEl.textContent = 'Privat \u2014 nur f\u00fcr dich sichtbar';
if (textEl) textEl.textContent = 'Privat — nur für dich sichtbar';
await this._wait(1500);
// Zur\u00fcck auf \u00d6ffentlich
// Klick simulieren: Zurueck auf Oeffentlich
await this._clickAtCursor();
checkbox.checked = true;
if (textEl) textEl.textContent = '\u00d6ffentlich \u2014 f\u00fcr alle Nutzer sichtbar';
if (textEl) textEl.textContent = 'Öffentlich — für alle Nutzer sichtbar';
await this._wait(800);
this._clearSubHighlights();
}