Domination Earth

User:Stumblean/common.js: Difference between revisions

← Older editNewer edit →
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
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 iconURL = "https://files.catbox.moe/wk78nl.jpg";


     const menu = document.createElement("div");
     const menu = document.createElement("div");
Line 7: Line 7:
         position: "fixed",
         position: "fixed",
         top: "20px",
         top: "20px",
        left: "auto",
         right: "20px",
         right: "20px",
         padding: "10px",
         padding: "10px",
Line 18: Line 17:
         boxShadow: "0 0 10px rgba(0,0,0,0.5)",
         boxShadow: "0 0 10px rgba(0,0,0,0.5)",
         userSelect: "none",
         userSelect: "none",
         touchAction: "none",
         touchAction: "none"
        transition: "transform 0.3s ease, opacity 0.3s ease"
     });
     });


Line 26: Line 24:
         cursor: "grab",
         cursor: "grab",
         display: "flex",
         display: "flex",
        justifyContent: "space-between",
         alignItems: "center",
         alignItems: "center",
         marginBottom: "8px"
         marginBottom: "8px",
        gap: "6px"
     });
     });


     const title = document.createElement("div");
    // Replace title with catbox image
     title.textContent = "💀 Mahito Menu 💀";
     const icon = document.createElement("img");
     title.style.fontWeight = "bold";
     icon.src = iconURL;
     header.appendChild(title);
    icon.width = 10;
    icon.height = 10;
    icon.alt = "Mahito";
     icon.style.borderRadius = "2px";
     header.appendChild(icon);


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


Line 60: Line 52:
     openBtn.onclick = () => console.log("Open Explanation clicked");
     openBtn.onclick = () => 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);


     // Minimized image (hidden at start)
     // Dragging logic (mouse + touch)
    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;
     let isDragging = false, offsetX = 0, offsetY = 0;


Line 118: Line 64:
         offsetX = x - rect.left;
         offsetX = x - rect.left;
         offsetY = y - rect.top;
         offsetY = y - rect.top;
         menu.style.right = "auto"; // important!
         menu.style.right = "auto";
     }
     }


Line 132: Line 78:
     }
     }


    // Mouse events
     header.addEventListener("mousedown", e => {
     header.addEventListener("mousedown", e => {
         startDrag(e.clientX, e.clientY);
         startDrag(e.clientX, e.clientY);
Line 139: Line 86:
     document.addEventListener("mouseup", stopDrag);
     document.addEventListener("mouseup", stopDrag);


    // Touch events
     header.addEventListener("touchstart", e => {
     header.addEventListener("touchstart", e => {
         const touch = e.touches[0];
         const touch = e.touches[0];
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"