User:Stumblean/common.js: Difference between revisions
Appearance
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
||
(57 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
(function () { | (function () { | ||
const | 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"); | |||
menu.id = "delta-menu"; | |||
Object.assign(menu.style, { | |||
display: "none", | |||
position: "fixed", | |||
bottom: "80px", | |||
right: "20px", | |||
width: "300px", | |||
background: "#2b2b2b", | |||
color: "#fff", | |||
borderRadius: "10px", | |||
padding: "15px", | |||
boxShadow: "0 0 10px rgba(0,0,0,0.5)", | |||
zIndex: 9999, | |||
fontFamily: "monospace", | |||
cursor: "move", | |||
userSelect: "none", | |||
touchAction: "none", | |||
}); | |||
const title = document.createElement("div"); | |||
title.textContent = "Delta Online"; | |||
Object.assign(title.style, { | |||
textAlign: "center", | |||
fontSize: "18px", | |||
marginBottom: "10px", | |||
userSelect: "text", | |||
cursor: "default", | |||
}); | |||
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 | 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(" | document.addEventListener( | ||
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 toggleMenu() { | |||
menu.style.display = menu.style.display === "none" ? "block" : "none"; | |||
} | |||
makeDraggable(toggle, [], toggleMenu); | |||
makeDraggable(menu, [textarea, runBtn]); | |||
menu.appendChild(title); | |||
menu.appendChild(textarea); | |||
menu.appendChild(runBtn); | |||
document.body.appendChild(toggle); | |||
document.body.appendChild(menu); | |||
})(); | })(); |
Latest revision as of 00:19, 29 June 2025
(function () {
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");
menu.id = "delta-menu";
Object.assign(menu.style, {
display: "none",
position: "fixed",
bottom: "80px",
right: "20px",
width: "300px",
background: "#2b2b2b",
color: "#fff",
borderRadius: "10px",
padding: "15px",
boxShadow: "0 0 10px rgba(0,0,0,0.5)",
zIndex: 9999,
fontFamily: "monospace",
cursor: "move",
userSelect: "none",
touchAction: "none",
});
const title = document.createElement("div");
title.textContent = "Delta Online";
Object.assign(title.style, {
textAlign: "center",
fontSize: "18px",
marginBottom: "10px",
userSelect: "text",
cursor: "default",
});
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 toggleMenu() {
menu.style.display = menu.style.display === "none" ? "block" : "none";
}
makeDraggable(toggle, [], toggleMenu);
makeDraggable(menu, [textarea, runBtn]);
menu.appendChild(title);
menu.appendChild(textarea);
menu.appendChild(runBtn);
document.body.appendChild(toggle);
document.body.appendChild(menu);
})();