tegwick
4262310302
Implement comprehensive control panel functionality based on reference patterns: ## New Features - Icon-only collapsed state with compass positioning - Expand/drag functionality for repositioning panels - Bottom-left corner resize with minimum size constraints - Collapse button returns to original position - Header toggle for content visibility control ## Technical Improvements - Enhanced DOM structure with expanded/collapsed states - Robust event handling with automatic cleanup - State management for drag, resize, expand operations - Position restoration system for collapse behavior - Comprehensive styling system with backdrop effects ## Components Added - Enhanced ControlBase class with 5 core behaviors - ContentsControl, StatusControl, EditControl, DebugControl panels - Component discovery system with TDD implementation - Legacy DocumentControlsLegacy for backward compatibility ## Testing & Documentation - Interactive test page for behavior validation - Comprehensive implementation notes - TDD test suite with 84 passing tests - Component listing automation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
111 lines
3.5 KiB
HTML
111 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Control Base Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.test-instructions {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.control-content {
|
|
padding: 12px;
|
|
background: white;
|
|
}
|
|
|
|
.expanded .control-panel-expanded {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-instructions">
|
|
<h1>Control Base Functionality Test</h1>
|
|
<p>This page tests the improved ControlBase functionality. You should see:</p>
|
|
<ol>
|
|
<li><strong>Icon-only collapsed state</strong>: Controls start as small icons</li>
|
|
<li><strong>Click to expand</strong>: Click the icon to expand the control</li>
|
|
<li><strong>Drag functionality</strong>: When expanded, drag by the header to move</li>
|
|
<li><strong>Bottom-left resize</strong>: When expanded, grab the ↙ corner to resize</li>
|
|
<li><strong>Close button (✕)</strong>: Returns control to original position</li>
|
|
<li><strong>Header toggle</strong>: Click the title to show/hide content</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Load the ControlBase -->
|
|
<script src="js/controls/control-base.js"></script>
|
|
|
|
<script>
|
|
// Test Controls
|
|
class TestControl extends ControlBase {
|
|
constructor(config) {
|
|
super();
|
|
Object.assign(this.config, config);
|
|
}
|
|
|
|
buildContent() {
|
|
const content = this.element?.querySelector('.control-content');
|
|
if (content) {
|
|
content.innerHTML = `
|
|
<div style="padding: 8px;">
|
|
<h4>Test Content</h4>
|
|
<p>This is the ${this.config.title} control content.</p>
|
|
<button onclick="alert('Button clicked!')">Test Button</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create test controls in different compass positions
|
|
const controls = [
|
|
new TestControl({
|
|
title: 'North Control',
|
|
icon: '🧭',
|
|
position: 'n',
|
|
className: 'test-north-control'
|
|
}),
|
|
new TestControl({
|
|
title: 'East Control',
|
|
icon: '⭐',
|
|
position: 'e',
|
|
className: 'test-east-control'
|
|
}),
|
|
new TestControl({
|
|
title: 'South Control',
|
|
icon: '🎯',
|
|
position: 's',
|
|
className: 'test-south-control'
|
|
}),
|
|
new TestControl({
|
|
title: 'West Control',
|
|
icon: '🔧',
|
|
position: 'w',
|
|
className: 'test-west-control'
|
|
})
|
|
];
|
|
|
|
// Show all controls
|
|
controls.forEach(control => {
|
|
control.show();
|
|
});
|
|
|
|
// Add some debugging
|
|
window.testControls = controls;
|
|
console.log('Test controls created:', controls);
|
|
console.log('You can access controls via window.testControls');
|
|
</script>
|
|
</body>
|
|
</html> |