Fixed #10020 - Splitter not working on touch devices (including dev t…

…ools)
primefaces · Mar 23, 2021 · a2e102a · a2e102a
1 parent 27db0a4
commit a2e102a
Showing 1 changed file with 44 additions and 11 deletions.
diff --git a/src/app/components/splitter/splitter.ts b/src/app/components/splitter/splitter.ts
@@ -12,7 +12,7 @@ import { PrimeTemplate, SharedModule } from 'primeng/api';
                     <ng-container *ngTemplateOutlet="panel"></ng-container>
                 </div>
                 <div class="p-splitter-gutter" *ngIf="i !== (panels.length - 1)" [ngStyle]="gutterStyle()" 
-                    (mousedown)="onGutterMouseDown($event, i)" (touchstart)="onGutterTouchStart($event, i)" (touchmove)="onGutterTouchMove($event, i)" (touchend)="onGutterTouchEnd($event, i)">
+                    (mousedown)="onGutterMouseDown($event, i)" (touchstart)="onGutterTouchStart($event, i)">
                     <div class="p-splitter-gutter-handle"></div>
                 </div>
             </ng-template>
@@ -61,6 +61,10 @@ export class Splitter {
 
     mouseUpListener = null;
 
+    touchMoveListener = null;
+
+    touchEndListener = null;
+
     size = null;
 
     gutterElement = null;
@@ -125,7 +129,7 @@ export class Splitter {
         this.gutterElement = event.currentTarget;
         this.size = this.horizontal() ? DomHandler.getWidth(this.containerViewChild.nativeElement) : DomHandler.getHeight(this.containerViewChild.nativeElement);
         this.dragging = true;
-        this.startPos = this.horizontal() ? event.pageX : event.pageY;
+        this.startPos = this.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;
@@ -138,9 +142,9 @@ export class Splitter {
     onResize(event) {
         let newPos;
         if (this.horizontal())
-            newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
+            newPos = ((event.pageX || event.changedTouches[0].pageX)  * 100 / this.size) - (this.startPos * 100 / this.size);
         else
-            newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
+            newPos = ((event.pageY || event.changedTouches[0].pageY)  * 100 / this.size) - (this.startPos * 100 / this.size);
 
         let newPrevPanelSize = this.prevPanelSize + newPos;
         let newNextPanelSize = this.nextPanelSize - newPos;
@@ -170,18 +174,20 @@ export class Splitter {
     }
 
     onGutterTouchStart(event, index) {
-        this.onResizeStart(event, index);
-        event.preventDefault();
-    }
+        if (event.cancelable){
+            this.onResizeStart(event, index);
+            this.bindTouchListeners();
 
-    onGutterTouchMove(event) {
-        this.onResize(event);
-        event.preventDefault();
+            event.preventDefault();
+        }
     }
 
     onGutterTouchEnd(event) {
         this.resizeEnd(event);
-        event.preventDefault();
+        this.unbindTouchListeners();
+
+        if (event.cancelable)
+            event.preventDefault();
     }
 
     validateResize(newPrevPanelSize, newNextPanelSize) {
@@ -211,6 +217,21 @@ export class Splitter {
         }
     }
 
+    bindTouchListeners() {
+        if (!this.touchMoveListener) {
+            this.touchMoveListener = event => this.onResize(event)
+            document.addEventListener('touchmove', this.touchMoveListener);
+        }
+
+        if (!this.touchEndListener) {
+            this.touchEndListener = event => {
+                this.resizeEnd(event);
+                this.unbindTouchListeners();
+            }
+            document.addEventListener('touchend', this.touchEndListener);
+        }
+    }
+
     unbindMouseListeners() {
         if (this.mouseMoveListener) {
             document.removeEventListener('mousemove', this.mouseMoveListener);
@@ -223,6 +244,18 @@ export class Splitter {
         }
     }
 
+    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;