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: | ||
zIndex: "99999", | zIndex: "99999", | ||
boxShadow: "0 0 10px black", | boxShadow: "0 0 10px black", | ||
width: "180px" | width: "180px", | ||
cursor: "move", // show dragging cursor | |||
userSelect: "none" // avoid selecting text while dragging | |||
}); | }); | ||
Line 166: | Line 168: | ||
document.body.appendChild(minimizedIcon); | document.body.appendChild(minimizedIcon); | ||
document.body.appendChild(ytContainer); | document.body.appendChild(ytContainer); | ||
// === Dragging logic === | |||
let posX = 0, posY = 0, startX = 0, startY = 0; | |||
let dragging = false; | |||
function onDragStart(e) { | |||
dragging = true; | |||
startX = e.type === "touchstart" ? e.touches[0].clientX : e.clientX; | |||
startY = e.type === "touchstart" ? e.touches[0].clientY : e.clientY; | |||
posX = parseInt(menu.style.right); | |||
posY = parseInt(menu.style.top); | |||
e.preventDefault(); | |||
} | |||
function onDragMove(e) { | |||
if (!dragging) return; | |||
const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX; | |||
const clientY = e.type === "touchmove" ? e.touches[0].clientY : e.clientY; | |||
const dx = startX - clientX; | |||
const dy = clientY - startY; | |||
let newRight = posX + dx; | |||
let newTop = posY + dy; | |||
// keep inside viewport horizontally | |||
newRight = Math.max(0, Math.min(window.innerWidth - menu.offsetWidth, window.innerWidth - newRight - menu.offsetWidth)); | |||
// keep inside viewport vertically | |||
newTop = Math.max(0, Math.min(window.innerHeight - menu.offsetHeight, newTop)); | |||
menu.style.right = newRight + "px"; | |||
menu.style.top = newTop + "px"; | |||
e.preventDefault(); | |||
} | |||
function onDragEnd() { | |||
dragging = false; | |||
} | |||
// Attach events to header for dragging | |||
header.style.touchAction = "none"; // prevent default gestures on mobile | |||
header.addEventListener("mousedown", onDragStart); | |||
header.addEventListener("touchstart", onDragStart); | |||
window.addEventListener("mousemove", onDragMove); | |||
window.addEventListener("touchmove", onDragMove); | |||
window.addEventListener("mouseup", onDragEnd); | |||
window.addEventListener("touchend", onDragEnd); | |||
})(); | })(); |