User:Stumblean/common.js: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
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 | Object.assign(minimizeBtn.style, { | ||
background: "#45A8C5", | |||
border: "none", | |||
color: "#fff", | |||
cursor: "pointer", | |||
borderRadius: "5px", | |||
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 | |||
}); | }); | ||
minimizedIcon.addEventListener("click", () => { | |||
minimizedIcon.style.display = "none"; | |||
menu.style.display = "block"; | |||
}); | }); | ||
minimizeBtn.addEventListener("click", () => { | minimizeBtn.addEventListener("click", () => { | ||
menu.style.display = "none"; | menu.style.display = "none"; | ||
Line 83: | Line 71: | ||
}); | }); | ||
// === Button creator | |||
function makeButton(text, action) { | |||
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); | |||
})(); | })(); |