generated from coulomb/repo-seed
feat: integrate advanced control panels with feature toggles
Added feature toggle system to TestDriveJSUI library:
Integration:
- Added control configuration (editControl, statusControl, contentsControl, debugControl)
- Added compass positioning configuration (nw, ne, e, se, s, sw, w)
- Implemented initializeAdvancedControls() method
- Updated destroy() to clean up all control panels
- Maintained backward compatibility with simple controls
Configuration:
- controls.editControl (default: true)
- controls.statusControl (default: true)
- controls.contentsControl (default: true)
- controls.debugControl (default: false)
- controls.simpleControls (default: false) - legacy mode
Usage:
new TestDriveJSUI({
container: '#editor',
controls: {
editControl: true,
statusControl: false,
contentsControl: true
}
});
This integrates the existing advanced control system (ControlBase, EditControl,
StatusControl, ContentsControl, DebugControl) into the new library API.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -40,6 +40,26 @@ class TestDriveJSUI {
|
||||
shortcuts: options.shortcuts !== false, // default true
|
||||
sections: options.sections !== false, // default true
|
||||
debug: options.debug || false,
|
||||
|
||||
// Advanced control panels (compass-positioned)
|
||||
controls: {
|
||||
editControl: options.controls?.editControl !== false, // default true
|
||||
statusControl: options.controls?.statusControl !== false, // default true
|
||||
contentsControl: options.controls?.contentsControl !== false, // default true
|
||||
debugControl: options.controls?.debugControl || false, // default false
|
||||
|
||||
// Legacy simple control panel (top-right box)
|
||||
simpleControls: options.controls?.simpleControls || false // default false
|
||||
},
|
||||
|
||||
// Control positioning (compass: nw, ne, e, se, s, sw, w)
|
||||
controlPositions: {
|
||||
editControl: options.controlPositions?.editControl || 'ne',
|
||||
statusControl: options.controlPositions?.statusControl || 'e',
|
||||
contentsControl: options.controlPositions?.contentsControl || 'nw',
|
||||
debugControl: options.controlPositions?.debugControl || 'se'
|
||||
},
|
||||
|
||||
...options
|
||||
};
|
||||
|
||||
@@ -48,6 +68,13 @@ class TestDriveJSUI {
|
||||
this.sectionManager = null;
|
||||
this.domRenderer = null;
|
||||
this.documentControls = null;
|
||||
|
||||
// Advanced control panel instances
|
||||
this.editControl = null;
|
||||
this.statusControl = null;
|
||||
this.contentsControl = null;
|
||||
this.debugControl = null;
|
||||
|
||||
this.isInitialized = false;
|
||||
this.listeners = new Map();
|
||||
|
||||
@@ -108,10 +135,6 @@ class TestDriveJSUI {
|
||||
console.error('TestDriveJSUI: DOMRenderer not loaded');
|
||||
return;
|
||||
}
|
||||
if (typeof DocumentControls === 'undefined') {
|
||||
console.error('TestDriveJSUI: DocumentControls not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create section manager
|
||||
this.sectionManager = new SectionManager();
|
||||
@@ -119,12 +142,20 @@ class TestDriveJSUI {
|
||||
// Create DOM renderer
|
||||
this.domRenderer = new DOMRenderer(this.sectionManager, this.container);
|
||||
|
||||
// Create document controls
|
||||
this.documentControls = new DocumentControls();
|
||||
this.documentControls.create();
|
||||
|
||||
// Set up event handlers for controls
|
||||
this.setupControlHandlers();
|
||||
// Initialize control panels based on configuration
|
||||
if (this.config.controls.simpleControls) {
|
||||
// Legacy simple controls (top-right box)
|
||||
if (typeof DocumentControls === 'undefined') {
|
||||
console.warn('TestDriveJSUI: DocumentControls not loaded');
|
||||
} else {
|
||||
this.documentControls = new DocumentControls();
|
||||
this.documentControls.create();
|
||||
this.setupControlHandlers();
|
||||
}
|
||||
} else {
|
||||
// Advanced compass-positioned control panels
|
||||
this.initializeAdvancedControls();
|
||||
}
|
||||
|
||||
// Parse markdown into sections and render
|
||||
this.sectionManager.createSectionsFromMarkdown(this.config.markdown);
|
||||
@@ -199,6 +230,55 @@ class TestDriveJSUI {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize advanced compass-positioned control panels
|
||||
*/
|
||||
initializeAdvancedControls() {
|
||||
console.log('🎛️ Initializing advanced control panels...');
|
||||
|
||||
// ContentsControl (Table of Contents)
|
||||
if (this.config.controls.contentsControl && typeof ContentsControl !== 'undefined') {
|
||||
this.contentsControl = new ContentsControl();
|
||||
this.contentsControl.config.position = this.config.controlPositions.contentsControl;
|
||||
this.contentsControl.show();
|
||||
console.log(`✅ ContentsControl initialized (${this.config.controlPositions.contentsControl})`);
|
||||
}
|
||||
|
||||
// StatusControl (Document Statistics)
|
||||
if (this.config.controls.statusControl && typeof StatusControl !== 'undefined') {
|
||||
this.statusControl = new StatusControl();
|
||||
this.statusControl.config.position = this.config.controlPositions.statusControl;
|
||||
this.statusControl.show();
|
||||
console.log(`✅ StatusControl initialized (${this.config.controlPositions.statusControl})`);
|
||||
}
|
||||
|
||||
// DebugControl (Debug Logs)
|
||||
if (this.config.controls.debugControl && typeof DebugControl !== 'undefined') {
|
||||
this.debugControl = new DebugControl();
|
||||
this.debugControl.config.position = this.config.controlPositions.debugControl;
|
||||
this.debugControl.show();
|
||||
console.log(`✅ DebugControl initialized (${this.config.controlPositions.debugControl})`);
|
||||
}
|
||||
|
||||
// EditControl (Document Actions)
|
||||
if (this.config.controls.editControl && typeof EditControl !== 'undefined') {
|
||||
this.editControl = new EditControl();
|
||||
this.editControl.config.position = this.config.controlPositions.editControl;
|
||||
this.editControl.show();
|
||||
console.log(`✅ EditControl initialized (${this.config.controlPositions.editControl})`);
|
||||
}
|
||||
|
||||
// Setup keyboard shortcuts if enabled
|
||||
if (this.config.shortcuts) {
|
||||
this.setupKeyboardShortcuts();
|
||||
}
|
||||
|
||||
// Setup autosave if enabled
|
||||
if (this.config.autosave) {
|
||||
this.setupAutosave();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup keyboard shortcuts
|
||||
*/
|
||||
@@ -515,11 +595,25 @@ class TestDriveJSUI {
|
||||
clearInterval(this.autosaveInterval);
|
||||
}
|
||||
|
||||
// Destroy document controls
|
||||
// Destroy simple document controls
|
||||
if (this.documentControls) {
|
||||
this.documentControls.destroy();
|
||||
}
|
||||
|
||||
// Destroy advanced control panels
|
||||
if (this.editControl) {
|
||||
this.editControl.destroy();
|
||||
}
|
||||
if (this.statusControl) {
|
||||
this.statusControl.destroy();
|
||||
}
|
||||
if (this.contentsControl) {
|
||||
this.contentsControl.destroy();
|
||||
}
|
||||
if (this.debugControl) {
|
||||
this.debugControl.destroy();
|
||||
}
|
||||
|
||||
// Clear container
|
||||
if (this.container) {
|
||||
this.container.innerHTML = '';
|
||||
@@ -529,6 +623,10 @@ class TestDriveJSUI {
|
||||
this.sectionManager = null;
|
||||
this.domRenderer = null;
|
||||
this.documentControls = null;
|
||||
this.editControl = null;
|
||||
this.statusControl = null;
|
||||
this.contentsControl = null;
|
||||
this.debugControl = null;
|
||||
this.listeners.clear();
|
||||
this.isInitialized = false;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user