8000 subgrid now propagate events to topmost grid · gridstack/gridstack.js@acbc895 · GitHub
[go: up one dir, main page]
Skip to content

Commit acbc895

Browse files
adumesnyadumesny
committed
subgrid now propagate events to topmost grid
* fix #2671 * Use `el.gridstackNode.grid` to know which (sub) grid if you care.
1 parent 8ded0de commit acbc895

File tree

4 files changed

+40
-35
lines changed

4 files changed

+40
-35
lines changed

‎demo/events.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
function addEvents(grid, id) {
2-
let g = (id !== undefined ? 'grid' + id + ' ' : '');
2+
let g = (id !== undefined ? 'grid' + id : '');
33

44
grid.on('added removed change', function(event, items) {
55
let str = '';
66
items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; });
7-
console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str );
7+
console.log((g || items[0].grid.opts.id) + ' ' + event.type + ' ' + items.length + ' items (x,y w h):' + str );
88
})
99
.on('enable', function(event) {
10-
let grid = event.target;
11-
console.log(g + 'enable');
10+
let el = event.target;
11+
console.log((g || el.gridstackNode.grid.opts.id) + ' enable');
1212
})
1313
.on('disable', function(event) {
14-
let grid = event.target;
15-
console.log(g + 'disable');
14+
let el = event.target;
15+
console.log((g || el.gridstackNode.grid.opts.id) + ' disable');
1616
})
1717
.on('dragstart', function(event, el) {
1818
let n = el.gridstackNode;
1919
let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
2020
let y = el.getAttribute('gs-y');
21-
console.log(g + 'dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
21+
console.log((g || el.gridstackNode.grid.opts.id) + ' dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
2222
})
2323
.on('drag', function(event, el) {
2424
let n = el.gridstackNode;
2525
let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
2626
let y = el.getAttribute('gs-y');
27-
// console.log(g + 'drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
27+
// console.log((g || el.gridstackNode.grid.opts.id) + ' drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
2828
})
2929
.on('dragstop', function(event, el) {
3030
let n = el.gridstackNode;
3131
let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
3232
let y = el.getAttribute('gs-y');
33-
console.log(g + 'dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
33+
console.log((g || el.gridstackNode.grid.opts.id) + ' dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
3434
})
3535
.on('dropped', function(event, previousNode, newNode) {
3636
if (previousNode) {
37-
console.log(g + 'dropped - Removed widget from grid:', previousNode);
37+
console.log((g || previousNode.grid.opts.id) + ' dropped - Removed widget from grid:', previousNode);
3838
}
3939
if (newNode) {
40-
console.log(g + 'dropped - Added widget in grid:', newNode);
40+
console.log((g || newNode.grid.opts.id) + ' dropped - Added widget in grid:', newNode);
4141
}
4242
})
4343
.on('resizestart', function(event, el) {
4444
let n = el.gridstackNode;
4545
let rec = el.getBoundingClientRect();
46-
console.log(`${g} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
46+
console.log(`${g || el.gridstackNode.grid.opts.id} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
4747

4848
})
4949
.on('resize', function(event, el) {
5050
let n = el.gridstackNode;
5151
let rec = el.getBoundingClientRect();
52-
console.log(`${g} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
52+
console.log(`${g || el.gridstackNode.grid.opts.id} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
5353
})
5454
.on('resizestop', function(event, el) {
5555
let n = el.gridstackNode;
5656
let rec = el.getBoundingClientRect();
57-
console.log(`${g} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
57+
console.log(`${g || el.gridstackNode.grid.opts.id} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
5858
});
5959
}

‎demo/nested.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1>Nested grids demo</h1>
4040
<a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
4141
<br><br>
4242
<!-- grid will be added here -->
43-
</div>d
43+
</div>
4444
<script src="events.js"></script>
4545
<script type="text/javascript">
4646
// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
@@ -74,12 +74,8 @@ <h1>Nested grids demo</h1>
7474
// create and load it all from JSON above
7575
let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
7676

77-
// add debug event handlers to each grid (no global set on parent yet)
78-
let gridEls = GridStack.getElements('.grid-stack');
79-
gridEls.forEach(gridEl => {
80-
let grid = gridEl.gridstack;
81-
addEvents(grid, grid.opts.id);
82-
})
77+
// add debug event handlers to main grid (new v12.1 handles sub-grids too)
78+
addEvents(grid);
8379

8480
// setup drag drop behavior
8581
let sidebarContent = [

‎doc/CHANGES.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8-
- [12.0.0-dev (TBD)](#1200-dev-tbd)
8+
- [12.1.0 (2024-04-23)](#1210-2024-04-23)
99
- [12.0.0 (2025-04-12)](#1200-2025-04-12)
1010
- [11.5.1 (2025-03-23)](#1151-2025-03-23)
1111
- [11.5.0 (2025-03-16)](#1150-2025-03-16)
@@ -125,12 +125,13 @@ Change log
125125

126126
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
127127

128-
## 12.0.0-dev (TBD)
129-
* rem [#3022](https://github.com/gridstack/gridstack.js/pull/3022) removed ES5 support (IE doesn't support CSS vars needed now)
130-
* rem [#3027](https://github.com/gridstack/gridstack.js/pull/3027) remove legacy code support for disableOneColumnMode, oneColumnSize, oneColumnModeDomSort
128+
## 12.1.0 (2024-04-23)
129+
* feat [#2671](https://github.com/gridstack/gridstack.js/issues/2671) subgrid now propagate events to topmost grid. Use `el.gridstackNode.grid` to know which (sub) grid.
131130
* fix [#3028](https://github.com/gridstack/gridstack.js/pull/3028) `updateOptions()` no longer modifies passed in struct. only field we check are being handled too.
132131
* fix [#3029](https://github.com/gridstack/gridstack.js/pull/3029) `resizeToContent()` fix for nested grid with content above
133132
* fix [#3030](https://github.com/gridstack/gridstack.js/pull/3030) `resizeToContentCheck()` wasn't blocking _ignoreLayoutsNodeChange at end of the loop
133+
* rem [#3022](https://github.com/gridstack/gridstack.js/pull/3022) removed ES5 support (IE doesn't support CSS vars needed now)
134+
* rem [#3027](https://github.com/gridstack/gridstack.js/pull/3027) remove legacy code support for disableOneColumnMode, oneColumnSize, oneColumnModeDomSort
134135

135136
## 12.0.0 (2025-04-12)
136137
* feat: [#2854](https://github.com/gridstack/gridstack.js/pull/2854) Removed dynamic stylesheet and migrated to CSS vars. Thank you [lmartorella](https://github.com/lmartorella)

‎src/gridstack.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1579,7 +1579,11 @@ export class GridStack {
15791579
/** @internal */
15801580
protected _triggerEvent(type: string, data?: GridStackNode[]): GridStack {
15811581
const event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
1582-
this.el.dispatchEvent(event);
1582+
// check if we're nested, and if so call the outermost grid to trigger the event
1583+
// eslint-disable-next-line @typescript-eslint/no-this-alias
1584+
let grid: GridStack = this;
1585+
while (grid.parentGridNode) grid = grid.parentGridNode.grid;
1586+
grid.el.dispatchEvent(event);
15831587
return this;
15841588
}
15851589

@@ -2374,9 +2378,7 @@ export class GridStack {
23742378
/** called when item starts moving/resizing */
23752379
const onStartMoving = (event: Event, ui: DDUIData) => {
23762380
// trigger any 'dragstart' / 'resizestart' manually
2377-
if (this._gsEventHandler[event.type]) {
2378-
this._gsEventHandler[event.type](event, event.target);
2379-
}
2381+
this.triggerEvent(event, event.target as GridItemHTMLElement);
23802382
cellWidth = this.cellWidth();
23812383
cellHeight = this.getCellHeight(true); // force pixels for calculations
23822384

@@ -2422,9 +2424,7 @@ export class GridStack {
24222424
// move to new placeholder location
24232425
this._writePosAttr(target, node);
24242426
}
2425-
if (this._gsEventHandler[event.type]) {
2426-
this._gsEventHandler[event.type](event, target);
2427-
}
2427+
this.triggerEvent(event, target);
24282428
}
24292429
// @ts-ignore
24302430
this._extraDragRow = 0;// @ts-ignore
@@ -2603,9 +2603,17 @@ export class GridStack {
26032603
if (!node._sidebarOrig) {
26042604
this._writePosAttr(target, node);
26052605
}
2606-
if (this._gsEventHandler[event.type]) {
2607-
this._gsEventHandler[event.type](event, target);
2608-
}
2606+
this.triggerEvent(event, target);
2607+
}
2608+
}
2609+
2610+
/** call given event callback on our main top-most grid (if we're nested) */
2611+
protected triggerEvent(event: Event, target: GridItemHTMLElement) {
2612+
// eslint-disable-next-line @typescript-eslint/no-this-alias
2613+
let grid: GridStack = this;
2614+
while (grid.parentGridNode) grid = grid.parentGridNode.grid;
2615+
if (grid._gsEventHandler[event.type]) {
2616+
grid._gsEventHandler[event.type](event, target);
26092617
}
26102618
}
26112619

0 commit comments

Comments
 (0)
0