User:Stumblean/common.js

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

    const menu = document.createElement("div");
    menu.id = "mahitoMenu";
    Object.assign(menu.style, {
        position: "fixed",
        top: "20px",
        left: "auto",
        right: "20px",
        padding: "10px",
        backgroundColor: "#111",
        color: "#fff",
        border: "2px solid #666",
        zIndex: "9999",
        fontFamily: "monospace",
        borderRadius: "10px",
        boxShadow: "0 0 10px rgba(0,0,0,0.5)",
        userSelect: "none",
        touchAction: "none",
        transition: "transform 0.3s ease, opacity 0.3s ease"
    });

    const header = document.createElement("div");
    Object.assign(header.style, {
        cursor: "grab",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        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 = "➖";
    Object.assign(minimizeBtn.style, {
        background: "#333",
        color: "#fff",
        border: "none",
        cursor: "pointer",
        marginLeft: "10px"
    });
    header.appendChild(minimizeBtn);
    menu.appendChild(header);

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

    // Minimized image (hidden at start)
    const minimizedIcon = document.createElement("img");
    minimizedIcon.src = minimizedImgURL;
    Object.assign(minimizedIcon.style, {
        position: "fixed",
        width: "30px",
        height: "30px",
        borderRadius: "5px",
        cursor: "pointer",
        display: "none",
        opacity: "0",
        zIndex: "9999",
        transition: "opacity 0.3s ease"
    });
    document.body.appendChild(minimizedIcon);

    // Minimize logic
    minimizeBtn.onclick = function () {
        const rect = menu.getBoundingClientRect();
        menu.style.transform = "scale(0.5)";
        menu.style.opacity = "0";

        // Place minimized image at same location
        minimizedIcon.style.left = rect.left + "px";
        minimizedIcon.style.top = rect.top + "px";
        minimizedIcon.style.right = "auto";

        setTimeout(() => {
            menu.style.display = "none";
            menu.style.transform = "scale(1)";
            menu.style.opacity = "1";
            minimizedIcon.style.display = "block";
            requestAnimationFrame(() => {
                minimizedIcon.style.opacity = "1";
            });
        }, 300);
    };

    // Restore logic
    minimizedIcon.onclick = function () {
        minimizedIcon.style.opacity = "0";
        setTimeout(() => {
            minimizedIcon.style.display = "none";
            menu.style.display = "block";
        }, 300);
    };

    // Drag logic
    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"; // important!
    }

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

    function stopDrag() {
        isDragging = false;
    }

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

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