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
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
   const iconURL = "https://files.catbox.moe/wk78nl.jpg";
   function constrainPosition(x, y, width, height) {
    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);


  // === MENU ===
   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 #fff",
     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",
     width: "180px",
     touchAction: "none",
    cursor: "move", // show dragging cursor
    userSelect: "none" // avoid selecting text while dragging
   });
   });
  // === HEADER WITH ICONS AND MINIMIZE BUTTON ===
  const header = document.createElement("div");
  header.style.display = "flex";
  header.style.justifyContent = "space-between";
  header.style.alignItems = "center";
  header.style.marginBottom = "8px";
  const titleWrap = document.createElement("div");
  titleWrap.style.display = "flex";
  titleWrap.style.alignItems = "center";
  titleWrap.style.gap = "6px";
  const leftIcon = document.createElement("img");
  leftIcon.src = iconURL;
  leftIcon.width = 15;
  leftIcon.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",
    marginBottom: "10px",
    userSelect: "text",
    cursor: "default",
  });


   const rightIcon = document.createElement("img");
   const textarea = document.createElement("textarea");
   rightIcon.src = iconURL;
   textarea.placeholder = "Enter JavaScript...";
  rightIcon.width = 15;
   Object.assign(textarea.style, {
  rightIcon.height = 15;
    width: "100%",
 
    height: "120px",
  titleWrap.appendChild(leftIcon);
    background: "#1e1e1e",
   titleWrap.appendChild(title);
     color: "#fff",
  titleWrap.appendChild(rightIcon);
 
  const minimizeBtn = document.createElement("button");
  minimizeBtn.textContent = "";
  Object.assign(minimizeBtn.style, {
     background: "#45A8C5",
     border: "none",
     border: "none",
     color: "#fff",
     borderRadius: "6px",
     cursor: "pointer",
     padding: "10px",
     borderRadius: "5px",
    resize: "none",
     width: "25px",
     boxSizing: "border-box",
     height: "25px"
     cursor: "auto",
     userSelect: "text",
   });
   });


  header.appendChild(titleWrap);
   const runBtn = document.createElement("button");
  header.appendChild(minimizeBtn);
   runBtn.textContent = "Run Code";
 
   Object.assign(runBtn.style, {
  // === MINIMIZED ICON ===
     marginTop: "10px",
   const minimizedIcon = document.createElement("img");
     width: "100%",
   minimizedIcon.src = iconURL;
     padding: "10px",
  minimizedIcon.width = 30;
     background: "#4caf50",
  minimizedIcon.height = 30;
     color: "#fff",
   Object.assign(minimizedIcon.style, {
    border: "none",
     position: "fixed",
    borderRadius: "6px",
     top: "20px",
     right: "20px",
     zIndex: "99999",
     display: "none",
     cursor: "pointer",
     cursor: "pointer",
    borderRadius: "6px", // rounded square
    width: "30px",
    height: "30px"
   });
   });


   minimizedIcon.addEventListener("click", () => {
   runBtn.onclick = () => {
     minimizedIcon.style.display = "none";
     try {
     menu.style.display = "block";
      eval(textarea.value);
   });
     } catch (e) {
      alert("Error: " + e.message);
    }
   };


   minimizeBtn.addEventListener("click", () => {
   function makeDraggable(element, excludeElements = [], onClick) {
     menu.style.display = "none";
    let isDragging = false;
     minimizedIcon.style.display = "block";
    let dragStartX = 0;
  });
    let dragStartY = 0;
     let elemStartLeft = 0;
     let elemStartTop = 0;
    let moved = false;


  // === Button creator
    function onDragStart(x, y, target) {
  function makeButton(text, action) {
      if (excludeElements.includes(target)) return false;
    const btn = document.createElement("button");
      isDragging = true;
    btn.textContent = text;
      moved = false;
    btn.onclick = action;
       dragStartX = x;
    Object.assign(btn.style, {
       dragStartY = y;
       marginBottom: "6px",
       const rect = element.getBoundingClientRect();
       width: "100%",
       elemStartLeft = rect.left;
       cursor: "pointer",
       elemStartTop = rect.top;
       background: "#45A8C5",
       return true;
       color: "#fff",
     }
       border: "none",
      padding: "5px 10px",
      borderRadius: "5px"
    });
     return btn;
  }


  // === All buttons
    function onDragMove(x, y) {
  const btnUndo = makeButton("Mass undo", () => {
      if (!isDragging) return;
    navigator.clipboard.writeText(
       const dx = x - dragStartX;
       "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');"
      const dy = y - dragStartY;
    );
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
    alert("Go to your common.js and paste what was just copied!");
  });


  const btnExplain = makeButton("Open Explanation", () => {
      let newLeft = elemStartLeft + dx;
    alert("This would explain how Mahito works. You can hook this later.");
      let newTop = elemStartTop + dy;
  });
      [newLeft, newTop] = constrainPosition(
        newLeft,
        newTop,
        element.offsetWidth,
        element.offsetHeight
      );
      element.style.left = newLeft + "px";
      element.style.top = newTop + "px";
      element.style.bottom = "auto";
      element.style.right = "auto";
    }


  const btnEncouragement = makeButton("Encouragement", () => {
    function onDragEnd() {
    if (ytContainer.style.display === "none") {
      if (!isDragging) return;
       ytContainer.style.display = "block";
       isDragging = false;
    } else {
       if (!moved && typeof onClick === "function") {
       ytContainer.style.display = "none";
        onClick();
       ytIframe.src = ytIframe.src; // reset video
       }
     }
     }
  });


  // === YouTube iframe container
    element.addEventListener("mousedown", (e) => {
  const ytContainer = document.createElement("div");
      if (!onDragStart(e.clientX, e.clientY, e.target)) return;
  Object.assign(ytContainer.style, {
      e.preventDefault();
    position: "fixed",
     });
    right: "20px",
     document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
     top: "150px",
     document.addEventListener("mouseup", onDragEnd);
     zIndex: "99998",
    display: "none",
     background: "#000",
    padding: "5px",
    borderRadius: "10px",
    boxShadow: "0 0 10px black"
  });


  const ytIframe = document.createElement("iframe");
    element.addEventListener("touchstart", (e) => {
  ytIframe.width = "280";
      if (!e.touches || !e.touches[0]) return;
  ytIframe.height = "157";
      if (!onDragStart(e.touches[0].clientX, e.touches[0].clientY, e.target)) return;
  ytIframe.src = "https://www.youtube.com/embed/VKfyq_hOL0c?autoplay=1";
      e.preventDefault();
  ytIframe.title = "Self Embodiment of Perfection OST";
    });
  ytIframe.frameBorder = "0";
    document.addEventListener(
  ytIframe.allow =
      "touchmove",
    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
      (e) => {
  ytIframe.allowFullscreen = true;
        if (!e.touches || !e.touches[0]) return;
 
        onDragMove(e.touches[0].clientX, e.touches[0].clientY);
  ytContainer.appendChild(ytIframe);
      },
 
      { passive: false }
  // === Final Assembly
     );
  menu.appendChild(header);
     document.addEventListener("touchend", onDragEnd);
  menu.appendChild(btnUndo);
     document.addEventListener("touchcancel", onDragEnd);
  menu.appendChild(btnExplain);
  menu.appendChild(btnEncouragement);
  document.body.appendChild(menu);
  document.body.appendChild(minimizedIcon);
  document.body.appendChild(ytContainer);
 
  // === Dragging logic ===
  let posX = 0, posY = 0, startX = 0, startY = 0;
  let dragging = false;
 
  function onDragStart(e) {
    dragging = true;
    startX = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
    startY = e.type === "touchstart" ? e.touches[0].clientY : e.clientY;
     posX = parseInt(menu.style.right);
     posY = parseInt(menu.style.top);
     e.preventDefault();
   }
   }


   function onDragMove(e) {
   function toggleMenu() {
     if (!dragging) return;
     menu.style.display = menu.style.display === "none" ? "block" : "none";
    const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
    const clientY = e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
    const dx = startX - clientX;
    const dy = clientY - startY;
 
    let newRight = posX + dx;
    let newTop = posY + dy;
 
    // keep inside viewport horizontally
    newRight = Math.max(0, Math.min(window.innerWidth - menu.offsetWidth, window.innerWidth - newRight - menu.offsetWidth));
    // keep inside viewport vertically
    newTop = Math.max(0, Math.min(window.innerHeight - menu.offsetHeight, newTop));
 
    menu.style.right = newRight + "px";
    menu.style.top = newTop + "px";
 
    e.preventDefault();
   }
   }


   function onDragEnd() {
   makeDraggable(toggle, [], toggleMenu);
    dragging = false;
   makeDraggable(menu, [textarea, runBtn]);
   }


   // Attach events to header for dragging
   menu.appendChild(title);
  header.style.touchAction = "none"; // prevent default gestures on mobile
   menu.appendChild(textarea);
  header.addEventListener("mousedown", onDragStart);
   menu.appendChild(runBtn);
   header.addEventListener("touchstart", onDragStart);
   document.body.appendChild(toggle);
   window.addEventListener("mousemove", onDragMove);
   document.body.appendChild(menu);
   window.addEventListener("touchmove", onDragMove);
   window.addEventListener("mouseup", onDragEnd);
  window.addEventListener("touchend", onDragEnd);
})();
})();