From 83af80d542bbedf737f3d26a2055c60f01931f61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 30 Jun 2022 11:29:11 +0300
Subject: [PATCH] Fixed #2513 - Splitter: mobile resize fails

---
 src/components/splitter/Splitter.vue | 31 +++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
index 345675d215..fdd08ce2a1 100644
--- a/src/components/splitter/Splitter.vue
+++ b/src/components/splitter/Splitter.vue
@@ -40,6 +40,8 @@ export default {
     dragging: false,
     mouseMoveListener: null,
     mouseUpListener: null,
+    touchMoveListener: null,
+    touchEndListener: null,
     size: null,
     gutterElement: null,
     startPos: null,
@@ -83,7 +85,7 @@ export default {
             this.gutterElement = event.currentTarget;
             this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
             this.dragging = true;
-            this.startPos = this.layout === 'horizontal' ? event.pageX : event.pageY;
+            this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
             this.prevPanelElement = this.gutterElement.previousElementSibling;
             this.nextPanelElement = this.gutterElement.nextElementSibling;
             this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
@@ -125,6 +127,7 @@ export default {
         },
         onGutterTouchStart(event, index) {
             this.onResizeStart(event, index);
+            this.bindTouchListeners();
             event.preventDefault();
         },
         onGutterTouchMove(event) {
@@ -133,6 +136,7 @@ export default {
         },
         onGutterTouchEnd(event) {
             this.onResizeEnd(event);
+            this.unbindTouchListeners();
             event.preventDefault();
         },
         bindMouseListeners() {
@@ -149,6 +153,20 @@ export default {
                 document.addEventListener('mouseup', this.mouseUpListener);
             }
         },
+        bindTouchListeners() {
+            if (!this.touchMoveListener) {
+                this.touchMoveListener = event => this.onResize(event.changedTouches[0])
+                document.addEventListener('touchmove', this.touchMoveListener);
+            }
+
+            if (!this.touchEndListener) {
+                this.touchEndListener = event => {
+                    this.resizeEnd(event);
+                    this.unbindTouchListeners();
+                }
+                document.addEventListener('touchend', this.touchEndListener);
+            }
+        },
         validateResize(newPrevPanelSize, newNextPanelSize) {
             let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
             if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
@@ -173,6 +191,17 @@ export default {
                 this.mouseUpListener = null;
             }
         },
+        unbindTouchListeners() {
+            if (this.touchMoveListener) {
+                document.removeEventListener('touchmove', this.touchMoveListener);
+                this.touchMoveListener = null;
+            }
+
+            if (this.touchEndListener) {
+                document.removeEventListener('touchend', this.touchEndListener);
+                this.touchEndListener = null;
+            }
+        },
         clear() {
             this.dragging = false;
             this.size = null;