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 () {
  // Utility function for constraining position within viewport
  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];
  }
   // Create toggle button with image icon
   // Create toggle button with image icon
   const toggle = document.createElement("button");
   const toggle = document.createElement("button");
Line 8: Line 19:
     right: "20px",
     right: "20px",
     padding: "0",
     padding: "0",
     background: "#2b2b2b", // Matching menu background color
     background: "#2b2b2b",
     border: "none",
     border: "none",
     borderRadius: "12px", // Rounded square
     borderRadius: "12px",
     zIndex: 9998,
     zIndex: 9998,
     cursor: "pointer",
     cursor: "move", // show move cursor to indicate draggable
    userSelect: "none",
    touchAction: "none",
   });
   });


Line 22: Line 35:
     height: "48px",
     height: "48px",
     borderRadius: "12px",
     borderRadius: "12px",
     display: "block", // Removes small spacing around img inside button
     display: "block",
    pointerEvents: "none", // so dragging the button works smoothly
   });
   });
   toggle.appendChild(icon);
   toggle.appendChild(icon);
Line 44: Line 58:
     cursor: "move",
     cursor: "move",
     userSelect: "none",
     userSelect: "none",
     touchAction: "none", // prevent default scrolling on touch drag
     touchAction: "none",
   });
   });


Line 53: Line 67:
     fontSize: "18px",
     fontSize: "18px",
     marginBottom: "10px",
     marginBottom: "10px",
    userSelect: "text",
    cursor: "default",
   });
   });


Line 92: Line 108:
   };
   };


  // Toggle menu visibility when clicking toggle button
   toggle.onclick = () => {
   toggle.onclick = () => {
     menu.style.display = menu.style.display === "none" ? "block" : "none";
     menu.style.display = menu.style.display === "none" ? "block" : "none";
   };
   };


   // Drag functionality for mouse and touch
   // Generic drag handlers for mouse and touch
   let isDragging = false;
   function makeDraggable(element, excludeElements = []) {
  let dragStartX = 0;
    let isDragging = false;
  let dragStartY = 0;
    let dragStartX = 0;
  let menuStartLeft = 0;
    let dragStartY = 0;
  let menuStartTop = 0;
    let elemStartLeft = 0;
    let elemStartTop = 0;


  function dragStart(x, y) {
    function onDragStart(x, y, target) {
    isDragging = true;
      // Ignore drag if started on excluded elements inside container
    dragStartX = x;
      if (excludeElements.includes(target)) return false;
    dragStartY = y;
      isDragging = true;
    const rect = menu.getBoundingClientRect();
      dragStartX = x;
    menuStartLeft = rect.left;
      dragStartY = y;
    menuStartTop = rect.top;
      const rect = element.getBoundingClientRect();
  }
      elemStartLeft = rect.left;
      elemStartTop = rect.top;
      return true;
    }


  function dragMove(x, y) {
    function onDragMove(x, y) {
    if (!isDragging) return;
      if (!isDragging) return;
      let newLeft = elemStartLeft + (x - dragStartX);
      let newTop = elemStartTop + (y - dragStartY);
      [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";
    }


     const dx = x - dragStartX;
     function onDragEnd() {
    const dy = y - dragStartY;
      isDragging = false;
 
     }
    let newLeft = menuStartLeft + dx;
     let newTop = menuStartTop + dy;
 
    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;
    const menuRect = menu.getBoundingClientRect();


     if (newLeft < 0) newLeft = 0;
     // Mouse events
     if (newTop < 0) newTop = 0;
    element.addEventListener("mousedown", (e) => {
     if (newLeft + menuRect.width > winWidth) newLeft = winWidth - menuRect.width;
      if (!onDragStart(e.clientX, e.clientY, e.target)) return;
     if (newTop + menuRect.height > winHeight) newTop = winHeight - menuRect.height;
      e.preventDefault();
     });
     document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
     document.addEventListener("mouseup", onDragEnd);


     menu.style.left = newLeft + "px";
     // Touch events
     menu.style.top = newTop + "px";
    element.addEventListener("touchstart", (e) => {
     menu.style.bottom = "auto";
      if (!e.touches || !e.touches[0]) return;
     menu.style.right = "auto";
      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 dragEnd() {
   // Apply draggable to both toggle button and menu
    isDragging = false;
   // For menu, exclude textarea and runBtn from drag start
  }
   makeDraggable(toggle);
 
   makeDraggable(menu, [textarea, runBtn]);
   // 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);
 
  // Touch events
  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"