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

[32810] Resizers don't work on mobile devices
pull/8233/head
Oliver Günther 5 years ago committed by GitHub
commit 6fda6d5438
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 37
      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: {

Loading…
Cancel
Save