Skip to content

Commit 570a55f

Browse files
adumesnyadumesny
authored
Merge pull request #1493 from adumesny/develop
GridStackWidget use w,h,minW,minH
2 parents d6922d3 + 54d60c6 commit 570a55f

30 files changed

+436
-435
lines changed

‎README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,16 +92,16 @@ creating items dynamically...
9292

9393
// ...in your script
9494
var grid = GridStack.init();
95-
grid.addWidget({width: 2, content: 'item 1'});
95+
grid.addWidget({w: 2, content: 'item 1'});
9696
```
9797

9898
... or creating from list
9999

100100
```js
101101
// using serialize data instead of .addWidget()
102102
const serializedData = [
103-
{x: 0, y: 0, width: 2, height: 2},
104-
{x: 2, y: 3, width: 3, content: 'item 2'},
103+
{x: 0, y: 0, w: 2, h: 2},
104+
{x: 2, y: 3, w: 3, content: 'item 2'},
105105
{x: 1, y: 3}
106106
];
107107

@@ -315,7 +315,7 @@ var grid = $('.grid-stack').data('gridstack');
315315
var grid = GridStack.init(opts?, element?);
316316

317317
// returns DOM element
318-
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
318+
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {w: 2});
319319

320320
// event handler
321321
grid.on('added', function(e, items) {/* items contains info */});
@@ -362,7 +362,7 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
362362
363363
make sure to read v2 migration first!
364364
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.
365+
v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version (186k), or a new static grid version (34k, 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.
366366
367367
Some breaking changes:
368368
@@ -372,6 +372,8 @@ Some breaking changes:
372372
373373
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.
374374
375+
4. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
376+
375377
# jQuery Application
376378
377379
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/advance.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,17 @@ <h1>Advanced Demo</h1>
7171
});
7272

7373
let items = [
74-
{x: 0, y: 0, width: 4, height: 2, content: '1'},
75-
{x: 4, y: 0, width: 4, height: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
76-
{x: 8, y: 0, width: 2, height: 2, minWidth: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
77-
{x: 10, y: 0, width: 2, height: 2, content: '4'},
78-
{x: 0, y: 2, width: 2, height: 2, content: '5'},
79-
{x: 2, y: 2, width: 2, height: 4, content: '6'},
80-
{x: 8, y: 2, width: 4, height: 2, content: '7'},
81-
{x: 0, y: 4, width: 2, height: 2, content: '8'},
82-
{x: 4, y: 4, width: 4, height: 2, content: '9'},
83-
{x: 8, y: 4, width: 2, height: 2, content: '10'},
84-
{x: 10, y: 4, width: 2, height: 2, content: '11'},
74+
{x: 0, y: 0, w: 4, h: 2, content: '1'},
75+
{x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
76+
{x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
77+
{x: 10, y: 0, w: 2, h: 2, content: '4'},
78+
{x: 0, y: 2, w: 2, h: 2, content: '5'},
79+
{x: 2, y: 2, w: 2, h: 4, content: '6'},
80+
{x: 8, y: 2, w: 4, h: 2, content: '7'},
81+
{x: 0, y: 4, w: 2, h: 2, content: '8'},
82+
{x: 4, y: 4, w: 4, h: 2, content: '9'},
83+
{x: 8, y: 4, w: 2, h: 2, content: '10'},
84+
{x: 10, y: 4, w: 2, h: 2, content: '11'},
8585
];
8686
grid.load(items);
8787

‎demo/anijs.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h4>Widget added</h4>
3838
});
3939

4040
function addWidget() {
41-
grid.addWidget({width: Math.floor(1 + 3 * Math.random()), height: Math.floor(1 + 3 * Math.random())});
41+
grid.addWidget({w: Math.floor(1 + 3 * Math.random()), h: Math.floor(1 + 3 * Math.random())});
4242
};
4343

4444
let animationHelper = AniJS.getHelper();

‎demo/column.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,19 @@ <h1>column() grid demo</h1>
5353

5454
let items = [
5555
/* match karma testing
56-
{x: 0, y: 0, width: 4, height: 2},
57-
{x: 4, y: 0, width: 4, height: 4},
56+
{x: 0, y: 0, w: 4, h: 2},
57+
{x: 4, y: 0, w: 4, h: 4},
5858
{text: ' auto'},
5959
*/
60-
{x: 0, y: 0, width: 2, height: 2},
61-
{x: 2, y: 0, width: 2, height: 1},
62-
{x: 5, y: 1, width: 1, height: 1},
63-
{x: 5, y: 0, width: 2, height: 1},
64-
// {x: 0, y: 0, width: 1, height: 1}, // conflict
60+
{x: 0, y: 0, w: 2, h: 2},
61+
{x: 2, y: 0, w: 2},
62+
{x: 5, y: 1},
63+
{x: 5, y: 0, w: 2},
64+
// {x: 0, y: 0}, // conflict
6565
{text: ' auto'}, // autoPosition testing
66-
// {x: 4, y: 0, width: 1, height: 1}, // same auto-pos
67-
{x: 5, y: 3, width: 2, height: 1},
68-
{x: 0, y: 4, width: 12, height: 1}
66+
// {x: 4, y: 0}, // same auto-pos
67+
{x: 5, y: 3, w: 2},
68+
{x: 0, y: 4, w: 12}
6969
];
7070
let count = 0;
7171
grid.batchUpdate();
@@ -76,8 +76,8 @@ <h1>column() grid demo</h1>
7676
let n = items[count] || {
7777
x: Math.round(12 * Math.random()),
7878
y: Math.round(5 * Math.random()),
79-
width: Math.round(1 + 3 * Math.random()),
80-
height: Math.round(1 + 3 * Math.random())
79+
w: Math.round(1 + 3 * Math.random()),
80+
h: Math.round(1 + 3 * Math.random())
8181
};
8282
n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
8383
grid.addWidget(n);

‎demo/events.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ function addEvents(grid, id) {
33

44
grid.on('added removed change', function(event, items) {
55
let str = '';
6-
items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.width + 'x' + item.height + ')'; });
6+
items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; });
77
console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str );
88
});
99

