From 0bb53bff58c2378093aa9e363e302e93199784c0 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 7 Aug 2022 19:39:46 -0700 Subject: [PATCH] mobile resizing * part III of #1757 * resizing now works on mobile in h5 - the last step to get fully functional mobile support. * updated demos to showcase mobile better (ore to do) TODO: test nested grid as there appears to be a remaining corner case to fix... --- demo/mobile.html | 11 ++++++----- demo/nested.html | 2 ++ src/h5/dd-draggable.ts | 1 + src/h5/dd-resizable-handle.ts | 19 +++++++++++++++++++ 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/demo/mobile.html b/demo/mobile.html index a4b8bb86a..62e3ec3d8 100644 --- a/demo/mobile.html +++ b/demo/mobile.html @@ -7,20 +7,21 @@ Simple mobile demo - + +

Simple mobile demo

-

uses gridstack-jq.js which includes jquery.ui.touch-punch by default (minimum v3.2+, small 2k)

+

shows resize handle on mobile and support native touch events

diff --git a/demo/nested.html b/demo/nested.html index c992479cf..dfa69a71c 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -65,7 +65,9 @@

Nested grids demo

cellHeight: 50, margin: 5, minRow: 2, // don't collapse when empty + disableOneColumnMode: true, acceptWidgets: true, + alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), id: 'main', children: [ {x:0, y:0, content: 'regular item'}, diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts index 1f363b11f..cfc9db59d 100644 --- a/src/h5/dd-draggable.ts +++ b/src/h5/dd-draggable.ts @@ -99,6 +99,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt this.dragEl.removeEventListener('mousedown', this._mouseDown); if (isTouch) { this.dragEl.removeEventListener('touchstart', touchstart); + this.dragEl.removeEventListener('pointerdown', pointerdown); } this.el.classList.remove('ui-draggable'); if (!forDestroy) this.el.classList.add('ui-draggable-disabled'); diff --git a/src/h5/dd-resizable-handle.ts b/src/h5/dd-resizable-handle.ts index d49c61029..0aaac3e61 100644 --- a/src/h5/dd-resizable-handle.ts +++ b/src/h5/dd-resizable-handle.ts @@ -3,6 +3,8 @@ * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ +import { isTouch, pointerdown, touchend, touchmove, touchstart } from './touch'; + export interface DDResizableHandleOpt { start?: (event) => void; move?: (event) => void; @@ -47,6 +49,11 @@ export class DDResizableHandle { this.el = el; this.host.appendChild(this.el); this.el.addEventListener('mousedown', this._mouseDown); + if (isTouch) { + this.el.addEventListener('touchstart', touchstart); + this.el.addEventListener('pointerdown', pointerdown); + // this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment + } return this; } @@ -54,6 +61,10 @@ export class DDResizableHandle { public destroy(): DDResizableHandle { if (this.moving) this._mouseUp(this.mouseDownEvent); this.el.removeEventListener('mousedown', this._mouseDown); + if (isTouch) { + this.el.removeEventListener('touchstart', touchstart); + this.el.removeEventListener('pointerdown', pointerdown); + } this.host.removeChild(this.el); delete this.el; delete this.host; @@ -66,6 +77,10 @@ export class DDResizableHandle { this.mouseDownEvent = e; document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble document.addEventListener('mouseup', this._mouseUp); + if (isTouch) { + this.el.addEventListener('touchmove', touchmove); + this.el.addEventListener('touchend', touchend); + } } /** @internal */ @@ -87,6 +102,10 @@ export class DDResizableHandle { } document.removeEventListener('mousemove', this._mouseMove, true); document.removeEventListener('mouseup', this._mouseUp); + if (isTouch) { + this.el.removeEventListener('touchmove', touchmove); + this.el.removeEventListener('touchend', touchend); + } delete this.moving; delete this.mouseDownEvent; }