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 2: Line 2:
   const iconURL = "https://files.catbox.moe/wk78nl.jpg";
   const iconURL = "https://files.catbox.moe/wk78nl.jpg";


   // === MENU CONTAINER ===
   // === MENU ===
   const menu = document.createElement("div");
   const menu = document.createElement("div");
  menu.id = "mahitoMenu";
   Object.assign(menu.style, {
   Object.assign(menu.style, {
     position: "fixed",
     position: "fixed",
Line 16: Line 17:
     zIndex: "99999",
     zIndex: "99999",
     boxShadow: "0 0 10px black",
     boxShadow: "0 0 10px black",
    touchAction: "none",
     width: "180px"
     width: "180px",
   });
   });


  // === MINIMIZED ICON ===
  const minimizedIcon = document.createElement("img");
  minimizedIcon.src = iconURL;
  minimizedIcon.width = 30;
  minimizedIcon.height = 30;
  Object.assign(minimizedIcon.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    display: "none",
    cursor: "pointer",
    zIndex: "99999"
  });
  minimizedIcon.addEventListener("click", () => {
    menu.style.display = "block";
    minimizedIcon.style.display = "none";
  });
  // === HEADER WITH MINIMIZE BUTTON ===
   const header = document.createElement("div");
   const header = document.createElement("div");
   header.style.display = "flex";
   header.style.display = "flex";
  header.style.justifyContent = "space-between";
   header.style.alignItems = "center";
   header.style.alignItems = "center";
  header.style.justifyContent = "space-between";
   header.style.marginBottom = "8px";
   header.style.marginBottom = "8px";
  header.style.cursor = "grab";
  const titleWrap = document.createElement("div");
  titleWrap.style.display = "flex";
  titleWrap.style.gap = "6px";
  titleWrap.style.alignItems = "center";
  const img1 = document.createElement("img");
  img1.src = iconURL;
  img1.width = 15;
  img1.height = 15;


   const title = document.createElement("div");
   const title = document.createElement("div");
