mcp-quiz-server/public/dist/components/SettingsMenu.js

🧠 AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.

import { SettingsService } from '../services/SettingsService';
import { Component } from './Component';
export class SettingsMenu extends Component {
    constructor() {
        super('#settings-dropdown');
        this.unsubscribe = null;
        this.settingsService = SettingsService.getInstance();
        this.menuButton = document.querySelector('#settings-menu-btn');
        this.dropdown = document.querySelector('#settings-dropdown');
        this.closeButton = document.querySelector('#close-settings-menu');
    }
    onMount() {
        this.unsubscribe = this.settingsService.subscribe(settings => this.onSettingsChange(settings));
        this.updateUI();
    }
    onUnmount() {
        this.unsubscribe?.();
    }
    bindEvents() {
        this.menuButton?.addEventListener('click', this.toggleMenu.bind(this));
        this.closeButton?.addEventListener('click', this.closeMenu.bind(this));
        document.addEventListener('keydown', e => {
            if (e.key === 'Escape' && !this.dropdown.classList.contains('hidden')) {
                this.closeMenu();
            }
        });
        document.addEventListener('click', e => {
            if (!this.element.contains(e.target) && !this.menuButton.contains(e.target)) {
                this.closeMenu();
            }
        });
        this.bindSettingsControls();
    }
    bindSettingsControls() {
        const hideNavButtons = document.querySelector('#hide-nav-buttons');
        hideNavButtons?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ hideDisabledNavButtons: target.checked });
        });
        const hideAllNavButtons = document.querySelector('#hide-all-nav-buttons');
        hideAllNavButtons?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ hideAllNavButtons: target.checked });
        });
        const clickToAdvance = document.querySelector('#click-to-advance');
        clickToAdvance?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ clickToAdvance: target.checked });
        });
        const autoAdvance = document.querySelector('#auto-advance');
        autoAdvance?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ autoAdvanceQuestions: target.checked });
        });
        const autoAdvanceEnabled = document.querySelector('#auto-advance-enabled');
        autoAdvanceEnabled?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateQuizSettings({ autoAdvanceEnabled: target.checked });
        });
        const autoAdvanceDelay = document.querySelector('#auto-advance-delay');
        autoAdvanceDelay?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateQuizSettings({ autoAdvanceDelay: parseInt(target.value) });
        });
        const smartSubmitLogic = document.querySelector('#smart-submit-logic');
        smartSubmitLogic?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateQuizSettings({ smartSubmitLogic: target.checked });
        });
        const showQuestionNumbers = document.querySelector('#show-question-numbers');
        showQuestionNumbers?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ showQuestionNumbers: target.checked });
        });
        const defaultViewMode = document.querySelector('#default-view-mode');
        defaultViewMode?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({
                defaultViewMode: target.value,
            });
        });
        const enableAnimations = document.querySelector('#enable-animations');
        enableAnimations?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ enableAnimations: target.checked });
        });
        const clickToSelectCards = document.querySelector('#click-to-select-cards');
        clickToSelectCards?.addEventListener('change', e => {
            const target = e.target;
            this.settingsService.updateUISettings({ clickToSelectCards: target.checked });
            console.log('🎯 Click-to-select cards setting updated:', target.checked);
        });
        const quizMode = document.querySelector('#quiz-mode');
        quizMode?.addEventListener('change', e => {
            const target = e.target;
            const mode = target.value;
            this.settingsService.updateUISettings({ quizMode: mode });
            this.settingsService.updateUISettings({
                clickToSelectCards: mode === 'cards',
            });
            this.settingsService.updateQuizSettings({
                instantSubmission: mode === 'instant',
            });
            console.log('🎮 Quiz mode updated:', mode);
        });
        const autoAdvanceMode = document.querySelector('#auto-advance-mode');
        autoAdvanceMode?.addEventListener('change', e => {
            const target = e.target;
            const mode = target.value;
            this.settingsService.updateQuizSettings({ autoAdvanceMode: mode });
            const customDelayRow = document.querySelector('#custom-delay-row');
            if (customDelayRow) {
                customDelayRow.style.display = mode === 'custom' ? 'flex' : 'none';
            }
            const autoAdvanceEnabled = mode !== 'off';
            this.settingsService.updateQuizSettings({ autoAdvanceEnabled });
            this.settingsService.updateUISettings({ autoAdvanceQuestions: autoAdvanceEnabled });
            let delay = 3000;
            if (mode === 'basic')
                delay = 2000;
            else if (mode === 'enhanced')
                delay = 3000;
            this.settingsService.updateQuizSettings({ autoAdvanceDelay: delay });
            console.log('⚡ Auto-advance mode updated:', mode, 'delay:', delay);
        });
        const autoAdvanceDelaySlider = document.querySelector('#auto-advance-delay-slider');
        const delayValue = document.querySelector('#delay-value');
        autoAdvanceDelaySlider?.addEventListener('input', e => {
            const target = e.target;
            const seconds = parseInt(target.value);
            const delay = seconds * 1000;
            if (delayValue) {
                delayValue.textContent = `${seconds} second${seconds !== 1 ? 's' : ''}`;
            }
            this.settingsService.updateQuizSettings({ autoAdvanceDelay: delay });
            console.log('⏱️ Custom auto-advance delay updated:', delay);
        });
        const resetSettings = document.querySelector('#reset-settings');
        resetSettings?.addEventListener('click', () => {
            if (confirm('Reset all settings to defaults?')) {
                this.settingsService.resetToDefaults();
            }
        });
    }
    toggleMenu() {
        if (this.dropdown.classList.contains('hidden')) {
            this.openMenu();
        }
        else {
            this.closeMenu();
        }
    }
    openMenu() {
        this.dropdown.classList.remove('hidden');
        const navigationContainer = document
            .querySelector('#prev-btn')
            ?.closest('div.bg-white.border-t');
        if (navigationContainer) {
            navigationContainer.style.zIndex = '60';
            navigationContainer.style.position = 'relative';
            console.log('✅ Settings modal opened - navigation buttons z-index preserved');
        }
        else {
            console.warn('⚠️ Navigation container not found - buttons may be hidden');
        }
        const prevBtn = document.querySelector('#prev-btn');
        const nextBtn = document.querySelector('#next-btn');
        const submitBtn = document.querySelector('#submit-button');
        [prevBtn, nextBtn, submitBtn].forEach(btn => {
            if (btn) {
                btn.style.zIndex = '65';
                btn.style.position = 'relative';
            }
        });
        this.updateUI();
    }
    closeMenu() {
        this.dropdown.classList.add('hidden');
        const navigationContainer = document
            .querySelector('#prev-btn')
            ?.closest('div.bg-white.border-t');
        if (navigationContainer) {
            navigationContainer.style.zIndex = '';
            navigationContainer.style.position = '';
            console.log('✅ Settings modal closed - navigation z-index reset');
        }
        const prevBtn = document.querySelector('#prev-btn');
        const nextBtn = document.querySelector('#next-btn');
        const submitBtn = document.querySelector('#submit-button');
        [prevBtn, nextBtn, submitBtn].forEach(btn => {
            if (btn) {
                btn.style.zIndex = '';
                btn.style.position = '';
            }
        });
        setTimeout(() => {
            this.refreshProgressTitle();
        }, 100);
    }
    refreshProgressTitle() {
        const quizApp = window.__quizApp;
        if (quizApp && quizApp.components && quizApp.components.quizContent) {
            const quizContent = quizApp.components.quizContent;
            const progressTracker = quizContent.getProgressTracker && quizContent.getProgressTracker();
            if (progressTracker && typeof progressTracker.refreshDocumentTitle === 'function') {
                progressTracker.refreshDocumentTitle();
                console.log('🔄 Progress title refreshed after settings modal close');
            }
        }
    }
    onSettingsChange(settings) {
        console.log('🔄 SettingsMenu: Settings changed, updating UI...');
        this.updateUI();
    }
    updateUI() {
        const settings = this.settingsService.getSettings();
        const hideNavButtons = document.querySelector('#hide-nav-buttons');
        if (hideNavButtons)
            hideNavButtons.checked = settings.ui.hideDisabledNavButtons;
        const hideAllNavButtons = document.querySelector('#hide-all-nav-buttons');
        if (hideAllNavButtons)
            hideAllNavButtons.checked = settings.ui.hideAllNavButtons;
        const clickToAdvance = document.querySelector('#click-to-advance');
        if (clickToAdvance)
            clickToAdvance.checked = settings.ui.clickToAdvance;
        const autoAdvance = document.querySelector('#auto-advance');
        if (autoAdvance)
            autoAdvance.checked = settings.ui.autoAdvanceQuestions;
        const autoAdvanceEnabled = document.querySelector('#auto-advance-enabled');
        if (autoAdvanceEnabled)
            autoAdvanceEnabled.checked = settings.quiz.autoAdvanceEnabled;
        const autoAdvanceDelay = document.querySelector('#auto-advance-delay');
        if (autoAdvanceDelay)
            autoAdvanceDelay.value = settings.quiz.autoAdvanceDelay.toString();
        const smartSubmitLogic = document.querySelector('#smart-submit-logic');
        if (smartSubmitLogic)
            smartSubmitLogic.checked = settings.quiz.smartSubmitLogic;
        const showQuestionNumbers = document.querySelector('#show-question-numbers');
        if (showQuestionNumbers)
            showQuestionNumbers.checked = settings.ui.showQuestionNumbers;
        const enableAnimations = document.querySelector('#enable-animations');
        if (enableAnimations)
            enableAnimations.checked = settings.ui.enableAnimations;
        const clickToSelectCards = document.querySelector('#click-to-select-cards');
        if (clickToSelectCards)
            clickToSelectCards.checked = settings.ui.clickToSelectCards;
        const quizMode = document.querySelector('#quiz-mode');
        if (quizMode) {
            let mode = settings.ui.quizMode || 'cards';
            if (settings.quiz.instantSubmission)
                mode = 'instant';
            else if (settings.ui.clickToSelectCards)
                mode = 'cards';
            else
                mode = 'traditional';
            quizMode.value = mode;
        }
        const autoAdvanceMode = document.querySelector('#auto-advance-mode');
        const customDelayRow = document.querySelector('#custom-delay-row');
        const autoAdvanceDelaySlider = document.querySelector('#auto-advance-delay-slider');
        const delayValue = document.querySelector('#delay-value');
        if (autoAdvanceMode) {
            let mode = settings.quiz.autoAdvanceMode || 'enhanced';
            if (!settings.quiz.autoAdvanceEnabled) {
                mode = 'off';
            }
            else if (settings.quiz.autoAdvanceDelay === 2000) {
                mode = 'basic';
            }
            else if (settings.quiz.autoAdvanceDelay === 3000) {
                mode = 'enhanced';
            }
            else {
                mode = 'custom';
            }
            autoAdvanceMode.value = mode;
            if (customDelayRow) {
                customDelayRow.style.display = mode === 'custom' ? 'flex' : 'none';
            }
            if (autoAdvanceDelaySlider && delayValue) {
                const seconds = Math.round(settings.quiz.autoAdvanceDelay / 1000);
                autoAdvanceDelaySlider.value = seconds.toString();
                delayValue.textContent = `${seconds} second${seconds !== 1 ? 's' : ''}`;
            }
        }
        const defaultViewMode = document.querySelector('#default-view-mode');
        if (defaultViewMode)
            defaultViewMode.value = settings.ui.defaultViewMode;
    }
    render() {
        this.updateUI();
    }
}
//# sourceMappingURL=SettingsMenu.js.map