Skip to content

Commit d3f1d28

Browse files
adumesnyadumesny
authored
Merge pull request #1414 from adumesny/develop
fix for static grid, enale dragging on fly
2 parents b435179 + 5111f99 commit d3f1d28

File tree

8 files changed

+100
-26
lines changed

8 files changed

+100
-26
lines changed

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ <h1>Demos</h1>
1717
<li><a href="responsive.html">Responsive</a></li>
1818
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
1919
<li><a href="serialization.html">Serialization</a></li>
20+
<li><a href="static.html">Static</a></li>
2021
<li><a href="two.html">Two grids</a></li>
2122
<li><a href="vuej2s.html">Vue2.js</a></li>
2223
<li><a href="vuej3s.html">Vue3.js</a></li>

‎demo/static.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Static Grid</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
<script src="../dist/gridstack.all.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>Static vs can move/drag Demo</h1>
16+
<div>
17+
<a class="btn btn-primary" onClick="grid.setStatic(true)" href="#">Static</a>
18+
<a class="btn btn-primary" onclick="grid.setStatic(false)" id="float" href="#">Editable</a>
19+
</div>
20+
<br><br>
21+
<div class="grid-stack"></div>
22+
</div>
23+
<script src="events.js"></script>
24+
<script type="text/javascript">
25+
let grid = GridStack.init({
26+
float: true,
27+
cellHeight: 70,
28+
staticGrid: true
29+
});
30+
addEvents(grid);
31+
32+
let serializedData = [
33+
{x: 0, y: 0, width: 2, height: 2, id: '0'},
34+
{x: 3, y: 1, width: 1, height: 2, id: 'no_move', noMove: true, html: 'no move'},
35+
{x: 4, y: 1, width: 1, height: 1, id: '2'},
36+
{x: 2, y: 3, width: 3, height: 1, id: 'no_resize', noResize: true, html: 'no resize'},
37+
{x: 1, y: 3, width: 1, height: 1, id: 'locked', locked: true, html: 'locked'}
38+
];
39+
grid.load(serializedData, true);
40+
41+
</script>
42+
</body>
43+
</html>

‎doc/CHANGES.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ Change log
4141

4242
## 2.0.2-dev
4343

44-
- TBD
44+
- fix grid `static: true` to no longer add any drag&drop (even disabled) which should speed things up, and `setStatic(T/F)` will now correctly add it back/delete for items that need it only.
45+
Also fixed JQ draggable warning if not initialized first [858](https://github.com/gridstack/gridstack.js/issues/858)
46+
- add `GridStackWidget.html` now lets you add any HTML content when calling `grid.load()`
4547

4648
## 2.0.2 (2020-10-05)
4749

‎doc/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ You need to add `noResize` and `noMove` attributes to completely lock the widget
137137
- `noMove` - disable element moving
138138
- `resizeHandles` - sets resize handles for a specific widget.
139139
- `id`- (number | string) good for quick identification (for example in change event)
140+
- `html` - (string) html content to be added when calling `grid.load()` as content inside the item
140141

141142
## Item attributes
142143

‎src/gridstack-dd.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,15 @@ export class GridStackDD {
4646
this.grid = grid;
4747
}
4848

49+
/** removes any drag&drop present (called during destroy) */
50+
public remove(el: GridItemHTMLElement): GridStackDD {
51+
this.draggable(el, 'destroy').resizable(el, 'destroy');
52+
if (el.gridstackNode) {
53+
delete el.gridstackNode._initDD; // reset our DD init flag
54+
}
55+
return this;
56+
}
57+
4958
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
5059
return this;
5160
}

