User:Stumblean/common.js: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
||
Line 8: | Line 8: | ||
right: "20px", | right: "20px", | ||
padding: "0", | padding: "0", | ||
background: "#2b2b2b", | background: "#2b2b2b", // Matching menu background color | ||
border: "none", | border: "none", | ||
borderRadius: "12px", // Rounded square | borderRadius: "12px", // Rounded square | ||
Line 22: | Line 22: | ||
height: "48px", | height: "48px", | ||
borderRadius: "12px", | borderRadius: "12px", | ||
display: "block" | display: "block" // Removes small spacing around img inside button | ||
}); | }); | ||
toggle.appendChild(icon); | toggle.appendChild(icon); | ||
Line 41: | Line 41: | ||
boxShadow: "0 0 10px rgba(0,0,0,0.5)", | boxShadow: "0 0 10px rgba(0,0,0,0.5)", | ||
zIndex: 9999, | zIndex: 9999, | ||
fontFamily: "monospace" | fontFamily: "monospace", | ||
cursor: "move", | |||
userSelect: "none" | |||
}); | }); | ||
Line 63: | Line 65: | ||
padding: "10px", | padding: "10px", | ||
resize: "none", | resize: "none", | ||
boxSizing: "border-box" | boxSizing: "border-box", | ||
cursor: "auto", | |||
userSelect: "text" | |||
}); | }); | ||
Line 91: | Line 95: | ||
}; | }; | ||
// | // Drag functionality | ||
let isDragging = false; | |||
let dragStartX = 0; | |||
let dragStartY = 0; | |||
let menuStartLeft = 0; | |||
let menuStartTop = 0; | |||
menu.addEventListener("mousedown", (e) => { | |||
// Only drag if clicked outside textarea and buttons | |||
if (e.target === textarea || e.target === runBtn) return; | |||
isDragging = true; | |||
dragStartX = e.clientX; | |||
dragStartY = e.clientY; | |||
// Compute current left/top relative to viewport | |||
const rect = menu.getBoundingClientRect(); | |||
menuStartLeft = rect.left; | |||
menuStartTop = rect.top; | |||
// Prevent text selection while dragging | |||
e.preventDefault(); | |||
}); | |||
document.addEventListener("mousemove", (e) => { | |||
if (!isDragging) return; | |||
const dx = e.clientX - dragStartX; | |||
const dy = e.clientY - dragStartY; | |||
let newLeft = menuStartLeft + dx; | |||
let newTop = menuStartTop + dy; | |||
// Constrain within viewport (optional) | |||
const winWidth = window.innerWidth; | |||
const winHeight = window.innerHeight; | |||
const menuRect = menu.getBoundingClientRect(); | |||
if (newLeft < 0) newLeft = 0; | |||
if (newTop < 0) newTop = 0; | |||
if (newLeft + menuRect.width > winWidth) newLeft = winWidth - menuRect.width; | |||
if (newTop + menuRect.height > winHeight) newTop = winHeight - menuRect.height; | |||
menu.style.left = newLeft + "px"; | |||
menu.style.top = newTop + "px"; | |||
menu.style.bottom = "auto"; // Reset bottom so top/left positioning works | |||
menu.style.right = "auto"; // Reset right for same reason | |||
}); | |||
document.addEventListener("mouseup", () => { | |||
isDragging = false; | |||
}); | |||
// Assemble menu content | |||
menu.appendChild(title); | menu.appendChild(title); | ||
menu.appendChild(textarea); | menu.appendChild(textarea); |