‎demo/float.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,20 @@ <h1>Float grid demo</h1>
2626
addEvents(grid);
2727

2828
let items = [
29-
{x: 1, y: 1, width: 1, height: 1},
30-
{x: 2, y: 2, width: 3, height: 1},
31-
{x: 4, y: 2, width: 1, height: 1},
32-
{x: 3, y: 1, width: 1, height: 2},
33-
{x: 0, y: 6, width: 2, height: 2}
29+
{x: 1, y: 1},
30+
{x: 2, y: 2, w: 3},
31+
{x: 4, y: 2},
32+
{x: 3, y: 1, h: 2},
33+
{x: 0, y: 6, w: 2, h: 2}
3434
];
3535
let count = 0;
3636

3737
addNewWidget = function() {
3838
let n = items[count] || {
3939
x: Math.round(12 * Math.random()),
4040
y: Math.round(5 * Math.random()),
41-
width: Math.round(1 + 3 * Math.random()),
42-
height: Math.round(1 + 3 * Math.random())
41+
w: Math.round(1 + 3 * Math.random()),
42+
h: Math.round(1 + 3 * Math.random())
4343
};
4444
n.content = String(count++);
4545
grid.addWidget(n);

‎demo/knockout.html‎

Lines changed: 7 additions & 7 deletions
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: {\'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}">',
52+
' <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.w, \'gs-h\': $data.h, \'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> '
@@ -65,8 +65,8 @@ <h1>knockout.js Demo</h1>
6565
this.widgets.push({
6666
x: 0,
6767
y: 0,
68-
width: Math.floor(1 + 3 * Math.random()),
69-
height: Math.floor(1 + 3 * Math.random()),
68+
w: Math.floor(1 + 3 * Math.random()),
69+
h: Math.floor(1 + 3 * Math.random()),
7070
auto_position: true
7171
});
7272
return false;
@@ -79,10 +79,10 @@ <h1>knockout.js Demo</h1>
7979
};
8080

8181
let widgets = [
82-
{x: 0, y: 0, width: 2, height: 2, id: '0'},
83-
{x: 2, y: 0, width: 4, height: 2, id: '1'},
84-
{x: 6, y: 0, width: 2, height: 4, id: '2'},
85-
{x: 1, y: 2, width: 4, height: 2, id: '3'}
82+
{x: 0, y: 0, w: 2, h: 2, id: '0'},
83+
{x: 2, y: 0, w: 4, h: 2, id: '1'},
84+
{x: 6, y: 0, w: 2, h: 4, id: '2'},
85+
{x: 1, y: 2, w: 4, h: 2, id: '3'}
8686
];
8787

8888
let controller = new Controller(widgets);

‎demo/locked.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,20 @@ <h1>Locked demo</h1>
3131
});
3232

