${translate('onboarding.languageSelection.title', {}, 'Welcome to LoRA Manager')}
Choose Your Language / 选择语言 / 言語を選択
${this.languages.map(lang => `
${lang.name}
`).join('')}
`;
document.body.appendChild(modal);
// Handle language selection
modal.querySelectorAll('.language-option').forEach(option => {
option.addEventListener('click', () => {
modal.querySelectorAll('.language-option').forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
this.selectedLanguage = option.dataset.language;
});
});
// Handle continue button
document.getElementById('continueLanguageBtn').addEventListener('click', async () => {
const currentLanguage = state.global.settings.language || 'en';
// Only change language if it's different from current setting
if (this.selectedLanguage !== currentLanguage) {
await this.changeLanguage(this.selectedLanguage);
} else {
document.body.removeChild(modal);
this.startTutorial();
resolve();
}
});
// Handle skip button - skip entire tutorial
document.getElementById('skipLanguageBtn').addEventListener('click', async () => {
document.body.removeChild(modal);
await this.skip(); // Skip entire tutorial instead of just language selection
resolve();
});
// Select current language by default
const currentLanguageOption = modal.querySelector(`[data-language="${this.selectedLanguage}"]`);
if (currentLanguageOption) {
currentLanguageOption.classList.add('selected');
} else {
// Fallback to English if current language not found
modal.querySelector('[data-language="en"]').classList.add('selected');
}
});
}
// Change language using existing settings manager
async changeLanguage(languageCode) {
try {
// Update state
state.global.settings.language = languageCode;
// Save to backend
const response = await fetch('/api/lm/settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
language: languageCode
})
});
if (response.ok) {
// Mark onboarding as started before reload
setStorageItem('onboarding_language_set', true);
window.location.reload();
}
} catch (error) {
console.error('Failed to change language:', error);
showToast('onboarding.languageSelection.changeFailed', { message: error.message }, 'error');
}
}
// Start the tutorial steps
async startTutorial() {
this.isActive = true;
this.currentStep = 0;
this.createOverlay();
await this.showStep(0);
}
// Create overlay elements
createOverlay() {
// Create overlay
this.overlay = document.createElement('div');
this.overlay.className = 'onboarding-overlay active';
document.body.appendChild(this.overlay);
// Create spotlight
this.spotlight = document.createElement('div');
this.spotlight.className = 'onboarding-spotlight';
document.body.appendChild(this.spotlight);
// Create popup
this.popup = document.createElement('div');
this.popup.className = 'onboarding-popup';
document.body.appendChild(this.popup);
}
// Show specific step
async showStep(stepIndex) {
if (stepIndex >= this.steps.length) {
await this.complete();
return;
}
const step = this.steps[stepIndex];
const target = document.querySelector(step.target);
if (!target && step.target !== 'body') {
// Skip this step if target not found
await this.showStep(stepIndex + 1);
return;
}
// Clear previous target highlighting
this.clearTargetHighlight();
// Position spotlight and create mask
if (target && step.target !== 'body') {
this.highlightTarget(target);
} else {
this.spotlight.style.display = 'none';
this.clearOverlayMask();
}
// Update popup content
this.popup.innerHTML = `
${stepIndex + 1} / ${this.steps.length}
${stepIndex > 0 ? `` : ''}
`;
// Position popup
this.positionPopup(step, target);
this.currentStep = stepIndex;
}
// Position popup relative to target
positionPopup(step, target) {
const popup = this.popup;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
if (step.customPosition) {
popup.style.left = step.customPosition.left;
popup.style.top = step.customPosition.top;
popup.style.transform = 'translate(-50%, 0)';
return;
}
if (!target || step.target === 'body') {
popup.style.left = '50%';
popup.style.top = '50%';
popup.style.transform = 'translate(-50%, -50%)';
return;
}
const rect = target.getBoundingClientRect();
const popupRect = popup.getBoundingClientRect();
let left, top;
switch (step.position) {
case 'bottom':
left = rect.left + (rect.width / 2) - (popupRect.width / 2);
top = rect.bottom + 20;
break;
case 'top':
left = rect.left + (rect.width / 2) - (popupRect.width / 2);
top = rect.top - popupRect.height - 20;
break;
case 'right':
left = rect.right + 20;
top = rect.top + (rect.height / 2) - (popupRect.height / 2);
break;
case 'left':
left = rect.left - popupRect.width - 20;
top = rect.top + (rect.height / 2) - (popupRect.height / 2);
break;
default:
left = rect.left + (rect.width / 2) - (popupRect.width / 2);
top = rect.bottom + 20;
}
// Ensure popup stays within viewport
left = Math.max(20, Math.min(left, windowWidth - popupRect.width - 20));
top = Math.max(20, Math.min(top, windowHeight - popupRect.height - 20));
popup.style.left = `${left}px`;
popup.style.top = `${top}px`;
popup.style.transform = 'none';
}
// Highlight target element with mask approach
highlightTarget(target) {
const rect = target.getBoundingClientRect();
const padding = 4; // Padding around the target element
const offset = 3; // Shift spotlight up and left by 3px
// Position spotlight
this.spotlight.style.left = `${rect.left - padding - offset}px`;
this.spotlight.style.top = `${rect.top - padding - offset}px`;
this.spotlight.style.width = `${rect.width + padding * 2}px`;
this.spotlight.style.height = `${rect.height + padding * 2}px`;
this.spotlight.style.display = 'block';
// Create mask for overlay to cut out the highlighted area
this.createOverlayMask(rect, padding, offset);
// Add highlight class to target and ensure it's interactive
target.classList.add('onboarding-target-highlight');
this.currentTarget = target;
// Add pulsing animation
this.spotlight.classList.add('onboarding-highlight');
}
// Create mask for overlay to cut out highlighted area
createOverlayMask(rect, padding, offset = 0) {
const x = rect.left - padding - offset;
const y = rect.top - padding - offset;
const width = rect.width + padding * 2;
const height = rect.height + padding * 2;
// Create SVG mask
const maskId = 'onboarding-mask';
let maskSvg = document.getElementById(maskId);
if (!maskSvg) {
maskSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
maskSvg.id = maskId;
maskSvg.style.position = 'absolute';
maskSvg.style.top = '0';
maskSvg.style.left = '0';
maskSvg.style.width = '100%';
maskSvg.style.height = '100%';
maskSvg.style.pointerEvents = 'none';
document.body.appendChild(maskSvg);
}
// Clear existing mask content
maskSvg.innerHTML = `