elspais 0.11.2__py3-none-any.whl → 0.43.5__py3-none-any.whl

elspais/trace_view/html/templates/partials/review/review-help.js

@@ -1,679 +0,0 @@
-/**
- * TraceView Review Help System
- *
- * Provides:
- * - Contextual tooltips loaded from tooltips.json
- * - Onboarding wizard loaded from onboarding.json
- * - Help panel loaded from help-panel.json
- *
- * IMPLEMENTS REQUIREMENTS:
- *   REQ-tv-d00016: Review JavaScript Integration
- */
-
-// Ensure TraceView.review namespace exists
-window.TraceView = window.TraceView || {};
-TraceView.review = TraceView.review || {};
-
-(function(review) {
-    'use strict';
-
-    // Help data loaded from JSON files
-    let tooltipsData = null;
-    let onboardingData = null;
-    let helpPanelData = null;
-
-    // State
-    let onboardingStep = 0;
-    let helpPanelVisible = false;
-
-    // ==========================================================================
-    // Data Loading
-    // ==========================================================================
-
-    /**
-     * Load help data from JSON files
-     * @param {string} baseUrl - Base URL for help files
-     */
-    async function loadHelpData(baseUrl = '/help') {
-        try {
-            const [tooltipsResp, onboardingResp, helpPanelResp] = await Promise.all([
-                fetch(`${baseUrl}/tooltips.json`),
-                fetch(`${baseUrl}/onboarding.json`),
-                fetch(`${baseUrl}/help-panel.json`)
-            ]);
-
-            if (tooltipsResp.ok) {
-                tooltipsData = await tooltipsResp.json();
-            }
-            if (onboardingResp.ok) {
-                onboardingData = await onboardingResp.json();
-            }
-            if (helpPanelResp.ok) {
-                helpPanelData = await helpPanelResp.json();
-            }
-
-            console.log('Help data loaded successfully');
-        } catch (e) {
-            console.warn('Failed to load help data:', e);
-        }
-    }
-
-    // ==========================================================================
-    // Tooltips
-    // ==========================================================================
-
-    /**
-     * Get tooltip content for an element
-     * @param {string} helpId - Help ID (e.g., "header.review-mode-toggle")
-     * @returns {object|null} Tooltip data with title and text
-     */
-    function getTooltip(helpId) {
-        if (!tooltipsData?.tooltips) return null;
-
-        const parts = helpId.split('.');
-        if (parts.length !== 2) return null;
-
-        const [section, id] = parts;
-        return tooltipsData.tooltips[section]?.[id] || null;
-    }
-
-    /**
-     * Initialize tooltips for elements with data-help-id attribute
-     * @param {Element} container - Container to search within
-     */
-    function initTooltips(container = document) {
-        container.querySelectorAll('[data-help-id]').forEach(el => {
-            const helpId = el.getAttribute('data-help-id');
-            const tooltip = getTooltip(helpId);
-
-            if (tooltip) {
-                // Set title attribute for native tooltip
-                el.setAttribute('title', `${tooltip.title}: ${tooltip.text}`);
-
-                // Add help indicator
-                if (!el.querySelector('.rs-help-indicator')) {
-                    const indicator = document.createElement('span');
-                    indicator.className = 'rs-help-indicator';
-                    indicator.textContent = '?';
-                    indicator.setAttribute('title', tooltip.text);
-                    el.appendChild(indicator);
-                }
-            }
-        });
-    }
-
-    // ==========================================================================
-    // Onboarding Wizard
-    // ==========================================================================
-
-    /**
-     * Check if onboarding should be shown
-     * @returns {boolean} True if onboarding should be shown
-     */
-    function shouldShowOnboarding() {
-        if (!onboardingData?.wizard) return false;
-
-        const settings = onboardingData.wizard.settings;
-        if (!settings.showOnFirstVisit) return false;
-
-        const storageKey = settings.storageKey || 'traceview-review-onboarding-complete';
-        return localStorage.getItem(storageKey) !== 'true';
-    }
-
-    /**
-     * Show onboarding wizard
-     */
-    function showOnboarding() {
-        if (!onboardingData?.wizard) {
-            console.warn('Onboarding data not loaded');
-            return;
-        }
-
-        onboardingStep = 0;
-        renderOnboardingStep();
-    }
-
-    /**
-     * Render current onboarding step
-     */
-    function renderOnboardingStep() {
-        const wizard = onboardingData.wizard;
-        const steps = wizard.steps;
-
-        // Remove any existing overlay
-        const existingOverlay = document.querySelector('.rs-onboarding-overlay');
-        if (existingOverlay) {
-            existingOverlay.remove();
-        }
-
-        // Check if completed
-        if (onboardingStep >= steps.length) {
-            renderOnboardingCompletion();
-            return;
-        }
-
-        const step = steps[onboardingStep];
-        const overlay = document.createElement('div');
-        overlay.className = 'rs-onboarding-overlay';
-
-        overlay.innerHTML = `
-            <div class="rs-onboarding-modal rs-onboarding-${step.position || 'center'}">
-                <div class="rs-onboarding-header">
-                    <span class="rs-onboarding-step-indicator">
-                        Step ${onboardingStep + 1} of ${steps.length}
-                    </span>
-                    ${wizard.settings.canSkip ? `
-                        <button class="rs-btn rs-btn-link rs-onboarding-skip">Skip Tour</button>
-                    ` : ''}
-                </div>
-                <h3 class="rs-onboarding-title">${step.title}</h3>
-                <div class="rs-onboarding-content">
-                    ${formatMarkdownSimple(step.content)}
-                </div>
-                <div class="rs-onboarding-actions">
-                    ${step.buttons.back ? `
-                        <button class="rs-btn rs-onboarding-back">${step.buttons.back}</button>
-                    ` : ''}
-                    ${step.buttons.next ? `
-                        <button class="rs-btn rs-btn-primary rs-onboarding-next">${step.buttons.next}</button>
-                    ` : ''}
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(overlay);
-
-        // Highlight target element if specified
-        if (step.highlight) {
-            const target = document.querySelector(step.highlight);
-            if (target) {
-                target.classList.add('rs-onboarding-highlight');
-            }
-        }
-
-        // Bind events
-        overlay.querySelector('.rs-onboarding-next')?.addEventListener('click', nextOnboardingStep);
-        overlay.querySelector('.rs-onboarding-back')?.addEventListener('click', prevOnboardingStep);
-        overlay.querySelector('.rs-onboarding-skip')?.addEventListener('click', completeOnboarding);
-    }
-
-    /**
-     * Render onboarding completion screen
-     */
-    function renderOnboardingCompletion() {
-        const completion = onboardingData.wizard.completion;
-        const overlay = document.createElement('div');
-        overlay.className = 'rs-onboarding-overlay';
-
-        overlay.innerHTML = `
-            <div class="rs-onboarding-modal rs-onboarding-center">
-                <h3 class="rs-onboarding-title">${completion.title}</h3>
-                <div class="rs-onboarding-content">
-                    ${formatMarkdownSimple(completion.content)}
-                </div>
-                <div class="rs-onboarding-actions">
-                    <button class="rs-btn rs-btn-primary rs-onboarding-close">${completion.buttons.close}</button>
-                    ${completion.buttons.docs ? `
-                        <button class="rs-btn rs-onboarding-docs">${completion.buttons.docs}</button>
-                    ` : ''}
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(overlay);
-
-        overlay.querySelector('.rs-onboarding-close')?.addEventListener('click', completeOnboarding);
-        overlay.querySelector('.rs-onboarding-docs')?.addEventListener('click', () => {
-            window.open('docs/traceview-review-user-guide.md', '_blank');
-            completeOnboarding();
-        });
-    }
-
-    function nextOnboardingStep() {
-        clearOnboardingHighlights();
-        onboardingStep++;
-        renderOnboardingStep();
-    }
-
-    function prevOnboardingStep() {
-        clearOnboardingHighlights();
-        onboardingStep = Math.max(0, onboardingStep - 1);
-        renderOnboardingStep();
-    }
-
-    function completeOnboarding() {
-        clearOnboardingHighlights();
-        const overlay = document.querySelector('.rs-onboarding-overlay');
-        if (overlay) {
-            overlay.remove();
-        }
-
-        // Mark as completed
-        const storageKey = onboardingData.wizard.settings.storageKey || 'traceview-review-onboarding-complete';
-        localStorage.setItem(storageKey, 'true');
-    }
-
-    function clearOnboardingHighlights() {
-        document.querySelectorAll('.rs-onboarding-highlight').forEach(el => {
-            el.classList.remove('rs-onboarding-highlight');
-        });
-    }
-
-    // ==========================================================================
-    // Help Panel
-    // ==========================================================================
-
-    /**
-     * Toggle help panel visibility
-     */
-    function toggleHelpPanel() {
-        if (helpPanelVisible) {
-            hideHelpPanel();
-        } else {
-            showHelpPanel();
-        }
-    }
-
-    /**
-     * Show help panel
-     */
-    function showHelpPanel() {
-        if (!helpPanelData?.helpPanel) {
-            console.warn('Help panel data not loaded');
-            return;
-        }
-
-        // Remove existing panel
-        const existing = document.querySelector('.rs-help-panel');
-        if (existing) {
-            existing.remove();
-        }
-
-        const panel = helpPanelData.helpPanel;
-        const panelEl = document.createElement('div');
-        panelEl.className = 'rs-help-panel';
-
-        let sectionsHtml = panel.sections.map(section => `
-            <div class="rs-help-section" data-section-id="${section.id}">
-                <h4 class="rs-help-section-header" ${panel.settings.collapsible ? 'style="cursor: pointer;"' : ''}>
-                    <span>${section.title}</span>
-                    ${panel.settings.collapsible ? '<span class="rs-help-expand-icon">V</span>' : ''}
-                </h4>
-                <div class="rs-help-section-content" ${panel.settings.defaultExpanded?.includes(section.id) ? '' : 'style="display: none;"'}>
-                    ${section.items.map(item => `
-                        <div class="rs-help-item" data-item-id="${item.id}">
-                            <div class="rs-help-question">${item.question}</div>
-                            <div class="rs-help-answer">${formatMarkdownSimple(item.answer)}</div>
-                        </div>
-                    `).join('')}
-                </div>
-            </div>
-        `).join('');
-
-        panelEl.innerHTML = `
-            <div class="rs-help-panel-header">
-                <h3>${panel.title}</h3>
-                <button class="rs-btn rs-btn-sm rs-help-close">x</button>
-            </div>
-            ${panel.settings.searchable ? `
-                <div class="rs-help-search">
-                    <input type="text" class="rs-help-search-input" placeholder="Search help...">
-                </div>
-            ` : ''}
-            <div class="rs-help-sections">
-                ${sectionsHtml}
-            </div>
-            <div class="rs-help-footer">
-                <p>${panel.footer.text}</p>
-                <div class="rs-help-links">
-                    ${panel.footer.links.map(link => `
-                        <a href="${link.url}" class="rs-help-link">${link.label}</a>
-                    `).join('')}
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(panelEl);
-        helpPanelVisible = true;
-
-        // Bind events
-        panelEl.querySelector('.rs-help-close').addEventListener('click', hideHelpPanel);
-
-        // Collapsible sections
-        if (panel.settings.collapsible) {
-            panelEl.querySelectorAll('.rs-help-section-header').forEach(header => {
-                header.addEventListener('click', () => {
-                    const content = header.nextElementSibling;
-                    const icon = header.querySelector('.rs-help-expand-icon');
-                    if (content.style.display === 'none') {
-                        content.style.display = 'block';
-                        if (icon) icon.textContent = 'V';
-                    } else {
-                        content.style.display = 'none';
-                        if (icon) icon.textContent = '>';
-                    }
-                });
-            });
-        }
-
-        // Search functionality
-        if (panel.settings.searchable) {
-            const searchInput = panelEl.querySelector('.rs-help-search-input');
-            searchInput.addEventListener('input', (e) => {
-                const query = e.target.value.toLowerCase();
-                filterHelpItems(panelEl, query);
-            });
-        }
-    }
-
-    /**
-     * Hide help panel
-     */
-    function hideHelpPanel() {
-        const panel = document.querySelector('.rs-help-panel');
-        if (panel) {
-            panel.remove();
-        }
-        helpPanelVisible = false;
-    }
-
-    /**
-     * Filter help items based on search query
-     */
-    function filterHelpItems(panelEl, query) {
-        panelEl.querySelectorAll('.rs-help-item').forEach(item => {
-            const question = item.querySelector('.rs-help-question').textContent.toLowerCase();
-            const answer = item.querySelector('.rs-help-answer').textContent.toLowerCase();
-
-            if (query === '' || question.includes(query) || answer.includes(query)) {
-                item.style.display = 'block';
-            } else {
-                item.style.display = 'none';
-            }
-        });
-
-        // Show/hide sections based on whether they have visible items
-        panelEl.querySelectorAll('.rs-help-section').forEach(section => {
-            const visibleItems = section.querySelectorAll('.rs-help-item[style="display: block;"], .rs-help-item:not([style])');
-            const content = section.querySelector('.rs-help-section-content');
-            if (query && visibleItems.length > 0) {
-                content.style.display = 'block';
-            }
-        });
-    }
-
-    // ==========================================================================
-    // Utilities
-    // ==========================================================================
-
-    /**
-     * Simple markdown-like formatting
-     */
-    function formatMarkdownSimple(text) {
-        if (!text) return '';
-
-        // Bold
-        text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-
-        // Code blocks
-        text = text.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
-
-        // Inline code
-        text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-        // Line breaks
-        text = text.replace(/\n/g, '<br>');
-
-        return text;
-    }
-
-    /**
-     * Create help button for header
-     */
-    function createHelpButton() {
-        const btn = document.createElement('button');
-        btn.className = 'rs-btn rs-btn-sm rs-help-btn';
-        btn.innerHTML = '?';
-        btn.title = 'Help';
-        btn.addEventListener('click', toggleHelpPanel);
-        return btn;
-    }
-
-    /**
-     * Create replay onboarding button
-     */
-    function createReplayOnboardingButton() {
-        const btn = document.createElement('button');
-        btn.className = 'rs-btn rs-btn-sm rs-replay-onboarding-btn';
-        btn.textContent = 'Tour';
-        btn.title = 'Replay onboarding tour';
-        btn.addEventListener('click', () => {
-            // Reset onboarding state
-            const storageKey = onboardingData?.wizard?.settings?.storageKey || 'traceview-review-onboarding-complete';
-            localStorage.removeItem(storageKey);
-            showOnboarding();
-        });
-        return btn;
-    }
-
-    // ==========================================================================
-    // Help Menu
-    // ==========================================================================
-
-    let helpMenuOpen = false;
-
-    /**
-     * Create help menu dropdown
-     * @returns {HTMLElement} The complete help menu container
-     */
-    function createHelpMenu() {
-        const container = document.createElement('div');
-        container.className = 'rs-help-menu-container';
-        container.id = 'rs-help-menu';
-
-        container.innerHTML = `
-            <button class="rs-help-menu-btn" id="rs-help-menu-btn">
-                <span>? Help</span>
-                <span class="rs-menu-arrow">V</span>
-            </button>
-            <div class="rs-help-menu-dropdown" id="rs-help-menu-dropdown">
-                <div class="rs-help-menu-section">
-                    <button class="rs-help-menu-item" id="rs-menu-tour">
-                        <span class="rs-menu-icon">[T]</span>
-                        <span class="rs-menu-label">Take Tour</span>
-                    </button>
-                    <button class="rs-help-menu-item" id="rs-menu-help-panel">
-                        <span class="rs-menu-icon">[?]</span>
-                        <span class="rs-menu-label">Help Panel</span>
-                        <span class="rs-menu-shortcut">?</span>
-                    </button>
-                </div>
-                <div class="rs-help-menu-section">
-                    <div class="rs-help-menu-section-label">Documentation</div>
-                    <a href="docs/traceview-review-quick-start.md" target="_blank" class="rs-help-menu-item">
-                        <span class="rs-menu-icon">[Q]</span>
-                        <span class="rs-menu-label">Quick Start</span>
-                    </a>
-                    <a href="docs/traceview-review-user-guide.md" target="_blank" class="rs-help-menu-item">
-                        <span class="rs-menu-icon">[U]</span>
-                        <span class="rs-menu-label">User Guide</span>
-                    </a>
-                </div>
-            </div>
-        `;
-
-        // Bind events after DOM is created
-        const btn = container.querySelector('#rs-help-menu-btn');
-        const dropdown = container.querySelector('#rs-help-menu-dropdown');
-
-        btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            toggleHelpMenu(btn, dropdown);
-        });
-
-        container.querySelector('#rs-menu-tour').addEventListener('click', () => {
-            closeHelpMenu(btn, dropdown);
-            // Reset onboarding state and show
-            const storageKey = onboardingData?.wizard?.settings?.storageKey || 'traceview-review-onboarding-complete';
-            localStorage.removeItem(storageKey);
-            showOnboarding();
-        });
-
-        container.querySelector('#rs-menu-help-panel').addEventListener('click', () => {
-            closeHelpMenu(btn, dropdown);
-            showHelpPanel();
-        });
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!container.contains(e.target)) {
-                closeHelpMenu(btn, dropdown);
-            }
-        });
-
-        // Close menu on ESC key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && helpMenuOpen) {
-                closeHelpMenu(btn, dropdown);
-            }
-        });
-
-        return container;
-    }
-
-    /**
-     * Toggle help menu open/closed
-     */
-    function toggleHelpMenu(btn, dropdown) {
-        helpMenuOpen = !helpMenuOpen;
-        btn.classList.toggle('open', helpMenuOpen);
-        dropdown.classList.toggle('open', helpMenuOpen);
-    }
-
-    /**
-     * Close help menu
-     */
-    function closeHelpMenu(btn, dropdown) {
-        helpMenuOpen = false;
-        btn?.classList.remove('open');
-        dropdown?.classList.remove('open');
-    }
-
-    // ==========================================================================
-    // Initialization
-    // ==========================================================================
-
-    /**
-     * Initialize help system
-     * @param {object} options - Configuration options
-     */
-    async function init(options = {}) {
-        const baseUrl = options.helpBaseUrl || '/help';
-
-        await loadHelpData(baseUrl);
-
-        // Initialize tooltips
-        initTooltips(document);
-
-        // Show onboarding if first visit
-        if (shouldShowOnboarding()) {
-            showOnboarding();
-        }
-
-        console.log('Help system initialized');
-    }
-
-    // ==========================================================================
-    // Exports
-    // ==========================================================================
-
-    review.help = {
-        init,
-        loadHelpData,
-        initTooltips,
-        getTooltip,
-        showOnboarding,
-        showHelpPanel,
-        hideHelpPanel,
-        toggleHelpPanel,
-        createHelpButton,
-        createReplayOnboardingButton,
-        createHelpMenu
-    };
-
-})(TraceView.review);
-
-// Add ReviewSystem alias with help functions (REQ-d00092)
-window.ReviewSystem = window.ReviewSystem || {};
-var RS = window.ReviewSystem;
-
-// Help menu toggle from button (for HTML onclick handlers)
-function toggleHelpMenuFromBtn(btn) {
-    const dropdown = document.getElementById('rs-help-menu-dropdown');
-    const isOpen = dropdown?.classList.toggle('open');
-    btn?.classList.toggle('open', isOpen);
-}
-
-// Filter help content (for search input)
-function filterHelpContent(query) {
-    const searchQuery = (query || '').toLowerCase();
-    const panel = document.querySelector('.rs-help-panel');
-    if (!panel) return;
-
-    panel.querySelectorAll('.rs-help-item').forEach(item => {
-        const question = item.querySelector('.rs-help-question')?.textContent?.toLowerCase() || '';
-        const answer = item.querySelector('.rs-help-answer')?.textContent?.toLowerCase() || '';
-
-        if (searchQuery === '' || question.includes(searchQuery) || answer.includes(searchQuery)) {
-            item.style.display = 'block';
-        } else {
-            item.style.display = 'none';
-        }
-    });
-}
-
-// Render help panel content
-function renderHelpPanelContent(container) {
-    // Placeholder - content populated dynamically
-    if (container && TraceView.review.help) {
-        TraceView.review.help.showHelpPanel();
-    }
-}
-
-// Setup global help handlers for keyboard shortcuts
-function setupGlobalHelpHandlers() {
-    document.addEventListener('keydown', function(e) {
-        if (e.key === '?' && !e.target.matches('input, textarea')) {
-            e.preventDefault();
-            if (TraceView.review.help) {
-                TraceView.review.help.toggleHelpPanel();
-            }
-        }
-        if (e.key === 'Escape') {
-            // Close any open help panels/menus
-            const dropdown = document.getElementById('rs-help-menu-dropdown');
-            const btn = document.getElementById('rs-help-menu-btn');
-            if (dropdown?.classList.contains('open')) {
-                dropdown.classList.remove('open');
-                btn?.classList.remove('open');
-            }
-        }
-    });
-}
-
-// Initialize global handlers on DOMContentLoaded
-document.addEventListener('DOMContentLoaded', setupGlobalHelpHandlers);
-
-// Export to RS.help namespace
-RS.help = {
-    init: TraceView.review.help.init,
-    toggleHelpPanel: TraceView.review.help.toggleHelpPanel,
-    toggleHelpMenuFromBtn: toggleHelpMenuFromBtn,
-    startTour: TraceView.review.help.showOnboarding,
-    filterHelpContent: filterHelpContent,
-    showOnboarding: TraceView.review.help.showOnboarding,
-    renderHelpPanelContent: renderHelpPanelContent,
-    hideHelpPanel: TraceView.review.help.hideHelpPanel,
-    showHelpPanel: TraceView.review.help.showHelpPanel,
-    setupGlobalHelpHandlers: setupGlobalHelpHandlers
-};