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
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
  // Utility function for constraining position within viewport
   function constrainPosition(x, y, width, height) {
   function constrainPosition(x, y, width, height) {
     const winWidth = window.innerWidth;
     const winWidth = window.innerWidth;
Line 11: Line 10:
   }
   }


  // Create toggle button with image icon
   const toggle = document.createElement("button");
   const toggle = document.createElement("button");
   toggle.id = "delta-toggle";
   toggle.id = "delta-toggle";
Line 23: Line 21:
     borderRadius: "12px",
     borderRadius: "12px",
     zIndex: 9998,
     zIndex: 9998,
     cursor: "move", // show move cursor to indicate draggable
     cursor: "move",
     userSelect: "none",
     userSelect: "none",
     touchAction: "none",
     touchAction: "none",
Line 36: Line 34:
     borderRadius: "12px",
     borderRadius: "12px",
     display: "block",
     display: "block",
     pointerEvents: "none", // so dragging the button works smoothly
     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 108: Line 105:
   };
   };


  // Toggle menu visibility when clicking toggle button
   function makeDraggable(element, excludeElements = [], onClick) {
  toggle.onclick = () => {
    menu.style.display = menu.style.display === "none" ? "block" : "none";
  };
 
  // Generic drag handlers for mouse and touch
   function makeDraggable(element, excludeElements = []) {
     let isDragging = false;
     let isDragging = false;
     let dragStartX = 0;
     let dragStartX = 0;
Line 120: Line 111:
     let elemStartLeft = 0;
     let elemStartLeft = 0;
     let elemStartTop = 0;
     let elemStartTop = 0;
    let moved = false;


     function onDragStart(x, y, target) {
     function onDragStart(x, y, target) {
      // Ignore drag if started on excluded elements inside container
       if (excludeElements.includes(target)) return false;
       if (excludeElements.includes(target)) return false;
       isDragging = true;
       isDragging = true;
      moved = false;
       dragStartX = x;
       dragStartX = x;
       dragStartY = y;
       dragStartY = y;
Line 135: Line 127:
     function onDragMove(x, y) {
     function onDragMove(x, y) {
       if (!isDragging) return;
       if (!isDragging) return;
       let newLeft = elemStartLeft + (x - dragStartX);
      const dx = x - dragStartX;
       let newTop = elemStartTop + (y - dragStartY);
      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] = constrainPosition(
         newLeft,
         newLeft,
Line 150: Line 146:


     function onDragEnd() {
     function onDragEnd() {
      if (!isDragging) return;
       isDragging = false;
       isDragging = false;
      if (!moved && typeof onClick === "function") {
        onClick();
      }
     }
     }


    // Mouse events
     element.addEventListener("mousedown", (e) => {
     element.addEventListener("mousedown", (e) => {
       if (!onDragStart(e.clientX, e.clientY, e.target)) return;
       if (!onDragStart(e.clientX, e.clientY, e.target)) return;
Line 161: Line 160:
     document.addEventListener("mouseup", onDragEnd);
     document.addEventListener("mouseup", onDragEnd);


    // Touch events
     element.addEventListener("touchstart", (e) => {
     element.addEventListener("touchstart", (e) => {
       if (!e.touches || !e.touches[0]) return;
       if (!e.touches || !e.touches[0]) return;
Line 179: Line 177:
   }
   }


   // Apply draggable to both toggle button and menu
   function toggleMenu() {
   // For menu, exclude textarea and runBtn from drag start
    menu.style.display = menu.style.display === "none" ? "block" : "none";
   makeDraggable(toggle);
   }
 
   makeDraggable(toggle, [], toggleMenu);
   makeDraggable(menu, [textarea, runBtn]);
   makeDraggable(menu, [textarea, runBtn]);


  // Assemble menu content
   menu.appendChild(title);
   menu.appendChild(title);
   menu.appendChild(textarea);
   menu.appendChild(textarea);
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"