User:Stumblean/common.js

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

  const menu = document.createElement("div");
  Object.assign(menu.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    background: "#7889B2",
    color: "#fff",
    border: "2px solid #666",
    borderRadius: "10px",
    padding: "10px",
    fontFamily: "monospace",
    zIndex: "99999",
    boxShadow: "0 0 10px black",
    touchAction: "none",
  });

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

  const img1 = Object.assign(document.createElement("img"), { src: icon, width: 15, height: 15 });
  const img2 = Object.assign(document.createElement("img"), { src: icon, width: 15, height: 15 });

  const titleDiv = document.createElement("div");
  titleDiv.textContent = "Mahito Menu";
  titleDiv.style.fontWeight = "bold";
  titleDiv.style.color = "#fff";

  header.appendChild(img1);
  header.appendChild(titleDiv);
  header.appendChild(img2);

  function makeButton(text, onclick) {
    const btn = document.createElement("button");
    btn.textContent = text;
    btn.onclick = onclick;
    Object.assign(btn.style, {
      marginBottom: "6px",
      width: "100%",
      cursor: "pointer",
      background: "#45A8C5",
      color: "#fff",
      border: "none",
      padding: "5px 10px",
      borderRadius: "5px",
    });
    return btn;
  }

  const btnUndo = makeButton("Mass undo", () => {
    prompt("Copy this into your common.js:", "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');");
  });

  const btnExplain = makeButton("Open Explanation", () => {
    alert("Open Explanation clicked");
  });

  menu.appendChild(header);
  menu.appendChild(btnUndo);
  menu.appendChild(btnExplain);

  // -- Common.js detection
  try {
    const user = mw.config.get("wgUserName") || "";
    const pageTitle = mw.config.get("wgPageName") || "";
    if (pageTitle.includes(user + "/common.js")) {
      const btnEZ = makeButton("EZPASTE", async () => {
        try {
          const text = await navigator.clipboard.readText();
          await navigator.clipboard.writeText(text);
          alert("EZPASTE: Clipboard refreshed with:\n\n" + text);
        } catch (err) {
          alert("Clipboard failed: " + err.message);
        }
      });
      menu.appendChild(btnEZ);
    }
  } catch (e) {
    console.warn("Could not detect common.js page", e);
  }

  document.body.appendChild(menu);

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

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

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

  function stopDrag() {
    isDragging = false;
  }

  header.addEventListener("mousedown", (e) => {
    startDrag(e.clientX, e.clientY);
    e.preventDefault();
  });
  document.addEventListener("mousemove", (e) => doDrag(e.clientX, e.clientY));
  document.addEventListener("mouseup", stopDrag);

  header.addEventListener("touchstart", (e) => {
    const touch = e.touches[0];
    startDrag(touch.clientX, touch.clientY);
    e.preventDefault();
  });
  document.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    const touch = e.touches[0];
    doDrag(touch.clientX, touch.clientY);
  });
  document.addEventListener("touchend", stopDrag);
})();