mobile support tweaks

* `alwaysShowResizeHandle` now support `'mobile'` which is the default, making it much easier (see doc)

everything seems to be working now, just need to release next #1757
* tested on:
Win10: Chrome 104, Firefox 103, Edge 104
Android 10: Chrome

Author: adumesny

README.md

@@ -295,21 +295,19 @@ GridStack.init({
 
 ## Touch devices support
 
-gridstack v3.2 jq version compiles touch support (html5 version does not yet support `touchmove` events. This will be added in a future release), so it works out of the box, no need for anything.
-You **used** to need [jQuery UI Touch Punch](https://github.com/RWAP/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable
-work on touch-based devices (now distributed as `dist/jq/jquery.ui.touch-punch.js` for reference).
+gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.
+Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.
 
-
-This option will be useful:
+This option is now the default:
 
 ```js
 let options = {
-  alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+  alwaysShowResizeHandle: 'mobile' // which defaults to /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 };
 GridStack.init(options);
 ```
 
-See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html). If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
+See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
 
 # gridstack.js for specific frameworks
 

demo/mobile.html

@@ -19,7 +19,6 @@ <h1>Simple mobile demo</h1>
     let grid = GridStack.init({
       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:1, y:0, h:2, content: '2'}, {x:2, y:0, content: '3'}])
   </script>

demo/nested.html

@@ -67,7 +67,6 @@ <h1>Nested grids demo</h1>
       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'},

demo/website.html

@@ -364,13 +364,11 @@ <h1>Used by</h1>
     ];
 
     var simpleGrid = GridStack.init({
-      alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
       margin: 5,
     }, '#simple-grid');
     simpleGrid.load(simple);
 
     var advGrid = GridStack.init({
-      alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
       margin: 5,
       acceptWidgets: true,
       dragIn: '.newWidget',  // class that can be dragged from outside

doc/CHANGES.md

@@ -72,6 +72,7 @@ Change log
 ## 6.0.0-beta (TBD)
 * converted previous HTML5 `draggable=true` based code to simple Mouse Events and Touch mobile support for drag&Drop.
 * removed all jquery-ui related code, and D7D plugging as we only support native events now
+* `alwaysShowResizeHandle` now support `'mobile'` which is the default, making it much easier (see doc)
 * changed `commit()` to be `batchUpdate(false)` to make it easier to turn batch on/off. updated doc. old API remains for now
 
 ## 5.1.1 (2022-06-16)

doc/README.md

@@ -70,11 +70,15 @@ gridstack.js API
    * `true` (uses `'.grid-stack-item'` class filter) or `false`
    * string for explicit class name
    * `function (i: number, element: Element): boolean` See [example](http://gridstack.github.io/gridstack.js/demo/two.html)
-- `alwaysShowResizeHandle` - possible values (default: `false` only show on hover)
-   * `true` the resizing handles are always shown even if the user is not hovering over the widget
-   * advance condition such as this mobile browser agent check:
-   `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`
-   See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html)
+- `alwaysShowResizeHandle` - possible values (default: `mobile`) - does not apply to non-resizable widgets
+  * `false` the resizing handles are only shown while hovering over a widget
+  * `true` the resizing handles are always shown
+  * `'mobile'` if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.
+  this uses this condition on browser agent check:
+  `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`
+  See [mobile](http://gridstack.github.io/gridstack.js/demo/mobile.html)
+
+
 - `animate` - turns animation on to smooth transitions (default: `true`)
 - `auto` - if `false` gridstack will not initialize existing items (default: `true`)
 - `cellHeight`- one cell height (default?: 'auto'). Can be:
@@ -118,7 +122,7 @@ gridstack.js API
 - `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
-- `resizable` - allows to override resizable options. (default: `{autoHide: true, handles: 'se'}`). `handles` can be any combo of `n,ne,e,se,s,sw,w,nw` or `all`.
+- `resizable` - allows to override resizable options. (default: `{handles: 'se'}`). `handles` can be any combo of `n,ne,e,se,s,sw,w,nw` or `all`.
 - `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://gridstackjs.com/demo/two.html)
 - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
 - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain)

src/dd-gridstack.ts

@@ -48,9 +48,10 @@ export class DDGridStack {
       } else {
         const grid = dEl.el.gridstackNode.grid;
         let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
+        let autoHide = !grid.opts.alwaysShowResizeHandle;
         dEl.setupResizable({
           ...grid.opts.resizable,
-          ...{ handles: handles },
+          ...{ handles, autoHide },
           ...{
             start: opts.start,
             stop: opts.stop,

src/dd-touch.ts

@@ -7,6 +7,8 @@ import { DDManager } from './dd-manager';
 
 /**
  * Detect touch support - Windows Surface devices and other touch devices
+ * should we use this instead ? (what we had for always showing resize handles)
+ * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  */
 export const isTouch: boolean = ( 'ontouchstart' in document
   || 'ontouchstart' in window
@@ -16,7 +18,6 @@ export const isTouch: boolean = ( 'ontouchstart' in document
   || (navigator as any).msMaxTouchPoints > 0
 );
 
-
 // interface TouchCoord {x: number, y: number};
 
 class DDTouch {

src/gridstack.ts

@@ -58,9 +58,8 @@ const GridDefaults: GridStackOptions = {
   float: false,
   staticGrid: false,
   animate: true,
-  alwaysShowResizeHandle: false,
+  alwaysShowResizeHandle: 'mobile',
   resizable: {
-    autoHide: true,
     handles: 'se'
   },
   draggable: {
@@ -265,25 +264,23 @@ export class GridStack {
       opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
       delete anyOpts.minWidth;
     }
+    // save original setting so we can restore on save
+    if (opts.alwaysShowResizeHandle !== undefined) {
+      (opts as any)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
+    }
 
-    // elements attributes override any passed options (like CSS style) - merge the two together
+    // elements DOM attributes override any passed options (like CSS style) - merge the two together
     let defaults: GridStackOptions = {...Utils.cloneDeep(GridDefaults),
-      column: Utils.toNumber(el.getAttribute('gs-column')) || 12,
-      minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || 0,
-      maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || 0,
-      staticGrid: Utils.toBool(el.getAttribute('gs-static')) || false,
+      column: Utils.toNumber(el.getAttribute('gs-column')) || GridDefaults.column,
+      minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || GridDefaults.minRow,
+      maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || GridDefaults.maxRow,
+      staticGrid: Utils.toBool(el.getAttribute('gs-static')) || GridDefaults.staticGrid,
       _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
-      alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
-      resizable: {
-        autoHide: !(opts.alwaysShowResizeHandle || false),
-        handles: 'se'
-      },
       draggable: {
-        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
-        appendTo: 'body'
+        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || GridDefaults.draggable.handle,
       },
       removableOptions: {
-        accept: '.' + (opts.itemClass || 'grid-stack-item')
+        accept: opts.itemClass ? '.' + opts.itemClass : GridDefaults.removableOptions.accept,
       },
     };
     if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
@@ -303,7 +300,6 @@ export class GridStack {
     if (this.opts.rtl === 'auto') {
       this.opts.rtl = (el.style.direction === 'rtl');
     }
-
     if (this.opts.rtl) {
       this.el.classList.add('grid-stack-rtl');
     }
@@ -330,6 +326,11 @@ export class GridStack {
       this.cellHeight(this.opts.cellHeight, false);
     }
 
+    // see if we need to adjust auto-hide
+    if (this.opts.alwaysShowResizeHandle === 'mobile') {
+      this.opts.alwaysShowResizeHandle = isTouch;
+    }
+
     this.el.classList.add(this.opts._styleSheetClass);
 
     this._setStaticClass();
@@ -520,6 +521,13 @@ export class GridStack {
         o.column = 'auto';
         delete o.disableOneColumnMode;
       }
+      const origShow = (o as any)._alwaysShowResizeHandle;
+      delete (o as any)._alwaysShowResizeHandle;
+      if (origShow !== undefined) {
+        o.alwaysShowResizeHandle = origShow;
+      } else {
+        delete o.alwaysShowResizeHandle;
+      }
       Utils.removeInternalAndSame(o, GridDefaults);
       o.children = list;
       return o;
@@ -1590,4 +1598,5 @@ export class GridStack {
  * I don't know how to generate the DD only code at the remaining 31k to delay load as code depends on Gridstack.ts
  */
 import { DDGridStack } from './dd-gridstack';
+import { isTouch } from './dd-touch';
 export * from './dd-gridstack';

src/types.ts

@@ -38,12 +38,14 @@ export interface GridStackOptions {
    */
   acceptWidgets?: boolean | string | ((element: Element) => boolean);
 
-  /** possible values (default: `false` only show on hover)
-    * `true` the resizing handles are always shown even if the user is not hovering over the widget
-    * advance condition such as this mobile browser agent check:
+  /** possible values (default: `mobile`) - does not apply to non-resizable widgets
+    * `false` the resizing handles are only shown while hovering over a widget
+    * `true` the resizing handles are always shown
+    * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.
+    * this uses this condition on browser agent check:
     `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`
     See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */
-  alwaysShowResizeHandle?: boolean;
+  alwaysShowResizeHandle?: true | false | 'mobile';
 
   /** turns animation on (default?: true) */
   animate?: boolean;
@@ -165,7 +167,7 @@ export interface GridStackOptions {
   /** placeholder default content (default?: '') */
   placeholderText?: string;
 
-  /** allows to override UI resizable options. (default?: { autoHide: true, handles: 'se' }) */
+  /** allows to override UI resizable options. (default?: { handles: 'se' }) */
   resizable?: DDResizeOpt;
 
   /**
@@ -267,7 +269,7 @@ export interface GridStackWidget extends GridStackPosition {
 
 /** Drag&Drop resize options */
 export interface DDResizeOpt {
-  /** do resize handle hide by default until mouse over ? - default: true */
+  /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/
   autoHide?: boolean;
   /**
    * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)