Merge pull request #8227 from opf/fix/32810-Resizers-dont-work-on-mobile-devices

[32810] Resizers don't work on mobile devices

frontend/src/app/modules/common/resizer/resizer.component.ts

@@ -3,7 +3,7 @@ import {DomHelpers} from "core-app/helpers/dom/set-window-cursor.helper";
 
 
 export interface ResizeDelta {
-  origin:MouseEvent;
+  origin:any;
 
   // Absolute difference from start
   absolute:{
@@ -46,18 +46,18 @@ export class ResizerComponent implements OnDestroy {
   }
 
   @HostListener('mousedown', ['$event'])
-  public startResize(event:MouseEvent) {
-    event.preventDefault();
+  @HostListener('touchstart', ['$event'])
+  public startResize(event:any) {
     event.stopPropagation();
 
     // Only on left mouse click the resizing is started
-    if (event.buttons === 1 || event.which === 1) {
+    if (event.buttons === 1 || event.which === 1 || event.which === 0) {
       // Getting starting position
-      this.oldX = this.startX = event.clientX || event.pageX;
-      this.oldY = this.startY = event.clientY || event.pageY;
+      this.oldX = this.startX = event.clientX || event.pageX || event.touches[0].clientX;
+      this.oldY = this.startY = event.clientY || event.pageY || event.touches[0].clientY;
 
-      this.newX = event.clientX || event.pageX;
-      this.newY = event.clientY || event.pageY;
+      this.newX = event.clientX || event.pageX || event.touches[0].clientX;
+      this.newY = event.clientY || event.pageY || event.touches[0].clientY;
 
       this.resizing = true;
 
@@ -68,40 +68,41 @@ export class ResizerComponent implements OnDestroy {
     }
   }
 
-  private onMouseUp(element:HTMLElement, event:MouseEvent) {
+  private onMouseUp(event:any) {
     this.setAutoCursor();
     this.removeEventListener();
 
     this.end.emit(this.buildDelta(event));
   }
 
-  private onMouseMove(element:HTMLElement, event:MouseEvent) {
-    event.preventDefault();
+  private onMouseMove(event:any) {
     event.stopPropagation();
 
     this.oldX = this.newX;
     this.oldY = this.newY;
 
-    this.newX = event.clientX || event.pageX;
-    this.newY = event.clientY || event.pageY;
+    this.newX = event.clientX || event.pageX || event.touches[0].clientX;
+    this.newY = event.clientY || event.pageY || event.touches[0].clientX;
 
     this.move.emit(this.buildDelta(event));
   }
 
   // Necessary to encapsulate this to be able to remove the event listener later
-  private bindEventListener(event:MouseEvent) {
-    this.mouseMoveHandler = this.onMouseMove.bind(this, event.currentTarget);
-    this.mouseUpHandler = this.onMouseUp.bind(this, event.currentTarget);
+  private bindEventListener(event:any) {
+    this.mouseMoveHandler = this.onMouseMove.bind(this);
+    this.mouseUpHandler = this.onMouseUp.bind(this);
 
     window.addEventListener('mousemove', this.mouseMoveHandler);
     window.addEventListener('touchmove', this.mouseMoveHandler);
     window.addEventListener('mouseup', this.mouseUpHandler);
+    window.addEventListener('touchend', this.mouseUpHandler);
   }
 
   private removeEventListener() {
-    window.addEventListener('touchmove', this.mouseMoveHandler);
+    window.removeEventListener('touchmove', this.mouseMoveHandler);
     window.removeEventListener('mousemove', this.mouseMoveHandler);
     window.removeEventListener('mouseup', this.mouseUpHandler);
+    window.removeEventListener('touchend', this.mouseUpHandler);
   }
 
   private setResizeCursor() {
@@ -112,7 +113,7 @@ export class ResizerComponent implements OnDestroy {
     DomHelpers.setBodyCursor('auto');
   }
 
-  private buildDelta(event:MouseEvent):ResizeDelta {
+  private buildDelta(event:any):ResizeDelta {
     return {
       origin: event,
       absolute: {