3333
let items = [
34-
{x: 0, y: 1, width: 12, height: 1, locked: 'yes', noMove: true, noResize: true, text: 'locked, noResize, noMove'},
35-
{x: 1, y: 0, width: 2, height: 3},
36-
{x: 4, y: 2, width: 1, height: 1},
37-
{x: 3, y: 1, width: 1, height: 2},
38-
{x: 0, y: 6, width: 2, height: 2}
34+
{x: 0, y: 1, w: 12, locked: 'yes', noMove: true, noResize: true, text: 'locked, noResize, noMove'},
35+
{x: 1, y: 0, w: 2, h: 3},
36+
{x: 4, y: 2},
37+
{x: 3, y: 1, h: 2},
38+
{x: 0, y: 6, w: 2, h: 2}
3939
];
4040
let count = 0;
4141

4242
addNewWidget = function() {
4343
let n = items[count] || {
4444
x: Math.round(12 * Math.random()),
4545
y: Math.round(5 * Math.random()),
46-
width: Math.round(1 + 3 * Math.random()),
47-
height: Math.round(1 + 3 * Math.random())
46+
w: Math.round(1 + 3 * Math.random()),
47+
h: Math.round(1 + 3 * Math.random())
4848
};
4949
n.content = n.text ? n.text : String(count);
5050
grid.addWidget(n);

‎demo/nested.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ <h1>Nested grids demo</h1>
7070
let node = {
7171
x: Math.round(12 * Math.random()),
7272
y: Math.round(5 * Math.random()),
73-
width: Math.round(1 + 3 * Math.random()),
74-
height: Math.round(1 + 3 * Math.random())
73+
w: Math.round(1 + 3 * Math.random()),
74+
h: Math.round(1 + 3 * Math.random())
7575
};
7676
// Note: we have additional style .sub here so add the HTML passed directly...
7777
grid.addWidget('<div class="grid-stack-item sub"><div class="grid-stack-item-content">' + count++ + '</div></div>', node);

‎demo/react.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
count: 0,
2424
info: "",
2525
items: [
26-
{ x: 2, y: 1, height: 2 },
27-
{ x: 2, y: 4, width: 3 },
28-
{ x: 4, y: 2, width: 1 },
29-
{ x: 3, y: 1, height: 2 },
30-
{ x: 0, y: 6, width: 2, height: 2 },
26+
{ x: 2, y: 1, h: 2 },
27+
{ x: 2, y: 4, w: 3 },
28+
{ x: 4, y: 2 },
29+
{ x: 3, y: 1, h: 2 },
30+
{ x: 0, y: 6, w: 2, h: 2 },
3131
],
3232
};
3333

@@ -60,8 +60,8 @@
6060
const node = this.state.items[this.state.count] || {
6161
x: Math.round(12 * Math.random()),
6262
y: Math.round(5 * Math.random()),
63-
width: Math.round(1 + 3 * Math.random()),
64-
height: Math.round(1 + 3 * Math.random()),
63+
w: Math.round(1 + 3 * Math.random()),
64+
h: Math.round(1 + 3 * Math.random()),
6565
};
6666
node.id = node.content = String(this.state.count);
6767
this.setState((prevState) => ({

0 commit comments

Comments
 (0)