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 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);
})();
})();