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 17: | Line 17: | ||
boxShadow: "0 0 10px black", | boxShadow: "0 0 10px black", | ||
touchAction: "none", | touchAction: "none", | ||
width: " | width: "180px" | ||
}); | }); | ||
| Line 71: | Line 71: | ||
}); | }); | ||
// YouTube embed container | // YouTube embed container (floating below the menu) | ||
const ytContainer = document.createElement("div"); | const ytContainer = document.createElement("div"); | ||
ytContainer.style.position = "fixed"; | |||
ytContainer.style.right = "20px"; | |||
ytContainer.style.top = "150px"; // slightly below the menu | |||
ytContainer.style.zIndex = "99998"; | |||
ytContainer.style.display = "none"; | ytContainer.style.display = "none"; | ||
ytContainer.style. | ytContainer.style.background = "#000"; | ||
ytContainer.style. | ytContainer.style.padding = "5px"; | ||
ytContainer.style.borderRadius = "10px"; | |||
ytContainer.style.boxShadow = "0 0 10px black"; | |||
const ytIframe = document.createElement("iframe"); | const ytIframe = document.createElement("iframe"); | ||
ytIframe.width = "280"; | ytIframe.width = "280"; | ||
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.title = "Self Embodiment of Perfection OST - Mahito Theme"; | ||
| Line 94: | Line 100: | ||
} else { | } else { | ||
ytContainer.style.display = "none"; | ytContainer.style.display = "none"; | ||
ytIframe.src = ytIframe.src; // reset to stop | |||
ytIframe.src = ytIframe.src; | |||
} | } | ||
}); | }); | ||
| Line 103: | Line 108: | ||
menu.appendChild(btn2); | menu.appendChild(btn2); | ||
menu.appendChild(btnEncouragement); | menu.appendChild(btnEncouragement); | ||
document.body.appendChild(menu); | document.body.appendChild(menu); | ||
document.body.appendChild(ytContainer); | |||
// === DRAGGING === | // === DRAGGING === | ||
| Line 123: | Line 128: | ||
function doDrag(x, y) { | function doDrag(x, y) { | ||
if (!isDragging) return; | if (!isDragging) return; | ||
menu.style.left = | const left = x - offsetX; | ||
menu.style.top = | const top = y - offsetY; | ||
menu.style.left = left + "px"; | |||
menu.style.top = top + "px"; | |||
// Move video container along with menu | |||
ytContainer.style.right = "auto"; | |||
ytContainer.style.left = left + "px"; | |||
ytContainer.style.top = top + menu.offsetHeight + 10 + "px"; | |||
} | } | ||