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
Line 33: Line 33:
   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",
    height: "25px"
  });


   header.appendChild(title);
   header.appendChild(title);
Line 55: Line 57:
     zIndex: "99999",
     zIndex: "99999",
     display: "none",
     display: "none",
     cursor: "pointer"
     cursor: "pointer",
    borderRadius: "50%" // rounded icon
   });
   });


   // === Button example (can add more)
   minimizedIcon.addEventListener("click", () => {
  const btn = document.createElement("button");
    minimizedIcon.style.display = "none";
  btn.textContent = "Open Explanation";
    menu.style.display = "block";
  Object.assign(btn.style, {
    background: "#45A8C5",
    color: "#fff",
    border: "none",
    padding: "5px 10px",
    borderRadius: "5px",
    width: "100%",
    cursor: "pointer"
   });
   });


  // === Append everything
  menu.appendChild(header);
  menu.appendChild(btn);
  document.body.appendChild(menu);
  document.body.appendChild(minimizedIcon);
  // === Minimize/restore logic
   minimizeBtn.addEventListener("click", () => {
   minimizeBtn.addEventListener("click", () => {
     menu.style.display = "none";
     menu.style.display = "none";
Line 83: Line 71:
   });
   });


   minimizedIcon.addEventListener("click", () => {
   // === Button creator
     minimizedIcon.style.display = "none";
  function makeButton(text, action) {
     menu.style.display = "block";
    const btn = document.createElement("button");
    btn.textContent = text;
    btn.onclick = action;
    Object.assign(btn.style, {
      marginBottom: "6px",
      width: "100%",
      cursor: "pointer",
      background: "#45A8C5",
      color: "#fff",
      border: "none",
      padding: "5px 10px",
      borderRadius: "5px"
    });
    return btn;
  }
 
  // === All buttons
  const btnUndo = makeButton("Mass undo", () => {
    navigator.clipboard.writeText(
      "mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Alexis_Jazz/Kill-It-With-Fire.js&action=raw&ctype=text/javascript');"
    );
    alert("Go to your common.js and paste what was just copied!");
  });
 
  const btnExplain = makeButton("Open Explanation", () => {
    alert("This would explain how Mahito works. You can hook this later.");
  });
 
  const btnEncouragement = makeButton("Encouragement", () => {
     if (ytContainer.style.display === "none") {
      ytContainer.style.display = "block";
     } else {
      ytContainer.style.display = "none";
      ytIframe.src = ytIframe.src; // reset video
    }
  });
 
  // === YouTube iframe container
  const ytContainer = document.createElement("div");
  Object.assign(ytContainer.style, {
    position: "fixed",
    right: "20px",
    top: "150px",
    zIndex: "99998",
    display: "none",
    background: "#000",
    padding: "5px",
    borderRadius: "10px",
    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";
  ytIframe.frameBorder = "0";
  ytIframe.allow =
    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
  ytIframe.allowFullscreen = true;
  ytContainer.appendChild(ytIframe);
  // === Final Assembly
  menu.appendChild(header);
  menu.appendChild(btnUndo);
  menu.appendChild(btnExplain);
  menu.appendChild(btnEncouragement);
  document.body.appendChild(menu);
  document.body.appendChild(minimizedIcon);
  document.body.appendChild(ytContainer);
})();
})();