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 7: Line 7:
         position: "fixed",
         position: "fixed",
         top: "20px",
         top: "20px",
        left: "auto",
         right: "20px",
         right: "20px",
         padding: "10px",
         padding: "10px",
Line 21: Line 22:
     });
     });


    // Header
     const header = document.createElement("div");
     const header = document.createElement("div");
     Object.assign(header.style, {
     Object.assign(header.style, {
Line 48: Line 48:
     menu.appendChild(header);
     menu.appendChild(header);


    // Content
     const content = document.createElement("div");
     const content = document.createElement("div");
     const openBtn = document.createElement("button");
     const openBtn = document.createElement("button");
Line 59: Line 58:
         cursor: "pointer"
         cursor: "pointer"
     });
     });
     openBtn.onclick = function () {
     openBtn.onclick = () => console.log("Open Explanation clicked");
        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 icon
     // Minimized image (hidden at start)
     const minimizedIcon = document.createElement("img");
     const minimizedIcon = document.createElement("img");
     minimizedIcon.src = minimizedImgURL;
     minimizedIcon.src = minimizedImgURL;
     Object.assign(minimizedIcon.style, {
     Object.assign(minimizedIcon.style, {
         position: "fixed",
         position: "fixed",
        top: "20px",
        right: "20px",
         width: "30px",
         width: "30px",
         height: "30px",
         height: "30px",
Line 86: Line 81:
     // Minimize logic
     // Minimize logic
     minimizeBtn.onclick = function () {
     minimizeBtn.onclick = function () {
        const rect = menu.getBoundingClientRect();
         menu.style.transform = "scale(0.5)";
         menu.style.transform = "scale(0.5)";
         menu.style.opacity = "0";
         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(() => {
         setTimeout(() => {
             menu.style.display = "none";
             menu.style.display = "none";
Line 108: Line 110:
     };
     };


     // Drag support (mouse + touch)
     // Drag logic
     let isDragging = false;
     let isDragging = false, offsetX = 0, offsetY = 0;
    let offsetX = 0;
    let offsetY = 0;


     function startDrag(x, y) {
     function startDrag(x, y) {
Line 118: Line 118:
         offsetX = x - rect.left;
         offsetX = x - rect.left;
         offsetY = y - rect.top;
         offsetY = y - rect.top;
         menu.style.right = "auto";
         menu.style.right = "auto"; // important!
     }
     }


Line 132: Line 132:
     }
     }


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


    // Touch events
     header.addEventListener("touchstart", e => {
     header.addEventListener("touchstart", function (e) {
         const touch = e.touches[0];
         const touch = e.touches[0];
         startDrag(touch.clientX, touch.clientY);
         startDrag(touch.clientX, touch.clientY);
         e.preventDefault();
         e.preventDefault();
     });
     });
     document.addEventListener("touchmove", function (e) {
     document.addEventListener("touchmove", e => {
         if (!isDragging) return;
         if (!isDragging) return;
         const touch = e.touches[0];
         const touch = e.touches[0];
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"