admin/kiss-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support subtitle dragable on mobile

Browse Source
This commit is contained in:
Gabe
2025-10-28 00:36:38 +08:00
parent 9d8f3f4211
commit 91642d8784
1 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/subtitle/BilingualSubtitleManager.js
View File

@@ -128,15 +128,14 @@ export class BilingualSubtitleManager {
let initialBottom; let initialBottom;
let dragElementHeight; let dragElementHeight;
const onMouseDown = (e) => { const onDragStart = (e) => {
e.stopPropagation(); if (e.type === "mousedown" && e.button !== 0) return;
e.preventDefault();
if (e.button !== 0) return; e.preventDefault();
isDragging = true; isDragging = true;
handleElement.style.cursor = "grabbing"; handleElement.style.cursor = "grabbing";
startY = e.clientY; startY = e.type === "touchstart" ? e.touches[0].clientY : e.clientY;
initialBottom = initialBottom =
boundaryContainer.getBoundingClientRect().bottom - boundaryContainer.getBoundingClientRect().bottom -
@@ -144,17 +143,23 @@ export class BilingualSubtitleManager {
dragElementHeight = dragElement.offsetHeight; dragElementHeight = dragElement.offsetHeight;
document.addEventListener("mousemove", onMouseMove, { capture: true }); document.addEventListener("mousemove", onDragMove, { capture: true });
document.addEventListener("mouseup", onMouseUp, { capture: true }); document.addEventListener("touchmove", onDragMove, {
capture: true,
passive: false,
});
document.addEventListener("mouseup", onDragEnd, { capture: true });
document.addEventListener("touchend", onDragEnd, { capture: true });
}; };
const onMouseMove = (e) => { const onDragMove = (e) => {
if (!isDragging) return; if (!isDragging) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation();
const deltaY = e.clientY - startY; const currentY =
e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
const deltaY = currentY - startY;
let newBottom = initialBottom - deltaY; let newBottom = initialBottom - deltaY;
const containerHeight = boundaryContainer.clientHeight; const containerHeight = boundaryContainer.clientHeight;
@@ -167,17 +172,18 @@ export class BilingualSubtitleManager {
dragElement.style.bottom = `${newBottom}px`; dragElement.style.bottom = `${newBottom}px`;
}; };
const onMouseUp = (e) => { const onDragEnd = (e) => {
if (!isDragging) return; if (!isDragging) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation();
isDragging = false; isDragging = false;
handleElement.style.cursor = "grab"; handleElement.style.cursor = "grab";
document.removeEventListener("mousemove", onMouseMove, { capture: true }); document.removeEventListener("mousemove", onDragMove, { capture: true });
document.removeEventListener("mouseup", onMouseUp, { capture: true }); document.removeEventListener("touchmove", onDragMove, { capture: true });
document.removeEventListener("mouseup", onDragEnd, { capture: true });
document.removeEventListener("touchend", onDragEnd, { capture: true });
const finalBottomPx = dragElement.style.bottom; const finalBottomPx = dragElement.style.bottom;
setTimeout(() => { setTimeout(() => {
@@ -185,7 +191,10 @@ export class BilingualSubtitleManager {
}, 50); }, 50);
}; };
handleElement.addEventListener("mousedown", onMouseDown); handleElement.addEventListener("mousedown", onDragStart);
handleElement.addEventListener("touchstart", onDragStart, {
passive: false,
});
} }
/** /**