‎src/gridstack.ts‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ export class GridStack {
396396
if (typeof(addAndRemove) === 'function') {
397397
addAndRemove(w, true);
398398
} else {
399-
this.addWidget('<div><div class="grid-stack-item-content"></div></div>', w);
399+
this.addWidget(`<div><div class="grid-stack-item-content">${w.html || ''}</div></div>`, w);
400400
}
401401
}
402402
});
@@ -539,7 +539,7 @@ export class GridStack {
539539
*/
540540
public destroy(removeDOM = true): GridStack {
541541
this._updateWindowResizeEvent(true);
542-
this.disable();
542+
this.setStatic(true); // permanently removes DD
543543
if (!removeDOM) {
544544
this.removeAll(removeDOM);
545545
this.el.classList.remove(this.opts._class);
@@ -586,6 +586,7 @@ export class GridStack {
586586
* doEnable`s value by changing the disableDrag grid option (default: true).
587587
*/
588588
public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack {
589+
if (doEnable && this.opts.staticGrid) { return this; } // can't move a static grid!
589590
this.getGridItems().forEach(el => this.movable(el, doEnable));
590591
if (includeNewWidgets) {
591592
this.opts.disableDrag = !doEnable;
@@ -600,6 +601,7 @@ export class GridStack {
600601
* doEnable`s value by changing the disableResize grid option (default: true).
601602
*/
602603
public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack {
604+
if (doEnable && this.opts.staticGrid) { return this; } // can't size a static grid!
603605
this.getGridItems().forEach(el => this.resizable(el, doEnable));
604606
if (includeNewWidgets) {
605607
this.opts.disableResize = !doEnable;
@@ -756,6 +758,7 @@ export class GridStack {
756758
* @param val if true widget will be draggable.
757759
*/
758760
public movable(els: GridStackElement, val: boolean): GridStack {
761+
if (val && this.opts.staticGrid) { return this; } // can't move a static grid!
759762
GridStack.getElements(els).forEach(el => {
760763
let node = el.gridstackNode;
761764
if (!node) { return }
@@ -764,6 +767,7 @@ export class GridStack {
764767
this.dd.draggable(el, 'disable');
765768
el.classList.remove('ui-draggable-handle');
766769
} else {
770+
this._prepareDragDropByNode(node); // init DD if need be
767771
this.dd.draggable(el, 'enable');
768772
el.classList.remove('ui-draggable-handle');
769773
}
@@ -872,7 +876,7 @@ export class GridStack {
872876

873877
// remove our DOM data (circular link) and drag&drop permanently
874878
delete el.gridstackNode;
875-
this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
879+
this.dd.remove(el);
876880

877881
this.engine.removeNode(node, removeDOM, triggerEvent);
878882

@@ -895,7 +899,7 @@ export class GridStack {
895899
// always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
896900
this.engine.nodes.forEach(n => {
897901
delete n.el.gridstackNode;
898-
this.dd.draggable(n.el, 'destroy').resizable(n.el, 'destroy');
902+
this.dd.remove(n.el);
899903
});
900904
this.engine.removeAll(removeDOM);
901905
this._triggerRemoveEvent();
@@ -924,13 +928,15 @@ export class GridStack {
924928
* @param val if true widget will be resizable.
925929
*/
926930
public resizable(els: GridStackElement, val: boolean): GridStack {
931+
if (val && this.opts.staticGrid) { return this; } // can't resize a static grid!
927932
GridStack.getElements(els).forEach(el => {
928933
let node = el.gridstackNode;
929934
if (!node) { return; }
930935
node.noResize = !(val || false);
931936
if (node.noResize) {
932937
this.dd.resizable(el, 'disable');
933938
} else {
939+
this._prepareDragDropByNode(node); // init DD if need be
934940
this.dd.resizable(el, 'enable');
935941
}
936942
});
@@ -951,13 +957,19 @@ export class GridStack {
951957
}
952958

953959
/**
954-
* Toggle the grid static state. Also toggle the grid-stack-static class.
955-
* @param staticValue if true the grid become static.
960+
* Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
961+
* Also toggle the grid-stack-static class.
962+
* @param val if true the grid become static.
956963
*/
957-
public setStatic(staticValue: boolean): GridStack {
958-
this.opts.staticGrid = (staticValue === true);
959-
this.enableMove(!staticValue);
960-
this.enableResize(!staticValue);
964+
public setStatic(val: boolean): GridStack {
965+
if (this.opts.staticGrid === val) { return this; }
966+
this.opts.staticGrid = val;
967+
// either delete Drag&drop or initialize it
968+
if (val) {
969+
this.getGridItems().forEach(el => this.dd.remove(el));
970+
} else {
971+
this.engine.nodes.forEach(n => this._prepareDragDropByNode(n));
972+
}
961973
this._setStaticClass();
962974
return this;
963975
}
@@ -1191,6 +1203,12 @@ export class GridStack {
11911203

11921204
/** @internal prepares the element for drag&drop **/
11931205
private _prepareDragDropByNode(node: GridStackNode): GridStack {
1206+
// check if init already done or not needed (static/disabled)
1207+
if (node._initDD || this.opts.staticGrid ||
1208+
((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
1209+
return;
1210+
}
1211+
11941212
// variables used/cashed between the 3 start/move/end methods, in addition to node passed above
11951213
let cellWidth: number;
11961214
let cellHeight: number;
@@ -1304,7 +1322,7 @@ export class GridStack {
13041322
gridToNotify._gsEventHandler[event.type](event, target);
13051323
}
13061324
gridToNotify.engine.removedNodes.push(node);
1307-
gridToNotify.dd.draggable(el, 'destroy').resizable(el, 'destroy');
1325+
gridToNotify.dd.remove(el);
13081326
delete el.gridstackNode; // hint we're removing it next and break circular link
13091327
gridToNotify._triggerRemoveEvent();
13101328
if (el.parentElement) {
@@ -1350,16 +1368,14 @@ export class GridStack {
13501368
stop: onEndMoving,
13511369
resize: dragOrResize
13521370
});
1371+
node._initDD = true; // we've set DD support now
13531372

13541373
if (node.noMove || this.opts.disableDrag || this.opts.staticGrid) {
13551374
this.dd.draggable(el, 'disable');
13561375
}
1357-
13581376
if (node.noResize || this.opts.disableResize || this.opts.staticGrid) {
13591377
this.dd.resizable(el, 'disable');
13601378
}
1361-
1362-
this._writeAttr(el, node);
13631379
return this;
13641380
}
13651381

@@ -1379,7 +1395,7 @@ export class GridStack {
13791395
let node = this._readAttr(el, { el: el, grid: this });
13801396
node = this.engine.addNode(node, triggerAddEvent);
13811397
el.gridstackNode = node;
1382-
1398+
this._writeAttr(el, node);
13831399
this._prepareDragDropByNode(node);
13841400
return this;
13851401
}
@@ -1474,7 +1490,7 @@ export class GridStack {
14741490
private _setStaticClass(): GridStack {
14751491
let staticClassName = 'grid-stack-static';
14761492

1477-
if (this.opts.staticGrid === true) {
1493+
if (this.opts.staticGrid) {
14781494
this.el.classList.add(staticClassName);
14791495
} else {
14801496
this.el.classList.remove(staticClassName);
@@ -1683,9 +1699,7 @@ export class GridStack {
16831699
el = el.cloneNode(true) as GridItemHTMLElement;
16841700
} else {
16851701
el.remove(); // reduce flicker as we change depth here, and size further down
1686-
this.dd
1687-
.draggable(el, 'destroy')
1688-
.resizable(el, 'destroy');
1702+
this.dd.remove(el);
16891703
}
16901704
el.gridstackNode = node;
16911705
node.el = el;

‎src/jq/gridstack-dd-jqueryui.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ export class GridStackDDJQueryUI extends GridStackDD {
2626

2727
public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
2828
let $el: JQuery = $(el);
29-
if (opts === 'disable' || opts === 'enable') {
30-
$el.resizable(opts);
31-
} else if (opts === 'destroy') {
29+
if (opts === 'enable') {
30+
$el.resizable().resizable(opts);
31+
} else if (opts === 'disable' || opts === 'destroy') {
3232
if ($el.data('ui-resizable')) { // error to call destroy if not there
3333
$el.resizable(opts);
3434
}
@@ -47,9 +47,9 @@ export class GridStackDDJQueryUI extends GridStackDD {
4747

4848
public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
4949
let $el: JQuery = $(el);
50-
if (opts === 'disable' || opts === 'enable') {
51-
$el.draggable(opts);
52-
} else if (opts === 'destroy') {
50+
if (opts === 'enable') {
51+
$el.draggable().draggable('enable');
52+
} else if (opts === 'disable' || opts === 'destroy') {
5353
if ($el.data('ui-draggable')) { // error to call destroy if not there
5454
$el.draggable(opts);
5555
}

‎src/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,8 @@ export interface GridStackWidget {
204204
resizeHandles?: string;
205205
/** value for `data-gs-id` stored on the widget (default?: undefined) */
206206
id?: numberOrString;
207+
/** html to append inside the content */
208+
html?: string;
207209
}
208210

209211
/** Drag&Drop resize options */
@@ -291,4 +293,6 @@ export interface GridStackNode extends GridStackWidget {
291293
_prevYPix?: number;
292294
/** @internal */
293295
_temporaryRemoved?: boolean;
296+
/** @internal */
297+
_initDD?: boolean;
294298
}

0 commit comments

Comments
 (0)