Rodrigo Rodriguez (Pragmatismo)
6d07aa4bdd
- Fixed 404 errors on desktop shell assets by explicitly routing to /suite/ absolute paths - Replaced missing FontAwesome icons in window-manager.js with inline SVGs since CDNs are banned
291 lines
No EOL
15 KiB
JavaScript
291 lines
No EOL
15 KiB
JavaScript
if (typeof window.WindowManager === 'undefined') {
|
|
class WindowManager {
|
|
constructor() {
|
|
this.openWindows = [];
|
|
this.activeWindowId = null;
|
|
this.zIndexCounter = 100;
|
|
this.workspace = document.getElementById('desktop-content') || document.body;
|
|
this.taskbarApps = document.getElementById('taskbar-apps');
|
|
}
|
|
|
|
open(id, title, htmlContent) {
|
|
// If window already exists, focus it
|
|
const existingWindow = this.openWindows.find(w => w.id === id);
|
|
if (existingWindow) {
|
|
this.focus(id);
|
|
return;
|
|
}
|
|
|
|
// Create new window
|
|
const windowData = {
|
|
id,
|
|
title,
|
|
isMinimized: false,
|
|
isMaximized: false,
|
|
previousState: null
|
|
};
|
|
this.openWindows.push(windowData);
|
|
|
|
// Generate DOM structure
|
|
const windowEl = document.createElement('div');
|
|
windowEl.id = `window-${id}`;
|
|
// Add random slight offset for cascade effect
|
|
const offset = (this.openWindows.length * 20) % 100;
|
|
const top = 100 + offset;
|
|
const left = 150 + offset;
|
|
|
|
windowEl.className = 'absolute w-[700px] h-[500px] bg-white rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden window-element';
|
|
windowEl.style.top = `${top}px`;
|
|
windowEl.style.left = `${left}px`;
|
|
windowEl.style.zIndex = this.zIndexCounter++;
|
|
|
|
windowEl.innerHTML = `
|
|
<!-- Header (Draggable) -->
|
|
<div class="window-header h-10 bg-white/95 backdrop-blur flex items-center justify-between px-4 border-b border-gray-200 select-none cursor-move">
|
|
<div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div>
|
|
<div class="flex space-x-3 text-gray-400">
|
|
<button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>
|
|
<button class="btn-maximize hover:text-gray-600" onclick="window.WindowManager.toggleMaximize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg></button>
|
|
<button class="btn-close hover:text-red-500" onclick="window.WindowManager.close('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
|
</div>
|
|
</div>
|
|
<!-- Body (HTMX target) -->
|
|
<div id="window-body-${id}" class="window-body relative flex-1 overflow-y-auto bg-[#fafdfa]"></div>
|
|
`;
|
|
|
|
this.workspace.appendChild(windowEl);
|
|
|
|
// Inject content into the window body
|
|
const windowBody = windowEl.querySelector(`#window-body-${id}`);
|
|
if (windowBody) {
|
|
this.injectContentWithScripts(windowBody, htmlContent);
|
|
}
|
|
|
|
// Add to taskbar
|
|
if (this.taskbarApps) {
|
|
const taskbarIcon = document.createElement('div');
|
|
taskbarIcon.id = `taskbar-item-${id}`;
|
|
taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer bg-brand-50 rounded border-b-2 border-brand-500 transition-all taskbar-icon';
|
|
taskbarIcon.onclick = () => this.toggleMinimize(id);
|
|
|
|
let iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';
|
|
if (id === 'vibe') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>';
|
|
else if (id === 'tasks') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>';
|
|
else if (id === 'chat') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
|
|
else if (id === 'terminal') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
|
|
else if (id === 'drive') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
|
|
else if (id === 'editor') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>';
|
|
else if (id === 'browser') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>';
|
|
else if (id === 'mail') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>';
|
|
else if (id === 'settings') iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>';
|
|
|
|
taskbarIcon.innerHTML = `
|
|
<div class="app-icon w-8 h-8 rounded-md flex items-center justify-center text-white text-xs shadow-sm">
|
|
${iconHtml}
|
|
</div>
|
|
`;
|
|
this.taskbarApps.appendChild(taskbarIcon);
|
|
}
|
|
|
|
this.makeDraggable(windowEl);
|
|
this.makeResizable(windowEl);
|
|
this.focus(id);
|
|
|
|
// Tell HTMX to process the new content
|
|
if (window.htmx) {
|
|
htmx.process(windowEl);
|
|
}
|
|
}
|
|
|
|
focus(id) {
|
|
this.activeWindowId = id;
|
|
const windowEl = document.getElementById(`window-${id}`);
|
|
if (windowEl) {
|
|
windowEl.style.zIndex = this.zIndexCounter++;
|
|
}
|
|
|
|
// Highlight taskbar icon
|
|
if (this.taskbarApps) {
|
|
const icons = this.taskbarApps.querySelectorAll('.taskbar-icon');
|
|
icons.forEach(icon => {
|
|
icon.classList.remove('border-brand-500');
|
|
icon.classList.add('border-transparent');
|
|
});
|
|
const activeIcon = document.getElementById(`taskbar-item-${id}`);
|
|
if (activeIcon) {
|
|
activeIcon.classList.remove('border-transparent');
|
|
activeIcon.classList.add('border-brand-500');
|
|
}
|
|
}
|
|
}
|
|
|
|
close(id) {
|
|
const windowEl = document.getElementById(`window-${id}`);
|
|
if (windowEl) {
|
|
windowEl.remove();
|
|
}
|
|
const taskbarIcon = document.getElementById(`taskbar-item-${id}`);
|
|
if (taskbarIcon) {
|
|
taskbarIcon.remove();
|
|
}
|
|
this.openWindows = this.openWindows.filter(w => w.id !== id);
|
|
if (this.activeWindowId === id) {
|
|
this.activeWindowId = null;
|
|
// Optionally focus the next highest z-index window
|
|
}
|
|
}
|
|
|
|
toggleMinimize(id) {
|
|
const windowObj = this.openWindows.find(w => w.id === id);
|
|
if (!windowObj) return;
|
|
|
|
const windowEl = document.getElementById(`window-${id}`);
|
|
if (!windowEl) return;
|
|
|
|
if (windowObj.isMinimized) {
|
|
// Restore
|
|
windowEl.style.display = 'flex';
|
|
windowObj.isMinimized = false;
|
|
this.focus(id);
|
|
} else {
|
|
// Minimize
|
|
windowEl.style.display = 'none';
|
|
windowObj.isMinimized = true;
|
|
if (this.activeWindowId === id) {
|
|
this.activeWindowId = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleMaximize(id) {
|
|
const windowObj = this.openWindows.find(w => w.id === id);
|
|
if (!windowObj) return;
|
|
|
|
const windowEl = document.getElementById(`window-${id}`);
|
|
if (!windowEl) return;
|
|
|
|
if (windowObj.isMaximized) {
|
|
// Restore
|
|
windowEl.style.width = windowObj.previousState.width;
|
|
windowEl.style.height = windowObj.previousState.height;
|
|
windowEl.style.top = windowObj.previousState.top;
|
|
windowEl.style.left = windowObj.previousState.left;
|
|
windowObj.isMaximized = false;
|
|
} else {
|
|
// Maximize
|
|
windowObj.previousState = {
|
|
width: windowEl.style.width,
|
|
height: windowEl.style.height,
|
|
top: windowEl.style.top,
|
|
left: windowEl.style.left
|
|
};
|
|
|
|
// Adjust for taskbar height (assuming taskbar is at bottom)
|
|
const taskbarHeight = document.getElementById('taskbar') ? document.getElementById('taskbar').offsetHeight : 0;
|
|
|
|
windowEl.style.width = '100%';
|
|
windowEl.style.height = `calc(100% - ${taskbarHeight}px)`;
|
|
windowEl.style.top = '0px';
|
|
windowEl.style.left = '0px';
|
|
windowObj.isMaximized = true;
|
|
}
|
|
this.focus(id);
|
|
}
|
|
|
|
makeDraggable(windowEl) {
|
|
const header = windowEl.querySelector('.window-header');
|
|
if (!header) return;
|
|
|
|
let isDragging = false;
|
|
let startX, startY, initialLeft, initialTop;
|
|
|
|
const onMouseDown = (e) => {
|
|
// Don't drag if clicking buttons
|
|
if (e.target.tagName.toLowerCase() === 'button' || e.target.closest('button')) return;
|
|
|
|
isDragging = true;
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
initialLeft = parseInt(windowEl.style.left || 0, 10);
|
|
initialTop = parseInt(windowEl.style.top || 0, 10);
|
|
|
|
this.focus(windowEl.id.replace('window-', ''));
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
};
|
|
|
|
const onMouseMove = (e) => {
|
|
if (!isDragging) return;
|
|
|
|
// Allow animation frame optimization here in a real implementation
|
|
requestAnimationFrame(() => {
|
|
const dx = e.clientX - startX;
|
|
const dy = e.clientY - startY;
|
|
|
|
// Add basic boundaries
|
|
let newLeft = initialLeft + dx;
|
|
let newTop = initialTop + dy;
|
|
|
|
// Prevent dragging completely out
|
|
newTop = Math.max(0, newTop);
|
|
|
|
windowEl.style.left = `${newLeft}px`;
|
|
windowEl.style.top = `${newTop}px`;
|
|
});
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
isDragging = false;
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
};
|
|
|
|
header.addEventListener('mousedown', onMouseDown);
|
|
|
|
// Add focus listener to the whole window
|
|
windowEl.addEventListener('mousedown', () => {
|
|
this.focus(windowEl.id.replace('window-', ''));
|
|
});
|
|
}
|
|
|
|
injectContentWithScripts(container, htmlContent) {
|
|
// Create a temporary div to parse the HTML
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = htmlContent;
|
|
|
|
// Extract all script tags
|
|
const scripts = tempDiv.querySelectorAll('script');
|
|
const scriptsToExecute = [];
|
|
|
|
scripts.forEach((originalScript) => {
|
|
const scriptClone = document.createElement('script');
|
|
Array.from(originalScript.attributes).forEach(attr => {
|
|
scriptClone.setAttribute(attr.name, attr.value);
|
|
});
|
|
scriptClone.textContent = originalScript.textContent;
|
|
scriptsToExecute.push(scriptClone);
|
|
originalScript.remove(); // Remove from tempDiv so innerHTML doesn't include it
|
|
});
|
|
|
|
// Inject HTML content without scripts
|
|
container.innerHTML = tempDiv.innerHTML;
|
|
|
|
// Execute each script
|
|
scriptsToExecute.forEach((script) => {
|
|
container.appendChild(script);
|
|
});
|
|
}
|
|
|
|
makeResizable(windowEl) {
|
|
// Implement simple bottom-right resize for now
|
|
// In a full implementation, you'd add invisible border handles
|
|
windowEl.style.resize = 'both';
|
|
// Note: CSS resize creates conflicts with custom dragging/resizing if not careful.
|
|
// For a true "WinBox" feel, custom handles (divs) on all 8 edges/corners are needed.
|
|
}
|
|
}
|
|
|
|
// Initialize globally
|
|
window.WindowManager = new WindowManager();
|
|
} |