added gridstack

This commit is contained in:
Pit Friedrich
2026-07-25 21:56:47 +02:00
parent c2d29f0635
commit bcf604b7c5
7 changed files with 73 additions and 7 deletions
+14 -3
View File
@@ -34,13 +34,15 @@ class GridStackLayout extends HTMLElement {
this.classList.add('grid-stack');
const options = JSON.parse(optionsJson);
this.grid = GridStack.init(options, this);
const grid = GridStack.init(options, this);
if (!grid) return;
this.grid = grid;
this.registerChildren();
this.restore();
this.grid.on('change added removed', () => this.schedulePersist());
this.grid.on('resizestop', () => window.dispatchEvent(new Event('resize')));
grid.on('change added removed', () => this.schedulePersist());
grid.on('resizestop', () => window.dispatchEvent(new Event('resize')));
}
/** Drops any saved layout for this grid and re-applies the positions
@@ -73,6 +75,15 @@ class GridStackLayout extends HTMLElement {
mutation.removedNodes.forEach((node) => {
if (!(node instanceof HTMLElement)) return;
if (!(node as any).gridstackNode) return;
// gridstack's own _sortDom() re-appends children (within this
// same element) to match layout order after every
// move/resize, which fires childList mutations too. A
// reordered node is back in the (still connected) DOM by the
// time this callback runs; only a genuinely removed node is
// disconnected. Without this check, removeWidget() here
// would fire on gridstack's own reorder, re-triggering
// _sortDom() and looping forever.
if (node.isConnected) return;
this.grid!.removeWidget(node, false);
});
}