Domination Earth

User:Stumblean/common.js: Difference between revisions

← Older 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
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
   // Create toggle button with image icon
   function constrainPosition(x, y, width, height) {
    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;
    if (x < 0) x = 0;
    if (y < 0) y = 0;
    if (x + width > winWidth) x = winWidth - width;
    if (y + height > winHeight) y = winHeight - height;
    return [x, y];
  }
 
   const toggle = document.createElement("button");
   const toggle = document.createElement("button");
   toggle.id = "delta-toggle";
   toggle.id = "delta-toggle";
Line 8: Line 17:
     right: "20px",
     right: "20px",
     padding: "0",
     padding: "0",
     background: "transparent",
     background: "#2b2b2b",
     border: "none",
     border: "none",
    borderRadius: "12px",
     zIndex: 9998,
     zIndex: 9998,
     cursor: "pointer"
     cursor: "move",
    userSelect: "none",
    touchAction: "none",
   });
   });


Line 20: Line 32:
     width: "48px",
     width: "48px",
     height: "48px",
     height: "48px",
     borderRadius: "12px", // <-- Rounded square (not circle)
     borderRadius: "12px",
     boxShadow: "0 0 8px rgba(0,0,0,0.4)"
     display: "block",
    pointerEvents: "none",
   });
   });
   toggle.appendChild(icon);
   toggle.appendChild(icon);


  // Create Delta menu
   const menu = document.createElement("div");
   const menu = document.createElement("div");
   menu.id = "delta-menu";
   menu.id = "delta-menu";
Line 40: Line 52:
     boxShadow: "0 0 10px rgba(0,0,0,0.5)",
     boxShadow: "0 0 10px rgba(0,0,0,0.5)",
     zIndex: 9999,
     zIndex: 9999,
     fontFamily: "monospace"
     fontFamily: "monospace",
    cursor: "move",
    userSelect: "none",
    touchAction: "none",
   });
   });


Line 48: Line 63:
     textAlign: "center",
     textAlign: "center",
     fontSize: "18px",
     fontSize: "18px",
     marginBottom: "10px"
     marginBottom: "10px",
    userSelect: "text",
    cursor: "default",
   });
   });


Line 62: Line 79:
     padding: "10px",
     padding: "10px",
     resize: "none",
     resize: "none",
     boxSizing: "border-box"
     boxSizing: "border-box",
    cursor: "auto",
    userSelect: "text",
   });
   });


Line 75: Line 94:
     border: "none",
     border: "none",
     borderRadius: "6px",
     borderRadius: "6px",
     cursor: "pointer"
     cursor: "pointer",
   });
   });


Line 86: Line 105:
   };
   };


   toggle.onclick = () => {
   function makeDraggable(element, excludeElements = [], onClick) {
    let isDragging = false;
    let dragStartX = 0;
    let dragStartY = 0;
    let elemStartLeft = 0;
    let elemStartTop = 0;
    let moved = false;
 
    function onDragStart(x, y, target) {
      if (excludeElements.includes(target)) return false;
      isDragging = true;
      moved = false;
      dragStartX = x;
      dragStartY = y;
      const rect = element.getBoundingClientRect();
      elemStartLeft = rect.left;
      elemStartTop = rect.top;
      return true;
    }
 
    function onDragMove(x, y) {
      if (!isDragging) return;
      const dx = x - dragStartX;
      const dy = y - dragStartY;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
 
      let newLeft = elemStartLeft + dx;
      let newTop = elemStartTop + dy;
      [newLeft, newTop] = constrainPosition(
        newLeft,
        newTop,
        element.offsetWidth,
        element.offsetHeight
      );
      element.style.left = newLeft + "px";
      element.style.top = newTop + "px";
      element.style.bottom = "auto";
      element.style.right = "auto";
    }
 
    function onDragEnd() {
      if (!isDragging) return;
      isDragging = false;
      if (!moved && typeof onClick === "function") {
        onClick();
      }
    }
 
    element.addEventListener("mousedown", (e) => {
      if (!onDragStart(e.clientX, e.clientY, e.target)) return;
      e.preventDefault();
    });
    document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
    document.addEventListener("mouseup", onDragEnd);
 
    element.addEventListener("touchstart", (e) => {
      if (!e.touches || !e.touches[0]) return;
      if (!onDragStart(e.touches[0].clientX, e.touches[0].clientY, e.target)) return;
      e.preventDefault();
    });
    document.addEventListener(
      "touchmove",
      (e) => {
        if (!e.touches || !e.touches[0]) return;
        onDragMove(e.touches[0].clientX, e.touches[0].clientY);
      },
      { passive: false }
    );
    document.addEventListener("touchend", onDragEnd);
    document.addEventListener("touchcancel", onDragEnd);
  }
 
  function toggleMenu() {
     menu.style.display = menu.style.display === "none" ? "block" : "none";
     menu.style.display = menu.style.display === "none" ? "block" : "none";
   };
   }
 
  makeDraggable(toggle, [], toggleMenu);
  makeDraggable(menu, [textarea, runBtn]);


  // Add everything to page
   menu.appendChild(title);
   menu.appendChild(title);
   menu.appendChild(textarea);
   menu.appendChild(textarea);
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"