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 12: Line 12:
     borderRadius: "12px", // Rounded square
     borderRadius: "12px", // Rounded square
     zIndex: 9998,
     zIndex: 9998,
     cursor: "pointer"
     cursor: "pointer",
   });
   });


Line 22: Line 22:
     height: "48px",
     height: "48px",
     borderRadius: "12px",
     borderRadius: "12px",
     display: "block" // Removes small spacing around img inside button
     display: "block", // Removes small spacing around img inside button
   });
   });
   toggle.appendChild(icon);
   toggle.appendChild(icon);
Line 43: Line 43:
     fontFamily: "monospace",
     fontFamily: "monospace",
     cursor: "move",
     cursor: "move",
     userSelect: "none"
     userSelect: "none",
    touchAction: "none", // prevent default scrolling on touch drag
   });
   });


Line 51: Line 52:
     textAlign: "center",
     textAlign: "center",
     fontSize: "18px",
     fontSize: "18px",
     marginBottom: "10px"
     marginBottom: "10px",
   });
   });


Line 67: Line 68:
     boxSizing: "border-box",
     boxSizing: "border-box",
     cursor: "auto",
     cursor: "auto",
     userSelect: "text"
     userSelect: "text",
   });
   });


Line 80: Line 81:
     border: "none",
     border: "none",
     borderRadius: "6px",
     borderRadius: "6px",
     cursor: "pointer"
     cursor: "pointer",
   });
   });


Line 95: Line 96:
   };
   };


   // Drag functionality
   // Drag functionality for mouse and touch
   let isDragging = false;
   let isDragging = false;
   let dragStartX = 0;
   let dragStartX = 0;
Line 102: Line 103:
   let menuStartTop = 0;
   let menuStartTop = 0;


   menu.addEventListener("mousedown", (e) => {
   function dragStart(x, y) {
    // Only drag if clicked outside textarea and buttons
    if (e.target === textarea || e.target === runBtn) return;
 
     isDragging = true;
     isDragging = true;
     dragStartX = e.clientX;
     dragStartX = x;
     dragStartY = e.clientY;
     dragStartY = y;
 
    // Compute current left/top relative to viewport
     const rect = menu.getBoundingClientRect();
     const rect = menu.getBoundingClientRect();
     menuStartLeft = rect.left;
     menuStartLeft = rect.left;
     menuStartTop = rect.top;
     menuStartTop = rect.top;
  }


    // Prevent text selection while dragging
   function dragMove(x, y) {
    e.preventDefault();
   });
 
  document.addEventListener("mousemove", (e) => {
     if (!isDragging) return;
     if (!isDragging) return;


     const dx = e.clientX - dragStartX;
     const dx = x - dragStartX;
     const dy = e.clientY - dragStartY;
     const dy = y - dragStartY;


     let newLeft = menuStartLeft + dx;
     let newLeft = menuStartLeft + dx;
     let newTop = menuStartTop + dy;
     let newTop = menuStartTop + dy;


    // Constrain within viewport (optional)
     const winWidth = window.innerWidth;
     const winWidth = window.innerWidth;
     const winHeight = window.innerHeight;
     const winHeight = window.innerHeight;
Line 140: Line 132:
     menu.style.left = newLeft + "px";
     menu.style.left = newLeft + "px";
     menu.style.top = newTop + "px";
     menu.style.top = newTop + "px";
     menu.style.bottom = "auto"; // Reset bottom so top/left positioning works
     menu.style.bottom = "auto";
     menu.style.right = "auto"; // Reset right for same reason
     menu.style.right = "auto";
  }
 
  function dragEnd() {
    isDragging = false;
  }
 
  // Mouse events
  menu.addEventListener("mousedown", (e) => {
    if (e.target === textarea || e.target === runBtn) return;
    dragStart(e.clientX, e.clientY);
    e.preventDefault();
  });
  document.addEventListener("mousemove", (e) => {
    dragMove(e.clientX, e.clientY);
   });
   });
  document.addEventListener("mouseup", dragEnd);


   document.addEventListener("mouseup", () => {
   // Touch events
     isDragging = false;
  menu.addEventListener("touchstart", (e) => {
     if (e.target === textarea || e.target === runBtn) return;
    const touch = e.touches[0];
    dragStart(touch.clientX, touch.clientY);
    e.preventDefault();
   });
   });
  document.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    const touch = e.touches[0];
    dragMove(touch.clientX, touch.clientY);
  }, { passive: false });
  document.addEventListener("touchend", dragEnd);
  document.addEventListener("touchcancel", dragEnd);


   // Assemble menu content
   // Assemble menu content
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"