From 85abbbb8fa8f983222e7fffec1e686c06cf4deae Mon Sep 17 00:00:00 2001 From: Andray Date: Thu, 22 Feb 2024 17:04:56 +0400 Subject: [PATCH 1/3] support resizable columns for touch (tablets) --- javascript/resizeHandle.js | 92 ++++++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 33 deletions(-) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 8c5c5169210..13f2b3719bd 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -65,21 +65,31 @@ resizeHandle.classList.add('resize-handle'); parent.insertBefore(resizeHandle, rightCol); - resizeHandle.addEventListener('mousedown', (evt) => { - if (evt.button !== 0) return; - - evt.preventDefault(); - evt.stopPropagation(); - - document.body.classList.add('resizing'); - - R.tracking = true; - R.parent = parent; - R.parentWidth = parent.offsetWidth; - R.handle = resizeHandle; - R.leftCol = leftCol; - R.leftColStartWidth = leftCol.offsetWidth; - R.screenX = evt.screenX; + ['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(); + + document.body.classList.add('resizing'); + + R.tracking = true; + R.parent = parent; + R.parentWidth = parent.offsetWidth; + 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,30 +102,46 @@ afterResize(parent); } - window.addEventListener('mousemove', (evt) => { - if (evt.button !== 0) return; - - if (R.tracking) { - evt.preventDefault(); - evt.stopPropagation(); + ['mousemove', 'touchmove'].forEach((eventType) => { + window.addEventListener(eventType, (evt) => { + if (eventType.startsWith('mouse')){ + if (evt.button !== 0) return; + } else { + if (evt.changedTouches.length !== 1) return; + } - const delta = R.screenX - evt.screenX; - const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); - setLeftColGridTemplate(R.parent, leftColWidth); - } + if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + + 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) => { - if (evt.button !== 0) return; + ['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(); - evt.stopPropagation(); + if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); - R.tracking = false; + R.tracking = false; - document.body.classList.remove('resizing'); - } + document.body.classList.remove('resizing'); + } + }); }); From ab1e0fa9bff196b4fd6f4eef560218833e6bb387 Mon Sep 17 00:00:00 2001 From: Andray Date: Thu, 22 Feb 2024 17:16:16 +0400 Subject: [PATCH 2/3] fix lint and console warning --- javascript/resizeHandle.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 13f2b3719bd..038f4cb0698 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -67,7 +67,7 @@ ['mousedown', 'touchstart'].forEach((eventType) => { resizeHandle.addEventListener(eventType, (evt) => { - if (eventType.startsWith('mouse')){ + if (eventType.startsWith('mouse')) { if (evt.button !== 0) return; } else { if (evt.changedTouches.length !== 1) return; @@ -84,7 +84,7 @@ R.handle = resizeHandle; R.leftCol = leftCol; R.leftColStartWidth = leftCol.offsetWidth; - if (eventType.startsWith('mouse')){ + if (eventType.startsWith('mouse')) { R.screenX = evt.screenX; } else { R.screenX = evt.changedTouches[0].screenX; @@ -104,20 +104,23 @@ ['mousemove', 'touchmove'].forEach((eventType) => { window.addEventListener(eventType, (evt) => { - if (eventType.startsWith('mouse')){ + if (eventType.startsWith('mouse')) { if (evt.button !== 0) return; } else { if (evt.changedTouches.length !== 1) return; } if (R.tracking) { - evt.preventDefault(); + if (eventType.startsWith('mouse')) { + evt.preventDefault(); + } evt.stopPropagation(); - if (eventType.startsWith('mouse')){ - var delta = R.screenX - evt.screenX; + let delta = 0; + if (eventType.startsWith('mouse')) { + delta = R.screenX - evt.screenX; } else { - var delta = R.screenX - evt.changedTouches[0].screenX; + 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); @@ -127,7 +130,7 @@ ['mouseup', 'touchend'].forEach((eventType) => { window.addEventListener(eventType, (evt) => { - if (eventType.startsWith('mouse')){ + if (eventType.startsWith('mouse')) { if (evt.button !== 0) return; } else { if (evt.changedTouches.length !== 1) return; From 58985e6b372de408150fcd2dbcd6c6d5a17a3f58 Mon Sep 17 00:00:00 2001 From: Andray Date: Thu, 22 Feb 2024 17:22:00 +0400 Subject: [PATCH 3/3] fix lint 2 --- javascript/resizeHandle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 038f4cb0698..f22aa51de6e 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -115,7 +115,7 @@ evt.preventDefault(); } evt.stopPropagation(); - + let delta = 0; if (eventType.startsWith('mouse')) { delta = R.screenX - evt.screenX;