Merge pull request #2009 from adumesny/master

adumesny · web-flow · commit ec8775492f7d · 2022-08-07T19:41:00.000-07:00
mobile resizing
diff --git a/demo/mobile.html b/demo/mobile.html
@@ -7,20 +7,21 @@
   <title>Simple mobile demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <script src="../dist/gridstack-jq.js"></script>
+  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+  <script src="../dist/gridstack-h5.js"></script>
 
 </head>
 <body>
   <h1>Simple mobile demo</h1>
-  <p>uses gridstack-jq.js which includes jquery.ui.touch-punch by default (minimum v3.2+, small 2k)</p>
+  <p>shows resize handle on mobile and support native touch events</p>
   <div class="grid-stack"></div>
   <script type="text/javascript">
     let grid = GridStack.init({
-      // column: 1, // will auto switch on smaller screens
-      cellHeight: 150, // make sure we have a decent height and not width/12 for 1 column
+      column: 3,
+      disableOneColumnMode: true,
       alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
     });
-    grid.load([{x:0, y:0, content: '1'}, {x:0, y:1, h:2, content: '2'}, {x:0, y:3, content: '3'}])
+    grid.load([{x:0, y:0, content: '1'}, {x:1, y:0, h:2, content: '2'}, {x:2, y:0, content: '3'}])
   </script>
 </body>
 </html>
diff --git a/demo/nested.html b/demo/nested.html
@@ -65,7 +65,9 @@ <h1>Nested grids demo</h1>
       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
@@ -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
@@ -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,13 +49,22 @@ 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;
   }
 
   /** call this when resize handle needs to be removed and cleaned up */
   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;
   }

Original file line number	Diff line number	Diff line change
`@@ -99,6 +99,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt`
`99`	`99`	`this.dragEl.removeEventListener('mousedown', this._mouseDown);`
`100`	`100`	`if (isTouch) {`
`101`	`101`	`this.dragEl.removeEventListener('touchstart', touchstart);`
	`102`	`+ this.dragEl.removeEventListener('pointerdown', pointerdown);`
`102`	`103`	`}`
`103`	`104`	`this.el.classList.remove('ui-draggable');`
`104`	`105`	`if (!forDestroy) this.el.classList.add('ui-draggable-disabled');`