User:Stumblean/common.js: Difference between revisions

Stumblean (talk | contribs)
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Line 8: Line 8:
     right: "20px",
     right: "20px",
     padding: "0",
     padding: "0",
     background: "#2b2b2b", // Matching menu background color
     background: "#2b2b2b", // Matching menu background color
     border: "none",
     border: "none",
     borderRadius: "12px", // Rounded square
     borderRadius: "12px", // Rounded square
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 41: Line 41:
     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"
   });
   });


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


Line 91: Line 95:
   };
   };


   // Add everything to page
   // Drag functionality
  let isDragging = false;
  let dragStartX = 0;
  let dragStartY = 0;
  let menuStartLeft = 0;
  let menuStartTop = 0;
 
  menu.addEventListener("mousedown", (e) => {
    // Only drag if clicked outside textarea and buttons
    if (e.target === textarea || e.target === runBtn) return;
 
    isDragging = true;
    dragStartX = e.clientX;
    dragStartY = e.clientY;
 
    // Compute current left/top relative to viewport
    const rect = menu.getBoundingClientRect();
    menuStartLeft = rect.left;
    menuStartTop = rect.top;
 
    // Prevent text selection while dragging
    e.preventDefault();
  });
 
  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
 
    const dx = e.clientX - dragStartX;
    const dy = e.clientY - dragStartY;
 
    let newLeft = menuStartLeft + dx;
    let newTop = menuStartTop + dy;
 
    // Constrain within viewport (optional)
    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;
    const menuRect = menu.getBoundingClientRect();
 
    if (newLeft < 0) newLeft = 0;
    if (newTop < 0) newTop = 0;
    if (newLeft + menuRect.width > winWidth) newLeft = winWidth - menuRect.width;
    if (newTop + menuRect.height > winHeight) newTop = winHeight - menuRect.height;
 
    menu.style.left = newLeft + "px";
    menu.style.top = newTop + "px";
    menu.style.bottom = "auto"; // Reset bottom so top/left positioning works
    menu.style.right = "auto";  // Reset right for same reason
  });
 
  document.addEventListener("mouseup", () => {
    isDragging = false;
  });
 
  // Assemble menu content
   menu.appendChild(title);
   menu.appendChild(title);
   menu.appendChild(textarea);
   menu.appendChild(textarea);