Jump to content

User:Stumblean/common.js: Difference between revisions

From Domination Earth
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
 
(58 intermediate revisions by the same user not shown)
Line 1: Line 1:
(function () {
(function () {
     const minimizedImgURL = "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 menu = document.createElement("div");
  const toggle = document.createElement("button");
    menu.id = "mahitoMenu";
  toggle.id = "delta-toggle";
    Object.assign(menu.style, {
  Object.assign(toggle.style, {
        position: "fixed",
    position: "fixed",
        top: "20px",
    bottom: "20px",
        right: "20px",
    right: "20px",
        padding: "10px",
    padding: "0",
        backgroundColor: "#111",
    background: "#2b2b2b",
        color: "#fff",
    border: "none",
        border: "2px solid #666",
    borderRadius: "12px",
        zIndex: "9999",
    zIndex: 9998,
        fontFamily: "monospace",
    cursor: "move",
        borderRadius: "10px",
    userSelect: "none",
        boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    touchAction: "none",
        userSelect: "none",
  });
        touchAction: "none",
        transition: "transform 0.3s ease, opacity 0.3s ease"
    });


    // Header
  const icon = document.createElement("img");
    const header = document.createElement("div");
  icon.src = "https://files.catbox.moe/uodscw.png";
    Object.assign(header.style, {
  icon.alt = "Delta";
        cursor: "grab",
  Object.assign(icon.style, {
        display: "flex",
    width: "48px",
        justifyContent: "space-between",
    height: "48px",
        alignItems: "center",
    borderRadius: "12px",
        marginBottom: "8px"
    display: "block",
    });
    pointerEvents: "none",
  });
  toggle.appendChild(icon);


    const title = document.createElement("div");
  const menu = document.createElement("div");
    title.textContent = "💀 Mahito Menu 💀";
  menu.id = "delta-menu";
    title.style.fontWeight = "bold";
  Object.assign(menu.style, {
     header.appendChild(title);
    display: "none",
    position: "fixed",
    bottom: "80px",
    right: "20px",
    width: "300px",
    background: "#2b2b2b",
    color: "#fff",
    borderRadius: "10px",
    padding: "15px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    zIndex: 9999,
    fontFamily: "monospace",
    cursor: "move",
    userSelect: "none",
     touchAction: "none",
  });


    const minimizeBtn = document.createElement("button");
  const title = document.createElement("div");
    minimizeBtn.textContent = "";
  title.textContent = "Delta Online";
    Object.assign(minimizeBtn.style, {
  Object.assign(title.style, {
        background: "#333",
    textAlign: "center",
        color: "#fff",
    fontSize: "18px",
        border: "none",
    marginBottom: "10px",
        cursor: "pointer",
    userSelect: "text",
        marginLeft: "10px"
    cursor: "default",
    });
  });
    header.appendChild(minimizeBtn);
    menu.appendChild(header);


    // Content
  const textarea = document.createElement("textarea");
    const content = document.createElement("div");
  textarea.placeholder = "Enter JavaScript...";
    const openBtn = document.createElement("button");
  Object.assign(textarea.style, {
    openBtn.textContent = "Open Explanation";
    width: "100%",
    Object.assign(openBtn.style, {
    height: "120px",
        background: "#444",
    background: "#1e1e1e",
        color: "#fff",
    color: "#fff",
        border: "none",
    border: "none",
        padding: "5px 10px",
    borderRadius: "6px",
        cursor: "pointer"
    padding: "10px",
     });
    resize: "none",
     openBtn.onclick = function () {
     boxSizing: "border-box",
        console.log("Open Explanation clicked");
     cursor: "auto",
    };
    userSelect: "text",
    content.appendChild(openBtn);
  });
    menu.appendChild(content);
    document.body.appendChild(menu);


    // Minimized icon
  const runBtn = document.createElement("button");
    const minimizedIcon = document.createElement("img");
  runBtn.textContent = "Run Code";
    minimizedIcon.src = minimizedImgURL;
  Object.assign(runBtn.style, {
    Object.assign(minimizedIcon.style, {
    marginTop: "10px",
        position: "fixed",
    width: "100%",
        top: "20px",
    padding: "10px",
        right: "20px",
    background: "#4caf50",
        width: "30px",
    color: "#fff",
        height: "30px",
    border: "none",
        borderRadius: "5px",
    borderRadius: "6px",
        cursor: "pointer",
    cursor: "pointer",
        display: "none",
  });
        opacity: "0",
        zIndex: "9999",
        transition: "opacity 0.3s ease"
    });
    document.body.appendChild(minimizedIcon);


    // Minimize logic
  runBtn.onclick = () => {
    minimizeBtn.onclick = function () {
    try {
        menu.style.transform = "scale(0.5)";
      eval(textarea.value);
        menu.style.opacity = "0";
    } catch (e) {
        setTimeout(() => {
      alert("Error: " + e.message);
            menu.style.display = "none";
    }
            menu.style.transform = "scale(1)";
  };
            menu.style.opacity = "1";
            minimizedIcon.style.display = "block";
            requestAnimationFrame(() => {
                minimizedIcon.style.opacity = "1";
            });
        }, 300);
    };


    // Restore logic
  function makeDraggable(element, excludeElements = [], onClick) {
    minimizedIcon.onclick = function () {
        minimizedIcon.style.opacity = "0";
        setTimeout(() => {
            minimizedIcon.style.display = "none";
            menu.style.display = "block";
        }, 300);
    };
 
    // Drag support (mouse + touch)
     let isDragging = false;
     let isDragging = false;
     let offsetX = 0;
     let dragStartX = 0;
     let offsetY = 0;
     let dragStartY = 0;
    let elemStartLeft = 0;
    let elemStartTop = 0;
    let moved = false;


     function startDrag(x, y) {
     function onDragStart(x, y, target) {
        isDragging = true;
      if (excludeElements.includes(target)) return false;
        const rect = menu.getBoundingClientRect();
      isDragging = true;
        offsetX = x - rect.left;
      moved = false;
        offsetY = y - rect.top;
      dragStartX = x;
        menu.style.right = "auto";
      dragStartY = y;
      const rect = element.getBoundingClientRect();
      elemStartLeft = rect.left;
      elemStartTop = rect.top;
      return true;
     }
     }


     function doDrag(x, y) {
     function onDragMove(x, y) {
        if (isDragging) {
      if (!isDragging) return;
            menu.style.left = (x - offsetX) + "px";
      const dx = x - dragStartX;
            menu.style.top = (y - offsetY) + "px";
      const dy = y - dragStartY;
        }
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
 
      let newLeft = elemStartLeft + dx;
      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";
     }
     }


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


     // Mouse events
     element.addEventListener("mousedown", (e) => {
    header.addEventListener("mousedown", function (e) {
      if (!onDragStart(e.clientX, e.clientY, e.target)) return;
        startDrag(e.clientX, e.clientY);
      e.preventDefault();
        e.preventDefault();
     });
     });
     document.addEventListener("mousemove", function (e) {
     document.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
        doDrag(e.clientX, e.clientY);
    document.addEventListener("mouseup", onDragEnd);
 
    element.addEventListener("touchstart", (e) => {
      if (!e.touches || !e.touches[0]) return;
      if (!onDragStart(e.touches[0].clientX, e.touches[0].clientY, e.target)) return;
      e.preventDefault();
     });
     });
     document.addEventListener("mouseup", stopDrag);
     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);
  }
 
  function toggleMenu() {
    menu.style.display = menu.style.display === "none" ? "block" : "none";
  }
 
  makeDraggable(toggle, [], toggleMenu);
  makeDraggable(menu, [textarea, runBtn]);


    // Touch events
  menu.appendChild(title);
    header.addEventListener("touchstart", function (e) {
  menu.appendChild(textarea);
        const touch = e.touches[0];
  menu.appendChild(runBtn);
        startDrag(touch.clientX, touch.clientY);
  document.body.appendChild(toggle);
        e.preventDefault();
  document.body.appendChild(menu);
    });
    document.addEventListener("touchmove", function (e) {
        if (!isDragging) return;
        const touch = e.touches[0];
        doDrag(touch.clientX, touch.clientY);
    });
    document.addEventListener("touchend", stopDrag);
})();
})();

