User:Stumblean/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
(function () {
  const icon = "https://files.catbox.moe/wk78nl.jpg";

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

  const header = document.createElement("div");
  header.style.display = "flex";
  header.style.alignItems = "center";
  header.style.gap = "6px";
  header.style.marginBottom = "8px";
  header.style.cursor = "grab";

  const img1 = document.createElement("img");
  img1.src = icon;
  img1.width = 15;
  img1.height = 15;

  const title = document.createElement("div");
  title.textContent = "Mahito Menu";
  title.style.fontWeight = "bold";
  title.style.color = "#fff"; // white text

  const img2 = document.createElement("img");
  img2.src = icon;
  img2.width = 15;
  img2.height = 15;

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

  const btn1 = document.createElement("button");
  btn1.textContent = "Mass undo";
  btn1.onclick = function () {
    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 btn2 = document.createElement("button");
  btn2.textContent = "Open Explanation";
  btn2.onclick = function () {
    alert("Open Explanation clicked");
  };

  [btn1, btn2].forEach((btn) => {
    btn.style.marginBottom = "6px";
    btn.style.width = "100%";
    btn.style.cursor = "pointer";
    btn.style.background = "#45A8C5"; // new button color
    btn.style.color = "#fff";         // white text
    btn.style.border = "none";
    btn.style.padding = "5px 10px";
    btn.style.borderRadius = "5px";
  });

  menu.appendChild(header);
  menu.appendChild(btn1);
  menu.appendChild(btn2);
  document.body.appendChild(menu);

  // === DRAGGING ===
  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);
})();