fix: update deployment source with enhanced ControlBase files
Copy enhanced ControlBase and control files to deployment source directory. This resolves the deployment cache issue where md-render --edit was using old control files instead of the new enhanced ControlBase architecture. Now all controls properly use the enhanced ControlBase with 5 behaviors: - Icon-only collapsed state - Expand/drag functionality - Bottom-left resize handle - Collapse button returns to original position - Header toggle for content visibility The enhanced control system is now fully deployed and functional.
This commit is contained in:
@@ -1,93 +1,336 @@
|
||||
/**
|
||||
* Contents Control - Displays document table of contents
|
||||
* Implements the Robustness Principle with Fail Fast mode support
|
||||
* 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
|
||||
* - Collapsible sections for better organization
|
||||
* - Search functionality within the table of contents
|
||||
*
|
||||
* Dependencies:
|
||||
* - ControlBase (base control functionality)
|
||||
*/
|
||||
|
||||
class ContentsControl {
|
||||
/**
|
||||
* ContentsControl - Interactive table of contents control
|
||||
*
|
||||
* This control scans the document for headings (h1-h6) and presents them
|
||||
* in a navigable tree structure. Users can click on any heading to jump
|
||||
* directly to that section with smooth scrolling.
|
||||
*/
|
||||
class ContentsControl extends ControlBase {
|
||||
constructor() {
|
||||
this.control = Object.create(Control);
|
||||
this.control.config = {
|
||||
icon: '☰',
|
||||
super();
|
||||
|
||||
// Configure for contents functionality
|
||||
this.config = {
|
||||
icon: '📋',
|
||||
title: 'Contents',
|
||||
className: 'contents-control',
|
||||
defaultContent: 'Click to view table of contents',
|
||||
ariaLabel: 'Contents Control',
|
||||
position: 'w'
|
||||
defaultContent: 'Loading table of contents...',
|
||||
ariaLabel: 'Table of Contents Control',
|
||||
position: 'w' // West positioning
|
||||
};
|
||||
|
||||
// Bind methods to control
|
||||
this.control.buildContent = () => {
|
||||
const content = this.control.element.querySelector('.control-content');
|
||||
const headings = this.extractHeadings();
|
||||
// Contents-specific state
|
||||
this.headings = [];
|
||||
this.lastScanTime = null;
|
||||
this.updateInterval = null;
|
||||
this.searchQuery = '';
|
||||
}
|
||||
|
||||
content.innerHTML = `
|
||||
<div style="padding: 1rem; font-size: 0.8rem;">
|
||||
<h4 style="margin-top: 0;">Table of Contents</h4>
|
||||
<div style="max-height: 250px; overflow-y: auto;">
|
||||
${headings.length > 0 ?
|
||||
headings.map(heading =>
|
||||
`<div style="margin-bottom: 0.3rem; padding-left: ${(heading.level - 1) * 15}px;">
|
||||
<a href="#${heading.id}"
|
||||
style="text-decoration: none; color: #0066cc; font-size: ${0.9 - (heading.level - 1) * 0.05}rem;"
|
||||
onclick="document.getElementById('${heading.id}')?.scrollIntoView({behavior: 'smooth'})">
|
||||
${heading.text}
|
||||
</a>
|
||||
</div>`
|
||||
).join('') :
|
||||
'<p>No headings found in document</p>'
|
||||
}
|
||||
/**
|
||||
* Extract all headings from the document
|
||||
* Creates a hierarchical structure of the document's heading elements
|
||||
*/
|
||||
extractHeadings() {
|
||||
return this.safeOperation(() => {
|
||||
const headingSelectors = 'h1, h2, h3, h4, h5, h6';
|
||||
const headingElements = document.querySelectorAll(headingSelectors);
|
||||
const extractedHeadings = [];
|
||||
|
||||
headingElements.forEach((heading, index) => {
|
||||
const level = parseInt(heading.tagName.charAt(1));
|
||||
const text = heading.textContent.trim();
|
||||
|
||||
// Generate or use existing ID for anchor links
|
||||
let id = heading.id;
|
||||
if (!id) {
|
||||
id = text.toLowerCase()
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.substring(0, 50);
|
||||
|
||||
// Ensure uniqueness
|
||||
let counter = 1;
|
||||
let uniqueId = id;
|
||||
while (document.getElementById(uniqueId)) {
|
||||
uniqueId = `${id}-${counter}`;
|
||||
counter++;
|
||||
}
|
||||
|
||||
heading.id = uniqueId;
|
||||
id = uniqueId;
|
||||
}
|
||||
|
||||
extractedHeadings.push({
|
||||
id,
|
||||
text,
|
||||
level,
|
||||
element: heading,
|
||||
index
|
||||
});
|
||||
});
|
||||
|
||||
this.headings = extractedHeadings;
|
||||
this.lastScanTime = Date.now();
|
||||
return extractedHeadings;
|
||||
|
||||
}, [], 'extractHeadings');
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter headings based on search query
|
||||
*/
|
||||
filterHeadings(headings, query) {
|
||||
if (!query || query.trim() === '') {
|
||||
return headings;
|
||||
}
|
||||
|
||||
const normalizedQuery = query.toLowerCase().trim();
|
||||
return headings.filter(heading =>
|
||||
heading.text.toLowerCase().includes(normalizedQuery)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate HTML for the table of contents
|
||||
*/
|
||||
generateContentsHTML(headings = null) {
|
||||
return this.safeOperation(() => {
|
||||
const displayHeadings = headings || this.headings;
|
||||
|
||||
if (displayHeadings.length === 0) {
|
||||
return `
|
||||
<div style="padding: 1rem; text-align: center; color: #666;">
|
||||
<p>No headings found in document</p>
|
||||
<button onclick="this.closest('.contents-control').contentsControl.refreshContents()"
|
||||
style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
🔄 Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin-top: 1rem; font-size: 0.7rem; color: #666;">
|
||||
${headings.length} heading${headings.length !== 1 ? 's' : ''} found
|
||||
`;
|
||||
}
|
||||
|
||||
const searchHTML = `
|
||||
<div style="padding: 0.5rem; border-bottom: 1px solid #eee;">
|
||||
<input type="text"
|
||||
placeholder="Search headings..."
|
||||
style="width: 100%; padding: 0.25rem; border: 1px solid #ddd; border-radius: 3px; font-size: 0.8rem;"
|
||||
onkeyup="this.closest('.contents-control').contentsControl.handleSearch(this.value)">
|
||||
</div>
|
||||
`;
|
||||
|
||||
const contentsHTML = displayHeadings.map(heading => {
|
||||
const indentLevel = Math.max(0, heading.level - 1);
|
||||
const indentPx = indentLevel * 15;
|
||||
|
||||
return `
|
||||
<div class="contents-item"
|
||||
style="margin-bottom: 0.3rem; padding-left: ${indentPx}px;">
|
||||
<a href="#${heading.id}"
|
||||
onclick="event.preventDefault(); this.closest('.contents-control').contentsControl.navigateToHeading('${heading.id}')"
|
||||
style="display: block; padding: 0.2rem 0; color: #007bff; text-decoration: none; font-size: 0.8rem; line-height: 1.2;"
|
||||
onmouseover="this.style.backgroundColor='#f8f9fa'"
|
||||
onmouseout="this.style.backgroundColor='transparent'">
|
||||
<span class="heading-level" style="color: #666; margin-right: 0.3rem;">H${heading.level}</span>
|
||||
<span class="heading-text">${heading.text}</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div style="padding: 0;">
|
||||
${searchHTML}
|
||||
<div style="max-height: 300px; overflow-y: auto; padding: 0.5rem;">
|
||||
<div style="margin-bottom: 0.5rem; font-size: 0.7rem; color: #666; text-align: center;">
|
||||
Found ${displayHeadings.length} heading${displayHeadings.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
${contentsHTML}
|
||||
</div>
|
||||
<div style="padding: 0.5rem; border-top: 1px solid #eee; text-align: center;">
|
||||
<button onclick="this.closest('.contents-control').contentsControl.refreshContents()"
|
||||
style="padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
🔄 Refresh Contents
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.control.isExpanded = true;
|
||||
};
|
||||
|
||||
this.control.toggle = () => {
|
||||
if (this.control.isExpanded) {
|
||||
this.control.element.querySelector('.control-content').style.display = 'none';
|
||||
this.control.isExpanded = false;
|
||||
} else {
|
||||
this.control.buildContent();
|
||||
this.control.element.querySelector('.control-content').style.display = 'block';
|
||||
}
|
||||
};
|
||||
}, '<p>Error generating contents</p>', 'generateContentsHTML');
|
||||
}
|
||||
|
||||
extractHeadings() {
|
||||
const headings = [];
|
||||
const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
|
||||
/**
|
||||
* 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'
|
||||
});
|
||||
|
||||
elements.forEach((heading, index) => {
|
||||
const level = parseInt(heading.tagName.charAt(1));
|
||||
const text = heading.textContent || heading.innerText || '';
|
||||
let id = heading.id;
|
||||
// Highlight the target temporarily
|
||||
const originalStyle = targetElement.style.backgroundColor;
|
||||
targetElement.style.backgroundColor = '#fff3cd';
|
||||
targetElement.style.transition = 'background-color 0.3s ease';
|
||||
|
||||
// Generate ID if not present
|
||||
if (!id) {
|
||||
id = text.toLowerCase()
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '') || `heading-${index}`;
|
||||
heading.id = id;
|
||||
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;
|
||||
}
|
||||
|
||||
headings.push({
|
||||
level: level,
|
||||
text: text.trim(),
|
||||
id: id
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
return headings;
|
||||
// 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');
|
||||
}
|
||||
|
||||
createControl() {
|
||||
return this.control.createControl();
|
||||
/**
|
||||
* Clean up resources when control is destroyed
|
||||
*/
|
||||
destroy() {
|
||||
if (this.updateInterval) {
|
||||
clearInterval(this.updateInterval);
|
||||
this.updateInterval = null;
|
||||
}
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
window.ContentsControl = ContentsControl;
|
||||
// Export for module systems or attach to global for direct usage
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = ContentsControl;
|
||||
} else {
|
||||
window.ContentsControl = ContentsControl;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,63 +1,479 @@
|
||||
/**
|
||||
* Debug Control - Displays debug information and system messages
|
||||
* Implements the Robustness Principle with Fail Fast mode support
|
||||
* 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)
|
||||
*/
|
||||
|
||||
class DebugControl {
|
||||
/**
|
||||
* 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() {
|
||||
this.control = Object.create(Control);
|
||||
this.control.config = {
|
||||
icon: '🪲',
|
||||
super();
|
||||
|
||||
// Configure for debug functionality
|
||||
this.config = {
|
||||
icon: '🐛',
|
||||
title: 'Debug',
|
||||
className: 'debug-control',
|
||||
defaultContent: 'Click to view debug information',
|
||||
ariaLabel: 'Debug Control',
|
||||
position: 'w'
|
||||
defaultContent: 'Debug information loading...',
|
||||
ariaLabel: 'Debug Information Control',
|
||||
position: 'w' // West positioning
|
||||
};
|
||||
|
||||
// Bind methods to control
|
||||
this.control.buildContent = () => {
|
||||
const content = this.control.element.querySelector('.control-content');
|
||||
const messages = window.MarkitectDebugSystem ?
|
||||
window.MarkitectDebugSystem.getMessages() : [];
|
||||
// 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();
|
||||
|
||||
content.innerHTML = `
|
||||
<div style="padding: 1rem; font-size: 0.8rem;">
|
||||
<h4 style="margin-top: 0;">Debug Messages</h4>
|
||||
<div style="max-height: 200px; overflow-y: auto;">
|
||||
${messages.length > 0 ?
|
||||
messages.slice(-10).map(msg =>
|
||||
`<div style="margin-bottom: 0.5rem; padding: 0.3rem; background: #f8f9fa; border-radius: 3px;">
|
||||
<strong>[${msg.category}]</strong> ${msg.component}: ${msg.message}
|
||||
<div style="font-size: 0.7rem; color: #666;">${msg.displayTime}</div>
|
||||
</div>`
|
||||
).join('') :
|
||||
'<p>No debug messages yet</p>'
|
||||
}
|
||||
</div>
|
||||
<button onclick="if(window.MarkitectDebugSystem) window.MarkitectDebugSystem.clearMessages(); this.closest('.control-panel').querySelector('.control-content').innerHTML = '<div style="padding: 1rem; font-size: 0.8rem;"><h4 style="margin-top: 0;">Debug Messages</h4><p>Messages cleared</p></div>'"
|
||||
style="margin-top: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
Clear Messages
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
this.control.isExpanded = true;
|
||||
};
|
||||
|
||||
this.control.toggle = () => {
|
||||
if (this.control.isExpanded) {
|
||||
this.control.element.querySelector('.control-content').style.display = 'none';
|
||||
this.control.isExpanded = false;
|
||||
} else {
|
||||
this.control.buildContent();
|
||||
this.control.element.querySelector('.control-content').style.display = 'block';
|
||||
}
|
||||
};
|
||||
this.initializeDebugCapture();
|
||||
}
|
||||
|
||||
createControl() {
|
||||
return this.control.createControl();
|
||||
/**
|
||||
* 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'
|
||||
};
|
||||
|
||||
return `
|
||||
<div class="system-info" style="margin-bottom: 1rem; padding: 0.5rem; background: #f8f9fa; border-radius: 3px; font-size: 0.7rem;">
|
||||
<strong>System Information:</strong><br>
|
||||
<div style="margin-top: 0.3rem; line-height: 1.3;">
|
||||
<div><strong>Viewport:</strong> ${systemInfo.viewport}</div>
|
||||
<div><strong>Screen:</strong> ${systemInfo.screen}</div>
|
||||
<div><strong>Memory:</strong> ${systemInfo.memory}</div>
|
||||
<div><strong>Language:</strong> ${systemInfo.language}</div>
|
||||
<div><strong>Status:</strong> ${systemInfo.onlineStatus}</div>
|
||||
<div><strong>Protocol:</strong> ${systemInfo.protocol}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
}, '', 'generateSystemInfoHTML');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate performance metrics HTML
|
||||
*/
|
||||
generatePerformanceHTML() {
|
||||
return this.safeOperation(() => {
|
||||
const timing = performance.timing;
|
||||
const navigation = performance.getEntriesByType('navigation')[0];
|
||||
|
||||
const metrics = {
|
||||
pageLoad: timing.loadEventEnd - timing.navigationStart,
|
||||
domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
|
||||
firstByte: timing.responseStart - timing.navigationStart,
|
||||
uptime: Date.now() - this.startTime,
|
||||
messagesCount: this.messages.length
|
||||
};
|
||||
|
||||
return `
|
||||
<div class="performance-info" style="margin-bottom: 1rem; padding: 0.5rem; background: #e7f3ff; border-radius: 3px; font-size: 0.7rem;">
|
||||
<strong>Performance Metrics:</strong><br>
|
||||
<div style="margin-top: 0.3rem; line-height: 1.3;">
|
||||
<div><strong>Page Load:</strong> ${metrics.pageLoad}ms</div>
|
||||
<div><strong>DOM Ready:</strong> ${metrics.domReady}ms</div>
|
||||
<div><strong>First Byte:</strong> ${metrics.firstByte}ms</div>
|
||||
<div><strong>Session Time:</strong> ${Math.round(metrics.uptime / 1000)}s</div>
|
||||
<div><strong>Debug Messages:</strong> ${metrics.messagesCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
}, '', 'generatePerformanceHTML');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate debug messages HTML
|
||||
*/
|
||||
generateMessagesHTML() {
|
||||
return this.safeOperation(() => {
|
||||
const filteredMessages = this.getFilteredMessages();
|
||||
|
||||
if (filteredMessages.length === 0) {
|
||||
return `
|
||||
<div style="text-align: center; padding: 1rem; color: #666; font-style: italic;">
|
||||
No ${this.messageFilter === 'all' ? '' : this.messageFilter + ' '}messages yet
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const messagesHTML = filteredMessages.slice(-20).map(msg => {
|
||||
const levelColors = {
|
||||
error: '#dc3545',
|
||||
warn: '#ffc107',
|
||||
info: '#17a2b8',
|
||||
debug: '#6c757d'
|
||||
};
|
||||
|
||||
const backgroundColor = levelColors[msg.level] || '#6c757d';
|
||||
const textColor = msg.level === 'warn' ? '#000' : '#fff';
|
||||
|
||||
return `
|
||||
<div class="debug-message" style="margin-bottom: 0.5rem; padding: 0.3rem; background: #f8f9fa; border-left: 3px solid ${backgroundColor}; font-size: 0.7rem; border-radius: 0 3px 3px 0;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.2rem;">
|
||||
<span style="background: ${backgroundColor}; color: ${textColor}; padding: 0.1rem 0.3rem; border-radius: 2px; font-size: 0.6rem; font-weight: bold;">
|
||||
${msg.category}
|
||||
</span>
|
||||
<span style="color: #666; font-size: 0.6rem;">
|
||||
${msg.displayTime}
|
||||
</span>
|
||||
</div>
|
||||
<div style="word-break: break-word; line-height: 1.2;">
|
||||
${msg.message}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div class="messages-container" style="max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 3px; padding: 0.5rem; background: white;">
|
||||
${messagesHTML}
|
||||
</div>
|
||||
`;
|
||||
|
||||
}, '<p>Error displaying messages</p>', 'generateMessagesHTML');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate control buttons HTML
|
||||
*/
|
||||
generateControlButtonsHTML() {
|
||||
return `
|
||||
<div class="debug-controls" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin: 0.5rem 0;">
|
||||
<button onclick="this.closest('.debug-control').debugControl.clearMessages()"
|
||||
style="padding: 0.3rem; font-size: 0.7rem; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
🗑️ Clear
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.debug-control').debugControl.exportMessages()"
|
||||
style="padding: 0.3rem; font-size: 0.7rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
💾 Export
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.debug-control').debugControl.toggleRecording()"
|
||||
style="padding: 0.3rem; font-size: 0.7rem; background: ${this.isRecording ? '#ffc107' : '#6c757d'}; color: ${this.isRecording ? '#000' : '#fff'}; border: none; border-radius: 3px; cursor: pointer;">
|
||||
${this.isRecording ? '⏸️ Pause' : '▶️ Record'}
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.debug-control').debugControl.addTestMessage()"
|
||||
style="padding: 0.3rem; font-size: 0.7rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
🧪 Test
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate filter controls HTML
|
||||
*/
|
||||
generateFilterControlsHTML() {
|
||||
const filters = ['all', 'error', 'warn', 'info', 'debug'];
|
||||
|
||||
const filterButtons = filters.map(filter => {
|
||||
const isActive = this.messageFilter === filter;
|
||||
return `
|
||||
<button onclick="this.closest('.debug-control').debugControl.setMessageFilter('${filter}')"
|
||||
style="padding: 0.2rem 0.4rem; margin-right: 0.2rem; font-size: 0.6rem; background: ${isActive ? '#007bff' : '#e9ecef'}; color: ${isActive ? 'white' : '#495057'}; border: none; border-radius: 2px; cursor: pointer;">
|
||||
${filter.toUpperCase()}
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div style="margin-bottom: 0.5rem; padding: 0.3rem; background: #f1f3f4; border-radius: 3px;">
|
||||
<div style="font-size: 0.7rem; margin-bottom: 0.3rem; color: #666;">Filter:</div>
|
||||
${filterButtons}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the message display
|
||||
*/
|
||||
updateMessageDisplay() {
|
||||
return this.safeOperation(() => {
|
||||
const messagesContainer = this.element?.querySelector('.messages-container');
|
||||
if (messagesContainer) {
|
||||
const parent = messagesContainer.parentElement;
|
||||
parent.innerHTML = this.generateMessagesHTML();
|
||||
|
||||
// Auto-scroll to bottom if enabled
|
||||
if (this.autoScroll) {
|
||||
const newContainer = parent.querySelector('.messages-container');
|
||||
if (newContainer) {
|
||||
newContainer.scrollTop = newContainer.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, null, 'updateMessageDisplay');
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all debug messages
|
||||
*/
|
||||
clearMessages() {
|
||||
this.messages = [];
|
||||
if (window.MarkitectDebugSystem) {
|
||||
window.MarkitectDebugSystem.clearMessages();
|
||||
}
|
||||
this.buildContent();
|
||||
}
|
||||
|
||||
/**
|
||||
* Export debug messages to file
|
||||
*/
|
||||
exportMessages() {
|
||||
return this.safeOperation(() => {
|
||||
const exportData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
session: {
|
||||
startTime: new Date(this.startTime).toISOString(),
|
||||
duration: Date.now() - this.startTime,
|
||||
messageCount: this.messages.length
|
||||
},
|
||||
system: {
|
||||
userAgent: navigator.userAgent,
|
||||
viewport: `${window.innerWidth}x${window.innerHeight}`,
|
||||
url: window.location.href
|
||||
},
|
||||
messages: this.messages
|
||||
};
|
||||
|
||||
const dataStr = JSON.stringify(exportData, null, 2);
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `debug-log-${new Date().toISOString().split('T')[0]}.json`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
this.addDebugMessage('EXPORT', 'Debug log exported successfully', 'info');
|
||||
|
||||
}, null, 'exportMessages');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle message recording
|
||||
*/
|
||||
toggleRecording() {
|
||||
this.isRecording = !this.isRecording;
|
||||
this.buildContent();
|
||||
this.addDebugMessage('CONTROL', `Recording ${this.isRecording ? 'started' : 'paused'}`, 'info');
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a test message
|
||||
*/
|
||||
addTestMessage() {
|
||||
const testMessages = [
|
||||
{ category: 'TEST', message: 'This is a test info message', level: 'info' },
|
||||
{ category: 'TEST', message: 'This is a test warning message', level: 'warn' },
|
||||
{ category: 'TEST', message: 'This is a test error message', level: 'error' },
|
||||
{ category: 'TEST', message: 'This is a test debug message', level: 'debug' }
|
||||
];
|
||||
|
||||
const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)];
|
||||
this.addDebugMessage(randomMessage.category, randomMessage.message, randomMessage.level);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set message filter
|
||||
*/
|
||||
setMessageFilter(filter) {
|
||||
this.messageFilter = filter;
|
||||
this.buildContent();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the control content
|
||||
* Override of base class method to provide debug-specific functionality
|
||||
*/
|
||||
buildContent() {
|
||||
return this.safeOperation(() => {
|
||||
const content = this.element?.querySelector('.control-content');
|
||||
if (content) {
|
||||
content.innerHTML = `
|
||||
<div style="padding: 1rem; font-size: 0.8rem;">
|
||||
<h4 style="margin-top: 0; margin-bottom: 1rem;">Debug Information</h4>
|
||||
|
||||
${this.generateSystemInfoHTML()}
|
||||
${this.generatePerformanceHTML()}
|
||||
${this.generateFilterControlsHTML()}
|
||||
${this.generateMessagesHTML()}
|
||||
${this.generateControlButtonsHTML()}
|
||||
|
||||
<div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; font-size: 0.7rem; color: #666; text-align: center;">
|
||||
Recording: ${this.isRecording ? '🟢 Active' : '🔴 Paused'} |
|
||||
Filter: ${this.messageFilter.toUpperCase()} |
|
||||
Messages: ${this.getFilteredMessages().length}/${this.messages.length}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Store reference to this control for onclick handlers
|
||||
this.element.debugControl = this;
|
||||
}
|
||||
}, null, 'buildContent');
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up resources when control is destroyed
|
||||
*/
|
||||
destroy() {
|
||||
// Restore original console methods
|
||||
if (this.originalConsole) {
|
||||
console.log = this.originalConsole.log;
|
||||
console.error = this.originalConsole.error;
|
||||
console.warn = this.originalConsole.warn;
|
||||
console.info = this.originalConsole.info;
|
||||
console.debug = this.originalConsole.debug;
|
||||
}
|
||||
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
window.DebugControl = DebugControl;
|
||||
// Export for module systems or attach to global for direct usage
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = DebugControl;
|
||||
} else {
|
||||
window.DebugControl = DebugControl;
|
||||
}
|
||||
@@ -1,70 +1,500 @@
|
||||
/**
|
||||
* Edit Control - Document editing tools and actions
|
||||
* Implements the Robustness Principle with Fail Fast mode support
|
||||
* EditControl - Document Editing Tools and Actions Control
|
||||
*
|
||||
* Provides a comprehensive set of document editing tools including text formatting,
|
||||
* document actions (print, save, export), navigation helpers, and editing modes.
|
||||
* Designed to enhance the writing and editing experience within the TestDrive-JSUI
|
||||
* environment.
|
||||
*
|
||||
* Features:
|
||||
* - Document actions (print, save, export to various formats)
|
||||
* - Text formatting tools (bold, italic, headers)
|
||||
* - Navigation helpers (scroll to top/bottom, go to line)
|
||||
* - Word processing features (find/replace, word count)
|
||||
* - Accessibility tools (font size, contrast adjustment)
|
||||
* - Markdown formatting shortcuts
|
||||
*
|
||||
* Dependencies:
|
||||
* - ControlBase (base control functionality)
|
||||
*/
|
||||
|
||||
class EditControl {
|
||||
/**
|
||||
* EditControl - Comprehensive document editing control
|
||||
*
|
||||
* This control provides writers and editors with essential tools for document
|
||||
* creation and modification. It includes both basic text operations and
|
||||
* advanced features for content management and formatting.
|
||||
*/
|
||||
class EditControl extends ControlBase {
|
||||
constructor() {
|
||||
this.control = Object.create(Control);
|
||||
this.control.config = {
|
||||
super();
|
||||
|
||||
// Configure for editing functionality
|
||||
this.config = {
|
||||
icon: '✏️',
|
||||
title: 'Edit',
|
||||
className: 'edit-control',
|
||||
defaultContent: 'Document editing tools',
|
||||
ariaLabel: 'Edit Control',
|
||||
position: 'e'
|
||||
defaultContent: 'Document editing tools loading...',
|
||||
ariaLabel: 'Document Edit Control',
|
||||
position: 'e' // East positioning
|
||||
};
|
||||
|
||||
// Bind methods to control
|
||||
this.control.buildContent = () => {
|
||||
const content = this.control.element.querySelector('.control-content');
|
||||
// Edit control state
|
||||
this.editingMode = 'view'; // 'view', 'edit', 'preview'
|
||||
this.fontSize = 16;
|
||||
this.lastSaveTime = null;
|
||||
this.unsavedChanges = false;
|
||||
this.shortcuts = new Map();
|
||||
|
||||
content.innerHTML = `
|
||||
this.initializeShortcuts();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize keyboard shortcuts for editing
|
||||
*/
|
||||
initializeShortcuts() {
|
||||
this.shortcuts.set('Ctrl+S', () => this.saveDocument());
|
||||
this.shortcuts.set('Ctrl+P', () => this.printDocument());
|
||||
this.shortcuts.set('Ctrl+F', () => this.showFindDialog());
|
||||
this.shortcuts.set('Ctrl+B', () => this.toggleBold());
|
||||
this.shortcuts.set('Ctrl+I', () => this.toggleItalic());
|
||||
this.shortcuts.set('Escape', () => this.exitEditMode());
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate the main editing tools HTML
|
||||
*/
|
||||
generateEditToolsHTML() {
|
||||
return this.safeOperation(() => {
|
||||
return `
|
||||
<div style="padding: 1rem; font-size: 0.8rem;">
|
||||
<h4 style="margin-top: 0;">Edit Tools</h4>
|
||||
<h4 style="margin-top: 0; margin-bottom: 1rem;">Edit Tools</h4>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<button onclick="window.print()"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
<!-- Document Actions -->
|
||||
<div class="action-section" style="margin-bottom: 1rem;">
|
||||
<h5 style="margin: 0 0 0.5rem 0; font-size: 0.9em; color: #666;">Document Actions</h5>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.printDocument()"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
🖨️ Print Document
|
||||
</button>
|
||||
|
||||
<button onclick="navigator.clipboard?.writeText(window.location.href) || prompt('Copy this URL:', window.location.href)"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
📋 Copy Link
|
||||
<button onclick="this.closest('.edit-control').editControl.saveDocument()"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
💾 Save Changes
|
||||
</button>
|
||||
|
||||
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
⬆️ Scroll to Top
|
||||
<button onclick="this.closest('.edit-control').editControl.exportDocument()"
|
||||
style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
|
||||
📄 Export Document
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; font-size: 0.7rem; color: #666; border-top: 1px solid #dee2e6; padding-top: 0.5rem;">
|
||||
<strong>Page Info:</strong><br>
|
||||
Title: ${document.title}<br>
|
||||
Words: ~${(document.body.textContent || '').split(/\\s+/).filter(w => w.length > 0).length}<br>
|
||||
Modified: ${document.lastModified}
|
||||
<!-- Navigation Tools -->
|
||||
<div class="navigation-section" style="margin-bottom: 1rem;">
|
||||
<h5 style="margin: 0 0 0.5rem 0; font-size: 0.9em; color: #666;">Navigation</h5>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem;">
|
||||
<button onclick="this.closest('.edit-control').editControl.scrollToTop()"
|
||||
style="padding: 0.4rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
⬆️ Top
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.scrollToBottom()"
|
||||
style="padding: 0.4rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
⬇️ Bottom
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.showGoToLine()"
|
||||
style="width: 100%; padding: 0.4rem; margin-top: 0.3rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
🎯 Go to Line
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Text Tools -->
|
||||
<div class="text-section" style="margin-bottom: 1rem;">
|
||||
<h5 style="margin: 0 0 0.5rem 0; font-size: 0.9em; color: #666;">Text Tools</h5>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.showFindReplace()"
|
||||
style="width: 100%; padding: 0.4rem; margin-bottom: 0.3rem; background: #ffc107; color: #000; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
🔍 Find & Replace
|
||||
</button>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 0.3rem;">
|
||||
<button onclick="this.closest('.edit-control').editControl.increaseFontSize()"
|
||||
style="padding: 0.4rem; background: #20c997; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
🔍+ Font
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.decreaseFontSize()"
|
||||
style="padding: 0.4rem; background: #20c997; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
🔍- Font
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.copyLink()"
|
||||
style="width: 100%; padding: 0.4rem; margin-bottom: 0.3rem; background: #fd7e14; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
📋 Copy Page Link
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Markdown Tools -->
|
||||
<div class="markdown-section" style="margin-bottom: 1rem;">
|
||||
<h5 style="margin: 0 0 0.5rem 0; font-size: 0.9em; color: #666;">Markdown Tools</h5>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem;">
|
||||
<button onclick="this.closest('.edit-control').editControl.insertMarkdown('**', '**', 'Bold text')"
|
||||
style="padding: 0.4rem; background: #495057; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
**B**
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.insertMarkdown('*', '*', 'Italic text')"
|
||||
style="padding: 0.4rem; background: #495057; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
*I*
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.insertMarkdown('## ', '', 'Heading')"
|
||||
style="padding: 0.4rem; background: #495057; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
H2
|
||||
</button>
|
||||
|
||||
<button onclick="this.closest('.edit-control').editControl.insertMarkdown('- ', '', 'List item')"
|
||||
style="padding: 0.4rem; background: #495057; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
•List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Info -->
|
||||
<div class="status-section" style="border-top: 1px solid #eee; padding-top: 0.5rem;">
|
||||
<div style="font-size: 0.7rem; color: #666;">
|
||||
<div>Mode: <span style="color: #007bff;">${this.editingMode}</span></div>
|
||||
<div>Font: <span style="color: #007bff;">${this.fontSize}px</span></div>
|
||||
${this.lastSaveTime ? `<div>Saved: ${new Date(this.lastSaveTime).toLocaleTimeString()}</div>` : ''}
|
||||
${this.unsavedChanges ? '<div style="color: #dc3545;">⚠️ Unsaved changes</div>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.control.isExpanded = true;
|
||||
};
|
||||
|
||||
this.control.toggle = () => {
|
||||
if (this.control.isExpanded) {
|
||||
this.control.element.querySelector('.control-content').style.display = 'none';
|
||||
this.control.isExpanded = false;
|
||||
} else {
|
||||
this.control.buildContent();
|
||||
this.control.element.querySelector('.control-content').style.display = 'block';
|
||||
}
|
||||
};
|
||||
}, '<p>Error generating edit tools</p>', 'generateEditToolsHTML');
|
||||
}
|
||||
|
||||
createControl() {
|
||||
return this.control.createControl();
|
||||
/**
|
||||
* 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 = `
|
||||
<h4 style="margin-top: 0;">Export Document</h4>
|
||||
<button onclick="this.parentElement.exportAsHTML()" style="display: block; width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
Export as HTML
|
||||
</button>
|
||||
<button onclick="this.parentElement.exportAsText()" style="display: block; width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
Export as Text
|
||||
</button>
|
||||
<button onclick="this.parentElement.exportAsMarkdown()" style="display: block; width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: #6f42c1; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
Export as Markdown
|
||||
</button>
|
||||
<button onclick="document.body.removeChild(this.parentElement)" style="width: 100%; padding: 0.3rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
Cancel
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add export functions
|
||||
exportMenu.exportAsHTML = () => {
|
||||
this.downloadFile(htmlContent, 'document.html', 'text/html');
|
||||
document.body.removeChild(exportMenu);
|
||||
};
|
||||
|
||||
exportMenu.exportAsText = () => {
|
||||
this.downloadFile(textContent, 'document.txt', 'text/plain');
|
||||
document.body.removeChild(exportMenu);
|
||||
};
|
||||
|
||||
exportMenu.exportAsMarkdown = () => {
|
||||
// Simple HTML to Markdown conversion (basic)
|
||||
let markdown = htmlContent
|
||||
.replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n')
|
||||
.replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n')
|
||||
.replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n\n')
|
||||
.replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n')
|
||||
.replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
|
||||
.replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
|
||||
.replace(/<[^>]*>/g, ''); // Remove remaining HTML tags
|
||||
|
||||
this.downloadFile(markdown, 'document.md', 'text/markdown');
|
||||
document.body.removeChild(exportMenu);
|
||||
};
|
||||
|
||||
document.body.appendChild(exportMenu);
|
||||
|
||||
}, null, 'exportDocument');
|
||||
}
|
||||
|
||||
/**
|
||||
* Download a file with given content
|
||||
*/
|
||||
downloadFile(content, filename, mimeType) {
|
||||
const blob = new Blob([content], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to top of document
|
||||
*/
|
||||
scrollToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
this.showActionFeedback('⬆️ Scrolled to top', '#6c757d');
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to bottom of document
|
||||
*/
|
||||
scrollToBottom() {
|
||||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||||
this.showActionFeedback('⬇️ Scrolled to bottom', '#6c757d');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show go to line dialog
|
||||
*/
|
||||
showGoToLine() {
|
||||
const lineNumber = prompt('Go to line number:');
|
||||
if (lineNumber && !isNaN(lineNumber)) {
|
||||
// Simple implementation - scroll to approximate position
|
||||
const totalHeight = document.body.scrollHeight;
|
||||
const approximatePosition = (parseInt(lineNumber) / 100) * totalHeight;
|
||||
window.scrollTo({ top: approximatePosition, behavior: 'smooth' });
|
||||
this.showActionFeedback(`🎯 Went to line ${lineNumber}`, '#6c757d');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show find and replace dialog
|
||||
*/
|
||||
showFindReplace() {
|
||||
const searchTerm = prompt('Find text:');
|
||||
if (searchTerm) {
|
||||
// Simple highlight implementation
|
||||
this.highlightText(searchTerm);
|
||||
this.showActionFeedback(`🔍 Highlighted "${searchTerm}"`, '#ffc107', '#000');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight text in the document
|
||||
*/
|
||||
highlightText(searchTerm) {
|
||||
return this.safeOperation(() => {
|
||||
// Remove previous highlights
|
||||
document.querySelectorAll('.edit-highlight').forEach(el => {
|
||||
el.outerHTML = el.innerHTML;
|
||||
});
|
||||
|
||||
// Add new highlights
|
||||
const contentArea = document.querySelector('#markitect-content') || document.body;
|
||||
const walker = document.createTreeWalker(
|
||||
contentArea,
|
||||
NodeFilter.SHOW_TEXT,
|
||||
null,
|
||||
false
|
||||
);
|
||||
|
||||
const textNodes = [];
|
||||
let node;
|
||||
while (node = walker.nextNode()) {
|
||||
textNodes.push(node);
|
||||
}
|
||||
|
||||
textNodes.forEach(textNode => {
|
||||
const parent = textNode.parentNode;
|
||||
const text = textNode.textContent;
|
||||
if (text.toLowerCase().includes(searchTerm.toLowerCase())) {
|
||||
const regex = new RegExp(`(${searchTerm})`, 'gi');
|
||||
const highlightedHTML = text.replace(regex, '<span class="edit-highlight" style="background-color: yellow; padding: 0.1rem;">$1</span>');
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = highlightedHTML;
|
||||
while (wrapper.firstChild) {
|
||||
parent.insertBefore(wrapper.firstChild, textNode);
|
||||
}
|
||||
parent.removeChild(textNode);
|
||||
}
|
||||
});
|
||||
}, null, 'highlightText');
|
||||
}
|
||||
|
||||
/**
|
||||
* Increase font size
|
||||
*/
|
||||
increaseFontSize() {
|
||||
this.fontSize = Math.min(this.fontSize + 2, 24);
|
||||
this.applyFontSize();
|
||||
this.buildContent();
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrease font size
|
||||
*/
|
||||
decreaseFontSize() {
|
||||
this.fontSize = Math.max(this.fontSize - 2, 12);
|
||||
this.applyFontSize();
|
||||
this.buildContent();
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply font size to document
|
||||
*/
|
||||
applyFontSize() {
|
||||
const contentArea = document.querySelector('#markitect-content') || document.body;
|
||||
contentArea.style.fontSize = `${this.fontSize}px`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy page link to clipboard
|
||||
*/
|
||||
copyLink() {
|
||||
return this.safeOperation(() => {
|
||||
const url = window.location.href;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
this.showActionFeedback('📋 Link copied to clipboard', '#fd7e14');
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
prompt('Copy this link:', url);
|
||||
this.showActionFeedback('📋 Link displayed for copying', '#fd7e14');
|
||||
}
|
||||
}, null, 'copyLink');
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert markdown formatting
|
||||
*/
|
||||
insertMarkdown(prefix, suffix, placeholder) {
|
||||
// This would integrate with an actual text editor
|
||||
// For now, just show what would be inserted
|
||||
const text = `${prefix}${placeholder}${suffix}`;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text);
|
||||
this.showActionFeedback(`📋 Copied: ${text}`, '#495057');
|
||||
} else {
|
||||
prompt('Markdown to copy:', text);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show action feedback message
|
||||
*/
|
||||
showActionFeedback(message, backgroundColor, color = 'white') {
|
||||
const feedback = document.createElement('div');
|
||||
feedback.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: ${backgroundColor};
|
||||
color: ${color};
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
z-index: 9999;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
`;
|
||||
feedback.textContent = message;
|
||||
document.body.appendChild(feedback);
|
||||
|
||||
setTimeout(() => {
|
||||
if (feedback.parentNode) {
|
||||
document.body.removeChild(feedback);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the control content
|
||||
* Override of base class method to provide edit-specific functionality
|
||||
*/
|
||||
buildContent() {
|
||||
return this.safeOperation(() => {
|
||||
const content = this.element?.querySelector('.control-content');
|
||||
if (content) {
|
||||
content.innerHTML = this.generateEditToolsHTML();
|
||||
|
||||
// Store reference to this control for onclick handlers
|
||||
this.element.editControl = this;
|
||||
}
|
||||
}, null, 'buildContent');
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit edit mode
|
||||
*/
|
||||
exitEditMode() {
|
||||
this.editingMode = 'view';
|
||||
this.buildContent();
|
||||
}
|
||||
}
|
||||
|
||||
window.EditControl = EditControl;
|
||||
// Export for module systems or attach to global for direct usage
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = EditControl;
|
||||
} else {
|
||||
window.EditControl = EditControl;
|
||||
}
|
||||
@@ -1,616 +1,368 @@
|
||||
/**
|
||||
* Status Control - Document statistics and change tracking
|
||||
* StatusControl - Document Statistics and Change Tracking Control
|
||||
*
|
||||
* Provides real-time document statistics including word count, character count,
|
||||
* reading time estimation, and change tracking. Monitors document modifications
|
||||
* and provides insights into document structure and content metrics.
|
||||
*
|
||||
* Features:
|
||||
* - Real-time word and character counting
|
||||
* - Reading time estimation based on content
|
||||
* - Document structure analysis (headings, paragraphs, lists)
|
||||
* - Change tracking with before/after comparisons
|
||||
* - Content complexity metrics
|
||||
* - Export functionality for statistics
|
||||
*
|
||||
* Dependencies:
|
||||
* - ControlBase (base control functionality)
|
||||
*/
|
||||
class StatusControl {
|
||||
|
||||
/**
|
||||
* StatusControl - Document statistics and monitoring control
|
||||
*
|
||||
* This control continuously monitors the document for changes and provides
|
||||
* detailed statistics about content, structure, and reading metrics.
|
||||
* Useful for writers, editors, and content creators.
|
||||
*/
|
||||
class StatusControl extends ControlBase {
|
||||
constructor() {
|
||||
this.control = Object.create(Control);
|
||||
super();
|
||||
|
||||
// Configure for status functionality
|
||||
this.control.config = {
|
||||
this.config = {
|
||||
icon: '📊',
|
||||
title: 'Status',
|
||||
className: 'status-control',
|
||||
defaultContent: 'Document statistics and changes',
|
||||
ariaLabel: 'Status Control',
|
||||
position: 'e', // East positioning
|
||||
footer: `Updated ${new Date().toLocaleTimeString()}`
|
||||
defaultContent: 'Loading document statistics...',
|
||||
ariaLabel: 'Document Status Control',
|
||||
position: 'e' // East positioning
|
||||
};
|
||||
|
||||
// Initialize change tracking
|
||||
this.control.changeTracking = {
|
||||
headings: new Set(),
|
||||
sections: new Set(),
|
||||
images: new Set(),
|
||||
tables: new Set(),
|
||||
lastScanTime: null,
|
||||
initialCounts: {
|
||||
headings: 0,
|
||||
sections: 0,
|
||||
images: 0,
|
||||
tables: 0,
|
||||
lines: 0,
|
||||
words: 0,
|
||||
characters: 0
|
||||
}
|
||||
// Status tracking state
|
||||
this.stats = {
|
||||
characters: 0,
|
||||
charactersNoSpaces: 0,
|
||||
words: 0,
|
||||
sentences: 0,
|
||||
paragraphs: 0,
|
||||
headings: 0,
|
||||
lists: 0,
|
||||
images: 0,
|
||||
links: 0,
|
||||
readingTimeMinutes: 0
|
||||
};
|
||||
|
||||
this.bindMethods();
|
||||
this.previousStats = { ...this.stats };
|
||||
this.lastUpdateTime = null;
|
||||
this.updateInterval = null;
|
||||
this.wordsPerMinute = 200; // Average reading speed
|
||||
}
|
||||
|
||||
bindMethods() {
|
||||
// Bind utility functions
|
||||
this.control.safeTextExtraction = this.safeTextExtraction.bind(this);
|
||||
this.control.sanitizeText = this.sanitizeText.bind(this);
|
||||
this.control.validateElement = this.validateElement.bind(this);
|
||||
this.control.safeStatsOperation = this.safeStatsOperation.bind(this);
|
||||
/**
|
||||
* Extract and count document content statistics
|
||||
*/
|
||||
analyzeDocument() {
|
||||
return this.safeOperation(() => {
|
||||
const contentArea = document.querySelector('#markitect-content') || document.body;
|
||||
const textContent = contentArea.textContent || '';
|
||||
|
||||
// Bind existing methods
|
||||
this.control.calculateStats = this.calculateStats.bind(this);
|
||||
this.control.isContentSection = this.isContentSection.bind(this);
|
||||
this.control.isContentTable = this.isContentTable.bind(this);
|
||||
this.control.updateChangeTracking = this.updateChangeTracking.bind(this);
|
||||
this.control.buildContent = this.buildContent.bind(this);
|
||||
this.control.refreshStats = this.refreshStats.bind(this);
|
||||
this.control.resetChangeTracking = this.resetChangeTracking.bind(this);
|
||||
this.control.setupAutoRefresh = this.setupAutoRefresh.bind(this);
|
||||
// Basic text statistics
|
||||
this.stats.characters = textContent.length;
|
||||
this.stats.charactersNoSpaces = textContent.replace(/\s/g, '').length;
|
||||
|
||||
// Override collapse to clean up intervals
|
||||
const originalCollapse = this.control.collapse;
|
||||
this.control.collapse = () => {
|
||||
if (this.control.autoRefreshInterval) {
|
||||
clearInterval(this.control.autoRefreshInterval);
|
||||
this.control.autoRefreshInterval = null;
|
||||
}
|
||||
originalCollapse.call(this.control);
|
||||
};
|
||||
// Word counting (more accurate)
|
||||
const words = textContent.trim().split(/\s+/).filter(word => word.length > 0);
|
||||
this.stats.words = words.length;
|
||||
|
||||
// Sentence counting (approximate)
|
||||
const sentences = textContent.split(/[.!?]+/).filter(s => s.trim().length > 0);
|
||||
this.stats.sentences = sentences.length;
|
||||
|
||||
// Structural elements
|
||||
this.stats.paragraphs = contentArea.querySelectorAll('p').length;
|
||||
this.stats.headings = contentArea.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
|
||||
this.stats.lists = contentArea.querySelectorAll('ul, ol').length;
|
||||
this.stats.images = contentArea.querySelectorAll('img').length;
|
||||
this.stats.links = contentArea.querySelectorAll('a').length;
|
||||
|
||||
// Reading time calculation
|
||||
this.stats.readingTimeMinutes = Math.ceil(this.stats.words / this.wordsPerMinute);
|
||||
|
||||
this.lastUpdateTime = Date.now();
|
||||
return this.stats;
|
||||
|
||||
}, this.stats, 'analyzeDocument');
|
||||
}
|
||||
|
||||
// Utility functions for safe operations
|
||||
safeTextExtraction(element) {
|
||||
if (!this.validateElement(element)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
const text = element.textContent || element.innerText || '';
|
||||
return this.sanitizeText(text.trim());
|
||||
} catch (error) {
|
||||
console.warn('Text extraction failed:', error);
|
||||
return '';
|
||||
}
|
||||
/**
|
||||
* Calculate changes since last analysis
|
||||
*/
|
||||
calculateChanges() {
|
||||
return this.safeOperation(() => {
|
||||
const changes = {};
|
||||
for (const [key, currentValue] of Object.entries(this.stats)) {
|
||||
const previousValue = this.previousStats[key] || 0;
|
||||
const difference = currentValue - previousValue;
|
||||
changes[key] = {
|
||||
current: currentValue,
|
||||
previous: previousValue,
|
||||
change: difference,
|
||||
hasChanged: difference !== 0
|
||||
};
|
||||
}
|
||||
return changes;
|
||||
}, {}, 'calculateChanges');
|
||||
}
|
||||
|
||||
sanitizeText(text) {
|
||||
if (typeof text !== 'string') {
|
||||
return '';
|
||||
}
|
||||
/**
|
||||
* Format statistics for display
|
||||
*/
|
||||
formatStatistics() {
|
||||
return this.safeOperation(() => {
|
||||
const changes = this.calculateChanges();
|
||||
|
||||
// Remove potentially harmful characters and limit length
|
||||
const maxLength = 100000; // 100KB text limit
|
||||
const sanitized = text
|
||||
.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '') // Remove control chars
|
||||
.slice(0, maxLength); // Limit length
|
||||
|
||||
return sanitized;
|
||||
}
|
||||
|
||||
validateElement(element) {
|
||||
return element &&
|
||||
element.nodeType === Node.ELEMENT_NODE &&
|
||||
element.isConnected &&
|
||||
!element.closest('.control-panel'); // Avoid control elements
|
||||
}
|
||||
|
||||
safeStatsOperation(operation, fallback = 0, context = 'stats') {
|
||||
try {
|
||||
const result = operation();
|
||||
// Validate numeric results
|
||||
return typeof result === 'number' && isFinite(result) ? result : fallback;
|
||||
} catch (error) {
|
||||
console.warn(`Stats operation failed in ${context}:`, error);
|
||||
if (window.MarkitectDebugSystem) {
|
||||
window.MarkitectDebugSystem.addMessage(
|
||||
`Stats operation failed: ${error.message}`,
|
||||
'WARNING',
|
||||
'StatusControl',
|
||||
{ context, eventType: 'ERROR' }
|
||||
);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
calculateStats() {
|
||||
const stats = {
|
||||
headings: { total: 0, changed: 0 },
|
||||
sections: { total: 0, changed: 0 },
|
||||
images: { total: 0, changed: 0 },
|
||||
tables: { total: 0, changed: 0 },
|
||||
document: { lines: 0, words: 0, characters: 0 },
|
||||
sections_detail: { lines: 0, words: 0, characters: 0 },
|
||||
tables_detail: { lines: 0, words: 0, characters: 0 }
|
||||
};
|
||||
|
||||
return this.safeStatsOperation(() => {
|
||||
// Count headings (h1-h6, excluding control titles)
|
||||
const headings = this.control.safeQuerySelectorAll('h1, h2, h3, h4, h5, h6');
|
||||
const maxElements = 10000; // Limit processing to prevent DoS
|
||||
|
||||
headings.slice(0, maxElements).forEach(heading => {
|
||||
if (!this.validateElement(heading)) return;
|
||||
|
||||
const text = this.safeTextExtraction(heading).toLowerCase();
|
||||
// Skip control headings with enhanced filtering
|
||||
const controlKeywords = ['contents', 'debug', 'status', 'control', 'menu', 'toolbar'];
|
||||
const isControlHeading = controlKeywords.some(keyword => text.includes(keyword));
|
||||
|
||||
if (text.length > 0 && !isControlHeading) {
|
||||
stats.headings.total++;
|
||||
const fullText = this.safeTextExtraction(heading);
|
||||
if (this.control.changeTracking.headings.has(fullText)) {
|
||||
stats.headings.changed++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Count sections (content blocks excluding headings and table cells)
|
||||
const sections = this.control.safeQuerySelectorAll('p, blockquote, pre, li, div');
|
||||
sections.slice(0, maxElements).forEach(section => {
|
||||
if (this.isContentSection(section)) {
|
||||
stats.sections.total++;
|
||||
const sectionText = this.safeTextExtraction(section);
|
||||
if (sectionText.length > 0) {
|
||||
const lines = this.safeStatsOperation(() => sectionText.split('\n').length, 0, 'countLines');
|
||||
const words = this.safeStatsOperation(() =>
|
||||
sectionText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countWords');
|
||||
const characters = Math.min(sectionText.length, 1000000); // Cap at 1MB
|
||||
|
||||
stats.sections_detail.lines += lines;
|
||||
stats.sections_detail.words += words;
|
||||
stats.sections_detail.characters += characters;
|
||||
|
||||
if (this.control.changeTracking.sections.has(sectionText)) {
|
||||
stats.sections.changed++;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Count tables as separate entities
|
||||
const tables = this.control.safeQuerySelectorAll('table');
|
||||
tables.slice(0, maxElements).forEach(table => {
|
||||
if (this.isContentTable(table)) {
|
||||
stats.tables.total++;
|
||||
const tableText = this.safeTextExtraction(table);
|
||||
if (tableText.length > 0) {
|
||||
const lines = this.safeStatsOperation(() => tableText.split('\n').length, 0, 'countTableLines');
|
||||
const words = this.safeStatsOperation(() =>
|
||||
tableText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countTableWords');
|
||||
const characters = Math.min(tableText.length, 1000000); // Cap at 1MB
|
||||
|
||||
stats.tables_detail.lines += lines;
|
||||
stats.tables_detail.words += words;
|
||||
stats.tables_detail.characters += characters;
|
||||
|
||||
// Generate safer table identifier
|
||||
const tableId = this.sanitizeText(table.id ||
|
||||
table.outerHTML.substring(0, 100).replace(/[<>"'&]/g, ''));
|
||||
if (this.control.changeTracking.tables.has(tableId)) {
|
||||
stats.tables.changed++;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Count images with validation
|
||||
const images = this.control.safeQuerySelectorAll('img');
|
||||
images.slice(0, maxElements).forEach(img => {
|
||||
if (this.validateElement(img)) {
|
||||
stats.images.total++;
|
||||
// Safely extract and validate image source
|
||||
const imgSrc = this.sanitizeText(img.src || img.getAttribute('src') || '');
|
||||
if (imgSrc && this.control.changeTracking.images.has(imgSrc)) {
|
||||
stats.images.changed++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate total document stats with protection
|
||||
const bodyText = this.safeTextExtraction(document.body);
|
||||
if (bodyText) {
|
||||
const cleanText = bodyText.replace(/\s+/g, ' ');
|
||||
stats.document.lines = this.safeStatsOperation(() =>
|
||||
bodyText.split('\n').length, 0, 'countDocLines');
|
||||
stats.document.words = this.safeStatsOperation(() =>
|
||||
cleanText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countDocWords');
|
||||
stats.document.characters = Math.min(cleanText.length, 10000000); // Cap at 10MB
|
||||
}
|
||||
|
||||
return stats;
|
||||
}, stats, 'calculateStats');
|
||||
}
|
||||
|
||||
isContentSection(element) {
|
||||
return this.safeStatsOperation(() => {
|
||||
if (!this.validateElement(element)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Enhanced control detection with timeout protection
|
||||
let current = element;
|
||||
let depth = 0;
|
||||
const maxDepth = 50; // Prevent infinite loops
|
||||
|
||||
while (current && current !== document.body && depth < maxDepth) {
|
||||
if (current.classList && (
|
||||
current.classList.contains('control-panel') ||
|
||||
current.classList.contains('control-content') ||
|
||||
current.classList.contains('control-header') ||
|
||||
current.className.includes('control') ||
|
||||
current.id?.includes('control')
|
||||
)) {
|
||||
return false;
|
||||
}
|
||||
current = current.parentElement;
|
||||
depth++;
|
||||
}
|
||||
|
||||
// Skip if element is inside a table (tables are counted separately)
|
||||
if (element.closest && element.closest('table')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Skip if element has no meaningful text content
|
||||
const text = this.safeTextExtraction(element);
|
||||
return text.length > 0 && text.length < 50000; // Reasonable size limit
|
||||
}, false, 'isContentSection');
|
||||
}
|
||||
|
||||
isContentTable(table) {
|
||||
return this.safeStatsOperation(() => {
|
||||
if (!this.validateElement(table) || table.tagName !== 'TABLE') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Enhanced control detection with depth limiting
|
||||
let current = table;
|
||||
let depth = 0;
|
||||
const maxDepth = 50;
|
||||
|
||||
while (current && current !== document.body && depth < maxDepth) {
|
||||
if (current.classList && (
|
||||
current.classList.contains('control-panel') ||
|
||||
current.classList.contains('control-content') ||
|
||||
current.classList.contains('control-header') ||
|
||||
current.className.includes('control') ||
|
||||
current.id?.includes('control')
|
||||
)) {
|
||||
return false;
|
||||
}
|
||||
current = current.parentElement;
|
||||
depth++;
|
||||
}
|
||||
|
||||
// Check if table has meaningful content with limits
|
||||
const text = this.safeTextExtraction(table);
|
||||
return text.length > 0 && text.length < 100000; // Reasonable table size limit
|
||||
}, false, 'isContentTable');
|
||||
}
|
||||
|
||||
updateChangeTracking() {
|
||||
const now = Date.now();
|
||||
|
||||
// Headings
|
||||
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
|
||||
headings.forEach(heading => {
|
||||
const text = heading.textContent.trim();
|
||||
if (text && !text.toLowerCase().includes('control')) {
|
||||
const changed = heading.dataset.lastModified &&
|
||||
(now - parseInt(heading.dataset.lastModified)) < 300000; // 5 minutes
|
||||
if (changed) {
|
||||
this.control.changeTracking.headings.add(text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Sections
|
||||
const sections = document.querySelectorAll('p, blockquote, pre, li, div');
|
||||
sections.forEach(section => {
|
||||
if (this.isContentSection(section)) {
|
||||
const text = section.textContent.trim();
|
||||
if (text.length > 0) {
|
||||
const changed = section.dataset.lastModified &&
|
||||
(now - parseInt(section.dataset.lastModified)) < 300000; // 5 minutes
|
||||
if (changed) {
|
||||
this.control.changeTracking.sections.add(text);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Tables
|
||||
const tables = document.querySelectorAll('table');
|
||||
tables.forEach(table => {
|
||||
if (this.isContentTable(table)) {
|
||||
const tableId = table.id || table.outerHTML.substring(0, 100);
|
||||
const changed = table.dataset.lastModified &&
|
||||
(now - parseInt(table.dataset.lastModified)) < 300000; // 5 minutes
|
||||
if (changed) {
|
||||
this.control.changeTracking.tables.add(tableId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Images
|
||||
const images = document.querySelectorAll('img');
|
||||
images.forEach(img => {
|
||||
const src = img.src || img.getAttribute('src') || '';
|
||||
const changed = img.dataset.lastModified &&
|
||||
(now - parseInt(img.dataset.lastModified)) < 300000; // 5 minutes
|
||||
if (changed && src) {
|
||||
this.control.changeTracking.images.add(src);
|
||||
}
|
||||
});
|
||||
|
||||
this.control.changeTracking.lastScanTime = now;
|
||||
}
|
||||
|
||||
buildContent() {
|
||||
this.control.safeOperation(() => {
|
||||
console.log("📊 Building status control content...");
|
||||
|
||||
const content = this.control.safeQuerySelector('.control-content', this.control.element);
|
||||
if (!content) {
|
||||
console.error("📊 Status control content element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Update tracking and calculate stats with timeout protection
|
||||
const timeout = setTimeout(() => {
|
||||
console.warn('Status content build operation timed out');
|
||||
}, 10000); // 10 second timeout
|
||||
|
||||
this.updateChangeTracking();
|
||||
const stats = this.calculateStats();
|
||||
|
||||
clearTimeout(timeout);
|
||||
|
||||
// Sanitize numeric values to prevent injection
|
||||
const safeStats = {
|
||||
document: {
|
||||
lines: Math.max(0, Math.floor(stats.document.lines || 0)),
|
||||
words: Math.max(0, Math.floor(stats.document.words || 0)),
|
||||
characters: Math.max(0, Math.floor(stats.document.characters || 0))
|
||||
},
|
||||
headings: {
|
||||
total: Math.max(0, Math.floor(stats.headings.total || 0)),
|
||||
changed: Math.max(0, Math.floor(stats.headings.changed || 0))
|
||||
},
|
||||
sections: {
|
||||
total: Math.max(0, Math.floor(stats.sections.total || 0)),
|
||||
changed: Math.max(0, Math.floor(stats.sections.changed || 0))
|
||||
},
|
||||
sections_detail: {
|
||||
lines: Math.max(0, Math.floor(stats.sections_detail.lines || 0)),
|
||||
words: Math.max(0, Math.floor(stats.sections_detail.words || 0)),
|
||||
characters: Math.max(0, Math.floor(stats.sections_detail.characters || 0))
|
||||
},
|
||||
tables: {
|
||||
total: Math.max(0, Math.floor(stats.tables.total || 0)),
|
||||
changed: Math.max(0, Math.floor(stats.tables.changed || 0))
|
||||
},
|
||||
tables_detail: {
|
||||
lines: Math.max(0, Math.floor(stats.tables_detail.lines || 0)),
|
||||
words: Math.max(0, Math.floor(stats.tables_detail.words || 0)),
|
||||
characters: Math.max(0, Math.floor(stats.tables_detail.characters || 0))
|
||||
},
|
||||
images: {
|
||||
total: Math.max(0, Math.floor(stats.images.total || 0)),
|
||||
changed: Math.max(0, Math.floor(stats.images.changed || 0))
|
||||
}
|
||||
const formatChange = (changeData) => {
|
||||
if (!changeData.hasChanged) return '';
|
||||
const sign = changeData.change > 0 ? '+' : '';
|
||||
const color = changeData.change > 0 ? '#28a745' : '#dc3545';
|
||||
return `<span style="color: ${color}; font-size: 0.7rem;"> (${sign}${changeData.change})</span>`;
|
||||
};
|
||||
|
||||
// Use safe stats for display with proper escaping
|
||||
content.innerHTML = `
|
||||
<div style="font-size: 0.8rem; line-height: 1.4; color: #495057;">
|
||||
<!-- Document Overview -->
|
||||
<div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px;">
|
||||
<div style="font-weight: 600; color: #212529; margin-bottom: 0.5rem;">📄 Document</div>
|
||||
<div style="font-size: 0.7rem;">
|
||||
<span>Lines: <strong>${safeStats.document.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.document.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.document.characters.toLocaleString()}</strong></span>
|
||||
const formatNumber = (num) => num.toLocaleString();
|
||||
|
||||
return `
|
||||
<div style="padding: 1rem; font-size: 0.8rem;">
|
||||
<h4 style="margin-top: 0; margin-bottom: 1rem;">Document Statistics</h4>
|
||||
|
||||
<div class="stats-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
|
||||
<div class="stat-item">
|
||||
<strong>Words:</strong><br>
|
||||
<span style="font-size: 1.1em; color: #007bff;">${formatNumber(this.stats.words)}</span>
|
||||
${formatChange(changes.words)}
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<strong>Characters:</strong><br>
|
||||
<span style="font-size: 1.1em; color: #007bff;">${formatNumber(this.stats.characters)}</span>
|
||||
${formatChange(changes.characters)}
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<strong>Reading Time:</strong><br>
|
||||
<span style="font-size: 1.1em; color: #007bff;">${this.stats.readingTimeMinutes} min</span>
|
||||
${formatChange(changes.readingTimeMinutes)}
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<strong>Sentences:</strong><br>
|
||||
<span style="font-size: 1.1em; color: #007bff;">${formatNumber(this.stats.sentences)}</span>
|
||||
${formatChange(changes.sentences)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Headings -->
|
||||
<div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #f3e5f5; border-radius: 4px;">
|
||||
<div style="font-weight: 600; color: #7b1fa2;">
|
||||
📋 Headings: <strong>${safeStats.headings.total}</strong>
|
||||
${safeStats.headings.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.headings.changed})</span>` : ''}
|
||||
<div class="structure-stats" style="border-top: 1px solid #eee; padding-top: 0.5rem; margin-bottom: 1rem;">
|
||||
<h5 style="margin: 0 0 0.5rem 0; font-size: 0.9em;">Document Structure</h5>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
|
||||
<span>Paragraphs:</span>
|
||||
<span>${this.stats.paragraphs}${formatChange(changes.paragraphs)}</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
|
||||
<span>Headings:</span>
|
||||
<span>${this.stats.headings}${formatChange(changes.headings)}</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
|
||||
<span>Lists:</span>
|
||||
<span>${this.stats.lists}${formatChange(changes.lists)}</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
|
||||
<span>Images:</span>
|
||||
<span>${this.stats.images}${formatChange(changes.images)}</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.3rem;">
|
||||
<span>Links:</span>
|
||||
<span>${this.stats.links}${formatChange(changes.links)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sections -->
|
||||
<div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #e3f2fd; border-radius: 4px;">
|
||||
<div style="font-weight: 600; color: #1565c0; margin-bottom: 0.5rem;">
|
||||
📄 Sections: <strong>${safeStats.sections.total}</strong>
|
||||
${safeStats.sections.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.sections.changed})</span>` : ''}
|
||||
</div>
|
||||
<div style="font-size: 0.7rem;">
|
||||
<span>Lines: <strong>${safeStats.sections_detail.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.sections_detail.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.sections_detail.characters.toLocaleString()}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tables -->
|
||||
<div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #fff3e0; border-radius: 4px;">
|
||||
<div style="font-weight: 600; color: #ef6c00; margin-bottom: 0.5rem;">
|
||||
🗂️ Tables: <strong>${safeStats.tables.total}</strong>
|
||||
${safeStats.tables.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.tables.changed})</span>` : ''}
|
||||
</div>
|
||||
<div style="font-size: 0.7rem;">
|
||||
<span>Lines: <strong>${safeStats.tables_detail.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.tables_detail.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.tables_detail.characters.toLocaleString()}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Images -->
|
||||
<div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #e8f5e8; border-radius: 4px;">
|
||||
<div style="font-weight: 600; color: #2e7d32;">
|
||||
🖼️ Images: <strong>${safeStats.images.total}</strong>
|
||||
${safeStats.images.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.images.changed})</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions with safer onclick handlers -->
|
||||
<div style="display: flex; gap: 0.25rem; margin-top: 0.5rem;">
|
||||
<button id="status-refresh-btn"
|
||||
style="flex: 1; padding: 0.4rem; background: #6c757d; color: white;
|
||||
border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
<div class="actions" style="border-top: 1px solid #eee; padding-top: 0.5rem; text-align: center;">
|
||||
<button onclick="this.closest('.status-control').statusControl.refreshStats()"
|
||||
style="padding: 0.3rem 0.6rem; margin-right: 0.3rem; font-size: 0.7rem; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
🔄 Refresh
|
||||
</button>
|
||||
<button id="status-reset-btn"
|
||||
style="flex: 1; padding: 0.4rem; background: #dc3545; color: white;
|
||||
border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
|
||||
🔄 Reset Changes
|
||||
|
||||
<button onclick="this.closest('.status-control').statusControl.exportStats()"
|
||||
style="padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
||||
📊 Export
|
||||
</button>
|
||||
</div>
|
||||
|
||||
${this.lastUpdateTime ? `
|
||||
<div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; font-size: 0.7rem; color: #666; text-align: center;">
|
||||
Updated: ${new Date(this.lastUpdateTime).toLocaleTimeString()}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add safer event listeners instead of inline onclick
|
||||
const refreshBtn = content.querySelector('#status-refresh-btn');
|
||||
const resetBtn = content.querySelector('#status-reset-btn');
|
||||
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
this.control.safeOperation(() => {
|
||||
if (window.statusControl && window.statusControl.refreshStats) {
|
||||
window.statusControl.refreshStats();
|
||||
}
|
||||
}, null, 'refreshButton');
|
||||
});
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener('click', () => {
|
||||
this.control.safeOperation(() => {
|
||||
if (window.statusControl && window.statusControl.resetChangeTracking) {
|
||||
window.statusControl.resetChangeTracking();
|
||||
}
|
||||
}, null, 'resetButton');
|
||||
});
|
||||
}
|
||||
|
||||
console.log("📊 Status control content built successfully");
|
||||
|
||||
// Set up auto-refresh
|
||||
this.setupAutoRefresh();
|
||||
|
||||
// Show panel and expand
|
||||
this.control.expand();
|
||||
|
||||
}, () => {
|
||||
console.error("📊 Error in buildContent: Failed to build status control content");
|
||||
const content = this.control.safeQuerySelector('.control-content', this.control.element);
|
||||
if (content) {
|
||||
content.innerHTML = '<div style="color: #dc3545;">Status loading failed</div>';
|
||||
}
|
||||
}, 'buildContent');
|
||||
}, '<p>Error displaying statistics</p>', 'formatStatistics');
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh statistics and update display
|
||||
*/
|
||||
refreshStats() {
|
||||
if (this.control.isExpanded) {
|
||||
this.updateChangeTracking();
|
||||
// Update footer timestamp
|
||||
this.control.config.footer = `Updated ${new Date().toLocaleTimeString()}`;
|
||||
this.control.styleFooter();
|
||||
return this.safeOperation(() => {
|
||||
// Save current stats as previous
|
||||
this.previousStats = { ...this.stats };
|
||||
|
||||
const content = this.control.element.querySelector('.control-content');
|
||||
if (content) {
|
||||
const stats = this.calculateStats();
|
||||
// Update the display without rebuilding entire content
|
||||
this.buildContent();
|
||||
// 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');
|
||||
}
|
||||
|
||||
resetChangeTracking() {
|
||||
if (confirm('Reset all document changes? This will revert all sections to their original state.')) {
|
||||
console.log('📊 Resetting document changes...');
|
||||
|
||||
// Reset using available infrastructure
|
||||
if (window.sectionManager && window.domRenderer) {
|
||||
// Use the proper document management infrastructure
|
||||
try {
|
||||
// Hide any open editors
|
||||
window.domRenderer.hideCurrentEditor();
|
||||
|
||||
// Reset all sections to original state
|
||||
const allSections = Array.from(window.sectionManager.sections.values());
|
||||
allSections.forEach(section => {
|
||||
section.resetToOriginal();
|
||||
});
|
||||
|
||||
// Re-render all sections
|
||||
window.domRenderer.renderAllSections(allSections);
|
||||
|
||||
console.log('📊 Document reset successful');
|
||||
|
||||
// Add to debug system
|
||||
if (window.MarkitectDebugSystem) {
|
||||
window.MarkitectDebugSystem.addMessage(
|
||||
`Document reset completed - ${allSections.length} sections restored`,
|
||||
'SUCCESS',
|
||||
'StatusControl',
|
||||
{ eventType: 'SYSTEM' }
|
||||
);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('📊 Document reset failed:', error);
|
||||
|
||||
if (window.MarkitectDebugSystem) {
|
||||
window.MarkitectDebugSystem.addMessage(
|
||||
`Document reset failed: ${error.message}`,
|
||||
'ERROR',
|
||||
'StatusControl',
|
||||
{ eventType: 'SYSTEM' }
|
||||
);
|
||||
}
|
||||
/**
|
||||
* 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()
|
||||
}
|
||||
} else {
|
||||
// Fallback to page reload if infrastructure not available
|
||||
console.log('📊 Document management infrastructure not available, using page reload');
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Clear our own change tracking
|
||||
this.control.changeTracking.headings.clear();
|
||||
this.control.changeTracking.sections.clear();
|
||||
this.control.changeTracking.images.clear();
|
||||
this.control.changeTracking.tables.clear();
|
||||
this.control.changeTracking.lastScanTime = Date.now();
|
||||
|
||||
// Refresh our display
|
||||
this.refreshStats();
|
||||
}
|
||||
}, null, 'exportStats');
|
||||
}
|
||||
|
||||
setupAutoRefresh() {
|
||||
if (this.control.autoRefreshInterval) {
|
||||
clearInterval(this.control.autoRefreshInterval);
|
||||
}
|
||||
/**
|
||||
* 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' };
|
||||
}
|
||||
|
||||
this.control.autoRefreshInterval = setInterval(() => {
|
||||
if (this.control.isExpanded) {
|
||||
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();
|
||||
}
|
||||
}, 30000); // 30 seconds
|
||||
}, 10000); // Update every 10 seconds
|
||||
|
||||
}, null, 'buildContent');
|
||||
}
|
||||
|
||||
createControl() {
|
||||
return this.control.createControl();
|
||||
/**
|
||||
* Clean up resources when control is destroyed
|
||||
*/
|
||||
destroy() {
|
||||
if (this.updateInterval) {
|
||||
clearInterval(this.updateInterval);
|
||||
this.updateInterval = null;
|
||||
}
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// Export for global access
|
||||
window.StatusControl = StatusControl;
|
||||
// Export for module systems or attach to global for direct usage
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = StatusControl;
|
||||
} else {
|
||||
window.StatusControl = StatusControl;
|
||||
}
|
||||
@@ -6,14 +6,6 @@
|
||||
* Implements graceful degradation for missing dependencies
|
||||
*/
|
||||
|
||||
// Development mode detection
|
||||
const MARKITECT_STRICT_MODE = (
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1' ||
|
||||
window.location.search.includes('strict=true') ||
|
||||
window.markitectStrictMode === true
|
||||
);
|
||||
|
||||
// Main application module
|
||||
const MarkitectMain = {
|
||||
initialized: false,
|
||||
@@ -91,44 +83,44 @@ const MarkitectMain = {
|
||||
}
|
||||
},
|
||||
|
||||
// Initialize control panels with compass positioning
|
||||
// Initialize enhanced control panels with compass positioning
|
||||
initializeControlPanels: function() {
|
||||
console.log('🎛️ Initializing control panels with compass positioning...');
|
||||
console.log('🎛️ Initializing enhanced control panels with compass positioning...');
|
||||
|
||||
// ContentsControl (Northwest)
|
||||
if (typeof ContentsControl !== 'undefined') {
|
||||
this.contentsControl = new ContentsControl();
|
||||
this.contentsControl.control.config.position = 'nw';
|
||||
this.contentsControl.createControl();
|
||||
this.contentsControl.config.position = 'nw';
|
||||
this.contentsControl.show();
|
||||
window.contentsControl = this.contentsControl;
|
||||
console.log('✅ ContentsControl initialized (Northwest)');
|
||||
console.log('✅ ContentsControl initialized (Northwest) with enhanced ControlBase');
|
||||
}
|
||||
|
||||
// StatusControl (East)
|
||||
if (typeof StatusControl !== 'undefined') {
|
||||
this.statusControl = new StatusControl();
|
||||
this.statusControl.control.config.position = 'e';
|
||||
this.statusControl.createControl();
|
||||
this.statusControl.config.position = 'e';
|
||||
this.statusControl.show();
|
||||
window.statusControl = this.statusControl;
|
||||
console.log('✅ StatusControl initialized (East)');
|
||||
console.log('✅ StatusControl initialized (East) with enhanced ControlBase');
|
||||
}
|
||||
|
||||
// DebugControl (Southeast)
|
||||
if (typeof DebugControl !== 'undefined') {
|
||||
this.debugControl = new DebugControl();
|
||||
this.debugControl.control.config.position = 'se';
|
||||
this.debugControl.createControl();
|
||||
this.debugControl.config.position = 'se';
|
||||
this.debugControl.show();
|
||||
window.debugControl = this.debugControl;
|
||||
console.log('✅ DebugControl initialized (Southeast)');
|
||||
console.log('✅ DebugControl initialized (Southeast) with enhanced ControlBase');
|
||||
}
|
||||
|
||||
// EditControl (Northeast)
|
||||
if (typeof EditControl !== 'undefined') {
|
||||
this.editControl = new EditControl();
|
||||
this.editControl.control.config.position = 'ne';
|
||||
this.editControl.createControl();
|
||||
this.editControl.config.position = 'ne';
|
||||
this.editControl.show();
|
||||
window.editControl = this.editControl;
|
||||
console.log('✅ EditControl initialized (Northeast)');
|
||||
console.log('✅ EditControl initialized (Northeast) with enhanced ControlBase');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user