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
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
   const icon = "https://files.catbox.moe/wk78nl.jpg";
  function constrainPosition(x, y, width, height) {
   const audioSrc = "https://files.catbox.moe/43eq8g.mp3"; // Self-Embodiment of Perfection
    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;
    if (x < 0) x = 0;
    if (y < 0) y = 0;
    if (x + width > winWidth) x = winWidth - width;
    if (y + height > winHeight) y = winHeight - height;
    return [x, y];
  }
 
   const toggle = document.createElement("button");
  toggle.id = "delta-toggle";
  Object.assign(toggle.style, {
    position: "fixed",
    bottom: "20px",
    right: "20px",
    padding: "0",
    background: "#2b2b2b",
    border: "none",
    borderRadius: "12px",
    zIndex: 9998,
    cursor: "move",
    userSelect: "none",
    touchAction: "none",
  });
 
   const icon = document.createElement("img");
  icon.src = "https://files.catbox.moe/uodscw.png";
  icon.alt = "Delta";
  Object.assign(icon.style, {
    width: "48px",
    height: "48px",
    borderRadius: "12px",
    display: "block",
    pointerEvents: "none",
  });
  toggle.appendChild(icon);


   const menu = document.createElement("div");
   const menu = document.createElement("div");
   menu.id = "mahitoMenu";
   menu.id = "delta-menu";
   Object.assign(menu.style, {
   Object.assign(menu.style, {
    display: "none",
     position: "fixed",
     position: "fixed",
     top: "20px",
     bottom: "80px",
     right: "20px",
     right: "20px",
     background: "#7889B2",
    width: "300px",
     background: "#2b2b2b",
     color: "#fff",
     color: "#fff",
    border: "2px solid #666",
     borderRadius: "10px",
     borderRadius: "10px",
     padding: "10px",
     padding: "15px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    zIndex: 9999,
     fontFamily: "monospace",
     fontFamily: "monospace",
     zIndex: "99999",
     cursor: "move",
     boxShadow: "0 0 10px black",
     userSelect: "none",
     touchAction: "none",
     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");
   const title = document.createElement("div");
   title.textContent = "Mahito Menu";
   title.textContent = "Delta Online";
   title.style.fontWeight = "bold";
   Object.assign(title.style, {
  title.style.color = "#fff";
    textAlign: "center",
 
    fontSize: "18px",
  const img2 = document.createElement("img");
    marginBottom: "10px",
  img2.src = icon;
    userSelect: "text",
  img2.width = 15;
     cursor: "default",
  img2.height = 15;
 
  header.appendChild(img1);
  header.appendChild(title);
  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 btn1 = 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 btn2 = makeButton("Open Explanation", () => {
   const textarea = document.createElement("textarea");
     alert("Open Explanation clicked");
  textarea.placeholder = "Enter JavaScript...";
  Object.assign(textarea.style, {
     width: "100%",
    height: "120px",
    background: "#1e1e1e",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    padding: "10px",
    resize: "none",
    boxSizing: "border-box",
    cursor: "auto",
    userSelect: "text",
   });
   });


   const encouragementBtn = makeButton("Encouragement", () => {
   const runBtn = document.createElement("button");
     audio.play();
  runBtn.textContent = "Run Code";
  Object.assign(runBtn.style, {
     marginTop: "10px",
    width: "100%",
    padding: "10px",
    background: "#4caf50",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
   });
   });


   const audio = new Audio(audioSrc);
   runBtn.onclick = () => {
   audio.volume = 0.75;
    try {
      eval(textarea.value);
    } catch (e) {
      alert("Error: " + e.message);
    }
   };


   menu.appendChild(header);
   function makeDraggable(element, excludeElements = [], onClick) {
  menu.appendChild(btn1);
    let isDragging = false;
  menu.appendChild(btn2);
    let dragStartX = 0;
  menu.appendChild(encouragementBtn);
    let dragStartY = 0;
  document.body.appendChild(menu);
    let elemStartLeft = 0;
    let elemStartTop = 0;
    let moved = false;


  // === DRAGGING ===
    function onDragStart(x, y, target) {
  let isDragging = false;
      if (excludeElements.includes(target)) return false;
  let offsetX = 0, offsetY = 0;
      isDragging = true;
      moved = false;
      dragStartX = x;
      dragStartY = y;
      const rect = element.getBoundingClientRect();
      elemStartLeft = rect.left;
      elemStartTop = rect.top;
      return true;
    }


  function startDrag(x, y) {
    function onDragMove(x, y) {
    isDragging = true;
      if (!isDragging) return;
    const rect = menu.getBoundingClientRect();
      const dx = x - dragStartX;
    offsetX = x - rect.left;
      const dy = y - dragStartY;
    offsetY = y - rect.top;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
    menu.style.left = rect.left + "px";
    menu.style.top = rect.top + "px";
    menu.style.right = "auto";
  }


  function doDrag(x, y) {
      let newLeft = elemStartLeft + dx;
    if (!isDragging) return;
      let newTop = elemStartTop + dy;
    menu.style.left = x - offsetX + "px";
      [newLeft, newTop] = constrainPosition(
    menu.style.top = y - offsetY + "px";
        newLeft,
  }
        newTop,
        element.offsetWidth,
        element.offsetHeight
      );
      element.style.left = newLeft + "px";
      element.style.top = newTop + "px";
      element.style.bottom = "auto";
      element.style.right = "auto";
    }


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


  header.addEventListener("mousedown", (e) => {
    element.addEventListener("mousedown", (e) => {
    startDrag(e.clientX, e.clientY);
      if (!onDragStart(e.clientX, e.clientY, e.target)) return;
    e.preventDefault();
      e.preventDefault();
  });
    });
    document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
    document.addEventListener("mouseup", onDragEnd);


  document.addEventListener("mousemove", (e) => {
    element.addEventListener("touchstart", (e) => {
    doDrag(e.clientX, e.clientY);
      if (!e.touches || !e.touches[0]) return;
  });
      if (!onDragStart(e.touches[0].clientX, e.touches[0].clientY, e.target)) return;
      e.preventDefault();
    });
    document.addEventListener(
      "touchmove",
      (e) => {
        if (!e.touches || !e.touches[0]) return;
        onDragMove(e.touches[0].clientX, e.touches[0].clientY);
      },
      { passive: false }
    );
    document.addEventListener("touchend", onDragEnd);
    document.addEventListener("touchcancel", onDragEnd);
  }


   document.addEventListener("mouseup", stopDrag);
   function toggleMenu() {
    menu.style.display = menu.style.display === "none" ? "block" : "none";
  }


   header.addEventListener("touchstart", (e) => {
   makeDraggable(toggle, [], toggleMenu);
    const touch = e.touches[0];
  makeDraggable(menu, [textarea, runBtn]);
    startDrag(touch.clientX, touch.clientY);
    e.preventDefault();
  });


   document.addEventListener("touchmove", (e) => {
   menu.appendChild(title);
    if (!isDragging) return;
  menu.appendChild(textarea);
    const touch = e.touches[0];
  menu.appendChild(runBtn);
    doDrag(touch.clientX, touch.clientY);
   document.body.appendChild(toggle);
   });
   document.body.appendChild(menu);
 
   document.addEventListener("touchend", stopDrag);
})();
})();