Line 61: Line 30:
   title.style.fontWeight = "bold";
   title.style.fontWeight = "bold";
   title.style.color = "#fff";
   title.style.color = "#fff";
  const img2 = document.createElement("img");
  img2.src = iconURL;
  img2.width = 15;
  img2.height = 15;
  titleWrap.appendChild(img1);
  titleWrap.appendChild(title);
  titleWrap.appendChild(img2);


   const minimizeBtn = document.createElement("button");
   const minimizeBtn = document.createElement("button");
   minimizeBtn.textContent = "–";
   minimizeBtn.textContent = "–";
   Object.assign(minimizeBtn.style, {
   minimizeBtn.style.background = "#45A8C5";
    background: "#45A8C5",
  minimizeBtn.style.border = "none";
    border: "none",
  minimizeBtn.style.color = "#fff";
    color: "#fff",
  minimizeBtn.style.cursor = "pointer";
    cursor: "pointer",
  minimizeBtn.style.borderRadius = "5px";
    borderRadius: "5px",
   minimizeBtn.style.width = "25px";
    width: "25px",
  minimizeBtn.style.height = "25px";
    height: "25px",
    fontSize: "18px",
    lineHeight: "20px",
  });
 
   minimizeBtn.addEventListener("click", () => {
    menu.style.display = "none";
    minimizedIcon.style.display = "block";
  });


   header.appendChild(titleWrap);
   header.appendChild(title);
   header.appendChild(minimizeBtn);
   header.appendChild(minimizeBtn);


   // === BUTTON FACTORY ===
   // === MINIMIZED ICON ===
   function makeButton(text, onclick) {
   const minimizedIcon = document.createElement("img");
    const btn = document.createElement("button");
  minimizedIcon.src = iconURL;
    btn.textContent = text;
  minimizedIcon.width = 30;
    btn.onclick = onclick;
  minimizedIcon.height = 30;
    Object.assign(btn.style, {
  Object.assign(minimizedIcon.style, {
      marginBottom: "6px",
    position: "fixed",
      width: "100%",
    top: "20px",
      cursor: "pointer",
    right: "20px",
      background: "#45A8C5",
    zIndex: "99999",
      color: "#fff",
    display: "none",
      border: "none",
     cursor: "pointer"
      padding: "5px 10px",
      borderRadius: "5px",
     });
    return btn;
  }
 
  const btnUndo = 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 btnExplain = makeButton("Open Explanation", () => {
  // === Button example (can add more)
    alert("Open Explanation clicked");
   const btn = document.createElement("button");
   });
  btn.textContent = "Open Explanation";
 
   Object.assign(btn.style, {
  const btnEncourage = makeButton("Encouragement", () => {
    background: "#45A8C5",
     if (ytContainer.style.display === "none") {
    color: "#fff",
      ytContainer.style.display = "block";
     border: "none",
     } else {
    padding: "5px 10px",
      ytContainer.style.display = "none";
     borderRadius: "5px",
      ytIframe.src = ytIframe.src;
    width: "100%",
     }
     cursor: "pointer"
   });
   });


   // === YOUTUBE CONTAINER ===
   // === Append everything
  const ytContainer = document.createElement("div");
  ytContainer.style.position = "fixed";
  ytContainer.style.right = "20px";
  ytContainer.style.top = "150px";
  ytContainer.style.zIndex = "99998";
  ytContainer.style.display = "none";
  ytContainer.style.background = "#000";
  ytContainer.style.padding = "5px";
  ytContainer.style.borderRadius = "10px";
  ytContainer.style.boxShadow = "0 0 10px black";
 
  const ytIframe = document.createElement("iframe");
  ytIframe.width = "280";
  ytIframe.height = "157";
  ytIframe.src = "https://www.youtube.com/embed/VKfyq_hOL0c?autoplay=1";
  ytIframe.title = "Self Embodiment of Perfection OST - Mahito Theme";
  ytIframe.frameBorder = "0";
  ytIframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
  ytIframe.allowFullscreen = true;
 
  ytContainer.appendChild(ytIframe);
 
  // === ASSEMBLE MENU ===
   menu.appendChild(header);
   menu.appendChild(header);
   menu.appendChild(btnUndo);
   menu.appendChild(btn);
  menu.appendChild(btnExplain);
  menu.appendChild(btnEncourage);
 
   document.body.appendChild(menu);
   document.body.appendChild(menu);
   document.body.appendChild(minimizedIcon);
   document.body.appendChild(minimizedIcon);
  document.body.appendChild(ytContainer);


   // === DRAGGING SUPPORT (menu + icon) ===
   // === Minimize/restore logic
  let isDragging = false;
  minimizeBtn.addEventListener("click", () => {
   let offsetX = 0, offsetY = 0;
    menu.style.display = "none";
    minimizedIcon.style.display = "block";
   });


   function startDrag(x, y) {
   minimizedIcon.addEventListener("click", () => {
    isDragging = true;
     minimizedIcon.style.display = "none";
    const rect = menu.getBoundingClientRect();
     menu.style.display = "block";
    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;
    const left = x - offsetX;
     const top = y - offsetY;
    menu.style.left = left + "px";
     menu.style.top = top + "px";
    ytContainer.style.right = "auto";
    ytContainer.style.left = left + "px";
    ytContainer.style.top = top + menu.offsetHeight + 10 + "px";
    minimizedIcon.style.left = left + "px";
    minimizedIcon.style.top = top + "px";
    minimizedIcon.style.right = "auto";
  }
 
  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 t = e.touches[0];
    startDrag(t.clientX, t.clientY);
    e.preventDefault();
  });
  document.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    const t = e.touches[0];
    doDrag(t.clientX, t.clientY);
   });
   });
  document.addEventListener("touchend", stopDrag);
})();
})();
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"