Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9ed0eb1

Browse files
adumesnyadumesny
committed
added ui-XYZ-disable style back
* fix for 1435 * `class="ui-draggable-disabled ui-resizable-disabled"` have been added back to static grid items, so existing CSS rule to style continue working * add `data-gs-staticGrid` attribute
1 parent 7109f74 commit 9ed0eb1

File tree

5 files changed

+31
-18
lines changed

5 files changed

+31
-18
lines changed

‎demo/static.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,20 @@
1313
<body>
1414
<div class="container-fluid">
1515
<h1>Static vs can move/drag Demo</h1>
16+
<p>we start with a static grid (no drag&drop initialized) with button to make it editable.</p>
1617
<div>
1718
<a class="btn btn-primary" onClick="grid.setStatic(true)" href="#">Static</a>
1819
<a class="btn btn-primary" onclick="grid.setStatic(false)" id="float" href="#">Editable</a>
1920
</div>
2021
<br><br>
21-
<div class="grid-stack"></div>
22+
<div class="grid-stack" data-gs-static-grid="true"></div>
2223
</div>
2324
<script src="events.js"></script>
2425
<script type="text/javascript">
2526
let grid = GridStack.init({
2627
float: true,
2728
cellHeight: 70,
28-
staticGrid: true
29+
//staticGrid: true // same but testing data-gs above
2930
});
3031
addEvents(grid);
3132

‎doc/CHANGES.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ Change log
4242

4343
## 2.1.0-dev
4444

45-
- TBD
45+
- fix `class="ui-draggable-disabled ui-resizable-disabled"` have been added back to static grid items, so existing CSS rule to style continue working [1435](https://github.com/gridstack/gridstack.js/issues/1435)
46+
- add `data-gs-staticGrid` attribute
4647

4748
## 2.1.0 (2020-10-28)
4849

‎doc/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ gridstack.js API
117117

118118
## Grid attributes
119119

120-
most of the above options are also available as HTML attributes using the `data-gs-` name prefix with standard dash lower case naming convention (ex: `data-gs-column`, `data-gs-min-row`, etc..).
120+
most of the above options are also available as HTML attributes using the `data-gs-` name prefix with standard dash lower case naming convention (ex: `data-gs-column`, `data-gs-min-row`, `data-gs-static-grid`, etc..).
121121

122122
Extras:
123123
- `data-gs-current-row` - (internal) current rows amount. Set by the library only. Can be used by the CSS rules.

‎spec/gridstack-spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1345,7 +1345,7 @@ describe('gridstack', function() {
13451345
let grid = GridStack.init(options);
13461346
grid.locked('.grid-stack-item', true);
13471347
$('.grid-stack-item').each(function (i,item) {
1348-
expect($(item).attr('data-gs-locked')).toBe('yes');
1348+
expect($(item).attr('data-gs-locked')).toBe('true');
13491349
})
13501350
});
13511351
it('should unlock widgets', function() {

‎src/gridstack.ts

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export class GridStack {
186186
auto: true,
187187
minWidth: 768,
188188
float: false,
189-
staticGrid: false,
189+
staticGrid: Utils.toBool(el.getAttribute('data-gs-static-grid')) || false,
190190
_class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
191191
animate: true,
192192
alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
@@ -719,7 +719,7 @@ export class GridStack {
719719
if (!node) return;
720720
node.locked = (val || false);
721721
if (node.locked) {
722-
el.setAttribute('data-gs-locked', 'yes');
722+
el.setAttribute('data-gs-locked', 'true');
723723
} else {
724724
el.removeAttribute('data-gs-locked');
725725
}
@@ -995,12 +995,7 @@ export class GridStack {
995995
public setStatic(val: boolean): GridStack {
996996
if (this.opts.staticGrid === val) { return this; }
997997
this.opts.staticGrid = val;
998-
// either delete Drag&drop or initialize it
999-
if (val) {
1000-
this.getGridItems().forEach(el => this.dd.remove(el));
1001-
} else {
1002-
this.engine.nodes.forEach(n => this._prepareDragDropByNode(n));
1003-
}
998+
this.engine.nodes.forEach(n => this._prepareDragDropByNode(n)); // either delete Drag&drop or initialize it
1004999
this._setStaticClass();
10051000
return this;
10061001
}
@@ -1234,12 +1229,24 @@ export class GridStack {
12341229

12351230
/** @internal prepares the element for drag&drop **/
12361231
private _prepareDragDropByNode(node: GridStackNode): GridStack {
1232+
// check for disabled grid first
1233+
if (this.opts.staticGrid || node.locked) {
1234+
if (node._initDD) {
1235+
this.dd.remove(node.el); // nukes everything instead of just disable, will add some styles back next
1236+
delete node._initDD;
1237+
}
1238+
node.el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
1239+
return;
1240+
}
12371241
// check if init already done or not needed (static/disabled)
12381242
if (node._initDD || this.opts.staticGrid ||
12391243
((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
12401244
return;
12411245
}
12421246

1247+
// remove our style that look like D&D
1248+
node.el.classList.remove('ui-draggable-disabled', 'ui-resizable-disabled');
1249+
12431250
// variables used/cashed between the 3 start/move/end methods, in addition to node passed above
12441251
let cellWidth: number;
12451252
let cellHeight: number;
@@ -1401,10 +1408,11 @@ export class GridStack {
14011408
});
14021409
node._initDD = true; // we've set DD support now
14031410

1404-
if (node.noMove || this.opts.disableDrag || this.opts.staticGrid) {
1411+
// finally fine tune drag vs move by disabling any part...
1412+
if (node.noMove || this.opts.disableDrag) {
14051413
this.dd.draggable(el, 'disable');
14061414
}
1407-
if (node.noResize || this.opts.disableResize || this.opts.staticGrid) {
1415+
if (node.noResize || this.opts.disableResize) {
14081416
this.dd.resizable(el, 'disable');
14091417
}
14101418
return this;
@@ -1519,12 +1527,15 @@ export class GridStack {
15191527

15201528
/** @internal */
15211529
private _setStaticClass(): GridStack {
1522-
let staticClassName = 'grid-stack-static';
1530+
let classes = ['grid-stack-static'];
15231531

15241532
if (this.opts.staticGrid) {
1525-
this.el.classList.add(staticClassName);
1533+
this.el.classList.add(...classes);
1534+
this.el.setAttribute('data-gs-static-grid', 'true');
15261535
} else {
1527-
this.el.classList.remove(staticClassName);
1536+
this.el.classList.remove(...classes);
1537+
this.el.removeAttribute('data-gs-static-grid');
1538+
15281539
}
15291540
return this;
15301541
}

0 commit comments

Comments
 (0)