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 14: | Line 14: | ||
menu.style.borderRadius = "10px"; | menu.style.borderRadius = "10px"; | ||
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"; | |||
// Create header for drag and minimize | |||
const header = document.createElement("div"); | |||
header.style.cursor = "move"; | |||
header.style.display = "flex"; | |||
header.style.justifyContent = "space-between"; | |||
header.style.alignItems = "center"; | |||
header.style.marginBottom = "8px"; | |||
// Title | // Title | ||
Line 19: | Line 28: | ||
title.textContent = "💀 Mahito Menu 💀"; | title.textContent = "💀 Mahito Menu 💀"; | ||
title.style.fontWeight = "bold"; | title.style.fontWeight = "bold"; | ||
title.style. | header.appendChild(title); | ||
menu.appendChild( | |||
// Minimize button | |||
const minimizeBtn = document.createElement("button"); | |||
minimizeBtn.textContent = "➖"; | |||
minimizeBtn.style.background = "#333"; | |||
minimizeBtn.style.color = "#fff"; | |||
minimizeBtn.style.border = "none"; | |||
minimizeBtn.style.cursor = "pointer"; | |||
minimizeBtn.style.marginLeft = "10px"; | |||
minimizeBtn.onclick = function() { | |||
content.style.display = content.style.display === "none" ? "block" : "none"; | |||
}; | |||
header.appendChild(minimizeBtn); | |||
menu.appendChild(header); | |||
// Content container | |||
const content = document.createElement("div"); | |||
// "Open Explanation" button | // "Open Explanation" button | ||
const openBtn = document.createElement("button"); | const openBtn = document.createElement("button"); | ||
openBtn.textContent = "Open Explanation"; | openBtn.textContent = "Open Explanation"; | ||
Line 31: | Line 56: | ||
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); | |||
menu.appendChild(content); | |||
document.body.appendChild(menu); | document.body.appendChild(menu); | ||
// Drag functionality | |||
let isDragging = false, offsetX = 0, offsetY = 0; | |||
header.addEventListener("mousedown", function(e) { | |||
isDragging = true; | |||
offsetX = e.clientX - menu.offsetLeft; | |||
offsetY = e.clientY - menu.offsetTop; | |||
e.preventDefault(); | |||
}); | |||
document.addEventListener("mousemove", function(e) { | |||
if (isDragging) { | |||
menu.style.left = (e.clientX - offsetX) + "px"; | |||
menu.style.top = (e.clientY - offsetY) + "px"; | |||
menu.style.right = "auto"; // stop auto-sticking to right side | |||
} | |||
}); | |||
document.addEventListener("mouseup", function() { | |||
isDragging = false; | |||
}); | |||
})(); | })(); |