mirror of
https://github.com/BloopAI/vibe-kanban-web-companion.git
synced 2026-08-23 11:58:32 +00:00
fe6ae809ff
As well as triggering the context menu to open, when the user clicks on a react item we should communicate with the parent page (this is all loaded in an iframe). As it's a dev environment we need to keep security low, so don't check domains.
106 lines
3.6 KiB
HTML
106 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Parent Page - Iframe Communication Example</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
#messages {
|
|
background: #f5f5f5;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: 500px;
|
|
border: 1px solid #ccc;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Parent Page - Click-to-Component Iframe Communication</h1>
|
|
|
|
<p>This page demonstrates iframe communication with the click-to-component tool.</p>
|
|
|
|
<iframe src="your-app-with-click-to-component.html" id="dev-iframe"></iframe>
|
|
|
|
<h2>Messages from iframe:</h2>
|
|
<div id="messages"></div>
|
|
|
|
<script>
|
|
const messagesDiv = document.getElementById('messages');
|
|
|
|
function logMessage(message) {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
messagesDiv.textContent += `[${timestamp}] ${JSON.stringify(message, null, 2)}\n\n`;
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
// Listen for messages from the iframe
|
|
window.addEventListener('message', (event) => {
|
|
const data = event.data;
|
|
|
|
// Only handle messages from our click-to-component tool
|
|
if (!data || data.source !== 'click-to-component') {
|
|
return;
|
|
}
|
|
|
|
switch (data.type) {
|
|
case 'ready':
|
|
console.log('Click-to-Component iframe ready');
|
|
logMessage({
|
|
type: 'ready',
|
|
message: 'Click-to-Component tool loaded and ready'
|
|
});
|
|
break;
|
|
|
|
case 'open-in-editor':
|
|
const { selected, components, trigger, coords, clickedElement } = data.payload;
|
|
|
|
console.log('Open in editor:', data.payload);
|
|
|
|
logMessage({
|
|
type: 'open-in-editor',
|
|
trigger: trigger,
|
|
selected: {
|
|
component: selected.name,
|
|
file: selected.pathToSource,
|
|
editor: selected.editor
|
|
},
|
|
allComponents: components.map(c => ({
|
|
name: c.name,
|
|
file: c.pathToSource,
|
|
props: Object.keys(c.props)
|
|
})),
|
|
clickPosition: coords,
|
|
htmlElement: {
|
|
tag: clickedElement?.tag,
|
|
id: clickedElement?.id,
|
|
className: clickedElement?.className
|
|
}
|
|
});
|
|
break;
|
|
|
|
default:
|
|
console.log('Unknown message type:', data.type);
|
|
logMessage({
|
|
type: 'unknown',
|
|
data: data
|
|
});
|
|
}
|
|
});
|
|
|
|
// Example: You could also send messages TO the iframe if needed
|
|
function sendMessageToIframe(message) {
|
|
const iframe = document.getElementById('dev-iframe');
|
|
if (iframe && iframe.contentWindow) {
|
|
iframe.contentWindow.postMessage(message, '*');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|