Merge branch 'release_candidate'

1 files changed, 88 insertions, 49 deletions

diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index 8c5c5169..c4e9de58 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -1,8 +1,8 @@
 (function() {
     const GRADIO_MIN_WIDTH = 320;
-    const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
     const PAD = 16;
     const DEBOUNCE_TIME = 100;
+    const DOUBLE_TAP_DELAY = 200; //ms
 
     const R = {
         tracking: false,
@@ -11,6 +11,7 @@
         leftCol: null,
         leftColStartWidth: null,
         screenX: null,
+        lastTapTime: null,
     };
 
     let resizeTimer;
@@ -23,21 +24,17 @@
     function displayResizeHandle(parent) {
         if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
             parent.style.display = 'flex';
-            if (R.handle != null) {
-                R.handle.style.opacity = '0';
-            }
+            parent.resizeHandle.style.display = "none";
             return false;
         } else {
             parent.style.display = 'grid';
-            if (R.handle != null) {
-                R.handle.style.opacity = '100';
-            }
+            parent.resizeHandle.style.display = "block";
             return true;
         }
     }
 
     function afterResize(parent) {
-        if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
+        if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != parent.style.originalGridTemplateColumns) {
             const oldParentWidth = R.parentWidth;
             const newParentWidth = parent.offsetWidth;
             const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);
@@ -52,6 +49,14 @@
     }
 
     function setup(parent) {
+
+        function onDoubleClick(evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns;
+        }
+
         const leftCol = parent.firstElementChild;
         const rightCol = parent.lastElementChild;
 
@@ -59,63 +64,97 @@
 
         parent.style.display = 'grid';
         parent.style.gap = '0';
-        parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
+        const gridTemplateColumns = `${parent.children[0].style.flexGrow}fr ${PAD}px ${parent.children[1].style.flexGrow}fr`;
+        parent.style.gridTemplateColumns = gridTemplateColumns;
+        parent.style.originalGridTemplateColumns = gridTemplateColumns;
 
         const resizeHandle = document.createElement('div');
         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;
+        parent.resizeHandle = resizeHandle;
+
+        ['mousedown', 'touchstart'].forEach((eventType) => {
+            resizeHandle.addEventListener(eventType, (evt) => {
+                if (eventType.startsWith('mouse')) {
+                    if (evt.button !== 0) return;
+                } else {
+                    if (evt.changedTouches.length !== 1) return;
+
+                    const currentTime = new Date().getTime();
+                    if (R.lastTapTime && currentTime - R.lastTapTime <= DOUBLE_TAP_DELAY) {
+                        onDoubleClick(evt);
+                        return;
+                    }
+
+                    R.lastTapTime = currentTime;
+                }
+
+                evt.preventDefault();
+                evt.stopPropagation();
+
+                document.body.classList.add('resizing');
+
+                R.tracking = true;
+                R.parent = parent;
+                R.parentWidth = parent.offsetWidth;
+                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) => {
-            evt.preventDefault();
-            evt.stopPropagation();
-
-            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
-        });
+        resizeHandle.addEventListener('dblclick', onDoubleClick);
 
         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) {
+                if (eventType.startsWith('mouse')) {
+                    evt.preventDefault();
+                }
+                evt.stopPropagation();
+
+                let delta = 0;
+                if (eventType.startsWith('mouse')) {
+                    delta = R.screenX - evt.screenX;
+                } else {
+                    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');
+            }
+        });
     });