User:Stumblean/common.js

(function () {
    const minimizedImgURL = "https://files.catbox.moe/wk78nl.jpg";

    const menu = document.createElement("div");
    menu.id = "mahitoMenu";
    menu.style.position = "fixed";
    menu.style.top = "20px";
    menu.style.right = "20px";
    menu.style.padding = "10px";
    menu.style.backgroundColor = "#111";
    menu.style.color = "#fff";
    menu.style.border = "2px solid #666";
    menu.style.zIndex = "9999";
    menu.style.fontFamily = "monospace";
    menu.style.borderRadius = "10px";
    menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
    menu.style.userSelect = "none";
    menu.style.touchAction = "none";
    menu.style.width = "auto";

    // Header
    const header = document.createElement("div");
    header.style.cursor = "grab";
    header.style.display = "flex";
    header.style.justifyContent = "space-between";
    header.style.alignItems = "center";
    header.style.marginBottom = "8px";

    const title = document.createElement("div");
    title.textContent = "💀 Mahito Menu 💀";
    title.style.fontWeight = "bold";
    header.appendChild(title);

    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";
    header.appendChild(minimizeBtn);
    menu.appendChild(header);

    // Content
    const content = document.createElement("div");

    const openBtn = document.createElement("button");
    openBtn.textContent = "Open Explanation";
    openBtn.style.background = "#444";
    openBtn.style.color = "#fff";
    openBtn.style.border = "none";
    openBtn.style.padding = "5px 10px";
    openBtn.style.cursor = "pointer";
    openBtn.onclick = function () {
        console.log("Open Explanation clicked");
    };
    content.appendChild(openBtn);
    menu.appendChild(content);
    document.body.appendChild(menu);

    // Minimized image element (hidden at first)
    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) {
        isDragging = true;
        const rect = menu.getBoundingClientRect();
        offsetX = x - rect.left;
        offsetY = y - rect.top;
        menu.style.right = "auto";
    }

    function doDrag(x, y) {
        if (isDragging) {
            menu.style.left = (x - offsetX) + "px";
            menu.style.top = (y - offsetY) + "px";
        }
    }

    function stopDrag() {
        isDragging = false;
    }

    // Mouse events
    header.addEventListener("mousedown", e => {
        startDrag(e.clientX, e.clientY);
        e.preventDefault();
    });
    document.addEventListener("mousemove", e => doDrag(e.clientX, e.clientY));
    document.addEventListener("mouseup", stopDrag);

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