User:Stumblean/common.js
Appearance
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
(function () {
const iconURL = "https://files.catbox.moe/wk78nl.jpg";
const menu = document.createElement("div");
menu.id = "mahitoMenu";
Object.assign(menu.style, {
position: "fixed",
top: "20px",
right: "20px",
padding: "10px",
backgroundColor: "#111",
color: "#fff",
border: "2px solid #666",
zIndex: "9999",
fontFamily: "monospace",
borderRadius: "10px",
boxShadow: "0 0 10px rgba(0,0,0,0.5)",
userSelect: "none",
touchAction: "none"
});
const header = document.createElement("div");
Object.assign(header.style, {
cursor: "grab",
display: "flex",
alignItems: "center",
marginBottom: "8px",
gap: "6px"
});
// Replace title with catbox image
const icon = document.createElement("img");
icon.src = iconURL;
icon.width = 10;
icon.height = 10;
icon.alt = "Mahito";
icon.style.borderRadius = "2px";
header.appendChild(icon);
menu.appendChild(header);
const content = document.createElement("div");
const openBtn = document.createElement("button");
openBtn.textContent = "Open Explanation";
Object.assign(openBtn.style, {
background: "#444",
color: "#fff",
border: "none",
padding: "5px 10px",
cursor: "pointer"
});
openBtn.onclick = () => console.log("Open Explanation clicked");
content.appendChild(openBtn);
menu.appendChild(content);
document.body.appendChild(menu);
// Dragging logic (mouse + touch)
let isDragging = false, offsetX = 0, offsetY = 0;
function startDrag(x, y) {
isDragging = true;
const rect = menu.getBoundingClientRect();
offsetX = x - rect.left;
offsetY = y - rect.top;
menu.style.right = "auto";
}
function doDrag(x, y) {
if (isDragging) {
menu.style.left = (x - offsetX) + "px";
menu.style.top = (y - offsetY) + "px";
}
}
function stopDrag() {
isDragging = false;
}
// Mouse events
header.addEventListener("mousedown", e => {
startDrag(e.clientX, e.clientY);
e.preventDefault();
});
document.addEventListener("mousemove", e => doDrag(e.clientX, e.clientY));
document.addEventListener("mouseup", stopDrag);
// Touch events
header.addEventListener("touchstart", e => {
const touch = e.touches[0];
startDrag(touch.clientX, touch.clientY);
e.preventDefault();
});
document.addEventListener("touchmove", e => {
if (!isDragging) return;
const touch = e.touches[0];
doDrag(touch.clientX, touch.clientY);
});
document.addEventListener("touchend", stopDrag);
})();