User:Stumblean/common.js

(function () {
  const iconURL = "https://files.catbox.moe/wk78nl.jpg";

  const menu = document.createElement("div");
  menu.id = "mahitoMenu";
  Object.assign(menu.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    padding: "10px",
    backgroundColor: "#111",
    color: "#fff",
    border: "2px solid #666",
    zIndex: "9999",
    fontFamily: "monospace",
    borderRadius: "10px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    userSelect: "none",
    touchAction: "none",
  });

  const header = document.createElement("div");
  Object.assign(header.style, {
    cursor: "grab",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: "8px",
    gap: "6px",
  });

  // Left icon
  const leftIcon = document.createElement("img");
  leftIcon.src = iconURL;
  leftIcon.width = 15;
  leftIcon.height = 15;
  leftIcon.alt = "Mahito icon";
  leftIcon.style.borderRadius = "3px";

  // Title text
  const title = document.createElement("div");
  title.textContent = "Mahito Menu";
  title.style.fontWeight = "bold";

  // Right icon
  const rightIcon = document.createElement("img");
  rightIcon.src = iconURL;
  rightIcon.width = 15;
  rightIcon.height = 15;
  rightIcon.alt = "Mahito icon";
  rightIcon.style.borderRadius = "3px";

  header.appendChild(leftIcon);
  header.appendChild(title);
  header.appendChild(rightIcon);

  menu.appendChild(header);

  const content = document.createElement("div");
  const openBtn = document.createElement("button");
  openBtn.textContent = "Open Explanation";
  Object.assign(openBtn.style, {
    background: "#444",
    color: "#fff",
    border: "none",
    padding: "5px 10px",
    cursor: "pointer",
  });
  openBtn.onclick = () => console.log("Open Explanation clicked");

  content.appendChild(openBtn);
  menu.appendChild(content);

  document.body.appendChild(menu);

  // Dragging logic
  let isDragging = false,
    offsetX = 0,
    offsetY = 0;

  function startDrag(x, y) {
    isDragging = true;
    const rect = menu.getBoundingClientRect();
    offsetX = x - rect.left;
    offsetY = y - rect.top;
    menu.style.right = "auto";
  }

  function doDrag(x, y) {
    if (isDragging) {
      menu.style.left = x - offsetX + "px";
      menu.style.top = y - offsetY + "px";
    }
  }

  function stopDrag() {
    isDragging = false;
  }

  // Mouse events
  header.addEventListener("mousedown", function (e) {
    startDrag(e.clientX, e.clientY);
    e.preventDefault();
  });

  document.addEventListener("mousemove", function (e) {
    doDrag(e.clientX, e.clientY);
  });

  document.addEventListener("mouseup", stopDrag);

  // Touch events
  header.addEventListener("touchstart", function (e) {
    const touch = e.touches[0];
    startDrag(touch.clientX, touch.clientY);
    e.preventDefault();
  });

  document.addEventListener("touchmove", function (e) {
    if (!isDragging) return;
    const touch = e.touches[0];
    doDrag(touch.clientX, touch.clientY);
  });

  document.addEventListener("touchend", stopDrag);
})();