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 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); | ||
})(); | })(); |