Skip to content

mobile resizing #2009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Aug 8, 2022
Merged

mobile resizing #2009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions demo/mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 2 additions & 0 deletions demo/nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand Down
1 change: 1 addition & 0 deletions src/h5/dd-draggable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
19 changes: 19 additions & 0 deletions src/h5/dd-resizable-handle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -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;
}
Expand Down