diff --git a/public/script.js b/public/script.js index ea24343..3e46a07 100644 --- a/public/script.js +++ b/public/script.js @@ -11,25 +11,11 @@ const dragElement = (element) => { let startX, startY, startWidth, startHeight const doDrag = (event) => - (element.style.width = startWidth + event.clientX - startX + "px") - - const initDrag = (event) => { - startX = event.clientX - startY = event.clientY - startWidth = element.clientWidth - startHeight = element.clientHeight - - document.addEventListener("mousemove", doDrag) - document.addEventListener("mouseup", () => { - document.removeEventListener("mousemove", doDrag) - document.removeEventListener("mouseup", this) - }) - } - - const resizer = document.createElement("div") - resizer.className = "resizer" - element.appendChild(resizer) - resizer.addEventListener("mousedown", initDrag) + (element.style.width = + startWidth + + (event.clientX || event.touches[0].clientX) - + startX + + "px") let pos1 = 0, pos2 = 0, @@ -37,28 +23,52 @@ const dragElement = (element) => { pos4 = 0 const elementDrag = (event) => { - pos1 = pos3 - event.clientX - pos2 = pos4 - event.clientY - pos3 = event.clientX - pos4 = event.clientY + pos1 = pos3 - (event.clientX || event.touches[0].clientX) + pos2 = pos4 - (event.clientY || event.touches[0].clientY) + pos3 = event.clientX || event.touches[0].clientX + pos4 = event.clientY || event.touches[0].clientY element.style.top = `${element.offsetTop - pos2}px` element.style.left = `${element.offsetLeft - pos1}px` - event.preventDefault() } + const removeFunctions = (resize) => { + document.removeEventListener("mousemove", resize ? doDrag : elementDrag) + document.removeEventListener("mouseup", this) + document.removeEventListener("touchmove", resize ? doDrag : elementDrag) + document.removeEventListener("touchend", this) + } + + const initDrag = (event) => { + startX = event.clientX || event.touches[0].clientX + startY = event.clientY || event.touches[0].clientY + startWidth = element.clientWidth + startHeight = element.clientHeight + + document.addEventListener("mousemove", doDrag) + document.addEventListener("touchmove", doDrag) + document.addEventListener("touchend", () => removeFunctions(true)) + document.addEventListener("mouseup", () => removeFunctions(true)) + } + + const resizer = document.createElement("div") + resizer.className = "resizer" + element.appendChild(resizer) + resizer.addEventListener("mousedown", initDrag) + resizer.addEventListener("touchstart", initDrag) + const dragMouseDown = (event) => { - if (event.target == resizer) return false - pos3 = event.clientX - pos4 = event.clientY + if (event.target == resizer) return + + pos3 = event.clientX || event.touches[0].clientX + pos4 = event.clientY || event.touches[0].clientY document.addEventListener("mousemove", elementDrag) - document.addEventListener("mouseup", () => { - document.removeEventListener("mouseup", this) - document.removeEventListener("mousemove", elementDrag) - }) - event.preventDefault() + document.addEventListener("touchmove", elementDrag) + document.addEventListener("touchend", () => removeFunctions()) + document.addEventListener("mouseup", () => removeFunctions()) } element.addEventListener("mousedown", dragMouseDown) + element.addEventListener("touchstart", dragMouseDown) } const connectToNewUser = (userId, stream) => { diff --git a/public/style.css b/public/style.css index 1557caf..a63a848 100644 --- a/public/style.css +++ b/public/style.css @@ -154,12 +154,14 @@ video.your-video { left: 50%; border-radius: 0.5em; transform: translate(-50%, -50%); + max-width: 95%; width: 500px; transition: 0.3s opacity ease-in-out; } #popup.dismissed { opacity: 0; + display: none; } #popup hr {