Function showTutorialOverlay

tutorials.js:321–377

(tutorial, step, targetElement)

// Show tutorial overlay
function showTutorialOverlay(tutorial, step, targetElement) {
    CarrotDebug.ui(`🎓 showTutorialOverlay called`);
    // Get or create overlay
    let overlay = getTutorialOverlay();
    CarrotDebug.ui(`🎓 Overlay element:`, overlay);

    // Create tutorial popup content
    const totalSteps = tutorialSteps.length;
    const stepNumber = currentStep + 1;
    const progress = ((currentStep + 1) / totalSteps) * 100;

    const popupHTML = `
        <div class="carrot-tutorial-popup" id="carrot-tutorial-popup">
            <div class="carrot-tutorial-header">
                <h3 class="carrot-tutorial-title">${tutorial.title}</h3>
                <button class="carrot-tutorial-close" onclick="window.closeTutorial()">×</button>
            </div>
            <div class="carrot-tutorial-progress">
                <div class="carrot-tutorial-progress-bar" style="width: ${progress}%"></div>
                <span class="carrot-tutorial-progress-text">Step ${stepNumber} of ${totalSteps}</span>
            </div>
            <div class="carrot-tutorial-step-header">
                <h4>${step.title}</h4>
            </div>
            <div class="carrot-tutorial-content">
                ${step.content}
            </div>
            <div class="carrot-tutorial-navigation">
                ${currentStep > 0 ? '<button class="carrot-tutorial-btn carrot-tutorial-prev" onclick="window.previousTutorialStep()">← Previous</button>' : '<span></span>'}
                ${currentStep < totalSteps - 1
                    ? '<button class="carrot-tutorial-btn carrot-tutorial-next" onclick="window.nextTutorialStep()">Next →</button>'
                    : '<button class="carrot-tutorial-btn carrot-tutorial-finish" onclick="window.closeTutorial()">Finish</button>'}
            </div>
        </div>
    `;

    overlay.innerHTML = popupHTML;
    overlay.style.display = 'flex';
    overlay.classList.add('active'); // Make overlay visible
    CarrotDebug.ui(`🎓 Set overlay display to flex and added active class`);

    // Position popup near target
    const targetRect = targetElement.getBoundingClientRect();
    const popup = document.getElementById('carrot-tutorial-popup');
    CarrotDebug.ui(`🎓 Tutorial popup element:`, popup);
    positionTutorialPopup(popup, targetRect);

    // Add resize handler
    if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler);
    }
    resizeHandler = () => {
        const newRect = targetElement.getBoundingClientRect();
        positionTutorialPopup(popup, newRect);
    };
    window.addEventListener('resize', resizeHandler);
}