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 |
||
(43 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
(function () { | (function () { | ||
const icon = "https://files.catbox.moe/ | function constrainPosition(x, y, width, height) { | ||
const winWidth = window.innerWidth; | |||
const winHeight = window.innerHeight; | |||
if (x < 0) x = 0; | |||
if (y < 0) y = 0; | |||
if (x + width > winWidth) x = winWidth - width; | |||
if (y + height > winHeight) y = winHeight - height; | |||
return [x, y]; | |||
} | |||
const toggle = document.createElement("button"); | |||
toggle.id = "delta-toggle"; | |||
Object.assign(toggle.style, { | |||
position: "fixed", | |||
bottom: "20px", | |||
right: "20px", | |||
padding: "0", | |||
background: "#2b2b2b", | |||
border: "none", | |||
borderRadius: "12px", | |||
zIndex: 9998, | |||
cursor: "move", | |||
userSelect: "none", | |||
touchAction: "none", | |||
}); | |||
const icon = document.createElement("img"); | |||
icon.src = "https://files.catbox.moe/uodscw.png"; | |||
icon.alt = "Delta"; | |||
Object.assign(icon.style, { | |||
width: "48px", | |||
height: "48px", | |||
borderRadius: "12px", | |||
display: "block", | |||
pointerEvents: "none", | |||
}); | |||
toggle.appendChild(icon); | |||
const menu = document.createElement("div"); | const menu = document.createElement("div"); | ||
menu.id = " | menu.id = "delta-menu"; | ||
Object.assign(menu.style, { | Object.assign(menu.style, { | ||
display: "none", | |||
position: "fixed", | position: "fixed", | ||
bottom: "80px", | |||
right: "20px", | right: "20px", | ||
background: "# | width: "300px", | ||
background: "#2b2b2b", | |||
color: "#fff", | color: "#fff", | ||
borderRadius: "10px", | borderRadius: "10px", | ||
padding: "10px", | padding: "15px", | ||
boxShadow: "0 0 10px rgba(0,0,0,0.5)", | |||
zIndex: 9999, | |||
fontFamily: "monospace", | fontFamily: "monospace", | ||
cursor: "move", | |||
userSelect: "none", | |||
touchAction: "none", | touchAction: "none", | ||
}); | }); | ||
const title = document.createElement("div"); | const title = document.createElement("div"); | ||
title.textContent = " | title.textContent = "Delta Online"; | ||
title.style | Object.assign(title.style, { | ||
textAlign: "center", | |||
fontSize: "18px", | |||
marginBottom: "10px", | |||
userSelect: "text", | |||
cursor: "default", | |||
}); | |||
const | const textarea = document.createElement("textarea"); | ||
textarea.placeholder = "Enter JavaScript..."; | |||
Object.assign(textarea.style, { | |||
width: "100%", | |||
height: "120px", | |||
background: "#1e1e1e", | |||
color: "#fff", | |||
border: "none", | |||
borderRadius: "6px", | |||
padding: "10px", | |||
resize: "none", | |||
boxSizing: "border-box", | |||
cursor: "auto", | |||
userSelect: "text", | |||
}); | |||
const runBtn = document.createElement("button"); | |||
runBtn.textContent = "Run Code"; | |||
Object.assign(runBtn.style, { | |||
marginTop: "10px", | |||
width: "100%", | |||
padding: "10px", | |||
background: "#4caf50", | |||
color: "#fff", | |||
border: "none", | |||
borderRadius: "6px", | |||
cursor: "pointer", | |||
}); | |||
runBtn.onclick = () => { | |||
try { | |||
eval(textarea.value); | |||
} catch (e) { | |||
alert("Error: " + e.message); | |||
} | |||
}; | |||
} | |||
function makeDraggable(element, excludeElements = [], onClick) { | |||
let isDragging = false; | |||
let dragStartX = 0; | |||
let dragStartY = 0; | |||
let elemStartLeft = 0; | |||
let elemStartTop = 0; | |||
let moved = false; | |||
function onDragStart(x, y, target) { | |||
if (excludeElements.includes(target)) return false; | |||
isDragging = true; | |||
moved = false; | |||
dragStartX = x; | |||
dragStartY = y; | |||
const rect = element.getBoundingClientRect(); | |||
elemStartLeft = rect.left; | |||
elemStartTop = rect.top; | |||
return true; | |||
} | |||
function onDragMove(x, y) { | |||
if (!isDragging) return; | |||
const dx = x - dragStartX; | |||
const dy = y - dragStartY; | |||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true; | |||
let newLeft = elemStartLeft + dx; | |||
let newTop = elemStartTop + dy; | |||
[newLeft, newTop] = constrainPosition( | |||
newLeft, | |||
newTop, | |||
element.offsetWidth, | |||
element.offsetHeight | |||
); | |||
element.style.left = newLeft + "px"; | |||
element.style.top = newTop + "px"; | |||
element.style.bottom = "auto"; | |||
element.style.right = "auto"; | |||
} | |||
function onDragEnd() { | |||
if (!isDragging) return; | |||
isDragging = false; | |||
if (!moved && typeof onClick === "function") { | |||
onClick(); | |||
} | } | ||
} | |||
element.addEventListener("mousedown", (e) => { | |||
if (!onDragStart(e.clientX, e.clientY, e.target)) return; | |||
e.preventDefault(); | |||
}); | }); | ||
document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY)); | |||
document.addEventListener("mouseup", onDragEnd); | |||
element.addEventListener("touchstart", (e) => { | |||
if (!e.touches || !e.touches[0]) return; | |||
if (!onDragStart(e.touches[0].clientX, e.touches[0].clientY, e.target)) return; | |||
e.preventDefault(); | |||
}); | |||
document.addEventListener( | |||
"touchmove", | |||
(e) => { | |||
if (!e.touches || !e.touches[0]) return; | |||
onDragMove(e.touches[0].clientX, e.touches[0].clientY); | |||
}, | |||
{ passive: false } | |||
); | |||
document.addEventListener("touchend", onDragEnd); | |||
document.addEventListener("touchcancel", onDragEnd); | |||
} | } | ||
function | function toggleMenu() { | ||
menu.style.display = menu.style.display === "none" ? "block" : "none"; | |||
menu.style. | |||
} | } | ||
makeDraggable(toggle, [], toggleMenu); | |||
makeDraggable(menu, [textarea, runBtn]); | |||
menu.appendChild(title); | |||
menu.appendChild(textarea); | |||
menu.appendChild(runBtn); | |||
document.body.appendChild(toggle); | |||
document.body.appendChild(menu); | |||
document. | |||
document. | |||
})(); | })(); |