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() {
    // Create the menu container
     const menu = document.createElement("div");
     const menu = document.createElement("div");
     menu.id = "mahitoMenu";
     menu.id = "mahitoMenu";
Line 15: Line 14:
     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";
     menu.style.userSelect = "none";
    menu.style.touchAction = "none"; // prevents weird scrolling glitches


     // Create header for drag and minimize
     // Header for dragging and minimizing
     const header = document.createElement("div");
     const header = document.createElement("div");
     header.style.cursor = "move";
     header.style.cursor = "grab";
     header.style.display = "flex";
     header.style.display = "flex";
     header.style.justifyContent = "space-between";
     header.style.justifyContent = "space-between";
Line 24: Line 24:
     header.style.marginBottom = "8px";
     header.style.marginBottom = "8px";


    // Title
     const title = document.createElement("div");
     const title = document.createElement("div");
     title.textContent = "💀 Mahito Menu 💀";
     title.textContent = "💀 Mahito Menu 💀";
Line 30: Line 29:
     header.appendChild(title);
     header.appendChild(title);


    // Minimize button
     const minimizeBtn = document.createElement("button");
     const minimizeBtn = document.createElement("button");
     minimizeBtn.textContent = "➖";
     minimizeBtn.textContent = "➖";
Line 44: Line 42:
     menu.appendChild(header);
     menu.appendChild(header);


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


    // "Open Explanation" button
     const openBtn = document.createElement("button");
     const openBtn = document.createElement("button");
     openBtn.textContent = "Open Explanation";
     openBtn.textContent = "Open Explanation";
Line 63: Line 59:
     document.body.appendChild(menu);
     document.body.appendChild(menu);


     // Drag functionality
     // Dragging support for mouse + touch
     let isDragging = false, offsetX = 0, offsetY = 0;
     let isDragging = false, offsetX = 0, offsetY = 0;


     header.addEventListener("mousedown", function(e) {
     function startDrag(x, y) {
         isDragging = true;
         isDragging = true;
         offsetX = e.clientX - menu.offsetLeft;
        const rect = menu.getBoundingClientRect();
         offsetY = e.clientY - menu.offsetTop;
         offsetX = x - rect.left;
         e.preventDefault();
         offsetY = y - rect.top;
     });
         menu.style.right = "auto";
     }


     document.addEventListener("mousemove", function(e) {
     function doDrag(x, y) {
         if (isDragging) {
         if (isDragging) {
             menu.style.left = (e.clientX - offsetX) + "px";
             menu.style.left = (x - offsetX) + "px";
             menu.style.top = (e.clientY - offsetY) + "px";
             menu.style.top = (y - offsetY) + "px";
            menu.style.right = "auto"; // stop auto-sticking to right side
         }
         }
    }
    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);


     document.addEventListener("mouseup", function() {
     // Touch events (for mobile)
         isDragging = false;
    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);
})();
})();
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"