feat: add refactored testdrive-jsui capability with consolidated architecture

Complete integration of refactored testdrive-jsui capability: ## Refactored Architecture - js/ - All JavaScript source (controls, components, core) - static/ - CSS, images, templates - src/testdrive_jsui/ - Python package - tests/ - Python tests ## Plugin Self-Declaration - get_plugin_source_dir() - plugin declares own location - get_asset_paths() - organized asset paths - No hardcoded discovery logic ## Merged Content - Baseline UI scaffold (tutorials, LICENSE, INTRODUCTION.md) - Refactored capability implementation - Comprehensive documentation Ready for standalone use or integration with markitect. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-16 00:01:58 +01:00
parent 7ef23c2905
commit 9d7964f9e5
70 changed files with 32933 additions and 1702 deletions
--- a/test-control-base.html
+++ b/test-control-base.html
@@ -0,0 +1,111 @@
+<!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>