No headings found in document
- -Error generating contents
', 'generateContentsHTML'); - } - - /** - * Navigate to a specific heading with smooth scrolling - */ - navigateToHeading(headingId) { - return this.safeOperation(() => { - const targetElement = document.getElementById(headingId); - if (targetElement) { - targetElement.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - - // Highlight the target temporarily - const originalStyle = targetElement.style.backgroundColor; - targetElement.style.backgroundColor = '#fff3cd'; - targetElement.style.transition = 'background-color 0.3s ease'; - - setTimeout(() => { - targetElement.style.backgroundColor = originalStyle; - setTimeout(() => { - targetElement.style.transition = ''; - }, 300); - }, 1500); - - return true; - } - return false; - }, false, 'navigateToHeading'); - } - - /** - * Handle search input - */ - handleSearch(query) { - this.searchQuery = query; - const filteredHeadings = this.filterHeadings(this.headings, query); - this.updateContentsDisplay(filteredHeadings); - } - - /** - * Update the contents display with new headings - */ - updateContentsDisplay(headings) { - return this.safeOperation(() => { - const content = this.element?.querySelector('.control-content'); - if (content) { - content.innerHTML = this.generateContentsHTML(headings); - } - }, null, 'updateContentsDisplay'); - } - - /** - * Refresh the contents by re-scanning the document - */ - refreshContents() { - return this.safeOperation(() => { - this.extractHeadings(); - const filteredHeadings = this.filterHeadings(this.headings, this.searchQuery); - this.updateContentsDisplay(filteredHeadings); - - // Show success feedback - const refreshBtn = this.element?.querySelector('button'); - if (refreshBtn) { - const originalText = refreshBtn.innerHTML; - refreshBtn.innerHTML = 'β Updated'; - refreshBtn.style.background = '#28a745'; - - setTimeout(() => { - refreshBtn.innerHTML = originalText; - refreshBtn.style.background = '#28a745'; - }, 1000); - } - }, null, 'refreshContents'); - } - - /** - * Build the control content - * Override of base class method to provide contents-specific functionality - */ - buildContent() { - return this.safeOperation(() => { - // Extract headings on first build - this.extractHeadings(); - - // Generate and set content - const content = this.element?.querySelector('.control-content'); - if (content) { - content.innerHTML = this.generateContentsHTML(); - - // Store reference to this control for onclick handlers - this.element.contentsControl = this; - } - - // Set up auto-refresh for dynamic content - if (this.updateInterval) { - clearInterval(this.updateInterval); - } - - this.updateInterval = setInterval(() => { - const currentHeadingCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length; - if (currentHeadingCount !== this.headings.length) { - this.refreshContents(); - } - }, 5000); // Check every 5 seconds - - }, null, 'buildContent'); - } - - /** - * Get statistics about the document structure - */ - getDocumentStats() { - return this.safeOperation(() => { - const stats = { - totalHeadings: this.headings.length, - byLevel: {}, - deepestLevel: 1, - structure: 'flat' - }; - - // Count headings by level - this.headings.forEach(heading => { - stats.byLevel[heading.level] = (stats.byLevel[heading.level] || 0) + 1; - stats.deepestLevel = Math.max(stats.deepestLevel, heading.level); - }); - - // Determine structure type - const levels = Object.keys(stats.byLevel).map(Number).sort(); - if (levels.length > 1) { - const hasSequentialLevels = levels.every((level, index) => - index === 0 || level <= levels[index - 1] + 1 - ); - stats.structure = hasSequentialLevels ? 'hierarchical' : 'mixed'; - } - - return stats; - }, {}, 'getDocumentStats'); - } - - /** - * Clean up resources when control is destroyed - */ - destroy() { - if (this.updateInterval) { - clearInterval(this.updateInterval); - this.updateInterval = null; - } - super.destroy(); - } -} - -// Export for module systems or attach to global for direct usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = ContentsControl; -} else { - window.ContentsControl = ContentsControl; -} \ No newline at end of file diff --git a/markitect/static/js/controls/control-base.js b/markitect/static/js/controls/control-base.js deleted file mode 100644 index 0706c4b7..00000000 --- a/markitect/static/js/controls/control-base.js +++ /dev/null @@ -1,631 +0,0 @@ -/** - * Base Control Class for TestDrive-JSUI Controls - * - * Provides common functionality for positioning, drag, resize, expand/collapse operations. - * This is the foundation class that all UI controls inherit from to ensure consistent - * behavior across the TestDrive-JSUI component system. - * - * Key Features: - * - Drag and drop positioning with compass-based anchoring - * - Resize handles with hover-based visibility - * - Expand/collapse state management - * - Safe operation wrappers with error handling - * - Development mode with strict error checking - * - Accessibility support with proper ARIA labels - * - * Dependencies: - * - None (standalone base class) - * - * Usage: - * Controls inherit from this base by using Object.create(Control) and - * implementing their specific buildContent() methods. - */ - -// Development mode detection for enhanced error reporting -const MARKITECT_STRICT_MODE = ( - window.location.hostname === 'localhost' || - window.location.hostname === '127.0.0.1' || - window.location.search.includes('strict=true') || - window.markitectStrictMode === true -); - -/** - * ControlBase - Foundation class for all TestDrive-JSUI controls - * - * Provides the base functionality that all controls inherit: - * - DOM element management - * - Positioning and drag behavior - * - Resize handle management - * - State persistence - * - Error handling with strict mode support - */ -class ControlBase { - constructor() { - // Default configuration that controls can override - this.config = { - icon: 'π§', - title: 'Control', - className: 'base-control', - defaultContent: 'Control content', - ariaLabel: 'Base Control', - position: 'w', // Compass position: west (middle-left) - footer: null // Custom footer text - }; - - // Internal state - this.element = null; - this.isExpanded = false; - this.isHeaderOnly = false; // New state for header-only visibility - this.isDragging = false; - this.isResizing = false; - this.position = { x: 0, y: 0 }; - this.size = { width: 300, height: 200 }; - this.originalPosition = null; // Store original position for collapse - - // Event handlers storage - this.eventHandlers = new Map(); - } - - /** - * Safe operation wrapper with error handling - * Provides consistent error handling across all control operations - */ - safeOperation(operation, fallback = null, context = 'Unknown') { - try { - return operation(); - } catch (error) { - console.error(`Control operation failed in ${context}:`, error); - - if (MARKITECT_STRICT_MODE) { - throw error; // Re-throw in strict mode for debugging - } - - return fallback; - } - } - - /** - * Create and initialize the control element - * This method sets up the basic DOM structure that all controls use - */ - createElement() { - return this.safeOperation(() => { - if (this.element) { - this.destroy(); // Clean up existing element - } - - const control = document.createElement('div'); - control.className = `control-panel ${this.config.className}`; - control.setAttribute('role', 'dialog'); - control.setAttribute('aria-label', this.config.ariaLabel); - - control.innerHTML = ` - - - `; - - this.element = control; - this.setupStyles(); - this.setupEventListeners(); - return control; - - }, null, 'createElement'); - } - - /** - * Set up base styles for the control - */ - setupStyles() { - if (!this.element) return; - - // Position the element - this.element.style.position = 'fixed'; - this.element.style.zIndex = '1000'; - - // Store original position for collapse - this.storeOriginalPosition(); - - // Style the icon-only toggle button - const toggleBtn = this.element.querySelector('.control-toggle'); - if (toggleBtn) { - toggleBtn.style.cssText = ` - width: 40px; - height: 40px; - border: none; - background: rgba(248, 249, 250, 0.95); - border: 1px solid #dee2e6; - border-radius: 8px; - cursor: pointer; - font-size: 16px; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - transition: all 0.2s ease; - `; - } - } - - /** - * Set up event listeners for control interaction - * Handles dragging, resizing, and toggle functionality - */ - setupEventListeners() { - if (!this.element) return; - - // Icon toggle to expand - const toggleBtn = this.element.querySelector('.control-toggle'); - if (toggleBtn) { - this.addEventListener(toggleBtn, 'click', () => this.expand()); - } - - // Close button to collapse back to icon - const closeBtn = this.element.querySelector('.control-close'); - if (closeBtn) { - this.addEventListener(closeBtn, 'click', () => this.collapse()); - } - - // Header title click to toggle content visibility - const title = this.element.querySelector('.control-title'); - if (title) { - this.addEventListener(title, 'click', () => this.toggleHeaderOnly()); - } - - // Drag functionality on header when expanded - const header = this.element.querySelector('.control-header'); - if (header) { - this.addEventListener(header, 'mousedown', (e) => { - if (this.isExpanded && e.target !== title && e.target !== closeBtn) { - this.startDrag(e); - } - }); - } - } - - /** - * Add event listener with automatic cleanup tracking - */ - addEventListener(element, event, handler) { - const key = `${element.className}_${event}`; - - // Remove existing handler if it exists - if (this.eventHandlers.has(key)) { - const [oldElement, oldEvent, oldHandler] = this.eventHandlers.get(key); - oldElement.removeEventListener(oldEvent, oldHandler); - } - - // Add new handler - element.addEventListener(event, handler); - this.eventHandlers.set(key, [element, event, handler]); - } - - /** - * Store original position for collapse restoration - */ - storeOriginalPosition() { - if (!this.element) return; - - const positionStyles = this.getCompassPosition(); - this.originalPosition = { - top: positionStyles.top, - left: positionStyles.left, - right: positionStyles.right, - bottom: positionStyles.bottom, - transform: positionStyles.transform - }; - - // Apply original position - Object.assign(this.element.style, positionStyles); - } - - /** - * Get compass-based positioning styles - */ - getCompassPosition() { - const positions = { - 'n': { top: '20px', left: '50%', transform: 'translateX(-50%)' }, - 'ne': { top: '20px', right: '20px' }, - 'e': { right: '20px', top: '50%', transform: 'translateY(-50%)' }, - 'se': { bottom: '20px', right: '20px' }, - 's': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' }, - 'sw': { bottom: '20px', left: '20px' }, - 'w': { left: '20px', top: '50%', transform: 'translateY(-50%)' }, - 'nw': { top: '20px', left: '20px' } - }; - - return positions[this.config.position] || positions['w']; - } - - /** - * Expand the control from icon-only state - */ - expand() { - return this.safeOperation(() => { - this.isExpanded = true; - const panel = this.element?.querySelector('.control-panel-expanded'); - const toggleBtn = this.element?.querySelector('.control-toggle'); - - if (panel && toggleBtn) { - panel.style.display = 'block'; - toggleBtn.style.display = 'none'; - - // Style expanded panel - panel.style.cssText = ` - background: rgba(248, 249, 250, 0.95); - border: 1px solid #dee2e6; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - backdrop-filter: blur(8px); - min-width: 300px; - min-height: 200px; - `; - - // Style header - const header = this.element.querySelector('.control-header'); - if (header) { - header.style.cssText = ` - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 12px; - background: rgba(0,0,0,0.05); - border-bottom: 1px solid #dee2e6; - cursor: move; - user-select: none; - `; - } - - // Style close button - const closeBtn = this.element.querySelector('.control-close'); - if (closeBtn) { - closeBtn.style.cssText = ` - background: none; - border: none; - font-size: 16px; - cursor: pointer; - padding: 0; - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - `; - } - - // Add resize handle - this.addResizeHandle(); - this.buildContent(); - } - - return this.isExpanded; - }, false, 'expand'); - } - - /** - * Collapse back to icon-only state at original position - */ - collapse() { - return this.safeOperation(() => { - this.isExpanded = false; - this.isHeaderOnly = false; - const panel = this.element?.querySelector('.control-panel-expanded'); - const toggleBtn = this.element?.querySelector('.control-toggle'); - - if (panel && toggleBtn) { - panel.style.display = 'none'; - toggleBtn.style.display = 'block'; - - // Restore original position - if (this.originalPosition) { - // Clear any drag positioning - this.element.style.left = this.originalPosition.left || ''; - this.element.style.right = this.originalPosition.right || ''; - this.element.style.top = this.originalPosition.top || ''; - this.element.style.bottom = this.originalPosition.bottom || ''; - this.element.style.transform = this.originalPosition.transform || ''; - } - - // Remove resize handle - this.removeResizeHandle(); - } - - return !this.isExpanded; - }, false, 'collapse'); - } - - /** - * Toggle header-only visibility (content show/hide) - */ - toggleHeaderOnly() { - return this.safeOperation(() => { - if (!this.isExpanded) { - // If collapsed, expand first - this.expand(); - return; - } - - const content = this.element?.querySelector('.control-content'); - if (content) { - this.isHeaderOnly = !this.isHeaderOnly; - content.style.display = this.isHeaderOnly ? 'none' : 'block'; - } - - return this.isHeaderOnly; - }, false, 'toggleHeaderOnly'); - } - - /** - * Start drag operation - */ - startDrag(event) { - if (!this.isExpanded) return; // Only drag when expanded - - this.isDragging = true; - const rect = this.element.getBoundingClientRect(); - - // Calculate offset from mouse to element origin - this.dragOffset = { - x: event.clientX - rect.left, - y: event.clientY - rect.top - }; - - // Clear any positioning styles that interfere with dragging - this.element.style.right = ''; - this.element.style.bottom = ''; - this.element.style.transform = ''; - - // Add global mouse move and up handlers - const handleMouseMove = (e) => this.handleDrag(e); - const handleMouseUp = () => this.stopDrag(); - - document.addEventListener('mousemove', handleMouseMove); - document.addEventListener('mouseup', handleMouseUp); - - // Store handlers for cleanup (but don't use the tracked version to avoid conflicts) - this._dragHandlers = { move: handleMouseMove, up: handleMouseUp }; - - event.preventDefault(); - } - - /** - * Handle drag movement - */ - handleDrag(event) { - if (!this.isDragging || !this.element) return; - - // Calculate new position based on mouse position and offset - const newX = event.clientX - this.dragOffset.x; - const newY = event.clientY - this.dragOffset.y; - - // Update element position - this.element.style.left = `${newX}px`; - this.element.style.top = `${newY}px`; - - this.position.x = newX; - this.position.y = newY; - - event.preventDefault(); - } - - /** - * Stop drag operation - */ - stopDrag() { - if (!this.isDragging) return; - - this.isDragging = false; - - // Clean up event handlers - if (this._dragHandlers) { - document.removeEventListener('mousemove', this._dragHandlers.move); - document.removeEventListener('mouseup', this._dragHandlers.up); - delete this._dragHandlers; - } - } - - /** - * Add resize handle to expanded control - */ - addResizeHandle() { - // Remove existing resize handle if any - this.removeResizeHandle(); - - const resizeHandle = document.createElement('div'); - resizeHandle.className = 'control-resize-handle'; - resizeHandle.innerHTML = 'β'; // Bottom-left resize indicator - resizeHandle.style.cssText = ` - position: absolute; - bottom: 0; - left: 0; - width: 20px; - height: 20px; - cursor: nw-resize; - font-size: 16px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0,0,0,0.1); - border-radius: 0 8px 0 0; - user-select: none; - `; - - // Add to the expanded panel - const panel = this.element?.querySelector('.control-panel-expanded'); - if (panel) { - panel.appendChild(resizeHandle); - - // Set up resize handlers - this.addEventListener(resizeHandle, 'mousedown', (e) => this.startResize(e)); - } - } - - /** - * Remove resize handle - */ - removeResizeHandle() { - const handle = this.element?.querySelector('.control-resize-handle'); - if (handle && handle.parentNode) { - handle.parentNode.removeChild(handle); - } - } - - /** - * Start resize operation - */ - startResize(event) { - event.stopPropagation(); // Prevent drag from starting - if (!this.isExpanded) return; - - this.isResizing = true; - const rect = this.element.getBoundingClientRect(); - - // Store initial size and mouse position - this.resizeStart = { - width: rect.width, - height: rect.height, - mouseX: event.clientX, - mouseY: event.clientY - }; - - // Add global mouse move and up handlers - const handleMouseMove = (e) => this.handleResize(e); - const handleMouseUp = () => this.stopResize(); - - document.addEventListener('mousemove', handleMouseMove); - document.addEventListener('mouseup', handleMouseUp); - - // Store handlers for cleanup - this._resizeHandlers = { move: handleMouseMove, up: handleMouseUp }; - - event.preventDefault(); - } - - /** - * Handle resize movement (bottom-left corner resize) - */ - handleResize(event) { - if (!this.isResizing || !this.element) return; - - const panel = this.element.querySelector('.control-panel-expanded'); - if (!panel) return; - - // Calculate size change based on mouse movement - const deltaX = this.resizeStart.mouseX - event.clientX; // Inverted for left edge - const deltaY = event.clientY - this.resizeStart.mouseY; - - // Calculate new dimensions (minimum size constraints) - const newWidth = Math.max(200, this.resizeStart.width + deltaX); - const newHeight = Math.max(150, this.resizeStart.height + deltaY); - - // Apply new size to the panel - panel.style.width = `${newWidth}px`; - panel.style.height = `${newHeight}px`; - - // Update stored size - this.size.width = newWidth; - this.size.height = newHeight; - - event.preventDefault(); - } - - /** - * Stop resize operation - */ - stopResize() { - if (!this.isResizing) return; - - this.isResizing = false; - - // Clean up event handlers - if (this._resizeHandlers) { - document.removeEventListener('mousemove', this._resizeHandlers.move); - document.removeEventListener('mouseup', this._resizeHandlers.up); - delete this._resizeHandlers; - } - } - - /** - * Position the control based on compass position (used by show method) - */ - positionControl() { - if (!this.element) return; - - // Use the compass positioning from setupStyles - this.storeOriginalPosition(); - } - - /** - * Build the control content (to be overridden by subclasses) - */ - buildContent() { - // Default implementation - subclasses should override this - const content = this.element?.querySelector('.control-content'); - if (content) { - content.innerHTML = this.config.defaultContent; - } - } - - /** - * Show the control - */ - show() { - return this.safeOperation(() => { - if (!this.element) { - this.createElement(); - } - - document.body.appendChild(this.element); - this.positionControl(); - this.buildContent(); - - return this.element; - }, null, 'show'); - } - - /** - * Hide the control - */ - hide() { - return this.safeOperation(() => { - if (this.element && this.element.parentNode) { - this.element.parentNode.removeChild(this.element); - } - }, null, 'hide'); - } - - /** - * Destroy the control and clean up resources - */ - destroy() { - return this.safeOperation(() => { - // Clean up event listeners - for (const [element, event, handler] of this.eventHandlers.values()) { - element.removeEventListener(event, handler); - } - this.eventHandlers.clear(); - - // Remove element from DOM - if (this.element && this.element.parentNode) { - this.element.parentNode.removeChild(this.element); - } - - this.element = null; - }, null, 'destroy'); - } -} - -// Export for module systems or attach to global for direct usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = ControlBase; -} else { - window.ControlBase = ControlBase; -} \ No newline at end of file diff --git a/markitect/static/js/controls/debug-control.js b/markitect/static/js/controls/debug-control.js deleted file mode 100644 index 1135235b..00000000 --- a/markitect/static/js/controls/debug-control.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Debug Control - Displays debug information and system messages - * Implements the Robustness Principle with Fail Fast mode support - */ - -class DebugControl extends ControlBase { - constructor() { - super(); - this.config = { - icon: 'πͺ²', - title: 'Debug', - className: 'debug-control', - defaultContent: 'Click to view debug information', - ariaLabel: 'Debug Control', - position: 'w' - }; - - // Store messages for debug display - this.messages = []; - } - - buildContent() { - const content = this.element?.querySelector('.control-content'); - if (content) { - const messages = window.MarkitectDebugSystem ? - window.MarkitectDebugSystem.getMessages() : []; - - content.innerHTML = ` -No debug messages yet
' - } -Error generating edit tools
', 'generateEditToolsHTML'); - } - - /** - * Print the document - */ - printDocument() { - return this.safeOperation(() => { - window.print(); - - // Show feedback - this.showActionFeedback('π¨οΈ Print dialog opened', '#28a745'); - }, null, 'printDocument'); - } - - /** - * Save document (placeholder - would integrate with actual save system) - */ - saveDocument() { - return this.safeOperation(() => { - // In a real implementation, this would save to a backend - this.lastSaveTime = Date.now(); - this.unsavedChanges = false; - - // Update display - this.buildContent(); - - // Show feedback - this.showActionFeedback('πΎ Document saved', '#007bff'); - }, null, 'saveDocument'); - } - - /** - * Export document to various formats - */ - exportDocument() { - return this.safeOperation(() => { - const contentArea = document.querySelector('#markitect-content') || document.body; - const htmlContent = contentArea.innerHTML; - const textContent = contentArea.textContent; - - // Create export menu - const exportMenu = document.createElement('div'); - exportMenu.style.cssText = ` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: white; - border: 2px solid #007bff; - border-radius: 8px; - padding: 1rem; - z-index: 10000; - box-shadow: 0 4px 20px rgba(0,0,0,0.3); - `; - - exportMenu.innerHTML = ` -Error displaying statistics
', 'formatStatistics'); - } - - /** - * Refresh statistics and update display - */ - refreshStats() { - return this.safeOperation(() => { - // Save current stats as previous - this.previousStats = { ...this.stats }; - - // Analyze document - this.analyzeDocument(); - - // Update display - this.buildContent(); - - // Show success feedback - const refreshBtn = this.element?.querySelector('button'); - if (refreshBtn) { - const originalText = refreshBtn.innerHTML; - refreshBtn.innerHTML = 'β Updated'; - - setTimeout(() => { - refreshBtn.innerHTML = originalText; - }, 1000); - } - - }, null, 'refreshStats'); - } - - /** - * Export statistics to various formats - */ - exportStats() { - return this.safeOperation(() => { - const exportData = { - timestamp: new Date().toISOString(), - document: { - title: document.title || 'Untitled Document', - url: window.location.href - }, - statistics: this.stats, - metadata: { - wordsPerMinute: this.wordsPerMinute, - analysisDate: new Date(this.lastUpdateTime).toISOString() - } - }; - - // Create downloadable JSON - const dataStr = JSON.stringify(exportData, null, 2); - const dataBlob = new Blob([dataStr], { type: 'application/json' }); - const url = URL.createObjectURL(dataBlob); - - // Create temporary download link - const link = document.createElement('a'); - link.href = url; - link.download = `document-stats-${new Date().toISOString().split('T')[0]}.json`; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - - // Clean up - URL.revokeObjectURL(url); - - // Show feedback - const exportBtn = this.element?.querySelector('button:last-child'); - if (exportBtn) { - const originalText = exportBtn.innerHTML; - exportBtn.innerHTML = 'β Exported'; - exportBtn.style.background = '#28a745'; - - setTimeout(() => { - exportBtn.innerHTML = originalText; - exportBtn.style.background = '#28a745'; - }, 2000); - } - - }, null, 'exportStats'); - } - - /** - * Get reading difficulty score (Flesch Reading Ease approximation) - */ - calculateReadabilityScore() { - return this.safeOperation(() => { - if (this.stats.sentences === 0 || this.stats.words === 0) { - return { score: 0, level: 'Unknown' }; - } - - const avgWordsPerSentence = this.stats.words / this.stats.sentences; - const avgSyllablesPerWord = 1.5; // Simplified approximation - - // Flesch Reading Ease formula (simplified) - const score = 206.835 - (1.015 * avgWordsPerSentence) - (84.6 * avgSyllablesPerWord); - - let level; - if (score >= 90) level = 'Very Easy'; - else if (score >= 80) level = 'Easy'; - else if (score >= 70) level = 'Fairly Easy'; - else if (score >= 60) level = 'Standard'; - else if (score >= 50) level = 'Fairly Difficult'; - else if (score >= 30) level = 'Difficult'; - else level = 'Very Difficult'; - - return { score: Math.round(score), level }; - }, { score: 0, level: 'Unknown' }, 'calculateReadabilityScore'); - } - - /** - * Build the control content - * Override of base class method to provide status-specific functionality - */ - buildContent() { - return this.safeOperation(() => { - // Analyze document first - this.analyzeDocument(); - - // Generate and set content - const content = this.element?.querySelector('.control-content'); - if (content) { - content.innerHTML = this.formatStatistics(); - - // Store reference to this control for onclick handlers - this.element.statusControl = this; - } - - // Set up auto-refresh for dynamic content - if (this.updateInterval) { - clearInterval(this.updateInterval); - } - - this.updateInterval = setInterval(() => { - this.refreshStats(); - }, 10000); // Update every 10 seconds - - }, null, 'buildContent'); - } - - /** - * Clean up resources when control is destroyed - */ - destroy() { - if (this.updateInterval) { - clearInterval(this.updateInterval); - this.updateInterval = null; - } - super.destroy(); - } -} - -// Export for module systems or attach to global for direct usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = StatusControl; -} else { - window.StatusControl = StatusControl; -} \ No newline at end of file diff --git a/markitect/static/js/tests/test_edit.html b/markitect/static/js/tests/test_edit.html index 8076d97e..813b65bf 100644 --- a/markitect/static/js/tests/test_edit.html +++ b/markitect/static/js/tests/test_edit.html @@ -131,8 +131,8 @@ - - + + diff --git a/markitect/templates/document.html b/markitect/templates/document.html index fe2718db..67de7f8a 100644 --- a/markitect/templates/document.html +++ b/markitect/templates/document.html @@ -126,11 +126,11 @@ - - - - - + + + + + diff --git a/markitect/templates/edit-mode-fixed.html b/markitect/templates/edit-mode-fixed.html index 6fc88414..114aa9ca 100644 --- a/markitect/templates/edit-mode-fixed.html +++ b/markitect/templates/edit-mode-fixed.html @@ -28,11 +28,11 @@ - - - - - + + + + + diff --git a/testdrive-jsui/README.md b/testdrive-jsui/README.md index 66723522..fe261c26 100644 --- a/testdrive-jsui/README.md +++ b/testdrive-jsui/README.md @@ -128,7 +128,7 @@ The plugin supports various configuration options: ## Extending the Plugin ### Adding New Controls -1. Create new control in `static/js/controls/` +1. Create new control in `../capabilities/testdrive-jsui/js/controls/` 2. Extend `ControlBase` class 3. Register in `main.js` initialization 4. Add compass position (nw, ne, e, se, s, sw, w, nw) diff --git a/testdrive-jsui/static/js/controls/contents-control.js b/testdrive-jsui/static/js/controls/contents-control.js deleted file mode 100644 index 680dbc33..00000000 --- a/testdrive-jsui/static/js/controls/contents-control.js +++ /dev/null @@ -1,287 +0,0 @@ -/** - * ContentsControl - Table of Contents Display Control - * - * Provides an interactive table of contents for document navigation. - * Extracts headings from the document and displays them in a hierarchical - * structure with clickable links for quick navigation. - * - * Features: - * - Automatic heading extraction from document - * - Hierarchical display with proper indentation - * - Clickable navigation links with smooth scrolling - * - Real-time updates when document structure changes - * - Search functionality within the table of contents - * - * Dependencies: - * - ControlBase (base control functionality) - */ - -/** - * ContentsControl - Interactive table of contents control - * - * Built on the base class architecture for consistency with other panels. - * Only implements content-specific functionality while inheriting all - * common panel behavior from ControlBase. - */ -class ContentsControl extends ControlBase { - constructor() { - super(); - - // Configure for contents functionality - this.config = { - icon: 'π', - title: 'Contents', - className: 'contents-control', - defaultContent: 'Loading table of contents...', - ariaLabel: 'Table of Contents Control', - position: 'w' // West positioning - }; - - // Contents-specific state - this.headings = []; - this.lastScanTime = null; - this.updateInterval = null; - this.searchQuery = ''; - } - - /** - * Generate contents control content (called by base class buildContent) - */ - generateContent() { - // Extract headings first - this.extractHeadings(); - - return this.safeOperation(() => { - if (this.headings.length === 0) { - return ` -No headings found in document
- -Panel content goes here...
`; - } - - /** - * Show the control - */ - show() { - return this.safeOperation(() => { - if (!this.element) { - this.createElement(); - } - - document.body.appendChild(this.element); - this.positionControl(); - this.buildContent(); - - return this.element; - }, null, 'show'); - } - - /** - * Hide the control - */ - hide() { - return this.safeOperation(() => { - if (this.element && this.element.parentNode) { - this.element.parentNode.removeChild(this.element); - } - }, null, 'hide'); - } - - /** - * Destroy the control and clean up resources - */ - destroy() { - return this.safeOperation(() => { - // Clean up event listeners - for (const [element, event, handler] of this.eventHandlers.values()) { - element.removeEventListener(event, handler); - } - this.eventHandlers.clear(); - - // Remove element from DOM - if (this.element && this.element.parentNode) { - this.element.parentNode.removeChild(this.element); - } - - this.element = null; - }, null, 'destroy'); - } -} - -// Export for module systems or attach to global for direct usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = ControlBase; -} else { - window.ControlBase = ControlBase; -} \ No newline at end of file diff --git a/testdrive-jsui/static/js/controls/debug-control.js b/testdrive-jsui/static/js/controls/debug-control.js deleted file mode 100644 index 431659ee..00000000 --- a/testdrive-jsui/static/js/controls/debug-control.js +++ /dev/null @@ -1,483 +0,0 @@ -/** - * DebugControl - System Debug Information and Message Display Control - * - * Provides comprehensive debugging capabilities including system message display, - * error tracking, performance monitoring, and development tools. Essential for - * troubleshooting and development workflows within the TestDrive-JSUI environment. - * - * Features: - * - Real-time debug message display with categorization - * - Error tracking with stack trace information - * - Performance metrics and timing measurements - * - System information display (browser, viewport, etc.) - * - Message filtering and search capabilities - * - Export functionality for debug logs - * - Integration with MarkitectDebugSystem - * - * Dependencies: - * - ControlBase (base control functionality) - * - MarkitectDebugSystem (optional, for enhanced debugging) - */ - -/** - * DebugControl - Development and debugging information control - * - * This control serves as a central hub for all debugging activities, - * providing developers with essential information for troubleshooting - * and performance optimization. - */ -class DebugControl extends ControlBase { - constructor() { - super(); - - // Configure for debug functionality - this.config = { - icon: 'π', - title: 'Debug', - className: 'debug-control', - defaultContent: 'Debug information loading...', - ariaLabel: 'Debug Information Control', - position: 'w' // West positioning - }; - - // Debug control state - this.messages = []; - this.maxMessages = 100; - this.messageFilter = 'all'; // 'all', 'error', 'warn', 'info', 'debug' - this.autoScroll = true; - this.isRecording = true; - this.startTime = Date.now(); - this.performanceMarks = new Map(); - - this.initializeDebugCapture(); - } - - /** - * Initialize debug message capture - */ - initializeDebugCapture() { - return this.safeOperation(() => { - // Capture console messages - this.originalConsole = { - log: console.log, - error: console.error, - warn: console.warn, - info: console.info, - debug: console.debug - }; - - // Override console methods to capture messages - console.log = (...args) => { - this.originalConsole.log(...args); - this.addDebugMessage('LOG', args.join(' '), 'info'); - }; - - console.error = (...args) => { - this.originalConsole.error(...args); - this.addDebugMessage('ERROR', args.join(' '), 'error'); - }; - - console.warn = (...args) => { - this.originalConsole.warn(...args); - this.addDebugMessage('WARN', args.join(' '), 'warn'); - }; - - console.info = (...args) => { - this.originalConsole.info(...args); - this.addDebugMessage('INFO', args.join(' '), 'info'); - }; - - console.debug = (...args) => { - this.originalConsole.debug(...args); - this.addDebugMessage('DEBUG', args.join(' '), 'debug'); - }; - - // Capture global errors - window.addEventListener('error', (event) => { - this.addDebugMessage('ERROR', `${event.message} at ${event.filename}:${event.lineno}`, 'error'); - }); - - // Capture unhandled promise rejections - window.addEventListener('unhandledrejection', (event) => { - this.addDebugMessage('PROMISE_REJECT', `Unhandled promise rejection: ${event.reason}`, 'error'); - }); - - }, null, 'initializeDebugCapture'); - } - - /** - * Add a debug message to the log - */ - addDebugMessage(category, message, level = 'info') { - return this.safeOperation(() => { - if (!this.isRecording) return; - - const debugMessage = { - id: Date.now() + Math.random(), - timestamp: Date.now(), - category, - message, - level, - displayTime: new Date().toLocaleTimeString(), - relativeTime: Date.now() - this.startTime - }; - - this.messages.push(debugMessage); - - // Limit message history - if (this.messages.length > this.maxMessages) { - this.messages.shift(); - } - - // Update display if visible - if (this.element && this.isExpanded) { - this.updateMessageDisplay(); - } - - }, null, 'addDebugMessage'); - } - - /** - * Get messages filtered by current filter setting - */ - getFilteredMessages() { - if (this.messageFilter === 'all') { - return this.messages; - } - return this.messages.filter(msg => msg.level === this.messageFilter); - } - - /** - * Generate system information HTML - */ - generateSystemInfoHTML() { - return this.safeOperation(() => { - const systemInfo = { - userAgent: navigator.userAgent, - viewport: `${window.innerWidth}x${window.innerHeight}`, - screen: `${screen.width}x${screen.height}`, - colorDepth: screen.colorDepth, - timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, - language: navigator.language, - cookieEnabled: navigator.cookieEnabled, - onlineStatus: navigator.onLine ? 'Online' : 'Offline', - protocol: window.location.protocol, - memory: performance.memory ? - `Used: ${Math.round(performance.memory.usedJSHeapSize / 1024 / 1024)}MB` : - 'Not available' - }; - - // Get Markitect version from config or default - const markitectVersion = window.markitectConfig?.version || 'Unknown'; - - return ` -Error displaying messages
', 'generateMessagesHTML'); - } - - /** - * Generate control buttons HTML - */ - generateControlButtonsHTML() { - return ` -Error generating edit tools
', 'generateEditToolsHTML'); - } - - /** - * Print the document - */ - printDocument() { - return this.safeOperation(() => { - window.print(); - - // Show feedback - this.showActionFeedback('π¨οΈ Print dialog opened', '#28a745'); - }, null, 'printDocument'); - } - - /** - * Save document (placeholder - would integrate with actual save system) - */ - saveDocument() { - return this.safeOperation(() => { - // In a real implementation, this would save to a backend - this.lastSaveTime = Date.now(); - this.unsavedChanges = false; - - // Update display - this.buildContent(); - - // Show feedback - this.showActionFeedback('πΎ Document saved', '#007bff'); - }, null, 'saveDocument'); - } - - /** - * Export document to various formats - */ - exportDocument() { - return this.safeOperation(() => { - const contentArea = document.querySelector('#markitect-content') || document.body; - const htmlContent = contentArea.innerHTML; - const textContent = contentArea.textContent; - - // Create export menu - const exportMenu = document.createElement('div'); - exportMenu.style.cssText = ` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: white; - border: 2px solid #007bff; - border-radius: 8px; - padding: 1rem; - z-index: 10000; - box-shadow: 0 4px 20px rgba(0,0,0,0.3); - `; - - exportMenu.innerHTML = ` -Error displaying statistics
', 'formatStatistics'); - } - - /** - * Refresh statistics and update display - */ - refreshStats() { - return this.safeOperation(() => { - // Save current stats as previous - this.previousStats = { ...this.stats }; - - // Analyze document - this.analyzeDocument(); - - // Update display - this.buildContent(); - - // Show success feedback - const refreshBtn = this.element?.querySelector('button'); - if (refreshBtn) { - const originalText = refreshBtn.innerHTML; - refreshBtn.innerHTML = 'β Updated'; - - setTimeout(() => { - refreshBtn.innerHTML = originalText; - }, 1000); - } - - }, null, 'refreshStats'); - } - - /** - * Export statistics to various formats - */ - exportStats() { - return this.safeOperation(() => { - const exportData = { - timestamp: new Date().toISOString(), - document: { - title: document.title || 'Untitled Document', - url: window.location.href - }, - statistics: this.stats, - metadata: { - wordsPerMinute: this.wordsPerMinute, - analysisDate: new Date(this.lastUpdateTime).toISOString() - } - }; - - // Create downloadable JSON - const dataStr = JSON.stringify(exportData, null, 2); - const dataBlob = new Blob([dataStr], { type: 'application/json' }); - const url = URL.createObjectURL(dataBlob); - - // Create temporary download link - const link = document.createElement('a'); - link.href = url; - link.download = `document-stats-${new Date().toISOString().split('T')[0]}.json`; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - - // Clean up - URL.revokeObjectURL(url); - - // Show feedback - const exportBtn = this.element?.querySelector('button:last-child'); - if (exportBtn) { - const originalText = exportBtn.innerHTML; - exportBtn.innerHTML = 'β Exported'; - exportBtn.style.background = '#28a745'; - - setTimeout(() => { - exportBtn.innerHTML = originalText; - exportBtn.style.background = '#28a745'; - }, 2000); - } - - }, null, 'exportStats'); - } - - /** - * Get reading difficulty score (Flesch Reading Ease approximation) - */ - calculateReadabilityScore() { - return this.safeOperation(() => { - if (this.stats.sentences === 0 || this.stats.words === 0) { - return { score: 0, level: 'Unknown' }; - } - - const avgWordsPerSentence = this.stats.words / this.stats.sentences; - const avgSyllablesPerWord = 1.5; // Simplified approximation - - // Flesch Reading Ease formula (simplified) - const score = 206.835 - (1.015 * avgWordsPerSentence) - (84.6 * avgSyllablesPerWord); - - let level; - if (score >= 90) level = 'Very Easy'; - else if (score >= 80) level = 'Easy'; - else if (score >= 70) level = 'Fairly Easy'; - else if (score >= 60) level = 'Standard'; - else if (score >= 50) level = 'Fairly Difficult'; - else if (score >= 30) level = 'Difficult'; - else level = 'Very Difficult'; - - return { score: Math.round(score), level }; - }, { score: 0, level: 'Unknown' }, 'calculateReadabilityScore'); - } - - /** - * Build the control content - * Override of base class method to provide status-specific functionality - */ - /** - * Generate status control content (called by base class buildContent) - */ - generateContent() { - // Analyze document first - this.analyzeDocument(); - - return this.safeOperation(() => { - return this.formatStatistics(); - }, 'Error generating status content', 'generateContent'); - } - - /** - * Override buildContent to add control reference and auto-refresh - */ - buildContent() { - super.buildContent(); - - // Store reference to this control for onclick handlers - if (this.element) { - this.element.statusControl = this; - } - - // Set up auto-refresh for dynamic content - if (this.updateInterval) { - clearInterval(this.updateInterval); - } - - this.updateInterval = setInterval(() => { - this.refreshStats(); - }, 10000); // Update every 10 seconds - } - - /** - * Clean up resources when control is destroyed - */ - destroy() { - if (this.updateInterval) { - clearInterval(this.updateInterval); - this.updateInterval = null; - } - super.destroy(); - } -} - -// Export for module systems or attach to global for direct usage -if (typeof module !== 'undefined' && module.exports) { - module.exports = StatusControl; -} else { - window.StatusControl = StatusControl; -} \ No newline at end of file diff --git a/testdrive-jsui/static/js/tests/test_edit.html b/testdrive-jsui/static/js/tests/test_edit.html index 8076d97e..813b65bf 100644 --- a/testdrive-jsui/static/js/tests/test_edit.html +++ b/testdrive-jsui/static/js/tests/test_edit.html @@ -131,8 +131,8 @@ - - + + diff --git a/testdrive-jsui/test.html b/testdrive-jsui/test.html index 69da30ef..073f1de3 100644 --- a/testdrive-jsui/test.html +++ b/testdrive-jsui/test.html @@ -110,11 +110,11 @@ - - - - - + + + + +