User:Stumblean/common.js: Difference between revisions

Stumblean (talk | contribs)
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
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.marginBottom = "8px";
     header.appendChild(title);
     menu.appendChild(title);
 
    // 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 (placeholder)
     // "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() {
        // do something later
         console.log("Open Explanation clicked");
         console.log("Open Explanation clicked");
     };
     };
     menu.appendChild(openBtn);
     content.appendChild(openBtn);


     // Add the menu to the page
     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;
    });
})();
})();