support resizable columns for touch (tablets)

This commit is contained in:
Andray 2024-02-22 17:04:56 +04:00
parent 1da05297ea
commit 85abbbb8fa

View File

@ -65,8 +65,13 @@
resizeHandle.classList.add('resize-handle');
parent.insertBefore(resizeHandle, rightCol);
resizeHandle.addEventListener('mousedown', (evt) => {
['mousedown', 'touchstart'].forEach((eventType) => {
resizeHandle.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')){
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
evt.preventDefault();
evt.stopPropagation();
@ -79,7 +84,12 @@
R.handle = resizeHandle;
R.leftCol = leftCol;
R.leftColStartWidth = leftCol.offsetWidth;
if (eventType.startsWith('mouse')){
R.screenX = evt.screenX;
} else {
R.screenX = evt.changedTouches[0].screenX;
}
});
});
resizeHandle.addEventListener('dblclick', (evt) => {
@ -92,21 +102,36 @@
afterResize(parent);
}
window.addEventListener('mousemove', (evt) => {
['mousemove', 'touchmove'].forEach((eventType) => {
window.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')){
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
if (R.tracking) {
evt.preventDefault();
evt.stopPropagation();
const delta = R.screenX - evt.screenX;
if (eventType.startsWith('mouse')){
var delta = R.screenX - evt.screenX;
} else {
var delta = R.screenX - evt.changedTouches[0].screenX;
}
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
setLeftColGridTemplate(R.parent, leftColWidth);
}
});
});
window.addEventListener('mouseup', (evt) => {
['mouseup', 'touchend'].forEach((eventType) => {
window.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')){
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
if (R.tracking) {
evt.preventDefault();
@ -117,6 +142,7 @@
document.body.classList.remove('resizing');
}
});
});
window.addEventListener('resize', () => {