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


   // === MENU ===
   // === MENU CONTAINER ===
   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 18: Line 17:
     boxShadow: "0 0 10px black",
     boxShadow: "0 0 10px black",
     touchAction: "none",
     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";
Line 34: Line 53:


   const img1 = document.createElement("img");
   const img1 = document.createElement("img");
   img1.src = icon;
   img1.src = iconURL;
   img1.width = 15;
   img1.width = 15;
   img1.height = 15;
   img1.height = 15;
Line 44: Line 63:


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


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


   // === BUTTON MAKER ===
   // === BUTTON FACTORY ===
   function makeButton(text, onclick) {
   function makeButton(text, onclick) {
     const btn = document.createElement("button");
     const btn = document.createElement("button");
Line 85: Line 111:
   }
   }


   const btn1 = makeButton("Mass undo", () => {
   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');");
     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 btnExplain = makeButton("Open Explanation", () => {
     alert("Open Explanation clicked");
     alert("Open Explanation clicked");
   });
   });


  const btnEncourage = makeButton("Encouragement", () => {
    if (ytContainer.style.display === "none") {
      ytContainer.style.display = "block";
    } else {
      ytContainer.style.display = "none";
      ytIframe.src = ytIframe.src;
    }
  });
  // === YOUTUBE CONTAINER ===
   const ytContainer = document.createElement("div");
   const ytContainer = document.createElement("div");
   ytContainer.style.position = "fixed";
   ytContainer.style.position = "fixed";
Line 108: Line 144:
   ytIframe.height = "157";
   ytIframe.height = "157";
   ytIframe.src = "https://www.youtube.com/embed/VKfyq_hOL0c?autoplay=1";
   ytIframe.src = "https://www.youtube.com/embed/VKfyq_hOL0c?autoplay=1";
  ytIframe.title = "Self Embodiment of Perfection OST - Mahito Theme";
   ytIframe.frameBorder = "0";
   ytIframe.frameBorder = "0";
   ytIframe.allow =
   ytIframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
   ytIframe.allowFullscreen = true;
   ytIframe.allowFullscreen = true;


   ytContainer.appendChild(ytIframe);
   ytContainer.appendChild(ytIframe);


  const btnEncouragement = makeButton("Encouragement", () => {
   // === ASSEMBLE MENU ===
    if (ytContainer.style.display === "none") {
   menu.appendChild(header);
      ytContainer.style.display = "block";
   menu.appendChild(btnUndo);
    } else {
   menu.appendChild(btnExplain);
      ytContainer.style.display = "none";
   menu.appendChild(btnEncourage);
      ytIframe.src = ytIframe.src; // reset video
    }
  });
 
   // === MINIMIZED ICON ===
   const minimizedIcon = document.createElement("img");
   minimizedIcon.src = icon;
  minimizedIcon.width = 15;
  minimizedIcon.height = 15;
  Object.assign(minimizedIcon.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    zIndex: "99999",
    cursor: "pointer",
    display: "none"
  });
 
   minimizedIcon.addEventListener("click", () => {
    menu.style.display = "block";
    minimizedIcon.style.display = "none";
   });
 
  minimizeBtn.addEventListener("click", () => {
    menu.style.display = "none";
    minimizedIcon.style.display = "block";
  });


  menu.appendChild(header);
  menu.appendChild(btn1);
  menu.appendChild(btn2);
  menu.appendChild(btnEncouragement);
   document.body.appendChild(menu);
   document.body.appendChild(menu);
   document.body.appendChild(minimizedIcon);
   document.body.appendChild(minimizedIcon);
   document.body.appendChild(ytContainer);
   document.body.appendChild(ytContainer);


   // === DRAGGING ===
   // === DRAGGING SUPPORT (menu + icon) ===
   let isDragging = false;
   let isDragging = false;
   let offsetX = 0, offsetY = 0;
   let offsetX = 0, offsetY = 0;
Line 176: Line 181:
     menu.style.left = left + "px";
     menu.style.left = left + "px";
     menu.style.top = top + "px";
     menu.style.top = top + "px";
     ytContainer.style.right = "auto";
     ytContainer.style.right = "auto";
     ytContainer.style.left = left + "px";
     ytContainer.style.left = left + "px";
     ytContainer.style.top = top + menu.offsetHeight + 10 + "px";
     ytContainer.style.top = top + menu.offsetHeight + 10 + "px";
     minimizedIcon.style.left = left + "px";
     minimizedIcon.style.left = left + "px";
     minimizedIcon.style.top = top + "px";
     minimizedIcon.style.top = top + "px";
    minimizedIcon.style.right = "auto";
   }
   }


Line 193: Line 197:
     e.preventDefault();
     e.preventDefault();
   });
   });
 
   document.addEventListener("mousemove", (e) => doDrag(e.clientX, e.clientY));
   document.addEventListener("mousemove", (e) => {
    doDrag(e.clientX, e.clientY);
  });
 
   document.addEventListener("mouseup", stopDrag);
   document.addEventListener("mouseup", stopDrag);
   header.addEventListener("touchstart", (e) => {
   header.addEventListener("touchstart", (e) => {
     const touch = e.touches[0];
     const t = e.touches[0];
     startDrag(touch.clientX, touch.clientY);
     startDrag(t.clientX, t.clientY);
     e.preventDefault();
     e.preventDefault();
   });
   });
   document.addEventListener("touchmove", (e) => {
   document.addEventListener("touchmove", (e) => {
     if (!isDragging) return;
     if (!isDragging) return;
     const touch = e.touches[0];
     const t = e.touches[0];
     doDrag(touch.clientX, touch.clientY);
     doDrag(t.clientX, t.clientY);
   });
   });
   document.addEventListener("touchend", stopDrag);
   document.addEventListener("touchend", stopDrag);
})();
})();
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"