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

Skip to content

Commit cd2c59c

Browse files
adumesnyadumesny
committed
TS: events are now native, no jquery left!
* all events are now handled by GridStack and no longer use jquery - changed the signature of some. * removed all $ jquery out of main code (engine, util and now gridstack.ts) * fixed `dragstop | resizestop` to be called *after* we update the node attributes no need for old `gsdragstop` - if you call `grid.on()` events rather than directly jquery events. part of gridstack#1084 still TODO: deeper testing to make sure I didn't break anything. Checking in wkd work now.
1 parent 9429391 commit cd2c59c

15 files changed

+235
-279
lines changed

‎.vscode/settings.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
"droppable",
1313
"gridster",
1414
"gsresize",
15-
"gsresizestop",
1615
"jqueryui",
1716
"resizestart"
1817
]

‎README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -332,19 +332,21 @@ We're working on implementing HTML5 drag'n'drop through the plugin system. Right
332332
333333
make sure to read v1.0.0 migration first!
334334
335-
v2.x is a Typescript rewrite of 1.x, using classes and overall code cleanup. Your code might need to change from 1.x
335+
v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup. Your code might need to change from 1.x
336336
337-
1. In general methods that used no args = getter vs setter are not used in Typescript.
337+
1. In general methods that used no args (getter) vs setter are not used in Typescript.
338338
Also legacy methods that used to take tons of parameters will now take a single object (typically `GridstackOptions` or `GridstackWidget`).
339339
340340
```
341341
removed `addWidget(el, x, y, width, ...)` --> use the widget options version instead `addWidget(el, {with, ...})`
342342
`float()` to get value --> `getFloat()`
343-
'cellHeight()` to get value --> `getCellheight()`
343+
'cellHeight()` to get value --> `getCellHeight()`
344344
'verticalMargin()` to get value --> `getVerticalMargin()`
345345
```
346346

347-
2. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`.
347+
2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOm attributes have been updated.
348+
349+
3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`.
348350

349351
Changes
350352
=====

‎demo/events.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
function addEvents(grid, id) {
2+
let g = (id !== undefined ? 'grid' + id + ' ' : '');
3+
4+
grid.on('added removed change', function(event, items) {
5+
let str = '';
6+
items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.width + 'x' + item.height + ')'; });
7+
console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str );
8+
});
9+
10+
grid.on('disable', function(event) {
11+
let grid = event.target;
12+
console.log(g + 'disable');
13+
});
14+
15+
grid.on('dragstart', function(event, el) {
16+
let node = el.gridstackNode;
17+
let x = el.getAttribute('data-gs-x');
18+
let y= el.getAttribute('data-gs-y');
19+
console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
20+
});
21+
22+
grid.on('dragstop', function(event, el) {
23+
let node = el.gridstackNode;
24+
let x = el.getAttribute('data-gs-x');
25+
let y= el.getAttribute('data-gs-y');
26+
console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
27+
});
28+
29+
grid.on('dropped', function(event, previousWidget, newWidget) {
30+
console.log(g + 'dropped - Removed widget that was dragged out of grid:', previousWidget);
31+
console.log(g + 'dropped - Added widget in dropped grid:', newWidget);
32+
});
33+
34+
grid.on('enable', function(event) {
35+
let grid = event.target;
36+
console.log(g + 'enable');
37+
});
38+
39+
grid.on('resizestart', function(event, el) {
40+
let w = el.getAttribute('data-gs-width');
41+
let h = el.getAttribute('data-gs-height');
42+
console.log(g + 'resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
43+
});
44+
45+
grid.on('resizestop', function(event, el) {
46+
let w = el.getAttribute('data-gs-width');
47+
let h = el.getAttribute('data-gs-height');
48+
console.log(g + 'resizestop ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
49+
});
50+
}

‎demo/float.html

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,10 @@ <h1>Float grid demo</h1>
2828
<br><br>
2929
<div class="grid-stack"></div>
3030
</div>
31-
31+
<script src="events.js"></script>
3232
<script type="text/javascript">
3333
let grid = GridStack.init({float: true});
34-
35-
grid.on('added removed change', function(e, items) {
36-
let str = '';
37-
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
38-
console.log(e.type + ' ' + items.length + ' items:' + str );
39-
});
40-
41-
grid.on('added removed change', function(e, items) {
42-
let str = '';
43-
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
44-
console.log(e.type + ' ' + items.length + ' items:' + str );
45-
});
34+
addEvents(grid);
4635

4736
let items = [
4837
{x: 2, y: 1, width: 1, height: 2},

‎demo/two.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ <h1>Two grids demo</h1>
8181
<a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
8282
<a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
8383
<div class="grid-stack grid-stack-6">
84+
<div class="grid-stack-item">
85+
<div class="grid-stack-item-content"><button onClick="alert('clicked')">click</button></div>
86+
</div>
8487
</div>
8588
</div>
8689
<div class="col-md-6">
@@ -91,7 +94,7 @@ <h1>Two grids demo</h1>
9194
</div>
9295
</div>
9396
</div>
94-
97+
<script src="events.js"></script>
9598
<script type="text/javascript">
9699
let options = {
97100
column: 6,
@@ -105,20 +108,15 @@ <h1>Two grids demo</h1>
105108
grids[1].float(true);
106109

107110
let items = [
108-
{x: 0, y: 0, width: 2, height: 2},
111+
{x: 1, y: 0, width: 2, height: 2},
109112
{x: 3, y: 1, width: 1, height: 2},
110113
{x: 4, y: 1, width: 1, height: 1},
111114
{x: 2, y: 3, width: 3, height: 1, maxWidth: 3, id: 'special', text: 'has maxWidth=3'},
112115
{x: 2, y: 5, width: 1, height: 1}
113116
];
114117

115118
grids.forEach(function (grid, i) {
116-
grid.on('added removed change', function(e, items) {
117-
let str = '';
118-
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
119-
console.log('grid' + i + ' ' + e.type + ' ' + items.length + ' items:' + str );
120-
});
121-
119+
addEvents(grid, i);
122120
grid.batchUpdate();
123121
items.forEach(function (node) {
124122
grid.addWidget('<div><div class="grid-stack-item-content">'

‎doc/README.md

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ gridstack.js API
1313
- [added(event, items)](#addedevent-items)
1414
- [change(event, items)](#changeevent-items)
1515
- [disable(event)](#disableevent)
16-
- [dragstart(event, ui)](#dragstartevent-ui)
17-
- [dragstop(event, ui)](#dragstopevent-ui)
16+
- [dragstart(event, el)](#dragstartevent-el)
17+
- [dragstop(event, el)](#dragstopevent-el)
1818
- [dropped(event, previousWidget, newWidget)](#droppedevent-previouswidget-newwidget)
1919
- [enable(event)](#enableevent)
2020
- [removed(event, items)](#removedevent-items)
21-
- [resizestart(event, ui)](#resizestartevent-ui)
22-
- [gsresizestop(event, ui)](#gsresizestopevent-ui)
21+
- [resizestart(event, el)](#resizestartevent-el)
22+
- [resizestop(event, el)](#resizestopevent-el)
2323
- [API](#api)
2424
- [addWidget(el, [options])](#addwidgetel-options)
2525
- [batchUpdate()](#batchupdate)
@@ -134,19 +134,21 @@ all item options are also available as HTML attributes using the `data-gs-` name
134134

135135
## Events
136136

137-
Those are the events set by the grid when items are added/removed or changed - they use standard JS calls with a CustomElement `detail` that stores the list
138-
of nodes that changed (id, x, y, width, height, etc...).
137+
Those are events generated by the grid when items are added/removed/changed or drag&drop interaction. In general they pass list of nodes that changed (id, x, y, width, height, etc...) or individual DOM element
138+
that is affected.
139139

140-
You can call it on a single event name, or space separated list:
140+
You can call it on a single event name, or space separated list like:
141141
`grid.on('added removed change', ...)`
142142

143+
The Typescript `GridStackEvent` list all possible values, and nothing else is supported by the `grid.on()` method, though it's possible to register directly for other events generated by the drag&drop plugging implementation detail (currently jquery-ui based).
144+
143145
### added(event, items)
144146

145147
Called when widgets are being added to a grid
146148

147149
```js
148-
grid.on('added', function(event, items) {
149-
/* items contains GridStackNode[] info */
150+
grid.on('added', function(event: GridEvent, items: GridStackNode[]) {
151+
items.forEach(function(item) {...});
150152
});
151153
```
152154

@@ -155,41 +157,45 @@ grid.on('added', function(event, items) {
155157
Occurs when widgets change their position/size due to constrain or direct changes
156158

157159
```js
158-
grid.on('change', function(event, items) {
159-
/* items contains GridStackNode[] info */
160+
grid.on('change', function(event: GridEvent, items: GridStackNode[]) {
161+
items.forEach(function(item) {...});
160162
});
161163
```
162164

163165
### disable(event)
164166

165167
```js
166-
grid.on('disable', function(event) {
167-
let grid = event.target;
168+
grid.on('disable', function(event: GridEvent) {
169+
let grid: GridStack = event.target.gridstack;
168170
});
169171
```
170172

171-
### dragstart(event, ui)
173+
### dragstart(event, el)
174+
175+
called when grid item is starting to be dragged
172176

173177
```js
174-
grid.on('dragstart', function(event, ui) {
175-
let grid = this;
176-
let element = event.target;
178+
grid.on('dragstart', function(event: GridEvent, el: GridItemHTMLElement) {
177179
});
178180
```
179181

180-
### dragstop(event, ui)
182+
### dragstop(event, el)
183+
called after the user is done moving the item, with updated DOM attributes.
181184

182185
```js
183-
grid.on('dragstop', function(event, ui) {
184-
let grid = this;
185-
let element = event.target;
186+
grid.on('dragstop', function(event: GridEvent, el: GridItemHTMLElement) {
187+
let x = parseInt(el.getAttribute('data-gs-x')) || 0;
188+
// or all values...
189+
let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
186190
});
187191
```
188192

189193
### dropped(event, previousWidget, newWidget)
190194

195+
called when an item has been dropped and accepted over a grid. If the item came from another grid, the previous widget node info will also be sent (but dom item long gone).
196+
191197
```js
192-
grid.on('dropped', function(event, previousWidget, newWidget) {
198+
grid.on('dropped', function(event: GridEvent, previousWidget: GridStackNode, newWidget: GridStackNode) {
193199
console.log('Removed widget that was dragged out of grid:', previousWidget);
194200
console.log('Added widget in dropped grid:', newWidget);
195201
});
@@ -198,42 +204,43 @@ grid.on('dropped', function(event, previousWidget, newWidget) {
198204
### enable(event)
199205

200206
```js
201-
grid.on('enable', function(event) {
202-
let grid = event.target;
207+
grid.on('enable', function(event: GridEvent) {
208+
let grid: GridStack = event.target.gridstack;
203209
});
204210
```
205211

206212
### removed(event, items)
207213

208-
Called when item is being removed from the grid
214+
Called when items are being removed from the grid
209215

210216
```js
211-
grid.on('removed', function(event, items) {
212-
/* items contains GridStackNode[] info */
217+
grid.on('removed', function(event: GridEvent, items: GridStackNode[]) {
218+
items.forEach(function(item) {...});
213219
});
214220
```
215221

216-
### resizestart(event, ui)
222+
### resizestart(event, el)
223+
224+
called before the user starts resizing an item
217225

218226
```js
219-
grid.on('resizestart', function(event, ui) {
220-
let grid = this;
221-
let element = event.target;
227+
grid.on('resizestart', function(event: GridEvent, el: GridItemHTMLElement) {
222228
});
223229
```
224230

225-
### gsresizestop(event, ui)
226-
**Note**: this is a custom event name that is guaranteed to be called
227-
**after** the jqueryui resizestop event where we update `data-gs-width` and `data-gs-height`.
231+
### resizestop(event, el)
228232

229-
You could instead use the `change` event which has the latest node sizing.
233+
called after the user is done resizing the item, with updated DOM attributes.
230234

231235
```js
232-
grid.on('gsresizestop', function(event, element) {
233-
let newHeight = element.getAttribute('data-gs-height');
236+
grid.on('resizestop', function(event: GridEvent, el: GridItemHTMLElement) {
237+
let width = parseInt(el.getAttribute('data-gs-width')) || 0;
238+
// or all values...
239+
let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
234240
});
235241
```
236242

243+
237244
## API
238245

239246
### addWidget(el, [options])

0 commit comments

Comments
 (0)