Domination Earth

User:Stumblean/common.js: Difference between revisions

← Older editNewer edit →
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Line 1: Line 1:
(function () {
(function () {
    const iconURL = "https://files.catbox.moe/wk78nl.jpg";
  const iconURL = "https://files.catbox.moe/wk78nl.jpg";


    const menu = document.createElement("div");
  const menu = document.createElement("div");
    menu.id = "mahitoMenu";
  menu.id = "mahitoMenu";
    Object.assign(menu.style, {
  Object.assign(menu.style, {
        position: "fixed",
    position: "fixed",
        top: "20px",
    top: "20px",
        right: "20px",
    right: "20px",
        padding: "10px",
    padding: "10px",
        backgroundColor: "#111",
    backgroundColor: "#111",
        color: "#fff",
    color: "#fff",
        border: "2px solid #666",
    border: "2px solid #666",
        zIndex: "9999",
    zIndex: "9999",
        fontFamily: "monospace",
    fontFamily: "monospace",
        borderRadius: "10px",
    borderRadius: "10px",
        boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
        userSelect: "none",
    userSelect: "none",
        touchAction: "none"
    touchAction: "none",
    });
  });


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


    // Replace title with catbox image
  // Left icon
    const icon = document.createElement("img");
  const leftIcon = document.createElement("img");
    icon.src = iconURL;
  leftIcon.src = iconURL;
    icon.width = 10;
  leftIcon.width = 15;
    icon.height = 10;
  leftIcon.height = 15;
    icon.alt = "Mahito";
  leftIcon.alt = "Mahito icon";
    icon.style.borderRadius = "2px";
  leftIcon.style.borderRadius = "3px";
    header.appendChild(icon);


    menu.appendChild(header);
  // Title text
  const title = document.createElement("div");
  title.textContent = "Mahito Menu";
  title.style.fontWeight = "bold";


    const content = document.createElement("div");
  // Right icon
    const openBtn = document.createElement("button");
  const rightIcon = document.createElement("img");
    openBtn.textContent = "Open Explanation";
  rightIcon.src = iconURL;
    Object.assign(openBtn.style, {
  rightIcon.width = 15;
        background: "#444",
  rightIcon.height = 15;
        color: "#fff",
  rightIcon.alt = "Mahito icon";
        border: "none",
  rightIcon.style.borderRadius = "3px";
        padding: "5px 10px",
        cursor: "pointer"
    });
    openBtn.onclick = () => console.log("Open Explanation clicked");
    content.appendChild(openBtn);


    menu.appendChild(content);
  header.appendChild(leftIcon);
    document.body.appendChild(menu);
  header.appendChild(title);
  header.appendChild(rightIcon);


    // Dragging logic (mouse + touch)
  menu.appendChild(header);
    let isDragging = false, offsetX = 0, offsetY = 0;


     function startDrag(x, y) {
  const content = document.createElement("div");
        isDragging = true;
  const openBtn = document.createElement("button");
        const rect = menu.getBoundingClientRect();
  openBtn.textContent = "Open Explanation";
        offsetX = x - rect.left;
  Object.assign(openBtn.style, {
        offsetY = y - rect.top;
    background: "#444",
        menu.style.right = "auto";
    color: "#fff",
    border: "none",
    padding: "5px 10px",
    cursor: "pointer",
  });
  openBtn.onclick = () => console.log("Open Explanation clicked");
 
  content.appendChild(openBtn);
  menu.appendChild(content);
 
  document.body.appendChild(menu);
 
  // Dragging logic
  let isDragging = false,
     offsetX = 0,
    offsetY = 0;
 
  function startDrag(x, y) {
    isDragging = true;
    const rect = menu.getBoundingClientRect();
    offsetX = x - rect.left;
    offsetY = y - rect.top;
    menu.style.right = "auto";
  }
 
  function doDrag(x, y) {
    if (isDragging) {
      menu.style.left = x - offsetX + "px";
      menu.style.top = y - offsetY + "px";
     }
     }
  }
  function stopDrag() {
    isDragging = false;
  }


    function doDrag(x, y) {
  // Mouse events
        if (isDragging) {
  header.addEventListener("mousedown", function (e) {
            menu.style.left = (x - offsetX) + "px";
    startDrag(e.clientX, e.clientY);
            menu.style.top = (y - offsetY) + "px";
    e.preventDefault();
        }
  });
    }
 
  document.addEventListener("mousemove", function (e) {
    doDrag(e.clientX, e.clientY);
  });
 
  document.addEventListener("mouseup", stopDrag);


    function stopDrag() {
  // Touch events
        isDragging = false;
  header.addEventListener("touchstart", function (e) {
     }
    const touch = e.touches[0];
     startDrag(touch.clientX, touch.clientY);
    e.preventDefault();
  });


    // Mouse events
  document.addEventListener("touchmove", function (e) {
    header.addEventListener("mousedown", e => {
    if (!isDragging) return;
        startDrag(e.clientX, e.clientY);
    const touch = e.touches[0];
        e.preventDefault();
     doDrag(touch.clientX, touch.clientY);
     });
  });
    document.addEventListener("mousemove", e => doDrag(e.clientX, e.clientY));
    document.addEventListener("mouseup", stopDrag);


    // Touch events
  document.addEventListener("touchend", 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);
})();
})();
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"