Latest revision as of 00:19, 29 June 2025

(function () {
  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);

  const menu = document.createElement("div");
  menu.id = "delta-menu";
  Object.assign(menu.style, {
    display: "none",
    position: "fixed",
    bottom: "80px",
    right: "20px",
    width: "300px",
    background: "#2b2b2b",
    color: "#fff",
    borderRadius: "10px",
    padding: "15px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    zIndex: 9999,
    fontFamily: "monospace",
    cursor: "move",
    userSelect: "none",
    touchAction: "none",
  });

  const title = document.createElement("div");
  title.textContent = "Delta Online";
  Object.assign(title.style, {
    textAlign: "center",
    fontSize: "18px",
    marginBottom: "10px",
    userSelect: "text",
    cursor: "default",
  });

  const textarea = document.createElement("textarea");
  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 runBtn = document.createElement("button");
  runBtn.textContent = "Run Code";
  Object.assign(runBtn.style, {
    marginTop: "10px",
    width: "100%",
    padding: "10px",
    background: "#4caf50",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
  });

  runBtn.onclick = () => {
    try {
      eval(textarea.value);
    } catch (e) {
      alert("Error: " + e.message);
    }
  };

  function makeDraggable(element, excludeElements = [], onClick) {
    let isDragging = false;
    let dragStartX = 0;
    let dragStartY = 0;
    let elemStartLeft = 0;
    let elemStartTop = 0;
    let moved = false;

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

    function onDragMove(x, y) {
      if (!isDragging) return;
      const dx = x - dragStartX;
      const dy = y - dragStartY;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;

      let newLeft = elemStartLeft + dx;
      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";
    }

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

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

    element.addEventListener("touchstart", (e) => {
      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);
  }

  function toggleMenu() {
    menu.style.display = menu.style.display === "none" ? "block" : "none";
  }

  makeDraggable(toggle, [], toggleMenu);
  makeDraggable(menu, [textarea, runBtn]);

  menu.appendChild(title);
  menu.appendChild(textarea);
  menu.appendChild(runBtn);
  document.body.appendChild(toggle);
  document.body.appendChild(menu);
})();
Cookies help us deliver our services. By using our services, you agree to our use of cookies.