Skip to content

Commit d6922d3

Browse files
adumesnyadumesny
authored
Merge pull request #1492 from adumesny/develop
'data-gs-min-width' to 'gs-min-w' attr rename
2 parents fa8634c + b9988cc commit d6922d3

23 files changed

+711
-695
lines changed

‎README.md

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Join us on Slack: https://gridstackjs.troolee.com
4242
- [Migrating to v0.6](#migrating-to-v06)
4343
- [Migrating to v1](#migrating-to-v1)
4444
- [Migrating to v2](#migrating-to-v2)
45+
- [Migrating to v3](#migrating-to-v3)
4546
- [jQuery Application](#jquery-application)
4647
- [Changes](#changes)
4748
- [The Team](#the-team)
@@ -115,7 +116,7 @@ grid.load(serializedData);
115116
<div class="grid-stack-item">
116117
<div class="grid-stack-item-content">Item 1</div>
117118
</div>
118-
<div class="grid-stack-item" data-gs-width="2">
119+
<div class="grid-stack-item" gs-w="2">
119120
<div class="grid-stack-item-content">Item 2 wider</div>
120121
</div>
121122
</div>
@@ -173,30 +174,30 @@ See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.htm
173174

174175
## Custom columns CSS
175176

176-
If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]`.
177+
If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
177178

178179
For instance for 3-column grid you need to rewrite CSS to be:
179180

180181
```css
181-
.grid-stack-item[data-gs-width="3"] { width: 100% }
182-
.grid-stack-item[data-gs-width="2"] { width: 66.66666667% }
183-
.grid-stack-item[data-gs-width="1"] { width: 33.33333333% }
182+
.grid-stack-item[gs-w="3"] { width: 100% }
183+
.grid-stack-item[gs-w="2"] { width: 66.66666667% }
184+
.grid-stack-item[gs-w="1"] { width: 33.33333333% }
184185

185-
.grid-stack-item[data-gs-x="2"] { left: 66.66666667% }
186-
.grid-stack-item[data-gs-x="1"] { left: 33.33333333% }
186+
.grid-stack-item[gs-x="2"] { left: 66.66666667% }
187+
.grid-stack-item[gs-x="1"] { left: 33.33333333% }
187188
```
188189

189190
For 4-column grid it should be:
190191

191192
```css
192-
.grid-stack-item[data-gs-width="4"] { width: 100% }
193-
.grid-stack-item[data-gs-width="3"] { width: 75% }
194-
.grid-stack-item[data-gs-width="2"] { width: 50% }
195-
.grid-stack-item[data-gs-width="1"] { width: 25% }
196-
197-
.grid-stack-item[data-gs-x="3"] { left: 75% }
198-
.grid-stack-item[data-gs-x="2"] { left: 50% }
199-
.grid-stack-item[data-gs-x="1"] { left: 25% }
193+
.grid-stack-item[gs-w="4"] { width: 100% }
194+
.grid-stack-item[gs-w="3"] { width: 75% }
195+
.grid-stack-item[gs-w="2"] { width: 50% }
196+
.grid-stack-item[gs-w="1"] { width: 25% }
197+
198+
.grid-stack-item[gs-x="3"] { left: 75% }
199+
.grid-stack-item[gs-x="2"] { left: 50% }
200+
.grid-stack-item[gs-x="1"] { left: 25% }
200201
```
201202

202203
and so on.
@@ -211,10 +212,10 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
211212
min-width: (100% / $gridstack-columns);
212213
213214
@for $i from 1 through $gridstack-columns {
214-
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
215-
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
216-
&[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
217-
&[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
215+
&[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
216+
&[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
217+
&[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
218+
&[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
218219
}
219220
}
220221
```
@@ -357,6 +358,20 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
357358
358359
**Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
359360
361+
## Migrating to v3
362+
363+
make sure to read v2 migration first!
364+
365+
v3 has a new HTML5 drag&drop plugging (65k total, all native code), while still allowing you to use the legacy jquery-ui version (188k), or a new static grid version (35k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same as `gridstack-jq.js`) - see include info at top.
366+
367+
Some breaking changes:
368+
369+
1. include (as mentioned) need to change
370+
371+
2. `GridStack.update(el, opt)` now takes `GridStackWidget` options instead, BUT legacy call in JS will continue working the same for now
372+
373+
3. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require typing and more efficient.
374+
360375
# jQuery Application
361376
362377
We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) in `gridstack-jq.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).

‎demo/events.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ function addEvents(grid, id) {
1414

1515
grid.on('dragstart', function(event, el) {
1616
let node = el.gridstackNode;
17-
let x = el.getAttribute('data-gs-x');
18-
let y= el.getAttribute('data-gs-y');
17+
let x = el.getAttribute('gs-x');
18+
let y= el.getAttribute('gs-y');
1919
console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
2020
});
2121

2222
grid.on('dragstop', function(event, el) {
2323
let node = el.gridstackNode;
24-
let x = el.getAttribute('data-gs-x');
25-
let y= el.getAttribute('data-gs-y');
24+
let x = el.getAttribute('gs-x');
25+
let y= el.getAttribute('gs-y');
2626
console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
2727
});
2828

@@ -41,14 +41,14 @@ function addEvents(grid, id) {
4141
});
4242

4343
grid.on('resizestart', function(event, el) {
44-
let w = el.getAttribute('data-gs-width');
45-
let h = el.getAttribute('data-gs-height');
44+
let w = el.getAttribute('gs-w');
45+
let h = el.getAttribute('gs-h');
4646
console.log(g + 'resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
4747
});
4848

4949
grid.on('resizestop', function(event, el) {
50-
let w = el.getAttribute('data-gs-width');
51-
let h = el.getAttribute('data-gs-height');
50+
let w = el.getAttribute('gs-w');
51+
let h = el.getAttribute('gs-h');
5252
console.log(g + 'resizestop ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
5353
});
5454
}

‎demo/knockout.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h1>knockout.js Demo</h1>
4949
template:
5050
[
5151
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
52-
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position, \'data-gs-id\': $data.id}">',
52+
' <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.width, \'gs-h\': $data.height, \'gs-auto-position\': $data.auto_position, \'gs-id\': $data.id}">',
5353
' <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
5454
' </div>',
5555
'</div> '

‎demo/nested.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,28 @@ <h1>Nested grids demo</h1>
2626
<br><br>
2727

2828
<div class="grid-stack top">
29-
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1">
29+
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="1">
3030
<div class="grid-stack-item-content">regular item</div>
3131
</div>
32-
<div class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="4" data-gs-height="4">
32+
<div class="grid-stack-item" gs-x="1" gs-y="0" gs-w="4" gs-h="4">
3333
<div class="grid-stack-item-content">
3434
nested 1 - can drag items out
3535
<div class="grid-stack nested1">
36-
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
37-
<div class="grid-stack-item sub" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
38-
<div class="grid-stack-item sub" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
39-
<div class="grid-stack-item sub" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
40-
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
41-
<div class="grid-stack-item sub" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
36+
<div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">1</div></div>
37+
<div class="grid-stack-item sub" gs-x="3" gs-y="0" gs-w="3"><div class="grid-stack-item-content">2</div></div>
38+
<div class="grid-stack-item sub" gs-x="6" gs-y="0" gs-w="3"><div class="grid-stack-item-content">3</div></div>
39+
<div class="grid-stack-item sub" gs-x="9" gs-y="0" gs-w="3"><div class="grid-stack-item-content">4</div></div>
40+
<div class="grid-stack-item sub" gs-x="0" gs-y="1" gs-w="3"><div class="grid-stack-item-content">5</div></div>
41+
<div class="grid-stack-item sub" gs-x="3" gs-y="1" gs-w="3"><div class="grid-stack-item-content">6</div></div>
4242
</div>
4343
</div>
4444
</div>
45-
<div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="3" data-gs-height="4">
45+
<div class="grid-stack-item" gs-x="5" gs-y="0" gs-w="3" gs-h="4">
4646
<div class="grid-stack-item-content">
4747
nested 2 - constrained to parent (default)
4848
<div class="grid-stack nested2">
49-
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">7</div></div>
50-
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="3" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">8</div></div>
49+
<div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">7</div></div>
50+
<div class="grid-stack-item sub" gs-x="0" gs-y="3" gs-w="3"><div class="grid-stack-item-content">8</div></div>
5151
</div>
5252
</div>
5353
</div>

‎demo/right-to-left(rtl).html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ <h1>RTL Demo</h1>
5454
template:
5555
[
5656
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
57-
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
57+
' <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.width, \'gs-h\': $data.height, \'gs-auto-position\': $data.auto_position}">',
5858
' <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
5959
' </div>',
6060
'</div> '

‎demo/static.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ <h1>Static vs can move/drag Demo</h1>
1919
<a class="btn btn-primary" onclick="grid.setStatic(false)" id="float" href="#">Editable</a>
2020
</div>
2121
<br><br>
22-
<div class="grid-stack" data-gs-static-grid="true"></div>
22+
<div class="grid-stack" gs-static="true"></div>
2323
</div>
2424
<script src="events.js"></script>
2525
<script type="text/javascript">
2626
let grid = GridStack.init({
2727
float: true,
2828
cellHeight: 70,
29-
//staticGrid: true // same but testing data-gs above
29+
//staticGrid: true // same but testing gs above
3030
});
3131
addEvents(grid);
3232

‎demo/two-jq.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h1>Two grids demo</h1>
5656
<div class="grid-stack-item-content">Drag me</div>
5757
</div>
5858
<!-- manually force a drop size of 2x1 -->
59-
<div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
59+
<div class="grid-stack-item" gs-w="2" gs-h="1">
6060
<div class="grid-stack-item-content">Drag me 2x1</div>
6161
</div>
6262

‎demo/two.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h1>Two grids demo</h1>
5656
<div class="grid-stack-item-content">Drag me</div>
5757
</div>
5858
<!-- manually force a drop size of 2x1 -->
59-
<div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
59+
<div class="grid-stack-item" gs-w="2" gs-h="1">
6060
<div class="grid-stack-item-content">Drag me 2x1</div>
6161
</div>
6262

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ Change log
5050
- fix [1235](https://github.com/gridstack/gridstack.js/issues/1235) `update(el, opts)` re-write to take all `GridStackWidget` options (not just x,y,width,height) and do everything efficiently.
5151
Hiding `locked()`, `move()`, `resize()`, `minWidth()`, etc... as they just simply call update() which does all the constrain now as well!
5252
- del `ddPlugin` grid option as we only have one drag&drop plugin at runtime, which is defined by the include you use (HTML5 vs jquery vs none)
53+
- change attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require typing and more efficient [1491](https://github.com/gridstack/gridstack.js/pull/1491)
5354

5455
## 2.2.0 (2020-11-7)
5556

‎doc/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@ gridstack.js API
109109

110110
## Grid attributes
111111

112-
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..).
112+
most of the above options are also available as HTML attributes using the `gs-` name prefix with standard dash lower case naming convention (ex: `gs-column`, `gs-min-row`, `gs-static`, etc..).
113113

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

117117
## Item Options
118118

@@ -133,7 +133,7 @@ You need to add `noResize` and `noMove` attributes to completely lock the widget
133133

134134
## Item attributes
135135

136-
all item options are also available as HTML attributes using the `data-gs-` name prefix with standard dash lower case naming convention (ex: `data-gs-x`, `data-gs-min-width`, etc..).
136+
all item options are also available as HTML attributes using the `gs-` name prefix with standard dash lower case naming convention (ex: `gs-x`, `gs-min-w`, etc..).
137137

138138
## Events
139139

@@ -187,7 +187,7 @@ called after the user is done moving the item, with updated DOM attributes.
187187

188188
```js
189189
grid.on('dragstop', function(event: Event, el: GridItemHTMLElement) {
190-
let x = parseInt(el.getAttribute('data-gs-x')) || 0;
190+
let x = parseInt(el.getAttribute('gs-x')) || 0;
191191
// or all values...
192192
let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
193193
});
@@ -237,7 +237,7 @@ called after the user is done resizing the item, with updated DOM attributes.
237237

238238
```js
239239
grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
240-
let width = parseInt(el.getAttribute('data-gs-width')) || 0;
240+
let width = parseInt(el.getAttribute('gs-w')) || 0;
241241
// or all values...
242242
let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
243243
});
@@ -402,7 +402,7 @@ Parameters:
402402

403403
```js
404404
let grid = GridStack.init();
405-
grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"></div>')
405+
grid.el.appendChild('<div id="gsi-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true"></div>')
406406
grid.makeWidget('#gsi-1');
407407
```
408408

0 commit comments

Comments
 (0)