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 |
||
Line 3: | Line 3: | ||
const menu = document.createElement("div"); | const menu = document.createElement("div"); | ||
menu.id = "mahitoMenu"; | |||
Object.assign(menu.style, { | Object.assign(menu.style, { | ||
position: "fixed", | position: "fixed", | ||
Line 19: | Line 20: | ||
const header = document.createElement("div"); | const header = document.createElement("div"); | ||
header.style.display = "flex"; | |||
header.style.alignItems = "center"; | |||
header.style.gap = "6px"; | |||
header.style.marginBottom = "8px"; | |||
header.style.cursor = "grab"; | |||
const img1 = document.createElement("img"); | |||
img1.src = icon; | |||
img1.width = 15; | |||
img1.height = 15; | |||
const | const title = document.createElement("div"); | ||
title.textContent = "Mahito Menu"; | |||
title.style.fontWeight = "bold"; | |||
title.style.color = "#fff"; | |||
const | const img2 = document.createElement("img"); | ||
img2.src = icon; | |||
img2.width = 15; | |||
img2.height = 15; | |||
header.appendChild(img1); | header.appendChild(img1); | ||
header.appendChild( | header.appendChild(title); | ||
header.appendChild(img2); | header.appendChild(img2); | ||
Line 56: | Line 62: | ||
} | } | ||
const | const btn1 = makeButton("Mass undo", () => { | ||
prompt("Copy this into your common.js:", "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');"); | prompt("Copy this into your common.js:", "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');"); | ||
}); | }); | ||
const | const btn2 = makeButton("Open Explanation", () => { | ||
alert("Open Explanation clicked"); | alert("Open Explanation clicked"); | ||
}); | }); | ||
menu.appendChild(header); | menu.appendChild(header); | ||
menu.appendChild( | menu.appendChild(btn1); | ||
menu.appendChild( | menu.appendChild(btn2); | ||
document.body.appendChild(menu); | document.body.appendChild(menu); | ||
// === | // === DRAGGING === | ||
let isDragging = false; | let isDragging = false; | ||
let offsetX = 0, | let offsetX = 0, offsetY = 0; | ||
function startDrag(x, y) { | function startDrag(x, y) { | ||
Line 119: | Line 103: | ||
e.preventDefault(); | e.preventDefault(); | ||
}); | }); | ||
document.addEventListener("mousemove", (e) => doDrag(e.clientX, e.clientY)); | |||
document.addEventListener("mousemove", (e) => { | |||
doDrag(e.clientX, e.clientY); | |||
}); | |||
document.addEventListener("mouseup", stopDrag); | document.addEventListener("mouseup", stopDrag); | ||
Line 127: | Line 115: | ||
e.preventDefault(); | e.preventDefault(); | ||
}); | }); | ||
document.addEventListener("touchmove", (e) => { | document.addEventListener("touchmove", (e) => { | ||
if (!isDragging) return; | if (!isDragging) return; | ||
Line 132: | Line 121: | ||
doDrag(touch.clientX, touch.clientY); | doDrag(touch.clientX, touch.clientY); | ||
}); | }); | ||
document.addEventListener("touchend", stopDrag); | document.addEventListener("touchend", stopDrag); | ||
})(); | })(); |
Revision as of 21:10, 27 June 2025
(function () {
const icon = "https://files.catbox.moe/wk78nl.jpg";
const menu = document.createElement("div");
menu.id = "mahitoMenu";
Object.assign(menu.style, {
position: "fixed",
top: "20px",
right: "20px",
background: "#7889B2",
color: "#fff",
border: "2px solid #666",
borderRadius: "10px",
padding: "10px",
fontFamily: "monospace",
zIndex: "99999",
boxShadow: "0 0 10px black",
touchAction: "none",
});
const header = document.createElement("div");
header.style.display = "flex";
header.style.alignItems = "center";
header.style.gap = "6px";
header.style.marginBottom = "8px";
header.style.cursor = "grab";
const img1 = document.createElement("img");
img1.src = icon;
img1.width = 15;
img1.height = 15;
const title = document.createElement("div");
title.textContent = "Mahito Menu";
title.style.fontWeight = "bold";
title.style.color = "#fff";
const img2 = document.createElement("img");
img2.src = icon;
img2.width = 15;
img2.height = 15;
header.appendChild(img1);
header.appendChild(title);
header.appendChild(img2);
function makeButton(text, onclick) {
const btn = document.createElement("button");
btn.textContent = text;
btn.onclick = onclick;
Object.assign(btn.style, {
marginBottom: "6px",
width: "100%",
cursor: "pointer",
background: "#45A8C5",
color: "#fff",
border: "none",
padding: "5px 10px",
borderRadius: "5px",
});
return btn;
}
const btn1 = makeButton("Mass undo", () => {
prompt("Copy this into your common.js:", "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');");
});
const btn2 = makeButton("Open Explanation", () => {
alert("Open Explanation clicked");
});
menu.appendChild(header);
menu.appendChild(btn1);
menu.appendChild(btn2);
document.body.appendChild(menu);
// === DRAGGING ===
let isDragging = false;
let offsetX = 0, offsetY = 0;
function startDrag(x, y) {
isDragging = true;
const rect = menu.getBoundingClientRect();
offsetX = x - rect.left;
offsetY = y - rect.top;
menu.style.left = rect.left + "px";
menu.style.top = rect.top + "px";
menu.style.right = "auto";
}
function doDrag(x, y) {
if (!isDragging) return;
menu.style.left = x - offsetX + "px";
menu.style.top = y - offsetY + "px";
}
function stopDrag() {
isDragging = false;
}
header.addEventListener("mousedown", (e) => {
startDrag(e.clientX, e.clientY);
e.preventDefault();
});
document.addEventListener("mousemove", (e) => {
doDrag(e.clientX, e.clientY);
});
document.addEventListener("mouseup", stopDrag);
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);
})();