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


  // === MENU ===
   const menu = document.createElement("div");
   const menu = document.createElement("div");
   menu.id = "mahitoMenu";
   menu.id = "mahitoMenu";
Line 23: Line 24:
   header.style.display = "flex";
   header.style.display = "flex";
   header.style.alignItems = "center";
   header.style.alignItems = "center";
   header.style.gap = "6px";
   header.style.justifyContent = "space-between";
   header.style.marginBottom = "8px";
   header.style.marginBottom = "8px";
   header.style.cursor = "grab";
   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");
   const img1 = document.createElement("img");
Line 42: Line 48:
   img2.height = 15;
   img2.height = 15;


   header.appendChild(img1);
   titleWrap.appendChild(img1);
   header.appendChild(title);
  titleWrap.appendChild(title);
   header.appendChild(img2);
  titleWrap.appendChild(img2);
 
  const minimizeBtn = document.createElement("button");
  minimizeBtn.textContent = "–";
  minimizeBtn.style.background = "#45A8C5";
  minimizeBtn.style.border = "none";
  minimizeBtn.style.color = "#fff";
  minimizeBtn.style.cursor = "pointer";
  minimizeBtn.style.borderRadius = "5px";
  minimizeBtn.style.width = "25px";
  minimizeBtn.style.height = "25px";
  minimizeBtn.style.lineHeight = "20px";
  minimizeBtn.style.fontSize = "18px";
 
   header.appendChild(titleWrap);
   header.appendChild(minimizeBtn);


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


  // YouTube embed container (floating below the menu)
   const ytContainer = document.createElement("div");
   const ytContainer = document.createElement("div");
   ytContainer.style.position = "fixed";
   ytContainer.style.position = "fixed";
   ytContainer.style.right = "20px";
   ytContainer.style.right = "20px";
   ytContainer.style.top = "150px"; // slightly below the menu
   ytContainer.style.top = "150px";
   ytContainer.style.zIndex = "99998";
   ytContainer.style.zIndex = "99998";
   ytContainer.style.display = "none";
   ytContainer.style.display = "none";
Line 87: Line 108:
   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 =
Line 100: Line 120:
     } else {
     } else {
       ytContainer.style.display = "none";
       ytContainer.style.display = "none";
       ytIframe.src = ytIframe.src; // reset to stop
       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";
   });
   });


Line 109: Line 153:
   menu.appendChild(btnEncouragement);
   menu.appendChild(btnEncouragement);
   document.body.appendChild(menu);
   document.body.appendChild(menu);
  document.body.appendChild(minimizedIcon);
   document.body.appendChild(ytContainer);
   document.body.appendChild(ytContainer);


   // === DRAGGING ===
   // === DRAGGING ===
   let isDragging = false;
   let isDragging = false;
   let offsetX = 0,
   let offsetX = 0, offsetY = 0;
    offsetY = 0;


   function startDrag(x, y) {
   function startDrag(x, y) {
Line 133: Line 177:
     menu.style.top = top + "px";
     menu.style.top = top + "px";


    // Move video container along with menu
     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.top = top + "px";
   }
   }


Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"