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 1: | Line 1: | ||
(function() { | (function () { | ||
const minimizedImgURL = "https://files.catbox.moe/wk78nl.jpg"; | |||
const menu = document.createElement("div"); | const menu = document.createElement("div"); | ||
menu.id = "mahitoMenu"; | menu.id = "mahitoMenu"; | ||
Line 14: | Line 16: | ||
menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)"; | menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)"; | ||
menu.style.userSelect = "none"; | menu.style.userSelect = "none"; | ||
menu.style.touchAction = "none"; | menu.style.touchAction = "none"; | ||
menu.style.width = "auto"; | |||
// Header | // Header | ||
const header = document.createElement("div"); | const header = document.createElement("div"); | ||
header.style.cursor = "grab"; | header.style.cursor = "grab"; | ||
Line 36: | Line 39: | ||
minimizeBtn.style.cursor = "pointer"; | minimizeBtn.style.cursor = "pointer"; | ||
minimizeBtn.style.marginLeft = "10px"; | minimizeBtn.style.marginLeft = "10px"; | ||
header.appendChild(minimizeBtn); | header.appendChild(minimizeBtn); | ||
menu.appendChild(header); | menu.appendChild(header); | ||
// Content | |||
const content = document.createElement("div"); | const content = document.createElement("div"); | ||
Line 51: | Line 52: | ||
openBtn.style.padding = "5px 10px"; | openBtn.style.padding = "5px 10px"; | ||
openBtn.style.cursor = "pointer"; | openBtn.style.cursor = "pointer"; | ||
openBtn.onclick = function() { | openBtn.onclick = function () { | ||
console.log("Open Explanation clicked"); | console.log("Open Explanation clicked"); | ||
}; | }; | ||
content.appendChild(openBtn); | content.appendChild(openBtn); | ||
menu.appendChild(content); | menu.appendChild(content); | ||
document.body.appendChild(menu); | document.body.appendChild(menu); | ||
// Dragging | // Minimized image element (hidden at first) | ||
let isDragging = false, offsetX = 0, offsetY = 0; | const minimizedIcon = document.createElement("img"); | ||
minimizedIcon.src = minimizedImgURL; | |||
minimizedIcon.style.position = "fixed"; | |||
minimizedIcon.style.top = "20px"; | |||
minimizedIcon.style.right = "20px"; | |||
minimizedIcon.style.width = "30px"; | |||
minimizedIcon.style.height = "30px"; | |||
minimizedIcon.style.borderRadius = "5px"; | |||
minimizedIcon.style.cursor = "pointer"; | |||
minimizedIcon.style.display = "none"; | |||
minimizedIcon.style.zIndex = "9999"; | |||
document.body.appendChild(minimizedIcon); | |||
// Minimize logic | |||
minimizeBtn.onclick = function () { | |||
menu.style.display = "none"; | |||
minimizedIcon.style.display = "block"; | |||
}; | |||
// Restore logic | |||
minimizedIcon.onclick = function () { | |||
menu.style.display = "block"; | |||
minimizedIcon.style.display = "none"; | |||
}; | |||
// Dragging (mouse + touch) | |||
let isDragging = false, | |||
offsetX = 0, | |||
offsetY = 0; | |||
function startDrag(x, y) { | function startDrag(x, y) { | ||
Line 89: | Line 117: | ||
document.addEventListener("mouseup", stopDrag); | document.addEventListener("mouseup", stopDrag); | ||
// Touch events | // Touch events | ||
header.addEventListener("touchstart", e => { | header.addEventListener("touchstart", e => { | ||
const touch = e.touches[0]; | const touch = e.touches[0]; |